refactor store

src/client.js

@@ -5,7 +5,7 @@
 // eslint-disable-next-line no-unused-vars
 import fetch from 'isomorphic-fetch'; // TODO put in the beggining with webpack!
 
-import onKeyPress from './controls/keypress';
+import createKeyPressHandler from './controls/keypress';
 import {
   fetchMe,
   initTimer,
@@ -22,7 +22,7 @@ import {
   receivePixelUpdate,
   receivePixelReturn,
 } from './ui/placePixel';
-import store from './ui/store';
+import store from './store/configureStore';
 
 
 import renderApp from './components/App';
@@ -121,8 +121,9 @@ function init() {
 init();
 
 document.addEventListener('DOMContentLoaded', () => {
-  renderApp(document.getElementById('app'));
+  renderApp(document.getElementById('app'), store);
 
+  const onKeyPress = createKeyPressHandler(store);
   document.addEventListener('keydown', onKeyPress, false);
 
   // garbage collection

src/components/App.jsx

@@ -1,6 +1,5 @@
 /**
- *
+ * Main App
- * @flow
  */
 
 import React from 'react';
@@ -8,8 +7,6 @@ import { Provider } from 'react-redux';
 import ReactDOM from 'react-dom';
 import { IconContext } from 'react-icons';
 
-import store from '../ui/store';
-
 import Style from './Style';
 import CoordinatesBox from './CoordinatesBox';
 import CanvasSwitchButton from './buttons/CanvasSwitchButton';
@@ -41,7 +38,7 @@ const App = () => (
   </div>
 );
 
-function renderApp(domParent) {
+function renderApp(domParent, store) {
   ReactDOM.render(
     <Provider store={store}>
       <App />

src/controls/keypress.js

@@ -2,7 +2,6 @@
  * keypress actions
  */
 import { t } from 'ttag';
-import store from '../ui/store';
 import copy from '../utils/clipboard';
 import {
   toggleGrid,
@@ -16,85 +15,87 @@ import {
 
 const usedKeys = ['g', 'h', 'x', 'm', 'r', 'p'];
 
-function onKeyPress(event) {
+function createKeyPressHandler(store) {
-  // ignore key presses if modal is open or chat is used
+  return (event) => {
-  if (event.target.nodeName === 'INPUT'
+    // ignore key presses if modal is open or chat is used
-    || event.target.nodeName === 'TEXTAREA'
+    if (event.target.nodeName === 'INPUT'
-  ) {
+      || event.target.nodeName === 'TEXTAREA'
-    return;
+    ) {
-  }
-
-  let { key } = event;
-
-  const num = Number(key);
-  if (!Number.isNaN(num) && num > 0) {
-    // switch to canvas on num keys
-    const { canvases, canvasId: curCanvasId } = store.getState().canvas;
-    const canvasIds = Object.keys(canvases).filter((id) => !canvases[id].hid);
-    if (num <= canvasIds.length) {
-      const canvasId = canvasIds[num - 1];
-      // eslint-disable-next-line eqeqeq
-      if (canvasId != curCanvasId) {
-        store.dispatch(selectCanvas(canvasId));
-        const canvasName = canvases[canvasId].title;
-        store.dispatch(notify(t`Switched to ${canvasName}`));
-      }
-    }
-    return;
-  }
-
-  /*
-   * if char of key isn't used by a keybind,
-   * we check if the key location is where a
-   * key that is used would be on QWERTY
-   */
-  if (!usedKeys.includes(key)) {
-    key = event.code;
-    if (!key.startsWith('Key')) {
       return;
     }
-    key = key.slice(-1).toLowerCase();
-  }
 
-  switch (key) {
+    let { key } = event;
-    case 'g':
+
-      store.dispatch(toggleGrid());
+    const num = Number(key);
-      store.dispatch(notify((store.getState().gui.showGrid)
+    if (!Number.isNaN(num) && num > 0) {
-        ? t`Grid ON`
+      // switch to canvas on num keys
-        : t`Grid OFF`));
+      const { canvases, canvasId: curCanvasId } = store.getState().canvas;
-      return;
+      const canvasIds = Object.keys(canvases).filter((id) => !canvases[id].hid);
-    case 'h':
+      if (num <= canvasIds.length) {
-      if (window.ssv && window.ssv.backupurl) {
+        const canvasId = canvasIds[num - 1];
-        store.dispatch(toggleHistoricalView());
+        // eslint-disable-next-line eqeqeq
+        if (canvasId != curCanvasId) {
+          store.dispatch(selectCanvas(canvasId));
+          const canvasName = canvases[canvasId].title;
+          store.dispatch(notify(t`Switched to ${canvasName}`));
+        }
       }
       return;
-    case 'x':
-      store.dispatch(togglePixelNotify());
-      store.dispatch(notify((store.getState().gui.showPixelNotify)
-        ? t`Pixel Notify ON`
-        : t`Pixel Notify OFF`));
-      return;
-    case 'm':
-      store.dispatch(toggleMute());
-      store.dispatch(notify((store.getState().audio.mute)
-        ? t`Muted Sound`
-        : t`Unmuted Sound`));
-      return;
-    case 'r': {
-      const { hover } = store.getState().gui;
-      const text = hover.join('_');
-      copy(text);
-      store.dispatch(notify(t`Copied!`));
-      return;
     }
-    case 'p':
+
-      store.dispatch(toggleHiddenCanvases());
+    /*
-      store.dispatch(notify((store.getState().canvas.showHiddenCanvases)
+     * if char of key isn't used by a keybind,
-        ? t`Show Hidden Canvases`
+     * we check if the key location is where a
-        : t`Hide Hidden Canvases`));
+     * key that is used would be on QWERTY
-      break;
+     */
-    default:
+    if (!usedKeys.includes(key)) {
-  }
+      key = event.code;
+      if (!key.startsWith('Key')) {
+        return;
+      }
+      key = key.slice(-1).toLowerCase();
+    }
+
+    switch (key) {
+      case 'g':
+        store.dispatch(toggleGrid());
+        store.dispatch(notify((store.getState().gui.showGrid)
+          ? t`Grid ON`
+          : t`Grid OFF`));
+        return;
+      case 'h':
+        if (window.ssv && window.ssv.backupurl) {
+          store.dispatch(toggleHistoricalView());
+        }
+        return;
+      case 'x':
+        store.dispatch(togglePixelNotify());
+        store.dispatch(notify((store.getState().gui.showPixelNotify)
+          ? t`Pixel Notify ON`
+          : t`Pixel Notify OFF`));
+        return;
+      case 'm':
+        store.dispatch(toggleMute());
+        store.dispatch(notify((store.getState().audio.mute)
+          ? t`Muted Sound`
+          : t`Unmuted Sound`));
+        return;
+      case 'r': {
+        const { hover } = store.getState().gui;
+        const text = hover.join('_');
+        copy(text);
+        store.dispatch(notify(t`Copied!`));
+        return;
+      }
+      case 'p':
+        store.dispatch(toggleHiddenCanvases());
+        store.dispatch(notify((store.getState().canvas.showHiddenCanvases)
+          ? t`Show Hidden Canvases`
+          : t`Hide Hidden Canvases`));
+        break;
+      default:
+    }
+  };
 }
 
-export default onKeyPress;
+export default createKeyPressHandler;

src/store/configureStore.js

@@ -1,8 +1,27 @@
 import { applyMiddleware, createStore, compose } from 'redux';
 import thunk from 'redux-thunk';
-import { persistStore } from 'redux-persist';
+import { persistStore, persistCombineReducers } from 'redux-persist';
+import localForage from 'localforage';
 
-import audio from './middleware/audio';
+/*
+ * reducers
+ */
+import audio from './reducers/audio';
+import canvas from './reducers/canvas';
+import gui from './reducers/gui';
+import windows from './reducers/windows';
+import user from './reducers/user';
+import ranks from './reducers/ranks';
+import alert from './reducers/alert';
+import chat from './reducers/chat';
+import contextMenu from './reducers/contextMenu';
+import chatRead from './reducers/chatRead';
+import fetching from './reducers/fetching';
+
+/*
+ * middleware
+ */
+import audiom from './middleware/audio';
 import socketClientHook from './middleware/socketClientHook';
 import rendererHook from './middleware/rendererHook';
 // import ads from './ads';
@@ -12,8 +31,31 @@ import notifications from './middleware/notifications';
 import title from './middleware/title';
 import placePixelControl from './middleware/placePixelControl';
 import extensions from './middleware/extensions';
-import reducers from './reducers';
 
+const reducers = persistCombineReducers({
+  key: 'primary',
+  storage: localForage,
+  blacklist: [
+    'user',
+    'canvas',
+    'alert',
+    'chat',
+    'contextMenu',
+    'fetching',
+  ],
+}, {
+  audio,
+  canvas,
+  gui,
+  windows,
+  user,
+  ranks,
+  alert,
+  chat,
+  contextMenu,
+  chatRead,
+  fetching,
+});
 
 const store = createStore(
   reducers,
@@ -23,7 +65,7 @@ const store = createStore(
       thunk,
       promise,
       array,
-      audio,
+      audiom,
       notifications,
       title,
       socketClientHook,
@@ -35,11 +77,6 @@ const store = createStore(
 );
 
 
-export default function configureStore(onComplete) {
+persistStore(store);
-  persistStore(store, null, () => {
+
-    if (onComplete) {
+export default store;
-      onComplete(store);
-    }
-  });
-  return store;
-}

src/store/reducers/index.js

@@ -1,42 +0,0 @@
-/* @flow */
-
-import { persistCombineReducers } from 'redux-persist';
-import localForage from 'localforage';
-import audio from './audio';
-import canvas from './canvas';
-import gui from './gui';
-import windows from './windows';
-import user from './user';
-import ranks from './ranks';
-import alert from './alert';
-import chat from './chat';
-import contextMenu from './contextMenu';
-import chatRead from './chatRead';
-import fetching from './fetching';
-
-const config = {
-  key: 'primary',
-  storage: localForage,
-  blacklist: [
-    'user',
-    'canvas',
-    'alert',
-    'chat',
-    'contextMenu',
-    'fetching',
-  ],
-};
-
-export default persistCombineReducers(config, {
-  audio,
-  canvas,
-  gui,
-  windows,
-  user,
-  ranks,
-  alert,
-  chat,
-  contextMenu,
-  chatRead,
-  fetching,
-});

src/ui/store.js

@@ -1,10 +0,0 @@
-/**
- *
- * @flow
- */
-
-import configureStore from '../store/configureStore';
-
-const store = configureStore(() => null);
-
-export default store;