refactor store
This commit is contained in:
parent
2789cd2a54
commit
e105b8fa07
|
@ -5,7 +5,7 @@
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import fetch from 'isomorphic-fetch'; // TODO put in the beggining with webpack!
|
import fetch from 'isomorphic-fetch'; // TODO put in the beggining with webpack!
|
||||||
|
|
||||||
import onKeyPress from './controls/keypress';
|
import createKeyPressHandler from './controls/keypress';
|
||||||
import {
|
import {
|
||||||
fetchMe,
|
fetchMe,
|
||||||
initTimer,
|
initTimer,
|
||||||
|
@ -22,7 +22,7 @@ import {
|
||||||
receivePixelUpdate,
|
receivePixelUpdate,
|
||||||
receivePixelReturn,
|
receivePixelReturn,
|
||||||
} from './ui/placePixel';
|
} from './ui/placePixel';
|
||||||
import store from './ui/store';
|
import store from './store/configureStore';
|
||||||
|
|
||||||
|
|
||||||
import renderApp from './components/App';
|
import renderApp from './components/App';
|
||||||
|
@ -121,8 +121,9 @@ function init() {
|
||||||
init();
|
init();
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
renderApp(document.getElementById('app'));
|
renderApp(document.getElementById('app'), store);
|
||||||
|
|
||||||
|
const onKeyPress = createKeyPressHandler(store);
|
||||||
document.addEventListener('keydown', onKeyPress, false);
|
document.addEventListener('keydown', onKeyPress, false);
|
||||||
|
|
||||||
// garbage collection
|
// garbage collection
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
/**
|
/**
|
||||||
*
|
* Main App
|
||||||
* @flow
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
@ -8,8 +7,6 @@ import { Provider } from 'react-redux';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import { IconContext } from 'react-icons';
|
import { IconContext } from 'react-icons';
|
||||||
|
|
||||||
import store from '../ui/store';
|
|
||||||
|
|
||||||
import Style from './Style';
|
import Style from './Style';
|
||||||
import CoordinatesBox from './CoordinatesBox';
|
import CoordinatesBox from './CoordinatesBox';
|
||||||
import CanvasSwitchButton from './buttons/CanvasSwitchButton';
|
import CanvasSwitchButton from './buttons/CanvasSwitchButton';
|
||||||
|
@ -41,7 +38,7 @@ const App = () => (
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
function renderApp(domParent) {
|
function renderApp(domParent, store) {
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<Provider store={store}>
|
<Provider store={store}>
|
||||||
<App />
|
<App />
|
||||||
|
|
|
@ -2,7 +2,6 @@
|
||||||
* keypress actions
|
* keypress actions
|
||||||
*/
|
*/
|
||||||
import { t } from 'ttag';
|
import { t } from 'ttag';
|
||||||
import store from '../ui/store';
|
|
||||||
import copy from '../utils/clipboard';
|
import copy from '../utils/clipboard';
|
||||||
import {
|
import {
|
||||||
toggleGrid,
|
toggleGrid,
|
||||||
|
@ -16,85 +15,87 @@ import {
|
||||||
|
|
||||||
const usedKeys = ['g', 'h', 'x', 'm', 'r', 'p'];
|
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;
|
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;
|
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;
|
||||||
|
|
|
@ -1,8 +1,27 @@
|
||||||
import { applyMiddleware, createStore, compose } from 'redux';
|
import { applyMiddleware, createStore, compose } from 'redux';
|
||||||
import thunk from 'redux-thunk';
|
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 socketClientHook from './middleware/socketClientHook';
|
||||||
import rendererHook from './middleware/rendererHook';
|
import rendererHook from './middleware/rendererHook';
|
||||||
// import ads from './ads';
|
// import ads from './ads';
|
||||||
|
@ -12,8 +31,31 @@ import notifications from './middleware/notifications';
|
||||||
import title from './middleware/title';
|
import title from './middleware/title';
|
||||||
import placePixelControl from './middleware/placePixelControl';
|
import placePixelControl from './middleware/placePixelControl';
|
||||||
import extensions from './middleware/extensions';
|
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(
|
const store = createStore(
|
||||||
reducers,
|
reducers,
|
||||||
|
@ -23,7 +65,7 @@ const store = createStore(
|
||||||
thunk,
|
thunk,
|
||||||
promise,
|
promise,
|
||||||
array,
|
array,
|
||||||
audio,
|
audiom,
|
||||||
notifications,
|
notifications,
|
||||||
title,
|
title,
|
||||||
socketClientHook,
|
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;
|
|
||||||
}
|
|
||||||
|
|
|
@ -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,
|
|
||||||
});
|
|
|
@ -1,10 +0,0 @@
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @flow
|
|
||||||
*/
|
|
||||||
|
|
||||||
import configureStore from '../store/configureStore';
|
|
||||||
|
|
||||||
const store = configureStore(() => null);
|
|
||||||
|
|
||||||
export default store;
|
|
Loading…
Reference in New Issue
Block a user