Add document title handling

client/src/js/index.js

@@ -4,55 +4,18 @@ import { AppContainer } from 'react-hot-loader';
 import 'react-virtualized/styles.css';
 
 import configureStore from './store';
-import initRouter, { replace } from './util/router';
+import initRouter from './util/router';
 import routes from './routes';
 import Socket from './util/Socket';
-import handleSocket from './socket';
 import Root from './containers/Root';
-import { setEnvironment } from './actions/environment';
+import runModules from './modules';
-import { addMessages } from './actions/message';
-import { initWidthUpdates } from './util/messageHeight';
 
 const host = DEV ? `${window.location.hostname}:1337` : window.location.host;
 const socket = new Socket(host);
-
 const store = configureStore(socket);
+
 initRouter(routes, store);
-handleSocket(socket, store);
+runModules({ store, socket });
-
-const env = JSON.parse(document.getElementById('env').innerHTML);
-
-store.dispatch(setEnvironment('connect_defaults', env.defaults));
-
-if (env.servers) {
-  store.dispatch({
-    type: 'SOCKET_SERVERS',
-    data: env.servers
-  });
-} else {
-  store.dispatch(replace('/connect'));
-}
-
-if (env.channels) {
-  store.dispatch({
-    type: 'SOCKET_CHANNELS',
-    data: env.channels
-  });
-}
-
-if (env.users) {
-  store.dispatch({
-    type: 'SOCKET_USERS',
-    ...env.users
-  });
-}
-
-initWidthUpdates(store, () => {
-  if (env.messages) {
-    const { messages, server, to, next } = env.messages;
-    store.dispatch(addMessages(messages, server, to, false, next));
-  }
-});
 
 const renderRoot = () => {
   render(

client/src/js/modules/documentTitle.js

@@ -0,0 +1,28 @@
+import capitalize from 'lodash/capitalize';
+import observe from '../util/observe';
+import { getCurrentServerName } from '../reducers/servers';
+
+const getRouter = state => state.router;
+
+export default function documentTitle({ store }) {
+  observe(
+    store,
+    [getRouter, getCurrentServerName],
+    (router, serverName) => {
+      let title;
+
+      if (router.route === 'chat') {
+        const { name } = router.params;
+        if (name) {
+          title = `${name} @ ${serverName}`;
+        } else {
+          title = serverName;
+        }
+      } else {
+        title = capitalize(router.route);
+      }
+
+      document.title = `${title} | Dispatch`;
+    }
+  );
+}

client/src/js/modules/handleSocket.js

@@ -1,7 +1,7 @@
-import { broadcast, inform, addMessage, addMessages } from './actions/message';
+import { broadcast, inform, addMessage, addMessages } from '../actions/message';
-import { select } from './actions/tab';
+import { select } from '../actions/tab';
-import { replace } from './util/router';
+import { replace } from '../util/router';
-import { normalizeChannel } from './util';
+import { normalizeChannel } from '../util';
 
 function withReason(message, reason) {
   return message + (reason ? ` (${reason})` : '');
@@ -19,7 +19,7 @@ function findChannels(state, server, user) {
   return channels;
 }
 
-export default function handleSocket(socket, { dispatch, getState }) {
+export default function handleSocket({ socket, store: { dispatch, getState } }) {
   const handlers = {
     message(message) {
       dispatch(addMessage(message, message.server, message.to));

client/src/js/modules/index.js

@@ -0,0 +1,10 @@
+import documentTitle from './documentTitle';
+import handleSocket from './handleSocket';
+import initialState from './initialState';
+
+export default function runModules(ctx) {
+  initialState(ctx);
+
+  documentTitle(ctx);
+  handleSocket(ctx);
+}

client/src/js/modules/initialState.js

@@ -0,0 +1,40 @@
+import { setEnvironment } from '../actions/environment';
+import { addMessages } from '../actions/message';
+import { initWidthUpdates } from '../util/messageHeight';
+import { replace } from '../util/router';
+
+export default function initialState({ store }) {
+  const env = JSON.parse(document.getElementById('env').innerHTML);
+
+  store.dispatch(setEnvironment('connect_defaults', env.defaults));
+
+  if (env.servers) {
+    store.dispatch({
+      type: 'SOCKET_SERVERS',
+      data: env.servers
+    });
+  } else {
+    store.dispatch(replace('/connect'));
+  }
+
+  if (env.channels) {
+    store.dispatch({
+      type: 'SOCKET_CHANNELS',
+      data: env.channels
+    });
+  }
+
+  if (env.users) {
+    store.dispatch({
+      type: 'SOCKET_USERS',
+      ...env.users
+    });
+  }
+
+  initWidthUpdates(store, () => {
+    if (env.messages) {
+      const { messages, server, to, next } = env.messages;
+      store.dispatch(addMessages(messages, server, to, false, next));
+    }
+  });
+}

client/src/js/reducers/servers.js

@@ -18,6 +18,12 @@ export const getCurrentNick = createSelector(
   (servers, tab) => servers.getIn([tab.server, 'nick'], '')
 );
 
+export const getCurrentServerName = createSelector(
+  getServers,
+  getSelectedTab,
+  (servers, tab) => servers.getIn([tab.server, 'name'], '')
+);
+
 export default createReducer(Map(), {
   [actions.CONNECT](state, action) {
     const { host, nick, options } = action;

client/src/js/util/observe.js

@@ -0,0 +1,44 @@
+function subscribe(store, selector, handler) {
+  let prev = selector(store.getState());
+  handler(prev);
+
+  store.subscribe(() => {
+    const next = selector(store.getState());
+    if (next !== prev) {
+      handler(next);
+      prev = next;
+    }
+  });
+}
+
+function subscribeArray(store, selectors, handler) {
+  let state = store.getState();
+  let prev = selectors.map(selector => selector(state));
+  handler(...prev);
+
+  store.subscribe(() => {
+    state = store.getState();
+    const next = [];
+    let changed = false;
+
+    for (let i = 0; i < selectors.length; i++) {
+      next[i] = selectors[i](state);
+      if (next[i] !== prev[i]) {
+        changed = true;
+      }
+    }
+
+    if (changed) {
+      handler(...next);
+      prev = next;
+    }
+  });
+}
+
+export default function observe(store, selector, handler) {
+  if (Array.isArray(selector)) {
+    subscribeArray(store, selector, handler);
+  } else {
+    subscribe(store, selector, handler);
+  }
+}