split persistent reducers

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';

src/components/windows/Chat.jsx

@@ -224,7 +224,10 @@ const Chat = ({
           <div
             className="modallink"
             key="nlipt"
-            onClick={() => dispatch(showUserAreaModal())}
+            onClick={(evt) => {
+              evt.stopPropagation();
+              dispatch(showUserAreaModal());
+            }}
             style={{
               textAlign: 'center',
               fontSize: 13,

src/store/configureStoreWin.js

@@ -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;

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,

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,
+};

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,

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;

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';