socket context

client/src/App.jsx

@@ -6,23 +6,26 @@ import { PresenterMessageProvider } from './app/context/presenterMessageContext'
 import Editor from './features/editors/Editor';
 import DefaultPresenter from './features/viewers/DefaultPresenter';
 import { QueryClient, QueryClientProvider } from 'react-query';
+import SocketProvider from './app/context/socketContext';
 
 const queryClient = new QueryClient();
 
 function App() {
   return (
-    <QueryClientProvider client={queryClient}>
+    <SocketProvider>
-      <PresenterMessageProvider>
+      <QueryClientProvider client={queryClient}>
-        <EventProvider>
+        <PresenterMessageProvider>
-          <div className='App'>
+          <EventProvider>
-            <Route path='/' exact component={DefaultPresenter} />
+            <div className='App'>
-            <EventListProvider>
+              <Route path='/' exact component={DefaultPresenter} />
-              <Route path='/editor' exact component={Editor} />
+              <EventListProvider>
-            </EventListProvider>
+                <Route path='/editor' exact component={Editor} />
-          </div>
+              </EventListProvider>
-        </EventProvider>
+            </div>
-      </PresenterMessageProvider>
+          </EventProvider>
-    </QueryClientProvider>
+        </PresenterMessageProvider>
+      </QueryClientProvider>
+    </SocketProvider>
   );
 }
 

client/src/app/context/socketContext.js

@@ -0,0 +1,26 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import io from 'socket.io-client';
+import { serverURL } from '../api/apiConstants';
+
+export const SocketContext = createContext([[], () => {}]);
+
+export const useSocket = () => {
+  return useContext(SocketContext);
+};
+
+function SocketProvider(props) {
+  const [socket, setSocket] = useState();
+
+  useEffect(() => {
+    const socket = io(serverURL);
+    setSocket(socket);
+    return () => socket.disconnect();
+  }, []);
+
+  return (
+    <SocketContext.Provider value={socket}>
+      {props.children}
+    </SocketContext.Provider>
+  );
+}
+export default SocketProvider;

client/src/features/control/PlaybackControl.jsx

@@ -11,8 +11,6 @@ import {
 import { format } from 'date-fns';
 import { timeFormatSeconds } from '../../common/dateConfig';
 import { useEffect, useState } from 'react';
-import { io } from 'socket.io-client';
-import { serverURL } from '../../app/api/apiConstants';
 import {
   getStart,
   getPause,
@@ -20,6 +18,7 @@ import {
   getPrevious,
   getNext,
 } from '../../app/api/playbackApi';
+import { useSocket } from '../../app/context/socketContext';
 
 // BUTTON DEFINITION
 const defProps = {
@@ -33,28 +32,24 @@ const size = {
 
 export default function PlaybackControl(props) {
   const [playback, setPlayback] = useState(null);
+  const socket = useSocket();
   const [timer, setTimer] = useState({
     currentSeconds: null,
     startedAt: null,
     expectedFinish: null,
   });
-  const updateTimer = (vals) => {
-    setTimer({ ...timer, ...vals });
-  };
 
-  // WEBSOCKETZ
   useEffect(() => {
-    // TODO: add namespace?
+    if (socket == null) return;
-    const socket = io(serverURL, { transport: ['websocket'] });
-    console.log('websocket started');
 
     // Handle timer
     socket.on('timer', (data) => {
-      updateTimer(data);
+      setTimer({ ...data });
     });
 
-    return () => socket.disconnect();
+    return () => socket.off('timer');
-  }, []);
+  }, [socket]);
+
 
   const playbackControl = async (action, payload) => {
     switch (action) {
@@ -83,10 +78,10 @@ export default function PlaybackControl(props) {
     }
   };
 
-  const started = timer.startedAt
+  const started = timer?.startedAt
     ? format(timer.startedAt, timeFormatSeconds)
     : '...';
-  const finish = timer.expectedFinish
+  const finish = timer?.expectedFinish
     ? format(timer.expectedFinish, timeFormatSeconds)
     : '...';
 
@@ -94,7 +89,7 @@ export default function PlaybackControl(props) {
     <div className={style.mainContainer}>
       <div className={style.timeContainer}>
         <div className={style.timer}>
-          <Countdown time={timer.currentSeconds} small />
+          <Countdown time={timer?.currentSeconds} small />
         </div>
         <div className={style.start}>
           <span className={style.tag}>Started at </span>