1 files changed, 82 insertions, 0 deletions
diff --git a/server/web/src/App.tsx b/server/web/src/App.tsx
new file mode 100644
index 0000000..0ad4620
--- /dev/null
+++ b/server/web/src/App.tsx
@@ -0,0 +1,82 @@
+import { IAllReducer } from './interfaces/AllReducer.interface';
+import { IActivity } from './interfaces/Activity.interface';
+import { IClient } from './interfaces/Client.interface';
+import { useDispatch, useSelector } from 'react-redux';
+import { IAlert } from './interfaces/Alert.interface';
+import Server from './components/Server';
+import { useAlert } from 'react-alert';
+import React from 'react';
+import {
+    sessionAll,
+    sessionClose,
+    sessionAdd,
+    sessionRemove,
+    clientAdd,
+    clientRemove,
+    activityUpdate
+} from './redux/actions';
+
+let sessionAllEel,
+    sessionCloseEel,
+    sessionAddEel,
+    sessionRemoveEel,
+    clientAddEel,
+    clientRemoveEel,
+    activityUpdateEel;
+
+function App() {
+    const dispatch = useDispatch(),
+        alert = useAlert();
+
+    document.title = useSelector<IAllReducer, string>((state) => {
+        return `${state.clients.size} Connected Client${state.clients.size === 1 ? '' : 's'
+            }${state.session.size > 0
+                ? ` [${state.session.size} Client Session]`
+                : ''
+            }`;
+    });
+
+    clientAddEel = (unique_id: string, client: IClient, audio_alert: boolean) => {
+        dispatch(clientAdd(unique_id, client));
+
+        if (audio_alert) {
+            const promise = new Audio('./static/alert.wav').play();
+
+            promise !== undefined &&
+                promise.catch(() => window.showAlert({
+                    message: 'Failed To Play Alert Audio',
+                    type: 'DANGER'
+                }));
+
+            window.showAlert({
+                message: 'Client Connected',
+                type: 'SUCCESS'
+            });
+        }
+    };
+
+    window.showAlert = (data: IAlert) =>
+        // @ts-ignore
+        alert.show(data.message, { type: data.type });
+
+    sessionRemoveEel = (unique_id: string) =>
+        dispatch(sessionRemove(unique_id));
+
+    sessionAllEel = () => dispatch(sessionAll());
+    sessionCloseEel = () => dispatch(sessionClose());
+    sessionAddEel = (unique_id: string) => dispatch(sessionAdd(unique_id));
+    clientRemoveEel = (unique_id: string) => dispatch(clientRemove(unique_id));
+    activityUpdateEel = (activity: IActivity) => dispatch(activityUpdate(activity));
+
+    window.eel.expose(sessionAllEel, 'sessionAllEel');
+    window.eel.expose(sessionCloseEel, 'sessionCloseEel');
+    window.eel.expose(sessionAddEel, 'sessionAddEel');
+    window.eel.expose(sessionRemoveEel, 'sessionRemoveEel');
+    window.eel.expose(clientAddEel, 'clientAddEel');
+    window.eel.expose(clientRemoveEel, 'clientRemoveEel');
+    window.eel.expose(activityUpdateEel, 'activityUpdateEel');
+
+    return <Server />;
+}
+
+export default App;