check for parent refresh and parent close

src/client.js

@@ -117,37 +117,41 @@ persistStore(store, {}, () => {
   SocketClient.connect();
 });
 
-document.addEventListener('DOMContentLoaded', () => {
-  renderApp(document.getElementById('app'), store);
+(function () {
+  const onLoad = () => {
+    renderApp(document.getElementById('app'), store);
 
-  const onKeyPress = createKeyPressHandler(store);
-  document.addEventListener('keydown', onKeyPress, false);
+    const onKeyPress = createKeyPressHandler(store);
+    document.addEventListener('keydown', onKeyPress, false);
 
-  // garbage collection
-  function runGC() {
-    const renderer = getRenderer();
+    // garbage collection
+    function runGC() {
+      const renderer = getRenderer();
 
-    const chunks = renderer.getAllChunks();
-    if (chunks) {
-      const curTime = Date.now();
-      let cnt = 0;
-      chunks.forEach((value, key) => {
-        if (curTime > value.timestamp + 300000) {
-          const [zc, xc, yc] = value.cell;
-          if (!renderer.isChunkInView(zc, xc, yc)) {
-            cnt++;
-            if (value.isBasechunk) {
-              SocketClient.deRegisterChunk([xc, yc]);
+      const chunks = renderer.getAllChunks();
+      if (chunks) {
+        const curTime = Date.now();
+        let cnt = 0;
+        chunks.forEach((value, key) => {
+          if (curTime > value.timestamp + 300000) {
+            const [zc, xc, yc] = value.cell;
+            if (!renderer.isChunkInView(zc, xc, yc)) {
+              cnt++;
+              if (value.isBasechunk) {
+                SocketClient.deRegisterChunk([xc, yc]);
+              }
+              chunks.delete(key);
+              value.destructor();
             }
-            chunks.delete(key);
-            value.destructor();
           }
-        }
-      });
-      // eslint-disable-next-line no-console
-      console.log('Garbage collection cleaned', cnt, 'chunks');
+        });
+        // eslint-disable-next-line no-console
+        console.log('Garbage collection cleaned', cnt, 'chunks');
+      }
     }
-  }
-  setInterval(runGC, 300000);
-});
+    setInterval(runGC, 300000);
 
+    document.removeEventListener('DOMContentLoaded', onLoad);
+  };
+  document.addEventListener('DOMContentLoaded', onLoad, false);
+}());

src/popup.js

@@ -19,16 +19,7 @@ import SocketClient from './socket/SocketClient';
 import renderAppPopUp from './components/AppPopUp';
 
 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);
-  });
+  window.addEventListener('message', store.dispatch);
 
   store.dispatch({ type: 'HYDRATED' });
 
@@ -81,8 +72,10 @@ persistStore(store, {}, () => {
   }
 });
 
-document.addEventListener('DOMContentLoaded', () => {
-  // eslint-disable-next-line no-console
-  console.log('hello');
-  renderAppPopUp(document.getElementById('app'), store);
-});
+(function () {
+  const onLoad = () => {
+    renderAppPopUp(document.getElementById('app'), store);
+    document.removeEventListener('DOMContentLoaded', onLoad);
+  };
+  document.addEventListener('DOMContentLoaded', onLoad, false);
+}());

src/store/middleware/parent.js

@@ -12,11 +12,35 @@ window.addEventListener('beforeunload', () => {
 });
 
 
-export default () => (next) => (action) => {
+export default (store) => (next) => (action) => {
   if (action instanceof MessageEvent) {
     if (action.origin !== origin) {
       return null;
     }
+    if (action.data.type === 't/UNLOAD') {
+      setTimeout(() => {
+        if (!window.opener || window.opener.closed) {
+          console.log('Parent window closed');
+          store.dispatch({ type: 't/PARENT_CLOSED' });
+        } else {
+          console.log('Parent window refreshed');
+          /*
+           * hook to event and also send message to catch more
+           * possibilities
+           */
+          try {
+            const sendLoad = () => {
+              window.opener.postMessage({ type: 't/LOAD' }, origin);
+              window.opener.removeEventListener('DOMContentLoaded', sendLoad);
+            };
+            window.opener.addEventListener('DOMContentLoaded', sendLoad, false);
+          } catch {
+            console.log('Could not hook to parent window');
+          }
+          window.opener.postMessage({ type: 't/LOAD' }, origin);
+        }
+      }, 3000);
+    }
     console.log('GOT', action.data);
     return next(action.data);
   }

src/store/middleware/socketClientHookPopUp.js

@@ -0,0 +1,37 @@
+/*
+ * Hooks for websocket client for popup window
+ *
+ */
+
+import SocketClient from '../../socket/SocketClient';
+
+export default () => (next) => (action) => {
+  if (SocketClient.readyState === WebSocket.CLOSED) {
+    if (action.type === 't/PARENT_CLOSED') {
+      SocketClient.connect();
+    }
+  } else {
+    switch (action.type) {
+      case 'SET_NAME':
+      case 'LOGIN':
+      case 'LOGOUT': {
+        SocketClient.reconnect();
+        break;
+      }
+
+      case 's/REQ_CHAT_MESSAGE': {
+        const {
+          text,
+          channel,
+        } = action;
+        SocketClient.sendChatMessage(text, channel);
+        break;
+      }
+
+      default:
+      // nothing
+    }
+  }
+
+  return next(action);
+};

src/store/storePopUp.js

@@ -20,7 +20,8 @@ import popup from './reducers/popup';
  * middleware
  */
 import parent from './middleware/parent';
-import titlePopUp from './middleware/titlePopUp';
+import socketClientHook from './middleware/socketClientHookPopUp';
+import title from './middleware/titlePopUp';
 
 const reducers = combineReducers({
   ...sharedReducers,
@@ -33,7 +34,8 @@ const store = createStore(
   applyMiddleware(
     thunk,
     parent,
-    titlePopUp,
+    socketClientHook,
+    title,
   ),
 );