cleanup

client/src/common/components/countdown/Countdown.jsx

@@ -1,6 +1,7 @@
+import { useEffect, useState } from 'react';
 import styles from './Countdown.module.css';
 
-function display(seconds) {
+function formatDisplay(seconds) {
   const format = (val) => `0${Math.floor(val)}`.slice(-2);
   const hours = seconds / 3600;
   const minutes = (seconds % 3600) / 60;
@@ -8,10 +9,24 @@ function display(seconds) {
   return [hours, minutes, seconds % 60].map(format).join(':');
 }
 
-export default function Countdown({ time, small }) {
+export default function Countdown(props) {
+  const { time, small } = props;
+  const [clock, setClock] = useState(time);
+  let display = '-- : -- : --';
+
+  console.log('websocket: time and t', time);
+
+  useEffect(() => {
+    setClock(time);
+    console.log('websocket: time changed', time)
+  }, [time]);
+
+  // prepare display string
+  if (clock != null && !isNaN(clock)) display = formatDisplay(clock);
+
   return (
     <div className={small ? styles.countdownClockSmall : styles.countdownClock}>
-      {(time === null || isNaN(time)) ? '-- : -- : --' : display(time)}
+      {display}
     </div>
   );
 }

client/src/features/control/PlaybackControl.jsx

@@ -30,7 +30,7 @@ const size = {
   width: 90,
 };
 
-export default function PlaybackControl(props) {
+export default function PlaybackControl() {
   const [playback, setPlayback] = useState(null);
   const socket = useSocket();
   const [timer, setTimer] = useState({
@@ -39,18 +39,25 @@ export default function PlaybackControl(props) {
     expectedFinish: null,
   });
 
+  // Torbjorn: why is this not updating?
   useEffect(() => {
     if (socket == null) return;
 
     // Handle timer
     socket.on('timer', (data) => {
+      console.log('websocket: got data', data);
       setTimer({ ...data });
     });
 
+    // Clear listener
     return () => socket.off('timer');
   }, [socket]);
 
+  // TO SEND TO SOCKET HERE WE CAN USE
+  // socket.emit('test')
 
+  // TODO: Move to playback API
+  // Soould this go through sockets?
   const playbackControl = async (action, payload) => {
     switch (action) {
       case 'start': {

client/src/features/editors/Editor.jsx

@@ -2,7 +2,6 @@ import { IconButton } from '@chakra-ui/button';
 import { SettingsIcon } from '@chakra-ui/icons';
 import { Grid, GridItem, Heading } from '@chakra-ui/layout';
 import { Box } from '@chakra-ui/layout';
-import { useState } from 'react';
 import NumberedText from '../../common/components/text/NumberedText';
 import PlaybackControl from '../control/PlaybackControl';
 import MessageControl from '../control/MessageControl';
@@ -11,16 +10,6 @@ import styles from './Editor.module.css';
 import EventListWrapper from './list/EventListWrapper';
 
 export default function Editor() {
-  const [playback, setPlayback] = useState({
-    current: null,
-    next: null,
-    currentTimer: null,
-    numEvents: 0,
-    state: 'pause',
-  });
-  const updatePlayback = (vals) => {
-    setPlayback({ ...playback, ...vals });
-  };
 
   return (
     <Grid
@@ -75,7 +64,7 @@ export default function Editor() {
           </Heading>
           <NumberedText number={3} text={'Control Timer'} />
           <div className={styles.content}>
-            <PlaybackControl playback={playback} />
+            <PlaybackControl />
           </div>
         </Box>
       </GridItem>

client/src/features/editors/list/EventListWrapper.jsx

@@ -35,7 +35,7 @@ export default function EventListWrapper() {
     switch (action) {
       case 'add':
         try {
-          const event = await addEvent
+          await addEvent
             .mutateAsync(payload)
             .then(queryClient.invalidateQueries('events'));
         } catch (error) {
@@ -44,7 +44,7 @@ export default function EventListWrapper() {
         break;
       case 'update':
         try {
-          const event = await updateEvent
+          await updateEvent
             .mutateAsync(payload)
             .then(queryClient.invalidateQueries('events'));
         } catch (error) {
@@ -53,7 +53,7 @@ export default function EventListWrapper() {
         break;
       case 'delete':
         try {
-          const event = await deleteEvent
+          await deleteEvent
             .mutateAsync(payload)
             .then(queryClient.invalidateQueries('events'));
         } catch (error) {