From df44445720b9c6413a4d7c69d77b99e10fd5e967 Mon Sep 17 00:00:00 2001 From: HF Date: Wed, 17 Aug 2022 21:02:50 +0200 Subject: [PATCH] split persistent reducers --- src/client.js | 2 +- src/components/windows/Chat.jsx | 5 +- src/store/configureStoreWin.js | 68 --------- src/store/reducers/windows.js | 159 ++++++++++++---------- src/store/sharedReducers.js | 51 +++++++ src/store/{configureStore.js => store.js} | 47 ++----- src/store/storeWin.js | 45 ++++++ src/win.js | 2 +- 8 files changed, 202 insertions(+), 177 deletions(-) delete mode 100644 src/store/configureStoreWin.js create mode 100644 src/store/sharedReducers.js rename src/store/{configureStore.js => store.js} (66%) create mode 100644 src/store/storeWin.js diff --git a/src/client.js b/src/client.js index 8f851ba..8c50d4e 100644 --- a/src/client.js +++ b/src/client.js @@ -21,7 +21,7 @@ import { receivePixelUpdate, receivePixelReturn, } from './ui/placePixel'; -import store from './store/configureStore'; +import store from './store/store'; import renderApp from './components/App'; diff --git a/src/components/windows/Chat.jsx b/src/components/windows/Chat.jsx index 458dd74..06163a7 100644 --- a/src/components/windows/Chat.jsx +++ b/src/components/windows/Chat.jsx @@ -224,7 +224,10 @@ const Chat = ({
dispatch(showUserAreaModal())} + onClick={(evt) => { + evt.stopPropagation(); + dispatch(showUserAreaModal()); + }} style={{ textAlign: 'center', fontSize: 13, diff --git a/src/store/configureStoreWin.js b/src/store/configureStoreWin.js deleted file mode 100644 index 2175389..0000000 --- a/src/store/configureStoreWin.js +++ /dev/null @@ -1,68 +0,0 @@ -/* - * redux store for windows / popups - */ - -/* eslint-disable no-console */ - -import { - applyMiddleware, createStore, compose, combineReducers, -} from 'redux'; -import thunk from 'redux-thunk'; -import { persistStore, persistReducer } from 'redux-persist'; -import storage from 'redux-persist/lib/storage'; - -/* - * reducers - */ -import canvas from './reducers/canvas'; -import gui from './reducers/gui'; -import win from './reducers/win'; - -/* - * middleware - */ -import promise from './middleware/promise'; - -const CURRENT_VERSION = 3; - -const reducers = persistReducer({ - key: 'primary', - storage, - version: CURRENT_VERSION, - migrate: (state, version) => { - console.log(state); - if (version !== CURRENT_VERSION) { - console.log('Newer version run, resetting store.'); - return Promise.resolve({}); - } - console.log(`Store version: ${version}`); - return Promise.resolve(state); - }, - blacklist: [ - 'canvas', - 'win', - ], -}, combineReducers({ - canvas, - gui, - win, -})); - -const store = createStore( - reducers, - undefined, - compose( - applyMiddleware( - thunk, - promise, - ), - ), -); - - -export const persistor = persistStore(store); - -export default store; - - -// persistent stores: gui, windows, ranks, chatRead; diff --git a/src/store/reducers/windows.js b/src/store/reducers/windows.js index a54ca19..d245836 100644 --- a/src/store/reducers/windows.js +++ b/src/store/reducers/windows.js @@ -68,6 +68,54 @@ function clampPos(prefXPos, prefYPos, width, height) { ]; } +/* + * correct window positions according to screensize + * to make sure that none if off-screen + */ +function correctPositions(state) { + const { + innerWidth: width, + innerHeight: height, + } = window; + + const { windows: newWindows, positions } = state; + const xMax = width - SCREEN_MARGIN_EW; + const yMax = height - SCREEN_MARGIN_S; + + let modified = false; + const newPositions = {}; + for (let i = 0; i < newWindows.length; i += 1) { + const id = newWindows[i].windowId; + const { + xPos, + yPos, + width: winWidth, + height: winHeight, + } = positions[id]; + if (xPos > xMax || yPos > yMax + || width > winWidth || height > winHeight) { + modified = true; + newPositions[id] = { + xPos: Math.min(xMax, xPos), + yPos: Math.min(yMax, yPos), + width: Math.min(winWidth, width - SCREEN_MARGIN_S), + height: Math.min(winHeight, height - SCREEN_MARGIN_S), + z: positions[id].z, + }; + } else { + newPositions[id] = positions[id]; + } + } + + if (!modified) { + return state; + } + return { + ...state, + positions: newPositions, + }; +} + /* * resort the zIndex, remove gaps */ @@ -446,90 +494,53 @@ export default function windows( }; } - case 'persist/REHYDRATE': - case 'WIN_RESIZE': { - const { - innerWidth: width, - innerHeight: height, - } = window; - - let { windows: newWindows, args, positions } = state; - const showWindows = width > SCREEN_WIDTH_THRESHOLD; - - if (action.type === 'persist/REHYDRATE') { - console.log('persist', state, action.payload); - if (!showWindows) { - // reset on phones on every refresh - return initialState; - } - - args = { ...args }; - positions = { ...positions }; - - newWindows = newWindows.filter((win) => { - if (win.open && (win.fullscreen || showWindows)) { - return true; - } - // eslint-disable-next-line no-console - console.log( - `Cleaning up window from previous session: ${win.windowId}`, - ); - delete args[win.windowId]; - delete positions[win.windowId]; - return false; - }); + case 'persist/REHYDRATE': { + const { showWindows } = state; + if (!showWindows) { + // don't persist on small screens + return state; } + const loadedState = { + ...state, + ...action.payload.windows, + }; + const args = { ...loadedState.args }; + const positions = { ...loadedState.positions }; + + const newWindows = loadedState.windows.filter((win) => { + if (win.open && (win.fullscreen || showWindows)) { + return true; + } + // eslint-disable-next-line no-console + console.log( + `Cleaning up window from previous session: ${win.windowId}`, + ); + delete args[win.windowId]; + delete positions[win.windowId]; + return false; + }); + + return sortWindows(correctPositions({ + ...loadedState, + windows: newWindows, + args, + positions, + })); + } + + case 'WIN_RESIZE': { + const showWindows = window.innerWidth > SCREEN_WIDTH_THRESHOLD; if (!showWindows) { return { ...state, - windows: newWindows, showWindows, - args, - positions, }; } - - const xMax = width - SCREEN_MARGIN_EW; - const yMax = height - SCREEN_MARGIN_S; - let modified = false; - const newPositions = {}; - - for (let i = 0; i < newWindows.length; i += 1) { - const id = newWindows[i].windowId; - const { - xPos, - yPos, - width: winWidth, - height: winHeight, - } = positions[id]; - if (xPos > xMax || yPos > yMax - || width > winWidth || height > winHeight) { - modified = true; - newPositions[id] = { - xPos: Math.min(xMax, xPos), - yPos: Math.min(yMax, yPos), - width: Math.min(winWidth, width - SCREEN_MARGIN_S), - height: Math.min(winHeight, height - SCREEN_MARGIN_S), - z: positions[id].z, - }; - } else { - newPositions[id] = positions[id]; - } - } - if (modified) { - positions = newPositions; - } - - return { - ...state, - windows: newWindows, - showWindows: true, - args, - positions, - }; + return correctPositions(state); } + case 'SET_WIN_TITLE': { const { windowId, diff --git a/src/store/sharedReducers.js b/src/store/sharedReducers.js new file mode 100644 index 0000000..22606de --- /dev/null +++ b/src/store/sharedReducers.js @@ -0,0 +1,51 @@ +/* + * reducers that are shared between pages + */ + +/* eslint-disable no-console */ + +import { persistReducer } from 'redux-persist'; +import storage from 'redux-persist/lib/storage'; + +import gui from './reducers/gui'; +import ranks from './reducers/ranks'; +import chatRead from './reducers/chatRead'; + +export const CURRENT_VERSION = 8; + +export const migrate = (state, version) => { + if (!state || version !== CURRENT_VERSION) { + console.log('Newer version run, resetting store.'); + return Promise.resolve({}); + } + console.log(`Store version: ${version}`); + return Promise.resolve(state); +}; + +const guiPersist = persistReducer({ + key: 'gui', + storage, + version: CURRENT_VERSION, + migrate, + blacklist: ['hover'], +}, gui); + +const ranksPersist = persistReducer({ + key: 'ranks', + storage, + version: CURRENT_VERSION, + migrate, +}, ranks); + +const chatReadPersist = persistReducer({ + key: 'cr', + storage, + version: CURRENT_VERSION, + migrate, +}, chatRead); + +export default { + gui: guiPersist, + ranks: ranksPersist, + chatRead: chatReadPersist, +}; diff --git a/src/store/configureStore.js b/src/store/store.js similarity index 66% rename from src/store/configureStore.js rename to src/store/store.js index 1e3597d..566e9c4 100644 --- a/src/store/configureStore.js +++ b/src/store/store.js @@ -2,8 +2,6 @@ * redux store */ -/* eslint-disable no-console */ - import { applyMiddleware, createStore, compose, combineReducers, } from 'redux'; @@ -11,17 +9,19 @@ import thunk from 'redux-thunk'; import { persistStore, persistReducer } from 'redux-persist'; import storage from 'redux-persist/lib/storage'; +import sharedReducers, { + CURRENT_VERSION, + migrate, +} from './sharedReducers'; + /* * reducers */ -import canvas from './reducers/canvas'; -import gui from './reducers/gui'; import windows from './reducers/windows'; +import canvas from './reducers/canvas'; import user from './reducers/user'; -import ranks from './reducers/ranks'; import alert from './reducers/alert'; import chat from './reducers/chat'; -import chatRead from './reducers/chatRead'; import fetching from './reducers/fetching'; /* @@ -36,39 +36,22 @@ import notifications from './middleware/notifications'; import title from './middleware/title'; import extensions from './middleware/extensions'; -const CURRENT_VERSION = 5; - -const reducers = persistReducer({ - key: 'primary', +const windowsPersist = persistReducer({ + key: 'wind', storage, version: CURRENT_VERSION, - migrate: (state, version) => { - console.log(state); - if (version !== CURRENT_VERSION) { - console.log('Newer version run, resetting store.'); - return Promise.resolve({}); - } - console.log(`Store version: ${version}`); - return Promise.resolve(state); - }, - blacklist: [ - 'user', - 'canvas', - 'alert', - 'chat', - 'fetching', - ], -}, combineReducers({ + migrate, +}, windows); + +const reducers = combineReducers({ + ...sharedReducers, + windows: windowsPersist, canvas, - gui, - windows, user, - ranks, alert, chat, - chatRead, fetching, -})); +}); const store = createStore( reducers, diff --git a/src/store/storeWin.js b/src/store/storeWin.js new file mode 100644 index 0000000..022e2a6 --- /dev/null +++ b/src/store/storeWin.js @@ -0,0 +1,45 @@ +/* + * redux store for windows / popups + */ + +/* eslint-disable no-console */ + +import { + applyMiddleware, createStore, compose, combineReducers, +} from 'redux'; +import thunk from 'redux-thunk'; +import { persistStore } from 'redux-persist'; + +/* + * reducers + */ +import sharedReducers from './sharedReducers'; +import canvas from './reducers/canvas'; +import win from './reducers/win'; + +/* + * middleware + */ +import promise from './middleware/promise'; + +const reducers = combineReducers({ + ...sharedReducers, + canvas, + win, +}); + +const store = createStore( + reducers, + undefined, + compose( + applyMiddleware( + thunk, + promise, + ), + ), +); + + +export const persistor = persistStore(store); + +export default store; diff --git a/src/win.js b/src/win.js index fac4b6c..8399741 100644 --- a/src/win.js +++ b/src/win.js @@ -2,7 +2,7 @@ * Main Script for windows (pop-ups and stuff) */ -import store from './store/configureStoreWin'; +import store from './store/storeWin'; import renderAppWin from './components/AppWin';