cleanup + small refract

- websockets
- event api

client/src/features/control/MessageControl.jsx

@@ -23,19 +23,16 @@ export default function MessageControl() {
     visible: false,
   });
 
-  // Torbjorn: why is this not updating?
   useEffect(() => {
     if (socket == null) return;
 
     // Handle presenter messages
     socket.on('messages-presenter', (data) => {
-      console.log('websocket: got data', data);
       setPres({ ...data });
     });
 
     // Handle public messages
     socket.on('messages-public', (data) => {
-      console.log('websocket: got data', data);
       setPubl({ ...data });
     });
 
@@ -43,8 +40,11 @@ export default function MessageControl() {
     socket.emit('get-presenter');
     socket.emit('get-public');
 
-    // Clear listener
-    return () => socket.off('messages-presenter', 'messages-public');
+    // Clear listeners
+    return () => {
+      socket.off('messages-public');
+      socket.off('messages-presenter');
+    };
   }, [socket]);
 
   const messageControl = async (action, payload) => {

client/src/features/control/PlaybackControl.jsx

@@ -31,8 +31,8 @@ const size = {
 };
 
 export default function PlaybackControl() {
-  const [playback, setPlayback] = useState(null);
   const socket = useSocket();
+  const [playback, setPlayback] = useState(null);
   const [timer, setTimer] = useState({
     currentSeconds: null,
     startedAt: null,
@@ -42,13 +42,10 @@ export default function PlaybackControl() {
   // handle incoming messages
   useEffect(() => {
     if (socket == null) return;
-
-    // Subscribe to timer event
-    socket.emit('subscribe-to-timer');
-
     // ask for playstate
     socket.emit('get-playstate');
 
+    // Handle playstate
     socket.on('playstate', (data) => {
       setPlayback(data);
     });
@@ -60,7 +57,7 @@ export default function PlaybackControl() {
 
     // Clear listener
     return () => {
-      socket.emit('release-timer');
+      socket.off('playstate');
       socket.off('timer');
     };
   }, [socket]);