refactor(events): add new event management and store persistence

ph1p · Jul 26, 2021 · 3dae88f · 3dae88f
1 parent 28a0fbf
commit 3dae88f
Show file tree

Hide file tree

Showing 13 changed files with 1,078 additions and 480 deletions.
diff --git a/packages/plugin/package.json b/packages/plugin/package.json
@@ -56,6 +56,7 @@
     "crypto-browserify": "^3.12.0",
     "mobx": "^6.3.2",
     "mobx-react-lite": "^3.2.0",
+    "mobx-sync": "^3.0.0",
     "react-router-dom": "^5.2.0",
     "simple-encryptor": "^4.0.0",
     "socket.io-client": "^4.1.3",

diff --git a/packages/plugin/src/Ui.tsx b/packages/plugin/src/Ui.tsx
@@ -1,7 +1,12 @@
 import Header from '@plugin/components/Header';
 import Notifications from '@plugin/components/Notifications';
 import { sendMainMessage } from '@plugin/shared/utils';
-import { StoreProvider, useStore } from '@plugin/store';
+import {
+  getStoreFromMain,
+  StoreProvider,
+  trunk,
+  useStore,
+} from '@plugin/store';
 import '@plugin/style.css';
 import ChatView from '@plugin/views/Chat';
 import MinimizedView from '@plugin/views/Minimized';
@@ -22,20 +27,22 @@ import styled, { createGlobalStyle, ThemeProvider } from 'styled-components';
 import { SocketProvider } from '@shared/utils/SocketProvider';
 import { ConnectionEnum } from '@shared/utils/interfaces';
 
-onmessage = (message) => {
-  if (message.data.pluginMessage) {
-    const { type } = message.data.pluginMessage;
+import EventEmitter from './shared/EventEmitter';
 
-    // initialize
-    if (type === 'ready') {
-      sendMainMessage('initialize');
-    }
+// onmessage = (message) => {
+//   if (message.data.pluginMessage) {
+//     const { type } = message.data.pluginMessage;
 
-    if (type === 'initialize') {
-      init();
-    }
-  }
-};
+//     // initialize
+//     if (type === 'ready') {
+//       sendMainMessage('initialize');
+//     }
+
+//     if (type === 'initialize') {
+//       init();
+//     }
+//   }
+// };
 
 const GlobalStyle = createGlobalStyle`
   body {
@@ -51,133 +58,138 @@ const AppWrapper = styled.div`
   overflow: hidden;
 `;
 
-const init = () => {
-  const App = observer(() => {
-    const store = useStore();
-    const [socket, setSocket] = useState<Socket>(null);
+// const init = () => {
+const App = observer(() => {
+  const store = useStore();
+  const [socket, setSocket] = useState<Socket>(null);
 
-    const onFocus = () => {
-      sendMainMessage('focus', false);
-      store.setIsFocused(false);
-    };
+  const onFocus = () => {
+    sendMainMessage('focus', false);
+    store.setIsFocused(false);
+  };
 
-    const onFocusOut = () => {
-      sendMainMessage('focus', false);
-      store.setIsFocused(false);
-    };
+  const onFocusOut = () => {
+    sendMainMessage('focus', false);
+    store.setIsFocused(false);
+  };
 
-    const initSocketConnection = (url: string) => {
-      store.setStatus(ConnectionEnum.NONE);
+  const initSocketConnection = (url: string) => {
+    store.setStatus(ConnectionEnum.NONE);
 
-      if (socket) {
-        socket.offAny();
-        socket.disconnect();
-      }
-
-      setSocket(
-        io(url, {
-          reconnectionAttempts: 3,
-          forceNew: true,
-          transports: ['websocket'],
-        })
-      );
-    };
+    if (socket) {
+      socket.offAny();
+      socket.disconnect();
+    }
 
-    useEffect(() => {
-      if (socket && store.status === ConnectionEnum.NONE) {
-        sendMainMessage('get-root-data');
-        socket.on('connect', () => {
-          store.setStatus(ConnectionEnum.CONNECTED);
+    setSocket(
+      io(url, {
+        reconnectionAttempts: 3,
+        forceNew: true,
+        transports: ['websocket'],
+      })
+    );
+  };
+
+  useEffect(() => {
+    if (socket && store.status === ConnectionEnum.NONE) {
+      // sendMainMessage('get-root-data');
+      EventEmitter.emit('root-data');
+      socket.on('connect', () => {
+        store.setStatus(ConnectionEnum.CONNECTED);
+
+        socket.emit('set user', store.settings);
+        socket.emit('join room', {
+          room: store.roomName,
+          settings: store.settings,
+        });
 
-          socket.emit('set user', store.settings);
-          socket.emit('join room', {
-            room: store.roomName,
-            settings: store.settings,
-          });
+        sendMainMessage('ask-for-relaunch-message');
+      });
 
-          sendMainMessage('ask-for-relaunch-message');
-        });
+      socket.io.on('error', () => store.setStatus(ConnectionEnum.ERROR));
 
-        socket.io.on('error', () => store.setStatus(ConnectionEnum.ERROR));
+      socket.io.on('reconnect_error', () =>
+        store.setStatus(ConnectionEnum.ERROR)
+      );
 
-        socket.io.on('reconnect_error', () =>
-          store.setStatus(ConnectionEnum.ERROR)
-        );
+      socket.on('chat message', (data) => {
+        store.addMessage(data);
+      });
 
-        socket.on('chat message', (data) => {
-          store.addMessage(data);
-        });
+      socket.on('join leave message', (data) => {
+        const username = data.user.name || 'Anon';
+        let message = 'joins the conversation';
 
-        socket.on('join leave message', (data) => {
-          const username = data.user.name || 'Anon';
-          let message = 'joins the conversation';
+        if (data.type === 'LEAVE') {
+          message = 'leaves the conversation';
+        }
+        store.addNotification(`${username} ${message}`);
+      });
 
-          if (data.type === 'LEAVE') {
-            message = 'leaves the conversation';
-          }
-          store.addNotification(`${username} ${message}`);
-        });
+      socket.on('online', (data) => store.setOnline(data));
+    }
 
-        socket.on('online', (data) => store.setOnline(data));
+    return () => {
+      if (socket) {
+        socket.offAny();
+        socket.disconnect();
       }
+    };
+  }, [socket]);
 
-      return () => {
-        if (socket) {
-          socket.offAny();
-          socket.disconnect();
-        }
-      };
-    }, [socket]);
+  useEffect(() => {
+    if (store.settings.url) {
+      initSocketConnection(store.settings.url);
+    }
+    // check focus
+    window.addEventListener('focus', onFocus);
+    window.addEventListener('blur', onFocusOut);
 
-    useEffect(() => {
-      if (store.settings.url) {
-        initSocketConnection(store.settings.url);
-      }
-      // check focus
-      window.addEventListener('focus', onFocus);
-      window.addEventListener('blur', onFocusOut);
-
-      return () => {
-        window.removeEventListener('focus', onFocus);
-        window.removeEventListener('blur', onFocusOut);
-      };
-    }, [store.settings.url]);
-
-    return (
-      <ThemeProvider theme={store.theme}>
-        <AppWrapper>
-          <GlobalStyle />
-
-          <SocketProvider socket={socket}>
-            <Router>
-              <Notifications />
-              {store.settings.name && <Header minimized={store.isMinimized} />}
-              {store.isMinimized && <Redirect to="/minimized" />}
-              <Switch>
-                <Route exact path="/minimized">
-                  <MinimizedView />
-                </Route>
-                <Route exact path="/user-list">
-                  <UserListView />
-                </Route>
-                <Route exact path="/settings">
-                  <SettingsView />
-                </Route>
-                <Route exact path="/">
-                  <ChatView />
-                </Route>
-              </Switch>
-            </Router>
-          </SocketProvider>
-        </AppWrapper>
-      </ThemeProvider>
+    return () => {
+      window.removeEventListener('focus', onFocus);
+      window.removeEventListener('blur', onFocusOut);
+    };
+  }, [store.settings.url]);
+
+  return (
+    <ThemeProvider theme={store.theme}>
+      <AppWrapper>
+        <GlobalStyle />
+
+        <SocketProvider socket={socket}>
+          <Router>
+            <Notifications />
+            {store.settings.name && <Header minimized={store.isMinimized} />}
+            {store.isMinimized && <Redirect to="/minimized" />}
+            <Switch>
+              <Route exact path="/minimized">
+                <MinimizedView />
+              </Route>
+              <Route exact path="/user-list">
+                <UserListView />
+              </Route>
+              <Route exact path="/settings">
+                <SettingsView />
+              </Route>
+              <Route exact path="/">
+                <ChatView />
+              </Route>
+            </Switch>
+          </Router>
+        </SocketProvider>
+      </AppWrapper>
+    </ThemeProvider>
+  );
+});
+
+getStoreFromMain().then((store) => {
+  trunk.init(store).then(() => {
+    ReactDOM.render(
+      <StoreProvider>
+        <App />
+      </StoreProvider>,
+      document.getElementById('app')
     );
   });
-
-  ReactDOM.render(
-    <StoreProvider>
-      <App />
-    </StoreProvider>,
-    document.getElementById('app')
-  );
-};
+});
+// };