feat: message control

client/src/features/control/MessageControl.jsx

@@ -0,0 +1,109 @@
+import { IconButton } from '@chakra-ui/button';
+import { FormControl, FormLabel } from '@chakra-ui/form-control';
+import { FiSun } from 'react-icons/fi';
+import { Input } from '@chakra-ui/input';
+import { useEffect, useState } from 'react';
+import { useSocket } from '../../app/context/socketContext';
+import style from './MessageControl.module.css';
+
+// Button definition
+const btnDef = {
+  colorScheme: 'blue',
+  icon: <FiSun />,
+};
+
+export default function MessageControl() {
+  const socket = useSocket();
+  const [pres, setPres] = useState({
+    text: '',
+    visible: false,
+  });
+  const [publ, setPubl] = useState({
+    text: '',
+    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 });
+    });
+
+    // Ask for up to date data
+    socket.emit('get-presenter');
+    socket.emit('get-public');
+
+    // Clear listener
+    return () => socket.off('messages-presenter', 'messages-public');
+  }, [socket]);
+
+  const messageControl = async (action, payload) => {
+    switch (action) {
+      case 'pres-text':
+        socket.emit('set-presenter-text', payload);
+        break;
+      case 'toggle-pres-visible':
+        socket.emit('set-presenter-visible', !pres.visible);
+        break;
+      case 'publ-text':
+        socket.emit('set-public-text', payload);
+        break;
+      case 'toggle-publ-visible':
+        socket.emit('set-public-visible', !publ.visible);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  return (
+    <>
+      <div className={style.inputContainer}>
+        <FormControl id='presenterMessage'>
+          <FormLabel>Presenter screen message</FormLabel>
+          <Input
+            placeholder='only the presenter screens see this'
+            onChange={(event) =>
+              messageControl('pres-text', event.target.value)
+            }
+          />
+        </FormControl>
+        <IconButton
+          className={style.btn}
+          {...btnDef}
+          variant={pres.visible ? 'solid' : 'outline'}
+          onClick={() => messageControl('toggle-pres-visible')}
+        />
+      </div>
+
+      <div className={style.inputContainerWGap}>
+        <FormControl id='generalMessage'>
+          <FormLabel>Public screen message</FormLabel>
+          <Input
+            placeholder='all screens will render this'
+            onChange={(event) =>
+              messageControl('publ-text', event.target.value)
+            }
+          />
+        </FormControl>
+        <IconButton
+          className={style.btn}
+          {...btnDef}
+          variant={publ.visible ? 'solid' : 'outline'}
+          onClick={() => messageControl('toggle-publ-visible')}
+        />
+      </div>
+    </>
+  );
+}

client/src/features/control/MessageControl.module.css

@@ -0,0 +1,13 @@
+.inputContainer,
+.inputContainerWGap {
+  display: flex;
+  gap: 1em;
+}
+
+.inputContainerWGap {
+  padding-top: 1em;
+}
+
+.btn {
+  align-self: flex-end;
+}

client/src/features/editors/Editor.jsx

@@ -2,21 +2,15 @@ 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 { useContext, useEffect } from 'react';
-import { useQuery } from 'react-query';
 import { useState } from 'react';
-import { EventListContext } from '../../app/context/eventListContext';
 import NumberedText from '../../common/components/text/NumberedText';
 import PlaybackControl from '../control/PlaybackControl';
-import MessageForm from '../form/MessageForm';
+import MessageControl from '../control/MessageControl';
 import PreviewContainer from '../viewers/PreviewContainer';
 import styles from './Editor.module.css';
-import EventList from './list/EventList';
 import EventListWrapper from './list/EventListWrapper';
 
 export default function Editor() {
-  const [formMode, setFormMode] = useState(null);
-  const [webEvents, setWebEvents] = useState(null);
   const [playback, setPlayback] = useState({
     current: null,
     next: null,
@@ -42,10 +36,7 @@ export default function Editor() {
           </Heading>
           <NumberedText number={1} text={'Manage and select event to run'} />
           <div className={styles.content}>
-            <EventListWrapper
-              selected={playback.current}
-              updatePlayback={updatePlayback}
-            />
+            <EventListWrapper />
           </div>
         </Box>
       </GridItem>
@@ -72,7 +63,7 @@ export default function Editor() {
             text={'Show realtime messages on separate screen types'}
           />
           <div className={styles.content}>
-            <MessageForm />
+            <MessageControl />
           </div>
         </Box>
       </GridItem>

client/src/features/form/MessageForm.jsx

@@ -1,66 +0,0 @@
-import { IconButton } from '@chakra-ui/button';
-import { FormControl, FormLabel } from '@chakra-ui/form-control';
-import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
-import { Input } from '@chakra-ui/input';
-import { useContext } from 'react';
-import { useState } from 'react';
-import { PresenterMessagesContext } from '../../app/context/presenterMessageContext';
-
-export default function MessageForm() {
-  const [presenterShow, setPresenterShow] = useState(false);
-  const [publicShow, setPublicShow] = useState(false);
-  const [presMessage, setPresMessage] = useContext(PresenterMessagesContext);
-
-  const handleSetPresenter = () => {
-    setPresenterShow(!presenterShow);
-    setPresMessage((prev) => ({ ...prev, show: !presMessage.show }));
-  };
-
-  const handlePresenterChange = (val) => {
-    setPresMessage((prev) => ({ ...prev, text: val }));
-  };
-
-  const handleSetPublic = () => {
-    setPublicShow(!publicShow);
-  };
-
-  const handlePublicChange = (val) => {};
-
-  return (
-    <>
-      <form style={{ display: 'flex', gap: '1em', fontSize: '15px' }}>
-        <FormControl id='presenterMessage'>
-          <FormLabel>Presenter screen message</FormLabel>
-          <Input
-            placeholder='only the presenter screens see this'
-            onChange={(event) => handlePresenterChange(event.target.value)}
-          />
-        </FormControl>
-        <IconButton
-          style={{ alignSelf: 'flex-end' }}
-          colorScheme='teal'
-          variant={presenterShow ? 'solid' : 'outline'}
-          onClick={handleSetPresenter}
-          icon={presenterShow ? <ViewOffIcon /> : <ViewIcon />}
-        />
-      </form>
-
-      <form style={{ display: 'flex', gap: '1em', paddingTop: '1em' }}>
-        <FormControl id='generalMessage'>
-          <FormLabel>Public screen message</FormLabel>
-          <Input
-            placeholder='all screens will render this'
-            onChange={(event) => handlePublicChange(event.target.value)}
-          />
-        </FormControl>
-        <IconButton
-          style={{ alignSelf: 'flex-end' }}
-          colorScheme='teal'
-          variant={publicShow ? 'solid' : 'outline'}
-          onClick={handleSetPublic}
-          icon={publicShow ? <ViewOffIcon /> : <ViewIcon />}
-        />
-      </form>
-    </>
-  );
-}