cleanup + small refract

- websockets
- event api

client/src/app/api/eventsApi.js

@@ -1,8 +1,8 @@
 import { serverURL } from './apiConstants';
-export const eventsURL = serverURL + 'events/';
+export const eventsURL = serverURL + 'events';
 
 export const fetchAllEvents = async () => {
-  const res = await fetch(eventsURL + 'all');
+  const res = await fetch(eventsURL);
   // TODO: Safe json convert
   return res.json();
 };

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

@@ -14,11 +14,8 @@ export default function Countdown(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

client/src/common/input/EditableText.jsx

@@ -2,9 +2,17 @@ import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
 import style from './EditableText.module.css';
 
 export default function EditableText(props) {
-  const { label, defaultValue, placeholder, handleSubmit } = props;
+  const { label, defaultValue, placeholder, submitHandler } = props;
+
+  const handleSubmit = (submitedVal) => {
+    // No need to update if it hasnt changed
+    if (submitedVal === defaultValue) return;
+
+    submitHandler(submitedVal);
+  };
+
   return (
-    <div style={{ display: 'block' }}>
+    <div className={style.block}>
       <span className={props.underlined ? style.titleUnderlined : style.title}>
         {label}
       </span>
@@ -12,10 +20,10 @@ export default function EditableText(props) {
         onSubmit={(v) => handleSubmit(v)}
         defaultValue={defaultValue}
         placeholder={placeholder}
-        style={{ display: 'inline' }}
+        className={style.inline}
       >
         <EditablePreview />
-        <EditableInput style={{ width: '13em', minWidth: '13em' }} />
+        <EditableInput className={style.editable13} />
       </Editable>
     </div>
   );

client/src/common/input/EditableText.module.css

@@ -10,4 +10,17 @@
 
 .titleUnderlined {
   border-bottom: 1px solid #0001;
+}
+
+.block {
+  display: 'block';
+}
+
+.inline {
+  display: inline;
+}
+
+.editable13 {
+  width: '13em';
+  min-width: '13em';
 }

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]);

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

@@ -1,4 +1,4 @@
-import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 import { useEffect } from 'react';
 import { fetchAllEvents } from '../../../app/api/eventsApi.js';
 import EventList from './EventList';
@@ -10,13 +10,12 @@ import { Skeleton } from '@chakra-ui/skeleton';
 import style from './List.module.css';
 
 export default function EventListWrapper() {
-  const { data, status, isError } = useQuery('events', fetchAllEvents);
-  const queryClient = useQueryClient();
-  // TODO: Move to events API?
+  const { data, status, isError, refetch } = useQuery('events', fetchAllEvents);
   const addEvent = useMutation((data) => axios.post(eventsURL, data));
   const updateEvent = useMutation((data) => axios.put(eventsURL, data));
+  const patchEvent = useMutation((data) => axios.patch(eventsURL, data));
   const deleteEvent = useMutation((eventId) =>
-    axios.delete(eventsURL + eventId)
+    axios.delete(eventsURL + '/' + eventId)
   );
 
   // Show toasts on errors
@@ -28,34 +27,35 @@ export default function EventListWrapper() {
 
   // Events API
   const eventsHandler = async (action, payload) => {
-    // Torbjorn: is this a good way to do it?
-    // How do I handle the mutation thing
-    // https://react-query.tanstack.com/guides/invalidations-from-mutations
-    // https://react-query.tanstack.com/guides/updates-from-mutation-responses
+    let needsRefetch = false;
     switch (action) {
       case 'add':
         try {
-          await addEvent
-            .mutateAsync(payload)
-            .then(queryClient.invalidateQueries('events'));
+          await addEvent.mutateAsync(payload).then((needsRefetch = true));
         } catch (error) {
           showErrorToast('Error creating event', error.message);
         }
         break;
       case 'update':
         try {
-          await updateEvent
-            .mutateAsync(payload)
-            .then(queryClient.invalidateQueries('events'));
+          await updateEvent.mutateAsync(payload).then((needsRefetch = true));
+          // TODO: instead of refetching, update the item here
+        } catch (error) {
+          showErrorToast('Error updating event', error.message);
+        }
+        break;
+      case 'patch':
+        try {
+          await patchEvent.mutateAsync(payload).then((needsRefetch = true));
+          // TODO: instead of refetching, update the item here
         } catch (error) {
           showErrorToast('Error updating event', error.message);
         }
         break;
       case 'delete':
         try {
-          await deleteEvent
-            .mutateAsync(payload)
-            .then(queryClient.invalidateQueries('events'));
+          await deleteEvent.mutateAsync(payload).then((needsRefetch = true));
+          needsRefetch = true;
         } catch (error) {
           showErrorToast('Error deleting event', error.message);
         }
@@ -64,6 +64,9 @@ export default function EventListWrapper() {
         showErrorToast('Unrecognised request', action);
         break;
     }
+    if (needsRefetch) {
+      refetch();
+    }
   };
 
   return (