e2m/dispatch
4
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Use immer

Browse source
This commit is contained in:
Ken-Håvard Lieng 2018-04-25 05:36:27 +02:00
parent 7f755d2a83
commit 4f72e164d7
33 changed files with 1236 additions and 1153 deletions
Download patch file Download diff file Expand all files Collapse all files

37
client/src/js/components/TabList.js
View file

@ -11,20 +11,21 @@ export default class TabList extends PureComponent {
const className = showTabList ? 'tablist off-canvas' : 'tablist';
const tabs = [];
channels.forEach((server, address) => {
const srv = servers.get(address);
channels.forEach(server => {
const { address } = server;
const srv = servers[address];
tabs.push(
<TabListItem
key={address}
server={address}
content={srv.name}
selected={tab.server === address && tab.name === null}
selected={tab.server === address && !tab.name}
connected={srv.status.connected}
onClick={this.handleTabClick}
/>
);
server.forEach((channel, name) =>
server.channels.forEach(name =>
tabs.push(
<TabListItem
key={address + name}
@ -37,27 +38,25 @@ export default class TabList extends PureComponent {
)
);
if (privateChats.has(address) && privateChats.get(address).size > 0) {
if (privateChats[address] && privateChats[address].length > 0) {
tabs.push(
<div key={`${address}-pm}`} className="tab-label">
Private messages
</div>
);
privateChats
.get(address)
.forEach(nick =>
tabs.push(
<TabListItem
key={address + nick}
server={address}
target={nick}
content={nick}
selected={tab.server === address && tab.name === nick}
onClick={this.handleTabClick}
/>
)
);
privateChats[address].forEach(nick =>
tabs.push(
<TabListItem
key={address + nick}
server={address}
target={nick}
content={nick}
selected={tab.server === address && tab.name === nick}
onClick={this.handleTabClick}
/>
)
);
}
});

7
client/src/js/components/pages/Chat/Chat.js
View file

@ -1,4 +1,5 @@
import React, { Component } from 'react';
import { isChannel } from 'utils';
import ChatTitle from './ChatTitle';
import Search from './Search';
import MessageBox from './MessageBox';
@ -9,7 +10,7 @@ export default class Chat extends Component {
handleCloseClick = () => {
const { tab, part, closePrivateChat, disconnect } = this.props;
if (tab.isChannel()) {
if (isChannel(tab)) {
part([tab.name], tab.server);
} else if (tab.name) {
closePrivateChat(tab.server, tab.name);
@ -20,7 +21,7 @@ export default class Chat extends Component {
handleSearch = phrase => {
const { tab, searchMessages } = this.props;
if (tab.isChannel()) {
if (isChannel(tab)) {
searchMessages(tab.server, tab.name, phrase);
}
};
@ -70,7 +71,7 @@ export default class Chat extends Component {
} = this.props;
let chatClass;
if (tab.isChannel()) {
if (isChannel(tab)) {
chatClass = 'chat-channel';
} else if (tab.name) {
chatClass = 'chat-private';

9
client/src/js/components/pages/Chat/ChatTitle.js
View file

@ -1,9 +1,8 @@
import React, { PureComponent } from 'react';
import { List } from 'immutable';
import Navicon from 'containers/Navicon';
import Editable from 'components/ui/Editable';
import { isValidServerName } from 'state/servers';
import { linkify } from 'utils';
import { isChannel, linkify } from 'utils';
export default class ChatTitle extends PureComponent {
render() {
@ -19,7 +18,7 @@ export default class ChatTitle extends PureComponent {
} = this.props;
let closeTitle;
if (tab.isChannel()) {
if (isChannel(tab)) {
closeTitle = 'Leave';
} else if (tab.name) {
closeTitle = 'Close';
@ -49,7 +48,7 @@ export default class ChatTitle extends PureComponent {
</Editable>
<div className="chat-topic-wrap">
<span className="chat-topic">
{linkify(channel.get('topic')) || null}
{channel && linkify(channel.topic)}
</span>
{serverError}
</div>
@ -64,7 +63,7 @@ export default class ChatTitle extends PureComponent {
<div className="userlist-bar">
<i className="icon-user" />
<span className="chat-usercount">
{channel.get('users', List()).size}
{channel && channel.users.length}
</span>
</div>
</div>

18
client/src/js/components/pages/Chat/MessageBox.js
View file

@ -31,13 +31,13 @@ export default class MessageBox extends PureComponent {
this.bottom = false;
}
if (nextProps.messages.get(0) !== this.props.messages.get(0)) {
if (nextProps.messages[0] !== this.props.messages[0]) {
if (nextProps.tab === this.props.tab) {
const addedMessages =
nextProps.messages.size - this.props.messages.size;
nextProps.messages.length - this.props.messages.length;
let addedHeight = 0;
for (let i = 0; i < addedMessages; i++) {
addedHeight += nextProps.messages.get(i).height;
addedHeight += nextProps.messages[i].height;
}
this.nextScrollTop = addedHeight + this.container.scrollTop;
@ -57,7 +57,7 @@ export default class MessageBox extends PureComponent {
this.container.scrollTop = this.nextScrollTop;
this.nextScrollTop = 0;
} else if (this.bottom) {
this.list.scrollToRow(this.props.messages.size);
this.list.scrollToRow(this.props.messages.length);
}
}
@ -72,7 +72,7 @@ export default class MessageBox extends PureComponent {
}
return 0;
}
return this.props.messages.get(index - 1).height;
return this.props.messages[index - 1].height;
};
listRef = el => {
@ -101,7 +101,7 @@ export default class MessageBox extends PureComponent {
} else {
this.bottom = true;
if (scroll) {
this.list.scrollToRow(this.props.messages.size);
this.list.scrollToRow(this.props.messages.length);
}
}
};
@ -177,7 +177,7 @@ export default class MessageBox extends PureComponent {
}
const { messages, onNickClick } = this.props;
const message = messages.get(index - 1);
const message = messages[index - 1];
return (
<Message
@ -192,7 +192,7 @@ export default class MessageBox extends PureComponent {
render() {
const props = {};
if (this.bottom) {
props.scrollToIndex = this.props.messages.size;
props.scrollToIndex = this.props.messages.length;
} else if (this.scrollTop >= 0) {
props.scrollTop = this.scrollTop;
}
@ -209,7 +209,7 @@ export default class MessageBox extends PureComponent {
ref={this.listRef}
width={width}
height={height - 14}
rowCount={this.props.messages.size + 1}
rowCount={this.props.messages.length + 1}
rowHeight={this.getRowHeight}
rowRenderer={this.renderMessage}
onScroll={this.handleScroll}

4
client/src/js/components/pages/Chat/UserList.js
View file

@ -20,7 +20,7 @@ export default class UserList extends PureComponent {
return (
<UserListItem
key={key}
user={users.get(index)}
user={users[index]}
style={style}
onClick={onNickClick}
/>
@ -39,7 +39,7 @@ export default class UserList extends PureComponent {
ref={this.listRef}
width={200}
height={height - 20}
rowCount={users.size}
rowCount={users.length}
rowHeight={24}
rowRenderer={this.renderUser}
className="rvlist-users"

10
client/src/js/components/pages/Connect.js
View file

@ -1,6 +1,12 @@
import React, { Component } from 'react';
import { createSelector } from 'reselect';
import Navicon from 'containers/Navicon';
const getSortedDefaultChannels = createSelector(
defaults => defaults.channels,
channels => channels.concat().sort()
);
export default class Connect extends Component {
state = {
showOptionals: false,
@ -90,7 +96,9 @@ export default class Connect extends Component {
{defaults.showDetails && (
<div className="connect-details">
<h2>{defaults.address}</h2>
{defaults.channels.sort().map(channel => <p>{channel}</p>)}
{getSortedDefaultChannels(defaults).map(channel => (
<p>{channel}</p>
))}
</div>
)}
<input name="nick" type="text" placeholder="Nick" />

8
client/src/js/components/pages/Settings.js
View file

@ -3,8 +3,8 @@ import Navicon from 'containers/Navicon';
import FileInput from 'components/ui/FileInput';
const Settings = ({ settings, onCertChange, onKeyChange, uploadCert }) => {
const status = settings.get('uploadingCert') ? 'Uploading...' : 'Upload';
const error = settings.get('certError');
const status = settings.uploadingCert ? 'Uploading...' : 'Upload';
const error = settings.certError;
return (
<div className="settings">
@ -14,14 +14,14 @@ const Settings = ({ settings, onCertChange, onKeyChange, uploadCert }) => {
<div>
<p>Certificate</p>
<FileInput
name={settings.get('certFile') || 'Select Certificate'}
name={settings.certFile || 'Select Certificate'}
onChange={onCertChange}
/>
</div>
<div>
<p>Private Key</p>
<FileInput
name={settings.get('keyFile') || 'Select Key'}
name={settings.keyFile || 'Select Key'}
onChange={onKeyChange}
/>
</div>