Add manifest.json, icons and install button, flatten client/src

client/js/state/__tests__/actions-servers.test.js

@@ -0,0 +1,20 @@
+import { connect, setServerName } from '../servers';
+
+describe('setServerName()', () => {
+  it('passes valid names to the server', () => {
+    const name = 'cake';
+    const server = 'srv';
+
+    expect(setServerName(name, server)).toMatchObject({
+      socket: {
+        type: 'set_server_name',
+        data: { name, server }
+      }
+    });
+  });
+
+  it('does not pass invalid names to the server', () => {
+    expect(setServerName('', 'srv').socket).toBeUndefined();
+    expect(setServerName('   ', 'srv').socket).toBeUndefined();
+  });
+});

client/js/state/__tests__/reducer-channels.test.js

@@ -0,0 +1,335 @@
+import reducer, { compareUsers, getSortedChannels } from '../channels';
+import { connect } from '../servers';
+import * as actions from '../actions';
+
+describe('channel reducer', () => {
+  it('removes channels on PART', () => {
+    let state = {
+      srv1: {
+        chan1: {},
+        chan2: {},
+        chan3: {}
+      },
+      srv2: {
+        chan1: {}
+      }
+    };
+
+    state = reducer(state, {
+      type: actions.PART,
+      server: 'srv1',
+      channels: ['chan1', 'chan3']
+    });
+
+    expect(state).toEqual({
+      srv1: {
+        chan2: {}
+      },
+      srv2: {
+        chan1: {}
+      }
+    });
+  });
+
+  it('handles SOCKET_PART', () => {
+    let state = reducer(undefined, socket_join('srv', 'chan1', 'nick1'));
+    state = reducer(state, socket_join('srv', 'chan1', 'nick2'));
+    state = reducer(state, socket_join('srv', 'chan2', 'nick2'));
+
+    state = reducer(state, {
+      type: actions.socket.PART,
+      server: 'srv',
+      channel: 'chan1',
+      user: 'nick2'
+    });
+
+    expect(state).toEqual({
+      srv: {
+        chan1: {
+          users: [{ mode: '', nick: 'nick1', renderName: 'nick1' }]
+        },
+        chan2: {
+          users: [{ mode: '', nick: 'nick2', renderName: 'nick2' }]
+        }
+      }
+    });
+  });
+
+  it('handles SOCKET_JOIN', () => {
+    const state = reducer(undefined, socket_join('srv', 'chan1', 'nick1'));
+
+    expect(state).toEqual({
+      srv: {
+        chan1: {
+          users: [{ mode: '', nick: 'nick1', renderName: 'nick1' }]
+        }
+      }
+    });
+  });
+
+  it('handles SOCKET_QUIT', () => {
+    let state = reducer(undefined, socket_join('srv', 'chan1', 'nick1'));
+    state = reducer(state, socket_join('srv', 'chan1', 'nick2'));
+    state = reducer(state, socket_join('srv', 'chan2', 'nick2'));
+
+    state = reducer(state, {
+      type: actions.socket.QUIT,
+      server: 'srv',
+      user: 'nick2'
+    });
+
+    expect(state).toEqual({
+      srv: {
+        chan1: {
+          users: [{ mode: '', nick: 'nick1', renderName: 'nick1' }]
+        },
+        chan2: {
+          users: []
+        }
+      }
+    });
+  });
+
+  it('handles SOCKET_NICK', () => {
+    let state = reducer(undefined, socket_join('srv', 'chan1', 'nick1'));
+    state = reducer(state, socket_join('srv', 'chan1', 'nick2'));
+    state = reducer(state, socket_join('srv', 'chan2', 'nick2'));
+
+    state = reducer(state, {
+      type: actions.socket.NICK,
+      server: 'srv',
+      oldNick: 'nick1',
+      newNick: 'nick3'
+    });
+
+    expect(state).toEqual({
+      srv: {
+        chan1: {
+          users: [
+            { mode: '', nick: 'nick3', renderName: 'nick3' },
+            { mode: '', nick: 'nick2', renderName: 'nick2' }
+          ]
+        },
+        chan2: {
+          users: [{ mode: '', nick: 'nick2', renderName: 'nick2' }]
+        }
+      }
+    });
+  });
+
+  it('handles SOCKET_USERS', () => {
+    const state = reducer(undefined, {
+      type: actions.socket.USERS,
+      server: 'srv',
+      channel: 'chan1',
+      users: ['user3', 'user2', '@user4', 'user1', '+user5']
+    });
+
+    expect(state).toEqual({
+      srv: {
+        chan1: {
+          users: [
+            { mode: '', nick: 'user3', renderName: 'user3' },
+            { mode: '', nick: 'user2', renderName: 'user2' },
+            { mode: 'o', nick: 'user4', renderName: '@user4' },
+            { mode: '', nick: 'user1', renderName: 'user1' },
+            { mode: 'v', nick: 'user5', renderName: '+user5' }
+          ]
+        }
+      }
+    });
+  });
+
+  it('handles SOCKET_TOPIC', () => {
+    const state = reducer(undefined, {
+      type: actions.socket.TOPIC,
+      server: 'srv',
+      channel: 'chan1',
+      topic: 'the topic'
+    });
+
+    expect(state).toEqual({
+      srv: {
+        chan1: {
+          topic: 'the topic',
+          users: []
+        }
+      }
+    });
+  });
+
+  it('handles SOCKET_MODE', () => {
+    let state = reducer(undefined, socket_join('srv', 'chan1', 'nick1'));
+    state = reducer(state, socket_join('srv', 'chan1', 'nick2'));
+    state = reducer(state, socket_join('srv', 'chan2', 'nick2'));
+
+    state = reducer(state, socket_mode('srv', 'chan1', 'nick1', 'o', ''));
+
+    expect(state).toEqual({
+      srv: {
+        chan1: {
+          users: [
+            { mode: 'o', nick: 'nick1', renderName: '@nick1' },
+            { mode: '', nick: 'nick2', renderName: 'nick2' }
+          ]
+        },
+        chan2: {
+          users: [{ mode: '', nick: 'nick2', renderName: 'nick2' }]
+        }
+      }
+    });
+
+    state = reducer(state, socket_mode('srv', 'chan1', 'nick1', 'v', 'o'));
+    state = reducer(state, socket_mode('srv', 'chan1', 'nick2', 'o', ''));
+    state = reducer(state, socket_mode('srv', 'chan2', 'not_there', 'x', ''));
+
+    expect(state).toEqual({
+      srv: {
+        chan1: {
+          users: [
+            { mode: 'v', nick: 'nick1', renderName: '+nick1' },
+            { mode: 'o', nick: 'nick2', renderName: '@nick2' }
+          ]
+        },
+        chan2: {
+          users: [{ mode: '', nick: 'nick2', renderName: 'nick2' }]
+        }
+      }
+    });
+  });
+
+  it('handles SOCKET_CHANNELS', () => {
+    const state = reducer(undefined, {
+      type: actions.socket.CHANNELS,
+      data: [
+        { server: 'srv', name: 'chan1', topic: 'the topic' },
+        { server: 'srv', name: 'chan2' },
+        { server: 'srv2', name: 'chan1' }
+      ]
+    });
+
+    expect(state).toEqual({
+      srv: {
+        chan1: { topic: 'the topic', users: [] },
+        chan2: { users: [] }
+      },
+      srv2: {
+        chan1: { users: [] }
+      }
+    });
+  });
+
+  it('handles SOCKET_SERVERS', () => {
+    const state = reducer(undefined, {
+      type: actions.socket.SERVERS,
+      data: [{ host: '127.0.0.1' }, { host: 'thehost' }]
+    });
+
+    expect(state).toEqual({
+      '127.0.0.1': {},
+      thehost: {}
+    });
+  });
+
+  it('optimistically adds the server on CONNECT', () => {
+    const state = reducer(
+      undefined,
+      connect({ host: '127.0.0.1', nick: 'nick' })
+    );
+
+    expect(state).toEqual({
+      '127.0.0.1': {}
+    });
+  });
+
+  it('removes the server on DISCONNECT', () => {
+    let state = {
+      srv: {},
+      srv2: {}
+    };
+
+    state = reducer(state, {
+      type: actions.DISCONNECT,
+      server: 'srv2'
+    });
+
+    expect(state).toEqual({
+      srv: {}
+    });
+  });
+});
+
+function socket_join(server, channel, user) {
+  return {
+    type: actions.socket.JOIN,
+    server,
+    user,
+    channels: [channel]
+  };
+}
+
+function socket_mode(server, channel, user, add, remove) {
+  return {
+    type: actions.socket.MODE,
+    server,
+    channel,
+    user,
+    add,
+    remove
+  };
+}
+
+describe('compareUsers()', () => {
+  it('compares users correctly', () => {
+    expect(
+      [
+        { renderName: 'user5' },
+        { renderName: '@user2' },
+        { renderName: 'user3' },
+        { renderName: 'user2' },
+        { renderName: '+user1' },
+        { renderName: '~bob' },
+        { renderName: '%apples' },
+        { renderName: '&cake' }
+      ].sort(compareUsers)
+    ).toEqual([
+      { renderName: '~bob' },
+      { renderName: '&cake' },
+      { renderName: '@user2' },
+      { renderName: '%apples' },
+      { renderName: '+user1' },
+      { renderName: 'user2' },
+      { renderName: 'user3' },
+      { renderName: 'user5' }
+    ]);
+  });
+});
+
+describe('getSortedChannels', () => {
+  it('sorts servers and channels', () => {
+    expect(
+      getSortedChannels({
+        channels: {
+          'bob.com': {},
+          '127.0.0.1': {
+            '#chan1': {
+              users: [],
+              topic: 'cake'
+            },
+            '#pie': {},
+            '##apples': {}
+          }
+        }
+      })
+    ).toEqual([
+      {
+        address: '127.0.0.1',
+        channels: ['##apples', '#chan1', '#pie']
+      },
+      {
+        address: 'bob.com',
+        channels: []
+      }
+    ]);
+  });
+});

client/js/state/__tests__/reducer-messages.test.js

@@ -0,0 +1,184 @@
+import reducer, { broadcast, getMessageTab } from '../messages';
+import * as actions from '../actions';
+import appReducer from '../app';
+
+describe('message reducer', () => {
+  it('adds the message on ADD_MESSAGE', () => {
+    const state = reducer(undefined, {
+      type: actions.ADD_MESSAGE,
+      server: 'srv',
+      tab: '#chan1',
+      message: {
+        from: 'foo',
+        content: 'msg'
+      }
+    });
+
+    expect(state).toMatchObject({
+      srv: {
+        '#chan1': [
+          {
+            from: 'foo',
+            content: 'msg'
+          }
+        ]
+      }
+    });
+  });
+
+  it('adds all the messages on ADD_MESSAGES', () => {
+    const state = reducer(undefined, {
+      type: actions.ADD_MESSAGES,
+      server: 'srv',
+      tab: '#chan1',
+      messages: [
+        {
+          from: 'foo',
+          content: 'msg'
+        },
+        {
+          from: 'bar',
+          content: 'msg'
+        },
+        {
+          tab: '#chan2',
+          from: 'foo',
+          content: 'msg'
+        }
+      ]
+    });
+
+    expect(state).toMatchObject({
+      srv: {
+        '#chan1': [
+          {
+            from: 'foo',
+            content: 'msg'
+          },
+          {
+            from: 'bar',
+            content: 'msg'
+          }
+        ],
+        '#chan2': [
+          {
+            from: 'foo',
+            content: 'msg'
+          }
+        ]
+      }
+    });
+  });
+
+  it('handles prepending of messages on ADD_MESSAGES', () => {
+    let state = {
+      srv: {
+        '#chan1': [{ id: 0 }]
+      }
+    };
+
+    state = reducer(state, {
+      type: actions.ADD_MESSAGES,
+      server: 'srv',
+      tab: '#chan1',
+      prepend: true,
+      messages: [{ id: 1 }, { id: 2 }]
+    });
+
+    expect(state).toMatchObject({
+      srv: {
+        '#chan1': [{ id: 1 }, { id: 2 }, { id: 0 }]
+      }
+    });
+  });
+
+  it('adds messages to the correct tabs when broadcasting', () => {
+    let state = {
+      app: appReducer(undefined, { type: '' })
+    };
+
+    const thunk = broadcast('test', 'srv', ['#chan1', '#chan3']);
+    thunk(
+      action => {
+        state.messages = reducer(undefined, action);
+      },
+      () => state
+    );
+
+    const messages = state.messages;
+
+    expect(messages.srv).not.toHaveProperty('srv');
+    expect(messages.srv['#chan1']).toHaveLength(1);
+    expect(messages.srv['#chan1'][0].content).toBe('test');
+    expect(messages.srv['#chan3']).toHaveLength(1);
+    expect(messages.srv['#chan3'][0].content).toBe('test');
+  });
+
+  it('deletes all messages related to server when disconnecting', () => {
+    let state = {
+      srv: {
+        '#chan1': [{ content: 'msg1' }, { content: 'msg2' }],
+        '#chan2': [{ content: 'msg' }]
+      },
+      srv2: {
+        '#chan1': [{ content: 'msg' }]
+      }
+    };
+
+    state = reducer(state, {
+      type: actions.DISCONNECT,
+      server: 'srv'
+    });
+
+    expect(state).toEqual({
+      srv2: {
+        '#chan1': [{ content: 'msg' }]
+      }
+    });
+  });
+
+  it('deletes all messages related to channel when parting', () => {
+    let state = {
+      srv: {
+        '#chan1': [{ content: 'msg1' }, { content: 'msg2' }],
+        '#chan2': [{ content: 'msg' }]
+      },
+      srv2: {
+        '#chan1': [{ content: 'msg' }]
+      }
+    };
+
+    state = reducer(state, {
+      type: actions.PART,
+      server: 'srv',
+      channels: ['#chan1']
+    });
+
+    expect(state).toEqual({
+      srv: {
+        '#chan2': [{ content: 'msg' }]
+      },
+      srv2: {
+        '#chan1': [{ content: 'msg' }]
+      }
+    });
+  });
+});
+
+describe('getMessageTab()', () => {
+  it('returns the correct tab', () => {
+    const srv = 'chat.freenode.net';
+    [
+      ['#cake', '#cake'],
+      ['#apple.pie', '#apple.pie'],
+      ['bob', 'bob'],
+      [undefined, srv],
+      [null, srv],
+      ['*', srv],
+      [srv, srv],
+      ['beans.freenode.net', srv]
+    ].forEach(([target, expected]) =>
+      expect(getMessageTab(srv, target)).toBe(expected)
+    );
+  });
+});

client/js/state/__tests__/reducer-servers.test.js

@@ -0,0 +1,273 @@
+import reducer, { connect, setServerName } from '../servers';
+import * as actions from '../actions';
+
+describe('server reducer', () => {
+  it('adds the server on CONNECT', () => {
+    let state = reducer(
+      undefined,
+      connect({ host: '127.0.0.1', nick: 'nick' })
+    );
+
+    expect(state).toEqual({
+      '127.0.0.1': {
+        name: '127.0.0.1',
+        nick: 'nick',
+        editedNick: null,
+        status: {
+          connected: false,
+          error: null
+        }
+      }
+    });
+
+    state = reducer(state, connect({ host: '127.0.0.1', nick: 'nick' }));
+
+    expect(state).toEqual({
+      '127.0.0.1': {
+        name: '127.0.0.1',
+        nick: 'nick',
+        editedNick: null,
+        status: {
+          connected: false,
+          error: null
+        }
+      }
+    });
+
+    state = reducer(
+      state,
+      connect({ host: '127.0.0.2', nick: 'nick', name: 'srv' })
+    );
+
+    expect(state).toEqual({
+      '127.0.0.1': {
+        name: '127.0.0.1',
+        nick: 'nick',
+        editedNick: null,
+        status: {
+          connected: false,
+          error: null
+        }
+      },
+      '127.0.0.2': {
+        name: 'srv',
+        nick: 'nick',
+        editedNick: null,
+        status: {
+          connected: false,
+          error: null
+        }
+      }
+    });
+  });
+
+  it('removes the server on DISCONNECT', () => {
+    let state = {
+      srv: {},
+      srv2: {}
+    };
+
+    state = reducer(state, {
+      type: actions.DISCONNECT,
+      server: 'srv2'
+    });
+
+    expect(state).toEqual({
+      srv: {}
+    });
+  });
+
+  it('handles SET_SERVER_NAME', () => {
+    let state = {
+      srv: {
+        name: 'cake'
+      }
+    };
+
+    state = reducer(state, setServerName('pie', 'srv'));
+
+    expect(state).toEqual({
+      srv: {
+        name: 'pie'
+      }
+    });
+  });
+
+  it('sets editedNick when editing the nick', () => {
+    let state = reducer(
+      undefined,
+      connect({ host: '127.0.0.1', nick: 'nick' })
+    );
+    state = reducer(state, {
+      type: actions.SET_NICK,
+      server: '127.0.0.1',
+      nick: 'nick2',
+      editing: true
+    });
+
+    expect(state).toMatchObject({
+      '127.0.0.1': {
+        name: '127.0.0.1',
+        nick: 'nick',
+        editedNick: 'nick2'
+      }
+    });
+  });
+
+  it('clears editedNick when receiving an empty nick after editing finishes', () => {
+    let state = reducer(
+      undefined,
+      connect({ host: '127.0.0.1', nick: 'nick' })
+    );
+    state = reducer(state, {
+      type: actions.SET_NICK,
+      server: '127.0.0.1',
+      nick: 'nick2',
+      editing: true
+    });
+    state = reducer(state, {
+      type: actions.SET_NICK,
+      server: '127.0.0.1',
+      nick: ''
+    });
+
+    expect(state).toMatchObject({
+      '127.0.0.1': {
+        name: '127.0.0.1',
+        nick: 'nick',
+        editedNick: null
+      }
+    });
+  });
+
+  it('updates the nick on SOCKET_NICK', () => {
+    let state = reducer(
+      undefined,
+      connect({ host: '127.0.0.1', nick: 'nick' })
+    );
+    state = reducer(state, {
+      type: actions.socket.NICK,
+      server: '127.0.0.1',
+      oldNick: 'nick',
+      newNick: 'nick2'
+    });
+
+    expect(state).toMatchObject({
+      '127.0.0.1': {
+        name: '127.0.0.1',
+        nick: 'nick2',
+        editedNick: null
+      }
+    });
+  });
+
+  it('clears editedNick on SOCKET_NICK_FAIL', () => {
+    let state = reducer(
+      undefined,
+      connect({ host: '127.0.0.1', nick: 'nick' })
+    );
+    state = reducer(state, {
+      type: actions.SET_NICK,
+      server: '127.0.0.1',
+      nick: 'nick2',
+      editing: true
+    });
+    state = reducer(state, {
+      type: actions.socket.NICK_FAIL,
+      server: '127.0.0.1'
+    });
+
+    expect(state).toMatchObject({
+      '127.0.0.1': {
+        name: '127.0.0.1',
+        nick: 'nick',
+        editedNick: null
+      }
+    });
+  });
+
+  it('adds the servers on SOCKET_SERVERS', () => {
+    let state = reducer(undefined, {
+      type: actions.socket.SERVERS,
+      data: [
+        {
+          host: '127.0.0.1',
+          name: 'stuff',
+          nick: 'nick',
+          status: {
+            connected: true
+          }
+        },
+        {
+          host: '127.0.0.2',
+          name: 'stuffz',
+          nick: 'nick2',
+          status: {
+            connected: false
+          }
+        }
+      ]
+    });
+
+    expect(state).toEqual({
+      '127.0.0.1': {
+        name: 'stuff',
+        nick: 'nick',
+        editedNick: null,
+        status: {
+          connected: true
+        }
+      },
+      '127.0.0.2': {
+        name: 'stuffz',
+        nick: 'nick2',
+        editedNick: null,
+        status: {
+          connected: false
+        }
+      }
+    });
+  });
+
+  it('updates connection status on SOCKET_CONNECTION_UPDATE', () => {
+    let state = reducer(
+      undefined,
+      connect({ host: '127.0.0.1', nick: 'nick' })
+    );
+    state = reducer(state, {
+      type: actions.socket.CONNECTION_UPDATE,
+      server: '127.0.0.1',
+      connected: true
+    });
+
+    expect(state).toEqual({
+      '127.0.0.1': {
+        name: '127.0.0.1',
+        nick: 'nick',
+        editedNick: null,
+        status: {
+          connected: true
+        }
+      }
+    });
+
+    state = reducer(state, {
+      type: actions.socket.CONNECTION_UPDATE,
+      server: '127.0.0.1',
+      connected: false,
+      error: 'Bad stuff happened'
+    });
+
+    expect(state).toEqual({
+      '127.0.0.1': {
+        name: '127.0.0.1',
+        nick: 'nick',
+        editedNick: null,
+        status: {
+          connected: false,
+          error: 'Bad stuff happened'
+        }
+      }
+    });
+  });
+});

client/js/state/__tests__/reducer-tab.test.js

@@ -0,0 +1,110 @@
+import reducer, { setSelectedTab } from '../tab';
+import * as actions from '../actions';
+import { locationChanged } from 'utils/router';
+
+describe('tab reducer', () => {
+  it('selects the tab and adds it to history', () => {
+    let state = reducer(undefined, setSelectedTab('srv', '#chan'));
+
+    expect(state).toEqual({
+      selected: { server: 'srv', name: '#chan' },
+      history: [{ server: 'srv', name: '#chan' }]
+    });
+
+    state = reducer(state, setSelectedTab('srv', 'user1'));
+
+    expect(state).toEqual({
+      selected: { server: 'srv', name: 'user1' },
+      history: [
+        { server: 'srv', name: '#chan' },
+        { server: 'srv', name: 'user1' }
+      ]
+    });
+  });
+
+  it('removes the tab from history on PART', () => {
+    let state = reducer(undefined, setSelectedTab('srv', '#chan'));
+    state = reducer(state, setSelectedTab('srv1', 'bob'));
+    state = reducer(state, setSelectedTab('srv', '#chan'));
+    state = reducer(state, setSelectedTab('srv', '#chan3'));
+
+    state = reducer(state, {
+      type: actions.PART,
+      server: 'srv',
+      channels: ['#chan']
+    });
+
+    expect(state).toEqual({
+      selected: { server: 'srv', name: '#chan3' },
+      history: [
+        { server: 'srv1', name: 'bob' },
+        { server: 'srv', name: '#chan3' }
+      ]
+    });
+  });
+
+  it('removes the tab from history on CLOSE_PRIVATE_CHAT', () => {
+    let state = reducer(undefined, setSelectedTab('srv', '#chan'));
+    state = reducer(state, setSelectedTab('srv1', 'bob'));
+    state = reducer(state, setSelectedTab('srv', '#chan'));
+    state = reducer(state, setSelectedTab('srv', '#chan3'));
+
+    state = reducer(state, {
+      type: actions.CLOSE_PRIVATE_CHAT,
+      server: 'srv1',
+      nick: 'bob'
+    });
+
+    expect(state).toEqual({
+      selected: { server: 'srv', name: '#chan3' },
+      history: [
+        { server: 'srv', name: '#chan' },
+        { server: 'srv', name: '#chan' },
+        { server: 'srv', name: '#chan3' }
+      ]
+    });
+  });
+
+  it('removes all tabs related to server from history on DISCONNECT', () => {
+    let state = reducer(undefined, setSelectedTab('srv', '#chan'));
+    state = reducer(state, setSelectedTab('srv1', 'bob'));
+    state = reducer(state, setSelectedTab('srv', '#chan'));
+    state = reducer(state, setSelectedTab('srv', '#chan3'));
+
+    state = reducer(state, {
+      type: actions.DISCONNECT,
+      server: 'srv'
+    });
+
+    expect(state).toEqual({
+      selected: { server: 'srv', name: '#chan3' },
+      history: [{ server: 'srv1', name: 'bob' }]
+    });
+  });
+
+  it('clears the tab when navigating to a non-tab page', () => {
+    let state = reducer(undefined, setSelectedTab('srv', '#chan'));
+
+    state = reducer(state, locationChanged('settings'));
+
+    expect(state).toEqual({
+      selected: {},
+      history: [{ server: 'srv', name: '#chan' }]
+    });
+  });
+
+  it('selects the tab and adds it to history when navigating to a tab', () => {
+    const state = reducer(
+      undefined,
+      locationChanged('chat', {
+        server: 'srv',
+        name: '#chan'
+      })
+    );
+
+    expect(state).toEqual({
+      selected: { server: 'srv', name: '#chan' },
+      history: [{ server: 'srv', name: '#chan' }]
+    });
+  });
+});

client/js/state/actions.js

@@ -0,0 +1,77 @@
+export const APP_SET = 'APP_SET';
+
+export const INVITE = 'INVITE';
+export const JOIN = 'JOIN';
+export const KICK = 'KICK';
+export const PART = 'PART';
+export const SET_TOPIC = 'SET_TOPIC';
+
+export const INPUT_HISTORY_ADD = 'INPUT_HISTORY_ADD';
+export const INPUT_HISTORY_DECREMENT = 'INPUT_HISTORY_DECREMENT';
+export const INPUT_HISTORY_INCREMENT = 'INPUT_HISTORY_INCREMENT';
+export const INPUT_HISTORY_RESET = 'INPUT_HISTORY_RESET';
+
+export const ADD_FETCHED_MESSAGES = 'ADD_FETCHED_MESSAGES';
+export const ADD_MESSAGE = 'ADD_MESSAGE';
+export const ADD_MESSAGES = 'ADD_MESSAGES';
+export const COMMAND = 'COMMAND';
+export const FETCH_MESSAGES = 'FETCH_MESSAGES';
+export const RAW = 'RAW';
+export const UPDATE_MESSAGE_HEIGHT = 'UPDATE_MESSAGE_HEIGHT';
+
+export const CLOSE_PRIVATE_CHAT = 'CLOSE_PRIVATE_CHAT';
+export const OPEN_PRIVATE_CHAT = 'OPEN_PRIVATE_CHAT';
+
+export const SEARCH_MESSAGES = 'SEARCH_MESSAGES';
+export const TOGGLE_SEARCH = 'TOGGLE_SEARCH';
+
+export const AWAY = 'AWAY';
+export const CONNECT = 'CONNECT';
+export const DISCONNECT = 'DISCONNECT';
+export const RECONNECT = 'RECONNECT';
+export const SET_NICK = 'SET_NICK';
+export const SET_SERVER_NAME = 'SET_SERVER_NAME';
+export const WHOIS = 'WHOIS';
+
+export const SET_CERT = 'SET_CERT';
+export const SET_CERT_ERROR = 'SET_CERT_ERROR';
+export const SET_KEY = 'SET_KEY';
+export const UPLOAD_CERT = 'UPLOAD_CERT';
+export const SETTINGS_SET = 'SETTINGS_SET';
+
+export const SELECT_TAB = 'SELECT_TAB';
+
+export const HIDE_MENU = 'HIDE_MENU';
+export const TOGGLE_MENU = 'TOGGLE_MENU';
+export const TOGGLE_USERLIST = 'TOGGLE_USERLIST';
+
+export function socketAction(type) {
+  return `SOCKET_${type.toUpperCase()}`;
+}
+
+function createSocketActions(types) {
+  const actions = {};
+  types.forEach(type => {
+    actions[type.toUpperCase()] = socketAction(type);
+  });
+  return actions;
+}
+
+export const socket = createSocketActions([
+  'cert_fail',
+  'cert_success',
+  'channels',
+  'connection_update',
+  'join',
+  'message',
+  'mode',
+  'nick_fail',
+  'nick',
+  'part',
+  'pm',
+  'quit',
+  'search',
+  'servers',
+  'topic',
+  'users'
+]);

client/js/state/app.js

@@ -0,0 +1,60 @@
+import createReducer from 'utils/createReducer';
+import * as actions from './actions';
+
+export const getApp = state => state.app;
+export const getConnected = state => state.app.connected;
+export const getWrapWidth = state => state.app.wrapWidth;
+export const getCharWidth = state => state.app.charWidth;
+export const getWindowWidth = state => state.app.windowWidth;
+export const getConnectDefaults = state => state.app.connectDefaults;
+
+const initialState = {
+  connected: true,
+  wrapWidth: 0,
+  charWidth: 0,
+  windowWidth: 0,
+  connectDefaults: {
+    name: '',
+    address: '',
+    channels: [],
+    ssl: false,
+    password: false,
+    readonly: false,
+    showDetails: false
+  },
+  hexIP: false,
+  newVersionAvailable: false,
+  installable: null
+};
+
+export default createReducer(initialState, {
+  [actions.APP_SET](state, { key, value }) {
+    state[key] = value;
+  },
+
+  [actions.UPDATE_MESSAGE_HEIGHT](state, action) {
+    state.wrapWidth = action.wrapWidth;
+    state.charWidth = action.charWidth;
+    state.windowWidth = action.windowWidth;
+  }
+});
+
+export function appSet(key, value) {
+  return {
+    type: actions.APP_SET,
+    key,
+    value
+  };
+}
+
+export function setConnected(connected) {
+  return appSet('connected', connected);
+}
+
+export function setCharWidth(width) {
+  return appSet('charWidth', width);
+}
+
+export function setConnectDefaults(defaults) {
+  return appSet('connectDefaults', defaults);
+}

client/js/state/channels.js

@@ -0,0 +1,277 @@
+import { createSelector } from 'reselect';
+import get from 'lodash/get';
+import sortBy from 'lodash/sortBy';
+import createReducer from 'utils/createReducer';
+import { find, findIndex } from 'utils';
+import { getSelectedTab, updateSelection } from './tab';
+import * as actions from './actions';
+
+const modePrefixes = [
+  { mode: 'q', prefix: '~' }, // Owner
+  { mode: 'a', prefix: '&' }, // Admin
+  { mode: 'o', prefix: '@' }, // Op
+  { mode: 'h', prefix: '%' }, // Halfop
+  { mode: 'v', prefix: '+' } // Voice
+];
+
+function getRenderName(user) {
+  for (let i = 0; i < modePrefixes.length; i++) {
+    if (user.mode.indexOf(modePrefixes[i].mode) !== -1) {
+      return `${modePrefixes[i].prefix}${user.nick}`;
+    }
+  }
+
+  return user.nick;
+}
+
+function createUser(nick, mode) {
+  const user = {
+    nick,
+    mode: mode || ''
+  };
+  user.renderName = getRenderName(user);
+  return user;
+}
+
+function loadUser(nick) {
+  let mode;
+
+  for (let i = 0; i < modePrefixes.length; i++) {
+    if (nick[0] === modePrefixes[i].prefix) {
+      ({ mode } = modePrefixes[i]);
+    }
+  }
+
+  if (mode) {
+    return createUser(nick.slice(1), mode);
+  }
+
+  return createUser(nick);
+}
+
+function removeUser(users, nick) {
+  const i = findIndex(users, u => u.nick === nick);
+  if (i !== -1) {
+    users.splice(i, 1);
+  }
+}
+
+function init(state, server, channel) {
+  if (!state[server]) {
+    state[server] = {};
+  }
+  if (channel && !state[server][channel]) {
+    state[server][channel] = { users: [] };
+  }
+}
+
+export function compareUsers(a, b) {
+  a = a.renderName.toLowerCase();
+  b = b.renderName.toLowerCase();
+
+  for (let i = 0; i < modePrefixes.length; i++) {
+    const { prefix } = modePrefixes[i];
+
+    if (a[0] === prefix && b[0] !== prefix) {
+      return -1;
+    }
+    if (b[0] === prefix && a[0] !== prefix) {
+      return 1;
+    }
+  }
+
+  if (a < b) {
+    return -1;
+  }
+  if (a > b) {
+    return 1;
+  }
+  return 0;
+}
+
+export const getChannels = state => state.channels;
+
+export const getSortedChannels = createSelector(getChannels, channels =>
+  sortBy(
+    Object.keys(channels).map(server => ({
+      address: server,
+      channels: sortBy(Object.keys(channels[server]), channel =>
+        channel.toLowerCase()
+      )
+    })),
+    server => server.address.toLowerCase()
+  )
+);
+
+export const getSelectedChannel = createSelector(
+  getSelectedTab,
+  getChannels,
+  (tab, channels) => get(channels, [tab.server, tab.name])
+);
+
+export const getSelectedChannelUsers = createSelector(
+  getSelectedChannel,
+  channel => {
+    if (channel) {
+      return channel.users.concat().sort(compareUsers);
+    }
+    return [];
+  }
+);
+
+export default createReducer(
+  {},
+  {
+    [actions.PART](state, { server, channels }) {
+      channels.forEach(channel => delete state[server][channel]);
+    },
+
+    [actions.socket.JOIN](state, { server, channels, user }) {
+      const channel = channels[0];
+      init(state, server, channel);
+      state[server][channel].users.push(createUser(user));
+    },
+
+    [actions.socket.PART](state, { server, channel, user }) {
+      if (state[server][channel]) {
+        removeUser(state[server][channel].users, user);
+      }
+    },
+
+    [actions.socket.QUIT](state, { server, user }) {
+      Object.keys(state[server]).forEach(channel => {
+        removeUser(state[server][channel].users, user);
+      });
+    },
+
+    [actions.socket.NICK](state, { server, oldNick, newNick }) {
+      Object.keys(state[server]).forEach(channel => {
+        const user = find(
+          state[server][channel].users,
+          u => u.nick === oldNick
+        );
+        if (user) {
+          user.nick = newNick;
+          user.renderName = getRenderName(user);
+        }
+      });
+    },
+
+    [actions.socket.USERS](state, { server, channel, users }) {
+      init(state, server, channel);
+      state[server][channel].users = users.map(nick => loadUser(nick));
+    },
+
+    [actions.socket.TOPIC](state, { server, channel, topic }) {
+      init(state, server, channel);
+      state[server][channel].topic = topic;
+    },
+
+    [actions.socket.MODE](state, { server, channel, user, remove, add }) {
+      const u = find(state[server][channel].users, v => v.nick === user);
+      if (u) {
+        if (remove) {
+          let j = remove.length;
+          while (j--) {
+            u.mode = u.mode.replace(remove[j], '');
+          }
+        }
+
+        if (add) {
+          u.mode += add;
+        }
+
+        u.renderName = getRenderName(u);
+      }
+    },
+
+    [actions.socket.CHANNELS](state, { data }) {
+      if (data) {
+        data.forEach(({ server, name, topic }) => {
+          init(state, server, name);
+          state[server][name].topic = topic;
+        });
+      }
+    },
+
+    [actions.socket.SERVERS](state, { data }) {
+      if (data) {
+        data.forEach(({ host }) => init(state, host));
+      }
+    },
+
+    [actions.CONNECT](state, { host }) {
+      init(state, host);
+    },
+
+    [actions.DISCONNECT](state, { server }) {
+      delete state[server];
+    }
+  }
+);
+
+export function join(channels, server) {
+  return {
+    type: actions.JOIN,
+    channels,
+    server,
+    socket: {
+      type: 'join',
+      data: { channels, server }
+    }
+  };
+}
+
+export function part(channels, server) {
+  return dispatch => {
+    dispatch({
+      type: actions.PART,
+      channels,
+      server,
+      socket: {
+        type: 'part',
+        data: { channels, server }
+      }
+    });
+    dispatch(updateSelection());
+  };
+}
+
+export function invite(user, channel, server) {
+  return {
+    type: actions.INVITE,
+    user,
+    channel,
+    server,
+    socket: {
+      type: 'invite',
+      data: { user, channel, server }
+    }
+  };
+}
+
+export function kick(user, channel, server) {
+  return {
+    type: actions.KICK,
+    user,
+    channel,
+    server,
+    socket: {
+      type: 'kick',
+      data: { user, channel, server }
+    }
+  };
+}
+
+export function setTopic(topic, channel, server) {
+  return {
+    type: actions.SET_TOPIC,
+    topic,
+    channel,
+    server,
+    socket: {
+      type: 'topic',
+      data: { topic, channel, server }
+    }
+  };
+}

client/js/state/index.js

@@ -0,0 +1,30 @@
+import { combineReducers } from 'redux';
+import app from './app';
+import channels from './channels';
+import input from './input';
+import messages from './messages';
+import privateChats from './privateChats';
+import search from './search';
+import servers from './servers';
+import settings from './settings';
+import tab from './tab';
+import ui from './ui';
+
+export * from './selectors';
+export const getRouter = state => state.router;
+
+export default function createReducer(router) {
+  return combineReducers({
+    router,
+    app,
+    channels,
+    input,
+    messages,
+    privateChats,
+    search,
+    servers,
+    settings,
+    tab,
+    ui
+  });
+}

client/js/state/input.js

@@ -0,0 +1,69 @@
+import createReducer from 'utils/createReducer';
+import * as actions from './actions';
+
+const HISTORY_MAX_LENGTH = 128;
+
+const initialState = {
+  history: [],
+  index: 0
+};
+
+export const getCurrentInputHistoryEntry = state => {
+  if (state.input.index === -1) {
+    return null;
+  }
+
+  return state.input.history[state.input.index];
+};
+
+export default createReducer(initialState, {
+  [actions.INPUT_HISTORY_ADD](state, { line }) {
+    if (line.trim() && line !== state.history[0]) {
+      if (state.history.length === HISTORY_MAX_LENGTH) {
+        state.history.pop();
+      }
+      state.history.unshift(line);
+    }
+  },
+
+  [actions.INPUT_HISTORY_RESET](state) {
+    state.index = -1;
+  },
+
+  [actions.INPUT_HISTORY_INCREMENT](state) {
+    if (state.index < state.history.length - 1) {
+      state.index++;
+    }
+  },
+
+  [actions.INPUT_HISTORY_DECREMENT](state) {
+    if (state.index >= 0) {
+      state.index--;
+    }
+  }
+});
+
+export function addInputHistory(line) {
+  return {
+    type: actions.INPUT_HISTORY_ADD,
+    line
+  };
+}
+
+export function resetInputHistory() {
+  return {
+    type: actions.INPUT_HISTORY_RESET
+  };
+}
+
+export function incrementInputHistory() {
+  return {
+    type: actions.INPUT_HISTORY_INCREMENT
+  };
+}
+
+export function decrementInputHistory() {
+  return {
+    type: actions.INPUT_HISTORY_DECREMENT
+  };
+}

client/js/state/messages.js

@@ -0,0 +1,314 @@
+import { createSelector } from 'reselect';
+import has from 'lodash/has';
+import {
+  findBreakpoints,
+  messageHeight,
+  linkify,
+  timestamp,
+  isChannel
+} from 'utils';
+import createReducer from 'utils/createReducer';
+import { getApp } from './app';
+import { getSelectedTab } from './tab';
+import * as actions from './actions';
+
+export const getMessages = state => state.messages;
+
+export const getSelectedMessages = createSelector(
+  getSelectedTab,
+  getMessages,
+  (tab, messages) => {
+    const target = tab.name || tab.server;
+    if (has(messages, [tab.server, target])) {
+      return messages[tab.server][target];
+    }
+    return [];
+  }
+);
+
+export const getHasMoreMessages = createSelector(
+  getSelectedMessages,
+  messages => {
+    const first = messages[0];
+    return first && first.next;
+  }
+);
+
+function init(state, server, tab) {
+  if (!state[server]) {
+    state[server] = {};
+  }
+  if (!state[server][tab]) {
+    state[server][tab] = [];
+  }
+}
+
+export default createReducer(
+  {},
+  {
+    [actions.ADD_MESSAGE](state, { server, tab, message }) {
+      init(state, server, tab);
+      state[server][tab].push(message);
+    },
+
+    [actions.ADD_MESSAGES](state, { server, tab, messages, prepend }) {
+      if (prepend) {
+        init(state, server, tab);
+        state[server][tab].unshift(...messages);
+      } else {
+        messages.forEach(message => {
+          init(state, server, message.tab || tab);
+          state[server][message.tab || tab].push(message);
+        });
+      }
+    },
+
+    [actions.DISCONNECT](state, { server }) {
+      delete state[server];
+    },
+
+    [actions.PART](state, { server, channels }) {
+      channels.forEach(channel => delete state[server][channel]);
+    },
+
+    [actions.UPDATE_MESSAGE_HEIGHT](
+      state,
+      { wrapWidth, charWidth, windowWidth }
+    ) {
+      Object.keys(state).forEach(server =>
+        Object.keys(state[server]).forEach(target =>
+          state[server][target].forEach(message => {
+            message.height = messageHeight(
+              message,
+              wrapWidth,
+              charWidth,
+              6 * charWidth,
+              windowWidth
+            );
+          })
+        )
+      );
+    },
+
+    [actions.socket.SERVERS](state, { data }) {
+      if (data) {
+        data.forEach(({ host }) => {
+          state[host] = {};
+        });
+      }
+    }
+  }
+);
+
+let nextID = 0;
+
+function initMessage(message, tab, state) {
+  if (message.time) {
+    message.time = timestamp(new Date(message.time * 1000));
+  } else {
+    message.time = timestamp();
+  }
+
+  if (!message.id) {
+    message.id = nextID;
+    nextID++;
+  }
+
+  if (tab.charAt(0) === '#') {
+    message.channel = true;
+  }
+
+  // Collapse multiple adjacent spaces into a single one
+  message.content = message.content.replace(/\s\s+/g, ' ');
+
+  if (message.content.indexOf('\x01ACTION') === 0) {
+    const { from } = message;
+    message.from = null;
+    message.type = 'action';
+    message.content = from + message.content.slice(7, -1);
+  }
+
+  const { wrapWidth, charWidth, windowWidth } = getApp(state);
+
+  message.length = message.content.length;
+  message.breakpoints = findBreakpoints(message.content);
+  message.height = messageHeight(
+    message,
+    wrapWidth,
+    charWidth,
+    6 * charWidth,
+    windowWidth
+  );
+  message.content = linkify(message.content);
+
+  return message;
+}
+
+export function getMessageTab(server, to) {
+  if (!to || to === '*' || (!isChannel(to) && to.indexOf('.') !== -1)) {
+    return server;
+  }
+  return to;
+}
+
+export function fetchMessages() {
+  return (dispatch, getState) => {
+    const state = getState();
+    const first = getSelectedMessages(state)[0];
+
+    if (!first) {
+      return;
+    }
+
+    const tab = state.tab.selected;
+    if (isChannel(tab)) {
+      dispatch({
+        type: actions.FETCH_MESSAGES,
+        socket: {
+          type: 'fetch_messages',
+          data: {
+            server: tab.server,
+            channel: tab.name,
+            next: first.id
+          }
+        }
+      });
+    }
+  };
+}
+
+export function addFetchedMessages(server, tab) {
+  return {
+    type: actions.ADD_FETCHED_MESSAGES,
+    server,
+    tab
+  };
+}
+
+export function updateMessageHeight(wrapWidth, charWidth, windowWidth) {
+  return {
+    type: actions.UPDATE_MESSAGE_HEIGHT,
+    wrapWidth,
+    charWidth,
+    windowWidth
+  };
+}
+
+export function sendMessage(content, to, server) {
+  return (dispatch, getState) => {
+    const state = getState();
+
+    dispatch({
+      type: actions.ADD_MESSAGE,
+      server,
+      tab: to,
+      message: initMessage(
+        {
+          from: state.servers[server].nick,
+          content
+        },
+        to,
+        state
+      ),
+      socket: {
+        type: 'message',
+        data: { content, to, server }
+      }
+    });
+  };
+}
+
+export function addMessage(message, server, to) {
+  const tab = getMessageTab(server, to);
+
+  return (dispatch, getState) =>
+    dispatch({
+      type: actions.ADD_MESSAGE,
+      server,
+      tab,
+      message: initMessage(message, tab, getState())
+    });
+}
+
+export function addMessages(messages, server, to, prepend, next) {
+  const tab = getMessageTab(server, to);
+
+  return (dispatch, getState) => {
+    const state = getState();
+
+    if (next) {
+      messages[0].id = next;
+      messages[0].next = true;
+    }
+
+    messages.forEach(message =>
+      initMessage(message, message.tab || tab, state)
+    );
+
+    dispatch({
+      type: actions.ADD_MESSAGES,
+      server,
+      tab,
+      messages,
+      prepend
+    });
+  };
+}
+
+export function broadcast(message, server, channels) {
+  return addMessages(
+    channels.map(channel => ({
+      tab: channel,
+      content: message,
+      type: 'info'
+    })),
+    server
+  );
+}
+
+export function print(message, server, channel, type) {
+  if (Array.isArray(message)) {
+    return addMessages(
+      message.map(line => ({
+        content: line,
+        type
+      })),
+      server,
+      channel
+    );
+  }
+
+  return addMessage(
+    {
+      content: message,
+      type
+    },
+    server,
+    channel
+  );
+}
+
+export function inform(message, server, channel) {
+  return print(message, server, channel, 'info');
+}
+
+export function runCommand(command, channel, server) {
+  return {
+    type: actions.COMMAND,
+    command,
+    channel,
+    server
+  };
+}
+
+export function raw(message, server) {
+  return {
+    type: actions.RAW,
+    message,
+    server,
+    socket: {
+      type: 'raw',
+      data: { message, server }
+    }
+  };
+}

client/js/state/privateChats.js

@@ -0,0 +1,62 @@
+import sortBy from 'lodash/sortBy';
+import { findIndex } from 'utils';
+import createReducer from 'utils/createReducer';
+import { updateSelection } from './tab';
+import * as actions from './actions';
+
+export const getPrivateChats = state => state.privateChats;
+
+function open(state, server, nick) {
+  if (!state[server]) {
+    state[server] = [];
+  }
+  if (findIndex(state[server], n => n === nick) === -1) {
+    state[server].push(nick);
+    state[server] = sortBy(state[server], v => v.toLowerCase());
+  }
+}
+
+export default createReducer(
+  {},
+  {
+    [actions.OPEN_PRIVATE_CHAT](state, action) {
+      open(state, action.server, action.nick);
+    },
+
+    [actions.CLOSE_PRIVATE_CHAT](state, { server, nick }) {
+      const i = findIndex(state[server], n => n === nick);
+      if (i !== -1) {
+        state[server].splice(i, 1);
+      }
+    },
+
+    [actions.socket.PM](state, action) {
+      if (action.from.indexOf('.') === -1) {
+        open(state, action.server, action.from);
+      }
+    },
+
+    [actions.DISCONNECT](state, { server }) {
+      delete state[server];
+    }
+  }
+);
+
+export function openPrivateChat(server, nick) {
+  return {
+    type: actions.OPEN_PRIVATE_CHAT,
+    server,
+    nick
+  };
+}
+
+export function closePrivateChat(server, nick) {
+  return dispatch => {
+    dispatch({
+      type: actions.CLOSE_PRIVATE_CHAT,
+      server,
+      nick
+    });
+    dispatch(updateSelection());
+  };
+}

client/js/state/search.js

@@ -0,0 +1,38 @@
+import createReducer from 'utils/createReducer';
+import * as actions from './actions';
+
+const initialState = {
+  show: false,
+  results: []
+};
+
+export const getSearch = state => state.search;
+
+export default createReducer(initialState, {
+  [actions.socket.SEARCH](state, { results }) {
+    state.results = results || [];
+  },
+
+  [actions.TOGGLE_SEARCH](state) {
+    state.show = !state.show;
+  }
+});
+
+export function searchMessages(server, channel, phrase) {
+  return {
+    type: actions.SEARCH_MESSAGES,
+    server,
+    channel,
+    phrase,
+    socket: {
+      type: 'search',
+      data: { server, channel, phrase }
+    }
+  };
+}
+
+export function toggleSearch() {
+  return {
+    type: actions.TOGGLE_SEARCH
+  };
+}

client/js/state/selectors.js

@@ -0,0 +1,11 @@
+import { createSelector } from 'reselect';
+import get from 'lodash/get';
+import { getServers } from './servers';
+import { getSelectedTab } from './tab';
+
+// eslint-disable-next-line import/prefer-default-export
+export const getSelectedTabTitle = createSelector(
+  getSelectedTab,
+  getServers,
+  (tab, servers) => tab.name || get(servers, [tab.server, 'name'])
+);

client/js/state/servers.js

@@ -0,0 +1,210 @@
+import { createSelector } from 'reselect';
+import get from 'lodash/get';
+import createReducer from 'utils/createReducer';
+import { getSelectedTab, updateSelection } from './tab';
+import * as actions from './actions';
+
+export const getServers = state => state.servers;
+
+export const getCurrentNick = createSelector(
+  getServers,
+  getSelectedTab,
+  (servers, tab) => {
+    if (!servers[tab.server]) {
+      return;
+    }
+    const { editedNick } = servers[tab.server];
+    if (editedNick === null) {
+      return servers[tab.server].nick;
+    }
+    return editedNick;
+  }
+);
+
+export const getCurrentServerName = createSelector(
+  getServers,
+  getSelectedTab,
+  (servers, tab) => get(servers, [tab.server, 'name'])
+);
+
+export const getCurrentServerStatus = createSelector(
+  getServers,
+  getSelectedTab,
+  (servers, tab) => get(servers, [tab.server, 'status'], {})
+);
+
+export default createReducer(
+  {},
+  {
+    [actions.CONNECT](state, { host, nick, name }) {
+      if (!state[host]) {
+        state[host] = {
+          nick,
+          editedNick: null,
+          name: name || host,
+          status: {
+            connected: false,
+            error: null
+          }
+        };
+      }
+    },
+
+    [actions.DISCONNECT](state, { server }) {
+      delete state[server];
+    },
+
+    [actions.SET_SERVER_NAME](state, { server, name }) {
+      state[server].name = name;
+    },
+
+    [actions.SET_NICK](state, { server, nick, editing }) {
+      if (editing) {
+        state[server].editedNick = nick;
+      } else if (nick === '') {
+        state[server].editedNick = null;
+      }
+    },
+
+    [actions.socket.NICK](state, { server, oldNick, newNick }) {
+      if (!oldNick || oldNick === state[server].nick) {
+        state[server].nick = newNick;
+        state[server].editedNick = null;
+      }
+    },
+
+    [actions.socket.NICK_FAIL](state, { server }) {
+      state[server].editedNick = null;
+    },
+
+    [actions.socket.SERVERS](state, { data }) {
+      if (data) {
+        data.forEach(({ host, name, nick, status }) => {
+          state[host] = { name, nick, status, editedNick: null };
+        });
+      }
+    },
+
+    [actions.socket.CONNECTION_UPDATE](state, { server, connected, error }) {
+      if (state[server]) {
+        state[server].status.connected = connected;
+        state[server].status.error = error;
+      }
+    }
+  }
+);
+
+export function connect(config) {
+  return {
+    type: actions.CONNECT,
+    ...config,
+    socket: {
+      type: 'connect',
+      data: config
+    }
+  };
+}
+
+export function disconnect(server) {
+  return dispatch => {
+    dispatch({
+      type: actions.DISCONNECT,
+      server,
+      socket: {
+        type: 'quit',
+        data: { server }
+      }
+    });
+    dispatch(updateSelection());
+  };
+}
+
+export function reconnect(server, settings) {
+  return {
+    type: actions.RECONNECT,
+    server,
+    settings,
+    socket: {
+      type: 'reconnect',
+      data: {
+        ...settings,
+        server
+      }
+    }
+  };
+}
+
+export function whois(user, server) {
+  return {
+    type: actions.WHOIS,
+    user,
+    server,
+    socket: {
+      type: 'whois',
+      data: { user, server }
+    }
+  };
+}
+
+export function away(message, server) {
+  return {
+    type: actions.AWAY,
+    message,
+    server,
+    socket: {
+      type: 'away',
+      data: { message, server }
+    }
+  };
+}
+
+export function setNick(nick, server, editing) {
+  nick = nick.trim().replace(' ', '');
+
+  const action = {
+    type: actions.SET_NICK,
+    nick,
+    server,
+    editing
+  };
+
+  if (!editing && nick !== '') {
+    action.socket = {
+      type: 'nick',
+      data: {
+        newNick: nick,
+        server
+      }
+    };
+  }
+
+  return action;
+}
+
+export function isValidServerName(name) {
+  return name.trim() !== '';
+}
+
+export function setServerName(name, server) {
+  const action = {
+    type: actions.SET_SERVER_NAME,
+    name,
+    server
+  };
+
+  if (isValidServerName(name)) {
+    action.socket = {
+      type: 'set_server_name',
+      data: {
+        name,
+        server
+      },
+      debounce: {
+        delay: 500,
+        key: `server_name:${server}`
+      }
+    };
+  }
+
+  return action;
+}

client/js/state/settings.js

@@ -0,0 +1,127 @@
+import assign from 'lodash/assign';
+import createReducer from 'utils/createReducer';
+import * as actions from './actions';
+
+export const getSettings = state => state.settings;
+
+export default createReducer(
+  {},
+  {
+    [actions.UPLOAD_CERT](state) {
+      state.uploadingCert = true;
+    },
+
+    [actions.socket.CERT_SUCCESS](state) {
+      state.uploadingCert = false;
+      delete state.certFile;
+      delete state.cert;
+      delete state.keyFile;
+      delete state.key;
+    },
+
+    [actions.socket.CERT_FAIL](state, action) {
+      state.uploadingCert = false;
+      state.certError = action.message;
+    },
+
+    [actions.SET_CERT_ERROR](state, action) {
+      state.uploadingCert = false;
+      state.certError = action.message;
+    },
+
+    [actions.SET_CERT](state, action) {
+      state.certFile = action.fileName;
+      state.cert = action.cert;
+    },
+
+    [actions.SET_KEY](state, action) {
+      state.keyFile = action.fileName;
+      state.key = action.key;
+    },
+
+    [actions.SETTINGS_SET](state, { key, value, settings }) {
+      if (settings) {
+        assign(state, settings);
+      } else {
+        state[key] = value;
+      }
+    }
+  }
+);
+
+export function setCertError(message) {
+  return {
+    type: actions.SET_CERT_ERROR,
+    message
+  };
+}
+
+export function uploadCert() {
+  return (dispatch, getState) => {
+    const { settings } = getState();
+    if (settings.cert && settings.key) {
+      dispatch({
+        type: actions.UPLOAD_CERT,
+        socket: {
+          type: 'cert',
+          data: {
+            cert: settings.cert,
+            key: settings.key
+          }
+        }
+      });
+    } else {
+      dispatch(setCertError('Missing certificate or key'));
+    }
+  };
+}
+
+export function setCert(fileName, cert) {
+  return {
+    type: actions.SET_CERT,
+    fileName,
+    cert: cert
+  };
+}
+
+export function setKey(fileName, key) {
+  return {
+    type: actions.SET_KEY,
+    fileName,
+    key: key
+  };
+}
+
+export function setSetting(key, value) {
+  return {
+    type: actions.SETTINGS_SET,
+    key,
+    value,
+    socket: {
+      type: 'settings_set',
+      data: {
+        [key]: value
+      },
+      debounce: {
+        delay: 250,
+        key: `settings:${key}`
+      }
+    }
+  };
+}
+
+export function setSettings(settings, local = false) {
+  const action = {
+    type: actions.SETTINGS_SET,
+    settings
+  };
+
+  if (!local) {
+    action.socket = {
+      type: 'settings_set',
+      data: settings
+    };
+  }
+
+  return action;
+}

client/js/state/tab.js

@@ -0,0 +1,84 @@
+import createReducer from 'utils/createReducer';
+import { push, replace, LOCATION_CHANGED } from 'utils/router';
+import * as actions from './actions';
+
+const initialState = {
+  selected: {},
+  history: []
+};
+
+function selectTab(state, action) {
+  state.selected = {
+    server: action.server,
+    name: action.name
+  };
+  state.history.push(state.selected);
+}
+
+export const getSelectedTab = state => state.tab.selected;
+
+export default createReducer(initialState, {
+  [actions.SELECT_TAB]: selectTab,
+
+  [actions.PART](state, action) {
+    state.history = state.history.filter(
+      tab => !(tab.server === action.server && tab.name === action.channels[0])
+    );
+  },
+
+  [actions.CLOSE_PRIVATE_CHAT](state, action) {
+    state.history = state.history.filter(
+      tab => !(tab.server === action.server && tab.name === action.nick)
+    );
+  },
+
+  [actions.DISCONNECT](state, action) {
+    state.history = state.history.filter(tab => tab.server !== action.server);
+  },
+
+  [LOCATION_CHANGED](state, action) {
+    const { route, params } = action;
+    if (route === 'chat') {
+      selectTab(state, params);
+    } else {
+      state.selected = {};
+    }
+  }
+});
+
+export function select(server, name, doReplace) {
+  const navigate = doReplace ? replace : push;
+  if (name) {
+    return navigate(`/${server}/${encodeURIComponent(name)}`);
+  }
+  return navigate(`/${server}`);
+}
+
+export function updateSelection() {
+  return (dispatch, getState) => {
+    const state = getState();
+    const { history } = state.tab;
+    const { servers } = state;
+    const { server } = state.tab.selected;
+    const serverAddrs = Object.keys(servers);
+
+    if (serverAddrs.length === 0) {
+      dispatch(replace('/connect'));
+    } else if (history.length > 0) {
+      const tab = history[history.length - 1];
+      dispatch(select(tab.server, tab.name, true));
+    } else if (servers[server]) {
+      dispatch(select(server, null, true));
+    } else {
+      dispatch(select(serverAddrs.sort()[0], null, true));
+    }
+  };
+}
+
+export function setSelectedTab(server, name = null) {
+  return {
+    type: actions.SELECT_TAB,
+    server,
+    name
+  };
+}

client/js/state/ui.js

@@ -0,0 +1,46 @@
+import createReducer from 'utils/createReducer';
+import { LOCATION_CHANGED } from 'utils/router';
+import * as actions from './actions';
+
+const initialState = {
+  showTabList: false,
+  showUserList: false
+};
+
+export const getShowTabList = state => state.ui.showTabList;
+export const getShowUserList = state => state.ui.showUserList;
+
+function setMenuHidden(state) {
+  state.showTabList = false;
+}
+
+export default createReducer(initialState, {
+  [actions.TOGGLE_MENU](state) {
+    state.showTabList = !state.showTabList;
+  },
+
+  [actions.HIDE_MENU]: setMenuHidden,
+  [LOCATION_CHANGED]: setMenuHidden,
+
+  [actions.TOGGLE_USERLIST](state) {
+    state.showUserList = !state.showUserList;
+  }
+});
+
+export function hideMenu() {
+  return {
+    type: actions.HIDE_MENU
+  };
+}
+
+export function toggleMenu() {
+  return {
+    type: actions.TOGGLE_MENU
+  };
+}
+
+export function toggleUserList() {
+  return {
+    type: actions.TOGGLE_USERLIST
+  };
+}