reorganize store and make popup connect to websocket when needed

src/client.js

@@ -2,6 +2,8 @@
  * Entrypoint for main client script
  */
 
+import { persistStore } from 'redux-persist';
+
 import createKeyPressHandler from './controls/keypress';
 import {
   initTimer,
@@ -22,14 +24,15 @@ import {
   receivePixelReturn,
 } from './ui/placePixel';
 import store from './store/store';
-
-
 import renderApp from './components/App';
-
 import { initRenderer, getRenderer } from './ui/renderer';
 import SocketClient from './socket/SocketClient';
 
-function init() {
+persistStore(store, {}, () => {
+  window.addEventListener('message', store.dispatch);
+
+  store.dispatch({ type: 'HYDRATED' });
+
   initRenderer(store, false);
 
   SocketClient.on('pixelUpdate', ({
@@ -112,8 +115,7 @@ function init() {
 
   store.dispatch(fetchMe());
   SocketClient.connect();
-}
-init();
+});
 
 document.addEventListener('DOMContentLoaded', () => {
   renderApp(document.getElementById('app'), store);

src/popup.js

@@ -2,19 +2,84 @@
  * Main Script for windows (pop-ups and stuff)
  */
 
+import { persistStore } from 'redux-persist';
+
 import store from './store/storePopUp';
 import {
   urlChange,
+  receiveOnline,
+  receiveChatMessage,
+  removeChatChannel,
+  addChatChannel,
 } from './store/actions';
-
+import {
+  fetchMe,
+} from './store/actions/thunks';
+import SocketClient from './socket/SocketClient';
 import renderAppPopUp from './components/AppPopUp';
 
-function init() {
+persistStore(store, {}, () => {
+  window.addEventListener('message', (evt) => {
+    if (evt.data.type === 't/UNLOAD') {
+      if (!window.opener || window.opener.closed) {
+        console.log('Parent window closed');
+        SocketClient.connect();
+      }
+      return;
+    }
+    store.dispatch(evt);
+  });
+
+  store.dispatch({ type: 'HYDRATED' });
+
   window.addEventListener('popstate', () => {
     store.dispatch(urlChange());
   });
-}
-init();
+
+  SocketClient.on('onlineCounter', (online) => {
+    store.dispatch(receiveOnline(online));
+  });
+  SocketClient.on('chatMessage', (
+    name,
+    text,
+    country,
+    channelId,
+    userId,
+  ) => {
+    const state = store.getState();
+
+    // assume that if one chat window is not hidden, all are
+    const isRead = state.popup.windowType === 'CHAT'
+      && state.popup.args.chatChannel === channelId;
+
+    // TODO ping doesn't work since update
+    // const { nameRegExp } = state.user;
+    // const isPing = (nameRegExp && text.match(nameRegExp));
+    store.dispatch(receiveChatMessage(
+      name,
+      text,
+      country,
+      channelId,
+      userId,
+      false,
+      !!isRead,
+    ));
+  });
+  SocketClient.on('changedMe', () => {
+    store.dispatch(fetchMe());
+  });
+  SocketClient.on('remch', (cid) => {
+    store.dispatch(removeChatChannel(cid));
+  });
+  SocketClient.on('addch', (channel) => {
+    store.dispatch(addChatChannel(channel));
+  });
+
+  if (!window.opener || window.opener.closed) {
+    store.dispatch(fetchMe());
+    SocketClient.connect();
+  }
+});
 
 document.addEventListener('DOMContentLoaded', () => {
   // eslint-disable-next-line no-console

src/store/middleware/parent.js

@@ -17,9 +17,6 @@ export default () => (next) => (action) => {
     if (action.origin !== origin) {
       return null;
     }
-    if (action.data.type === 't/UNLOAD') {
-      return null;
-    }
     console.log('GOT', action.data);
     return next(action.data);
   }

src/store/sharedReducers.js

@@ -10,6 +10,9 @@ import storage from 'redux-persist/lib/storage';
 import gui from './reducers/gui';
 import ranks from './reducers/ranks';
 import chatRead from './reducers/chatRead';
+import user from './reducers/user';
+import chat from './reducers/chat';
+import fetching from './reducers/fetching';
 
 export const CURRENT_VERSION = 11;
 
@@ -48,4 +51,7 @@ export default {
   gui: guiPersist,
   ranks: ranksPersist,
   chatRead: chatReadPersist,
+  user,
+  chat,
+  fetching,
 };

src/store/store.js

@@ -6,7 +6,7 @@ import {
   applyMiddleware, createStore, combineReducers,
 } from 'redux';
 import thunk from 'redux-thunk';
-import { persistStore, persistReducer } from 'redux-persist';
+import { persistReducer } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
 
 import sharedReducers, {
@@ -19,10 +19,7 @@ import sharedReducers, {
  */
 import windows from './reducers/windows';
 import canvas from './reducers/canvas';
-import user from './reducers/user';
 import alert from './reducers/alert';
-import chat from './reducers/chat';
-import fetching from './reducers/fetching';
 
 /*
  * middleware
@@ -47,10 +44,7 @@ const reducers = combineReducers({
   ...sharedReducers,
   windows: windowsPersist,
   canvas,
-  user,
   alert,
-  chat,
-  fetching,
 });
 
 const store = createStore(
@@ -68,9 +62,8 @@ const store = createStore(
   ),
 );
 
-export const persistor = persistStore(store, {}, () => {
-  window.addEventListener('message', store.dispatch);
-  store.dispatch({ type: 'HYDRATED' });
-});
+/*
+ * persistStore of redix-persist is called in client.js
+ */
 
 export default store;

src/store/storePopUp.js

@@ -8,7 +8,6 @@ import {
   applyMiddleware, createStore, combineReducers,
 } from 'redux';
 import thunk from 'redux-thunk';
-import { persistStore } from 'redux-persist';
 
 /*
  * reducers
@@ -16,9 +15,6 @@ import { persistStore } from 'redux-persist';
 import sharedReducers from './sharedReducers';
 import canvas from './reducers/canvas';
 import popup from './reducers/popup';
-import user from './reducers/user';
-import chat from './reducers/chat';
-import fetching from './reducers/fetching';
 
 /*
  * middleware
@@ -30,9 +26,6 @@ const reducers = combineReducers({
   ...sharedReducers,
   canvas,
   popup,
-  user,
-  chat,
-  fetching,
 });
 
 const store = createStore(
@@ -44,9 +37,8 @@ const store = createStore(
   ),
 );
 
-export const persistor = persistStore(store, {}, () => {
-  window.addEventListener('message', store.dispatch);
-  store.dispatch({ type: 'HYDRATED' });
-});
+/*
+ * persistStore of redux-persist is called in popup.js
+ */
 
 export default store;