[WIP] [DO NOT MERGE] Frontend Rewrite

app/app.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react';
+import { useStores } from './hooks/use-stores';
+import styled from 'styled-components';
+import { HashRouter } from 'react-router-dom';
+import { ThemeProvider } from 'styled-components';
+import { themes } from './Themes';
+import { Routes } from './routes';
+
+export const App = () => {
+  const { app } = useStores();
+
+  useEffect(() => {
+    app.notifyReady();
+  }, []);
+
+  const currentTheme = app.appTheme;
+  const theme = themes[currentTheme];
+
+  return (
+    <Container>
+      <ThemeProvider theme={theme}>
+        <HashRouter>
+          <Container>
+            <Routes />
+          </Container>
+        </HashRouter>
+      </ThemeProvider>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  height: 100%;
+`;

app/constants.ts

@@ -0,0 +1,28 @@
+const STATUS = {
+  ONLINE: 'online',
+  OFFLINE: 'offline',
+};
+
+const CHANNEL_EVENTS = {
+  ADD: 'channel_add',
+  CHANGE_SYNC: 'channel_changeSettingSync',
+  ADD_SYNC: 'channel_addSync',
+  REMOVE_SYNC: 'channel_removeSync',
+  FILTER: 'filter',
+  CHANGE_TAB: 'handleActiveTab',
+};
+
+const APP_EVENTS = {
+  CLIENT_READY: 'client_ready',
+  BACKEND_READY: 'backend_ready',
+  CONFIG_CHANGE: 'config_changeSetting',
+  SHOW_INFO: 'client_showInfo',
+  GET_SETTINGS: 'get_settings',
+};
+
+const THEMES = {
+  LIGHT: 'defaultTheme',
+  NIGHT: 'nightTheme',
+};
+
+export { STATUS, CHANNEL_EVENTS, APP_EVENTS, THEMES };

app/hooks/use-stores.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { storeContext } from '../stores/storeContext';
+
+export const useStores = () => React.useContext(storeContext);

app/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import AppContainer from './App/Containers/AppContainer';
+import { App } from './app';
 import 'normalize.css/normalize.css';
 import './style.css';
 
@@ -9,7 +9,7 @@ const appElement = document.createElement('div');
 appElement.setAttribute('id', 'app');
 document.body.appendChild(appElement);
 
-ReactDOM.render(<AppContainer />, document.getElementById('app'));
+ReactDOM.render(<App />, document.getElementById('app'));
 
 if (module['hot']) {
   module['hot'].accept();

app/package.json

@@ -8,6 +8,8 @@
     "file-loader": "^1.1.5",
     "final-form": "^4.0.3",
     "html-webpack-plugin": "^4.5.0",
+    "mobx": "^6.4.2",
+    "mobx-react": "^7.3.0",
     "normalize.css": "^8.0.0",
     "prop-types": "^15.6.2",
     "react": "^16.2.0",

app/pages/channels.tsx

@@ -0,0 +1,2 @@
+import React from 'react';
+export const ChannelPage = () => <div> {`Channel Page`} </div>;

app/pages/settings.tsx

@@ -0,0 +1,2 @@
+import React from 'react';
+export const SettingsPage = () => <div> {`Settings Page`} </div>;

app/routes.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+import styled from 'styled-components';
+
+import ChannelContainer from './Channel/Containers/ChannelContainer';
+import SettingsContainer from './Settings/Containers/SettingsContainer';
+
+import Loading from './Shared/Loading';
+import { useStores } from './hooks/use-stores';
+
+export const Routes = () => {
+  const { app } = useStores();
+
+  // eslint-disable-next-line no-console
+  console.log(app.hasLoaded);
+
+  if (!app.hasLoaded) {
+    return <Loading />;
+  }
+
+  return (
+    <RouterWrapper>
+      <Route
+        exact
+        path="/"
+        render={(props) => (
+          <ChannelContainer updateNotification={app.updateString} {...props} />
+        )}
+      />
+      <Route
+        path="/about"
+        render={(props) => (
+          <SettingsContainer settings={app.settings} {...props} />
+        )}
+      />
+    </RouterWrapper>
+  );
+};
+
+const RouterWrapper = styled.div`
+  display: flex;
+  height: 100%;
+  width: 100%;
+`;

app/stores/app.ts

@@ -0,0 +1,75 @@
+import { makeObservable, observable, action, runInAction } from 'mobx';
+
+import { IpcRenderer } from 'electron';
+import { THEMES, APP_EVENTS } from '../constants';
+const { ipcRenderer }: { ipcRenderer: IpcRenderer } = window.require(
+  'electron',
+);
+
+class AppStore {
+  hasLoaded = false;
+  settings = { nightMode: false };
+  updateString = '';
+  constructor() {
+    makeObservable(this, {
+      hasLoaded: observable,
+      updateString: observable,
+      finishLoading: action,
+      setUpdateString: action,
+      clearIPCReactions: action,
+      initIPCReactions: action,
+      notifyReady: action,
+      getSettings: action,
+    });
+    this.initIPCReactions();
+    this.getSettings();
+  }
+
+  notifyReady = () => {
+    ipcRenderer.send(APP_EVENTS.CLIENT_READY);
+  };
+
+  initIPCReactions = () => {
+    ipcRenderer.on(APP_EVENTS.BACKEND_READY, () => {
+      this.finishLoading();
+    });
+
+    ipcRenderer.on(APP_EVENTS.CONFIG_CHANGE, () => {
+      this.getSettings();
+    });
+
+    ipcRenderer.on(APP_EVENTS.SHOW_INFO, (_event, updateNotification) => {
+      this.setUpdateString(updateNotification);
+    });
+  };
+
+  clearIPCReactions = () => {
+    ipcRenderer.removeAllListeners(APP_EVENTS.BACKEND_READY);
+    ipcRenderer.removeAllListeners(APP_EVENTS.SHOW_INFO);
+  };
+
+  getSettings = () => {
+    this.settings = ipcRenderer.sendSync(APP_EVENTS.GET_SETTINGS);
+  };
+
+  finishLoading = () =>
+    runInAction(() => {
+      this.hasLoaded = true;
+    });
+
+  setUpdateString = (updateString: '') => {
+    runInAction(() => {
+      this.updateString = updateString;
+    });
+  };
+
+  get appTheme() {
+    if (!this.settings) {
+      return THEMES.LIGHT;
+    }
+
+    return this.settings.nightMode ? THEMES.NIGHT : THEMES.LIGHT;
+  }
+}
+
+export default AppStore;

app/stores/channels.ts

@@ -0,0 +1,58 @@
+import {
+  makeObservable,
+  observable,
+  action,
+  computed,
+  runInAction,
+} from 'mobx';
+import { getChannels } from '../Channel/Helpers/IPCHelpers';
+import { STATUS, CHANNEL_EVENTS } from '../constants';
+
+class ChannelsStore {
+  channels: any[] = [];
+  count: { online: number; offline: number } = { online: 0, offline: 0 };
+  tab: string = STATUS.ONLINE;
+  filter = '';
+
+  constructor() {
+    makeObservable(this, {
+      channels: observable,
+      tab: observable,
+      count: observable,
+      filter: observable,
+      updateView: action,
+      isOnline: computed,
+    });
+  }
+
+  get isOnline() {
+    return this.tab === STATUS.ONLINE;
+  }
+
+  changeFilter = (filter) => {
+    this.filter = filter;
+    this.updateView(CHANNEL_EVENTS.FILTER);
+  };
+
+  changeTab = (tab) => {
+    this.tab = tab;
+    this.updateView(CHANNEL_EVENTS.CHANGE_TAB);
+  };
+
+  updateView = async (type) => {
+    const {
+      channels,
+      count,
+    }: {
+      channels: any[];
+      count: { online: number; offline: number };
+    } = await getChannels({ isLive: this.isOnline, filter: this.filter }, type);
+
+    runInAction(() => {
+      this.channels = channels;
+      this.count = count;
+    });
+  };
+}
+
+export default ChannelsStore;

app/stores/storeContext.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import Channels from './channels';
+import App from './app';
+
+export const storeContext = React.createContext({
+  channels: new Channels(),
+  app: new App(),
+});

yarn.lock

@@ -4861,6 +4861,23 @@ mkdirp@^0.5.3, mkdirp@^0.5.5:
   dependencies:
     minimist "^1.2.5"
 
+mobx-react-lite@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-3.3.0.tgz#7174e807201943beff6f9d3701492314c9fc0db3"
+  integrity sha512-U/kMSFtV/bNVgY01FuiGWpRkaQVHozBq5CEBZltFvPt4FcV111hEWkgwqVg9GPPZSEuEdV438PEz8mk8mKpYlA==
+
+mobx-react@^7.3.0:
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-7.3.0.tgz#a17dedb71b75dad2337e3f95eb753179f6cfe732"
+  integrity sha512-RGEcwZokopqyJE5JPwXKB9FWMSqFM9NJVO2QPI+z6laJTJeBHqvPicjnKgY5mvihxTeXB1+72TnooqUePeGV1g==
+  dependencies:
+    mobx-react-lite "^3.3.0"
+
+mobx@^6.4.2:
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.4.2.tgz#d25cd358a46b7a8fe2d8299259bc71008a2aa5b3"
+  integrity sha512-b4xQJYiH8sb0sEbfq/Ws3N77DEJtSihUFD1moeiz2jNoJ5B+mqJutt54ouO9iEfkp7Wk4jQDsVUOh7DPEW3wEw==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"