From e105b8fa07eda6dbeee17c57c5c82ec0405b343b Mon Sep 17 00:00:00 2001 From: HF Date: Mon, 11 Jul 2022 15:33:29 +0200 Subject: [PATCH] refactor store --- src/client.js | 7 +- src/components/App.jsx | 7 +- src/controls/keypress.js | 151 ++++++++++++++++++------------------ src/store/configureStore.js | 61 ++++++++++++--- src/store/reducers/index.js | 42 ---------- src/ui/store.js | 10 --- 6 files changed, 131 insertions(+), 147 deletions(-) delete mode 100644 src/store/reducers/index.js delete mode 100644 src/ui/store.js diff --git a/src/client.js b/src/client.js index b7df02d..472ff24 100644 --- a/src/client.js +++ b/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 diff --git a/src/components/App.jsx b/src/components/App.jsx index f86b67f..6e10dd5 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -1,6 +1,5 @@ /** - * - * @flow + * Main App */ 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 = () => ( ); -function renderApp(domParent) { +function renderApp(domParent, store) { ReactDOM.render( diff --git a/src/controls/keypress.js b/src/controls/keypress.js index 9501a52..00ee36c 100644 --- a/src/controls/keypress.js +++ b/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) { - // ignore key presses if modal is open or chat is used - 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')) { +function createKeyPressHandler(store) { + return (event) => { + // ignore key presses if modal is open or chat is used + if (event.target.nodeName === 'INPUT' + || event.target.nodeName === 'TEXTAREA' + ) { 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()); + 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; - 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: - } + + /* + * 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) { + 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; diff --git a/src/store/configureStore.js b/src/store/configureStore.js index 90c22b0..f76740e 100644 --- a/src/store/configureStore.js +++ b/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, null, () => { - if (onComplete) { - onComplete(store); - } - }); - return store; -} +persistStore(store); + +export default store; diff --git a/src/store/reducers/index.js b/src/store/reducers/index.js deleted file mode 100644 index 1e7357c..0000000 --- a/src/store/reducers/index.js +++ /dev/null @@ -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, -}); diff --git a/src/ui/store.js b/src/ui/store.js deleted file mode 100644 index 9864e97..0000000 --- a/src/ui/store.js +++ /dev/null @@ -1,10 +0,0 @@ -/** - * - * @flow - */ - -import configureStore from '../store/configureStore'; - -const store = configureStore(() => null); - -export default store;