diff --git a/client/src/common/components/countdown/Countdown.jsx b/client/src/common/components/countdown/Countdown.jsx index 01805306a..73cd9ce22 100644 --- a/client/src/common/components/countdown/Countdown.jsx +++ b/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 (
- {(time === null || isNaN(time)) ? '-- : -- : --' : display(time)} + {display}
); } diff --git a/client/src/features/control/PlaybackControl.jsx b/client/src/features/control/PlaybackControl.jsx index 755c99555..e1adce7ab 100644 --- a/client/src/features/control/PlaybackControl.jsx +++ b/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': { diff --git a/client/src/features/editors/Editor.jsx b/client/src/features/editors/Editor.jsx index 7fa483d7d..fd3b256bf 100644 --- a/client/src/features/editors/Editor.jsx +++ b/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 (
- +
diff --git a/client/src/features/editors/list/EventListWrapper.jsx b/client/src/features/editors/list/EventListWrapper.jsx index 3577148a0..4a35351e0 100644 --- a/client/src/features/editors/list/EventListWrapper.jsx +++ b/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) {