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) {