Organize components, use webpack import aliases

client/src/js/commands.js

@@ -1,10 +1,10 @@
+import { COMMAND } from 'state/actions';
+import { join, part, invite, kick, setTopic } from 'state/channels';
+import { sendMessage, raw } from 'state/messages';
+import { setNick, disconnect, whois, away } from 'state/servers';
+import { select } from 'state/tab';
+import { find } from 'util';
 import createCommandMiddleware, { beforeHandler, notFoundHandler } from './middleware/command';
-import { COMMAND } from './state/actions';
-import { join, part, invite, kick, setTopic } from './state/channels';
-import { sendMessage, raw } from './state/messages';
-import { setNick, disconnect, whois, away } from './state/servers';
-import { select } from './state/tab';
-import { find } from './util';
 
 const help = [
   '/join <channel> - Join a channel',

client/src/js/components/App.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
-import Route from '../containers/Route';
-import Chat from '../containers/Chat';
-import Connect from '../containers/Connect';
-import Settings from '../containers/Settings';
-import TabList from '../components/TabList';
+import Route from 'containers/Route';
+import Chat from 'containers/Chat';
+import Connect from 'containers/Connect';
+import Settings from 'containers/Settings';
+import TabList from 'components/TabList';
 
 export default class App extends Component {
   handleClick = () => {

client/src/js/components/Navicon.js

@@ -1,7 +0,0 @@
-import React from 'react';
-
-const Navicon = ({ toggleMenu }) => (
-  <i className="icon-menu navicon" onClick={toggleMenu} />
-);
-
-export default Navicon;

client/src/js/components/Root.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import App from '../containers/App';
+import App from 'containers/App';
 
 const Root = ({ store }) => (
   <Provider store={store}>

client/src/js/components/pages/Chat/Chat.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
-import ChatTitle from '../ChatTitle';
-import Search from '../Search';
-import MessageBox from '../MessageBox';
-import MessageInput from '../MessageInput';
-import UserList from '../UserList';
+import ChatTitle from './ChatTitle';
+import Search from './Search';
+import MessageBox from './MessageBox';
+import MessageInput from './MessageInput';
+import UserList from './UserList';
 
 export default class Chat extends Component {
   handleCloseClick = () => {

client/src/js/components/pages/Chat/ChatTitle.js

@@ -1,9 +1,9 @@
 import React, { PureComponent } from 'react';
 import { List } from 'immutable';
-import Navicon from '../containers/Navicon';
-import Editable from './ui/Editable';
-import { isValidServerName } from '../state/servers';
-import { linkify } from '../util';
+import Navicon from 'containers/Navicon';
+import Editable from 'components/ui/Editable';
+import { isValidServerName } from 'state/servers';
+import { linkify } from 'util';
 
 export default class ChatTitle extends PureComponent {
   render() {

client/src/js/components/pages/Chat/MessageBox.js

@@ -2,8 +2,8 @@ import React, { PureComponent } from 'react';
 import { List } from 'react-virtualized/dist/commonjs/List';
 import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
 import debounce from 'lodash/debounce';
+import { getScrollPos, saveScrollPos } from 'util/scrollPosition';
 import Message from './Message';
-import { getScrollPos, saveScrollPos } from '../util/scrollPosition';
 
 const fetchThreshold = 500;
 

client/src/js/components/pages/Chat/MessageInput.js

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import Editable from './ui/Editable';
+import Editable from 'components/ui/Editable';
 
 export default class MessageInput extends PureComponent {
   state = {

client/src/js/components/pages/Chat/SearchResult.js

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { timestamp, linkify } from '../util';
+import { timestamp, linkify } from 'util';
 
 export default class SearchResult extends PureComponent {
   render() {

client/src/js/components/pages/Chat/index.js

@@ -0,0 +1,3 @@
+import Chat from './Chat';
+
+export default Chat;

client/src/js/components/pages/Connect.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import Navicon from '../../containers/Navicon';
+import Navicon from 'containers/Navicon';
 
 export default class Connect extends Component {
   state = {

client/src/js/components/pages/Settings.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import Navicon from '../../containers/Navicon';
-import FileInput from '../FileInput';
+import Navicon from 'containers/Navicon';
+import FileInput from 'components/ui/FileInput';
 
 const Settings = ({ settings, onCertChange, onKeyChange, uploadCert }) => {
   const status = settings.get('uploadingCert') ? 'Uploading...' : 'Upload';

client/src/js/components/ui/Editable.js

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { stringWidth } from '../../util';
+import { stringWidth } from 'util';
 
 export default class Editable extends PureComponent {
   static defaultProps = {

client/src/js/components/ui/Navicon.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Navicon = ({ onClick }) => (
+  <i className="icon-menu navicon" onClick={onClick} />
+);
+
+export default Navicon;

client/src/js/containers/App.js

@@ -1,13 +1,13 @@
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
-import App from '../components/App';
-import { getConnected } from '../state/app';
-import { getChannels } from '../state/channels';
-import { getPrivateChats } from '../state/privateChats';
-import { getServers } from '../state/servers';
-import { getSelectedTab, select } from '../state/tab';
-import { getShowTabList, hideMenu } from '../state/ui';
-import { push } from '../util/router';
+import App from 'components/App';
+import { getConnected } from 'state/app';
+import { getChannels } from 'state/channels';
+import { getPrivateChats } from 'state/privateChats';
+import { getServers } from 'state/servers';
+import { getSelectedTab, select } from 'state/tab';
+import { getShowTabList, hideMenu } from 'state/ui';
+import { push } from 'util/router';
 
 const mapState = createStructuredSelector({
   channels: getChannels,

client/src/js/containers/Chat.js

@@ -1,18 +1,18 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
-import Chat from '../components/pages/Chat';
-import { getSelectedTabTitle } from '../state';
-import { getSelectedChannel, getSelectedChannelUsers, part } from '../state/channels';
+import Chat from 'components/pages/Chat';
+import { getSelectedTabTitle } from 'state';
+import { getSelectedChannel, getSelectedChannelUsers, part } from 'state/channels';
 import { getCurrentInputHistoryEntry, addInputHistory, resetInputHistory,
-  incrementInputHistory, decrementInputHistory } from '../state/input';
+  incrementInputHistory, decrementInputHistory } from 'state/input';
 import { getSelectedMessages, getHasMoreMessages,
-  runCommand, sendMessage, fetchMessages, addFetchedMessages } from '../state/messages';
-import { openPrivateChat, closePrivateChat } from '../state/privateChats';
-import { getSearch, searchMessages, toggleSearch } from '../state/search';
-import { getCurrentNick, disconnect, setNick, setServerName } from '../state/servers';
-import { getSelectedTab, select } from '../state/tab';
-import { getShowUserList, toggleUserList } from '../state/ui';
+  runCommand, sendMessage, fetchMessages, addFetchedMessages } from 'state/messages';
+import { openPrivateChat, closePrivateChat } from 'state/privateChats';
+import { getSearch, searchMessages, toggleSearch } from 'state/search';
+import { getCurrentNick, disconnect, setNick, setServerName } from 'state/servers';
+import { getSelectedTab, select } from 'state/tab';
+import { getShowUserList, toggleUserList } from 'state/ui';
 
 const mapState = createStructuredSelector({
   channel: getSelectedChannel,

client/src/js/containers/Connect.js

@@ -1,10 +1,10 @@
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
-import Connect from '../components/pages/Connect';
-import { getConnectDefaults } from '../state/app';
-import { join } from '../state/channels';
-import { connect as connectServer } from '../state/servers';
-import { select } from '../state/tab';
+import Connect from 'components/pages/Connect';
+import { getConnectDefaults } from 'state/app';
+import { join } from 'state/channels';
+import { connect as connectServer } from 'state/servers';
+import { select } from 'state/tab';
 
 const mapState = createStructuredSelector({
   defaults: getConnectDefaults

client/src/js/containers/Navicon.js

@@ -1,7 +1,9 @@
 import { connect } from 'react-redux';
-import Navicon from '../components/Navicon';
-import { toggleMenu } from '../state/ui';
+import Navicon from 'components/ui/Navicon';
+import { toggleMenu } from 'state/ui';
 
-const mapDispatch = { toggleMenu };
+const mapDispatch = {
+  onClick: toggleMenu
+};
 
 export default connect(null, mapDispatch)(Navicon);

client/src/js/containers/Settings.js

@@ -1,8 +1,8 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
-import Settings from '../components/pages/Settings';
-import { getSettings, setCert, setKey, uploadCert } from '../state/settings';
+import Settings from 'components/pages/Settings';
+import { getSettings, setCert, setKey, uploadCert } from 'state/settings';
 
 const mapState = createStructuredSelector({
   settings: getSettings

client/src/js/index.js

@@ -3,11 +3,11 @@ import { render } from 'react-dom';
 import { AppContainer } from 'react-hot-loader';
 import 'react-virtualized/styles.css';
 
+import Root from 'components/Root';
+import initRouter from 'util/router';
+import Socket from 'util/Socket';
 import configureStore from './store';
-import initRouter from './util/router';
 import routes from './routes';
-import Socket from './util/Socket';
-import Root from './components/Root';
 import runModules from './modules';
 
 const host = DEV ? `${window.location.hostname}:1337` : window.location.host;

client/src/js/middleware/command.js

@@ -1,5 +1,5 @@
-import { addMessages, inform, print } from '../state/messages';
-import { isChannel } from '../util';
+import { addMessages, inform, print } from 'state/messages';
+import { isChannel } from 'util';
 
 export const beforeHandler = '_before';
 export const notFoundHandler = 'commandNotFound';

client/src/js/middleware/message.js

@@ -1,4 +1,4 @@
-import * as actions from '../state/actions';
+import { ADD_MESSAGES, ADD_FETCHED_MESSAGES } from 'state/actions';
 
 //
 // This middleware handles waiting until MessageBox
@@ -9,7 +9,7 @@ const message = store => next => {
   const cache = {};
 
   return action => {
-    if (action.type === actions.ADD_MESSAGES && action.prepend) {
+    if (action.type === ADD_MESSAGES && action.prepend) {
       const key = `${action.server} ${action.channel}`;
 
       if (ready[key]) {
@@ -18,7 +18,7 @@ const message = store => next => {
       }
 
       cache[key] = action;
-    } else if (action.type === actions.ADD_FETCHED_MESSAGES) {
+    } else if (action.type === ADD_FETCHED_MESSAGES) {
       const key = `${action.server} ${action.channel}`;
       ready[key] = true;
 

client/src/js/modules/documentTitle.js

@@ -1,7 +1,7 @@
 import capitalize from 'lodash/capitalize';
-import { getRouter } from '../state';
-import { getCurrentServerName } from '../state/servers';
-import { observe } from '../util/observe';
+import { getRouter } from 'state';
+import { getCurrentServerName } from 'state/servers';
+import { observe } from 'util/observe';
 
 export default function documentTitle({ store }) {
   observe(store, [getRouter, getCurrentServerName], (router, serverName) => {

client/src/js/modules/fonts.js

@@ -1,6 +1,6 @@
 import FontFaceObserver from 'fontfaceobserver';
-import { setCharWidth } from '../state/app';
-import { stringWidth } from '../util';
+import { setCharWidth } from 'state/app';
+import { stringWidth } from 'util';
 
 export default function fonts({ store }) {
   let charWidth = localStorage.charWidth;

client/src/js/modules/initialState.js

@@ -1,11 +1,11 @@
 import Cookie from 'js-cookie';
-import { socket as socketActions } from '../state/actions';
-import { getWrapWidth, setConnectDefaults } from '../state/app';
-import { addMessages } from '../state/messages';
-import { select, updateSelection } from '../state/tab';
-import { find } from '../util';
-import { when } from '../util/observe';
-import { replace } from '../util/router';
+import { socket as socketActions } from 'state/actions';
+import { getWrapWidth, setConnectDefaults } from 'state/app';
+import { addMessages } from 'state/messages';
+import { select, updateSelection } from 'state/tab';
+import { find } from 'util';
+import { when } from 'util/observe';
+import { replace } from 'util/router';
 
 export default function initialState({ store }) {
   const env = JSON.parse(document.getElementById('env').innerHTML);

client/src/js/modules/socket.js

@@ -1,9 +1,9 @@
-import { socketAction } from '../state/actions';
-import { setConnected } from '../state/app';
-import { broadcast, inform, print, addMessage, addMessages } from '../state/messages';
-import { select } from '../state/tab';
-import { normalizeChannel } from '../util';
-import { replace } from '../util/router';
+import { socketAction } from 'state/actions';
+import { setConnected } from 'state/app';
+import { broadcast, inform, print, addMessage, addMessages } from 'state/messages';
+import { select } from 'state/tab';
+import { normalizeChannel } from 'util';
+import { replace } from 'util/router';
 
 function withReason(message, reason) {
   return message + (reason ? ` (${reason})` : '');

client/src/js/modules/storage.js

@@ -1,7 +1,7 @@
 import Cookie from 'js-cookie';
 import debounce from 'lodash/debounce';
-import { observe } from '../util/observe';
-import { getSelectedTab } from '../state/tab';
+import { getSelectedTab } from 'state/tab';
+import { observe } from 'util/observe';
 
 const saveTab = debounce(tab =>
   Cookie.set('tab', tab.toString(), { expires: 30 })

client/src/js/modules/widthUpdates.js

@@ -1,7 +1,7 @@
-import { when } from '../util/observe';
-import { measureScrollBarWidth } from '../util';
-import { getCharWidth } from '../state/app';
-import { updateMessageHeight } from '../state/messages';
+import { getCharWidth } from 'state/app';
+import { updateMessageHeight } from 'state/messages';
+import { when } from 'util/observe';
+import { measureScrollBarWidth } from 'util';
 
 const menuWidth = 200;
 const messagePadding = 30;

client/src/js/state/app.js

@@ -1,5 +1,5 @@
 import { Record } from 'immutable';
-import createReducer from '../util/createReducer';
+import createReducer from 'util/createReducer';
 import * as actions from './actions';
 
 export const getApp = state => state.app;

client/src/js/state/channels.js

@@ -1,6 +1,6 @@
 import { Map, List, Record } from 'immutable';
 import { createSelector } from 'reselect';
-import createReducer from '../util/createReducer';
+import createReducer from 'util/createReducer';
 import { getSelectedTab, updateSelection } from './tab';
 import * as actions from './actions';
 

client/src/js/state/input.js

@@ -1,5 +1,5 @@
 import { List, Record } from 'immutable';
-import createReducer from '../util/createReducer';
+import createReducer from 'util/createReducer';
 import * as actions from './actions';
 
 const HISTORY_MAX_LENGTH = 128;

client/src/js/state/messages.js

@@ -1,9 +1,9 @@
 import { List, Map, Record } from 'immutable';
 import { createSelector } from 'reselect';
-import createReducer from '../util/createReducer';
+import { findBreakpoints, messageHeight, linkify, timestamp } from 'util';
+import createReducer from 'util/createReducer';
 import { getApp } from './app';
 import { getSelectedTab } from './tab';
-import { findBreakpoints, messageHeight, linkify, timestamp } from '../util';
 import * as actions from './actions';
 
 const Message = Record({

client/src/js/state/privateChats.js

@@ -1,5 +1,5 @@
 import { Set, Map } from 'immutable';
-import createReducer from '../util/createReducer';
+import createReducer from 'util/createReducer';
 import { updateSelection } from './tab';
 import * as actions from './actions';
 

client/src/js/state/search.js

@@ -1,5 +1,5 @@
 import { List, Record } from 'immutable';
-import createReducer from '../util/createReducer';
+import createReducer from 'util/createReducer';
 import * as actions from './actions';
 
 const State = Record({

client/src/js/state/servers.js

@@ -1,6 +1,6 @@
 import { Map, Record } from 'immutable';
 import { createSelector } from 'reselect';
-import createReducer from '../util/createReducer';
+import createReducer from 'util/createReducer';
 import { getSelectedTab, updateSelection } from './tab';
 import * as actions from './actions';
 

client/src/js/state/settings.js

@@ -1,6 +1,6 @@
 import { Map } from 'immutable';
 import base64 from 'base64-arraybuffer';
-import createReducer from '../util/createReducer';
+import createReducer from 'util/createReducer';
 import * as actions from './actions';
 
 export const getSettings = state => state.settings;

client/src/js/state/tab.js

@@ -1,6 +1,6 @@
 import { Record, List } from 'immutable';
-import { push, replace, LOCATION_CHANGED } from '../util/router';
-import createReducer from '../util/createReducer';
+import createReducer from 'util/createReducer';
+import { push, replace, LOCATION_CHANGED } from 'util/router';
 import * as actions from './actions';
 
 const TabRecord = Record({

client/src/js/state/ui.js

@@ -1,6 +1,6 @@
 import { Record } from 'immutable';
-import createReducer from '../util/createReducer';
-import { LOCATION_CHANGED } from '../util/router';
+import createReducer from 'util/createReducer';
+import { LOCATION_CHANGED } from 'util/router';
 import * as actions from './actions';
 
 const State = Record({

client/src/js/store.js

@@ -1,7 +1,7 @@
 import { createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
-import createReducer from './state';
-import { routeReducer, routeMiddleware } from './util/router';
+import createReducer from 'state';
+import { routeReducer, routeMiddleware } from 'util/router';
 import message from './middleware/message';
 import createSocketMiddleware from './middleware/socket';
 import commands from './commands';