V2 ws store (#310)

* Update TimerService.ts

* refactor: message service publishes to store

* refactor: several type improvements

* V2 ws store wss (#309)

* refactor: shared logging types

* refactor: simplify message service consumption

* refactor: create discrete logging system

* refactor: move socket.io > websocket

apps/client/src/features/modals/AliasesModal.jsx

@@ -1,13 +1,14 @@
 /* eslint-disable jsx-a11y/anchor-has-content */
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Button, IconButton, Input, ModalBody, Tooltip } from '@chakra-ui/react';
 import { IoInformationCircleOutline } from '@react-icons/all-files/io5/IoInformationCircleOutline';
 import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
 import { IoSunny } from '@react-icons/all-files/io5/IoSunny';
 
+import { useEmitLog } from '@/common/stores/logger';
+
 import { viewerLocations } from '../../appConstants';
 import { postAliases } from '../../common/api/ontimeApi';
-import { LoggingContext } from '../../common/context/LoggingContext';
 import useAliases from '../../common/hooks-query/useAliases';
 import { validateAlias } from '../../common/utils/aliases';
 import { handleLinks, host } from '../../common/utils/linkUtils';
@@ -19,7 +20,7 @@ import style from './Modals.module.scss';
 
 export default function AliasesModal() {
   const { data, status, refetch } = useAliases();
-  const { emitError } = useContext(LoggingContext);
+  const { emitError } = useEmitLog();
   const [changed, setChanged] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [aliases, setAliases] = useState([]);
@@ -111,29 +112,32 @@ export default function AliasesModal() {
    * @param {string} id - object id
    * @param {boolean} isEnabled - whether to enable / disable flag
    */
-  const setEnabled = useCallback((id, isEnabled) => {
-    const aliasesState = [...aliases];
-    for (const a of aliasesState) {
-      if (a.id === id) {
-        if (isEnabled) {
-          if (a.alias === '' || a.pathAndParams === '') {
-            emitError('Alias incomplete');
-            break;
-          }
+  const setEnabled = useCallback(
+    (id, isEnabled) => {
+      const aliasesState = [...aliases];
+      for (const a of aliasesState) {
+        if (a.id === id) {
+          if (isEnabled) {
+            if (a.alias === '' || a.pathAndParams === '') {
+              emitError('Alias incomplete');
+              break;
+            }
 
-          const isRepeated = aliases.some((r) => a.alias === r.alias && r.enabled);
-          if (isRepeated) {
-            emitError('There is already an alias with this name');
-            break;
+            const isRepeated = aliases.some((r) => a.alias === r.alias && r.enabled);
+            if (isRepeated) {
+              emitError('There is already an alias with this name');
+              break;
+            }
           }
+          a.enabled = isEnabled;
+          break;
         }
-        a.enabled = isEnabled;
-        break;
       }
-    }
-    setChanged(true);
-    setAliases(aliasesState);
-  }, [aliases, emitError]);
+      setChanged(true);
+      setAliases(aliasesState);
+    },
+    [aliases, emitError],
+  );
 
   /**
    * Reverts local state equals to server state
@@ -194,16 +198,16 @@ export default function AliasesModal() {
             eg. a lower third url with some custom parameters
             <table>
               <tbody>
-              <tr>
-                <td className={style.labelNote} style={{ width: '30%' }}>
-                  Alias
-                </td>
-                <td className={style.labelNote}>Page URL</td>
-              </tr>
-              <tr>
-                <td>mylower</td>
-                <td>lower?bg=ff2&text=f00&size=0.6&transition=5</td>
-              </tr>
+                <tr>
+                  <td className={style.labelNote} style={{ width: '30%' }}>
+                    Alias
+                  </td>
+                  <td className={style.labelNote}>Page URL</td>
+                </tr>
+                <tr>
+                  <td>mylower</td>
+                  <td>lower?bg=ff2&text=f00&size=0.6&transition=5</td>
+                </tr>
               </tbody>
             </table>
             <br />
@@ -212,16 +216,16 @@ export default function AliasesModal() {
             eg. an unattended screen that you would need to change route from the app
             <table>
               <tbody>
-              <tr>
-                <td className={style.labelNote} style={{ width: '30%' }}>
-                  Alias
-                </td>
-                <td className={style.labelNote}>Page URL</td>
-              </tr>
-              <tr>
-                <td>thirdfloor</td>
-                <td>public</td>
-              </tr>
+                <tr>
+                  <td className={style.labelNote} style={{ width: '30%' }}>
+                    Alias
+                  </td>
+                  <td className={style.labelNote}>Page URL</td>
+                </tr>
+                <tr>
+                  <td>thirdfloor</td>
+                  <td>public</td>
+                </tr>
               </tbody>
             </table>
           </div>
@@ -254,12 +258,7 @@ export default function AliasesModal() {
                   onChange={(event) => handleChange(index, 'pathAndParams', event.target.value)}
                 />
                 <Tooltip label={`Test /${alias.pathAndParams}`} openDelay={tooltipDelayFast}>
-                  <a
-                    href='#!'
-                    target='_blank'
-                    rel='noreferrer'
-                    onClick={(e) => handleLinks(e, alias.pathAndParams)}
-                  />
+                  <a href='#!' target='_blank' rel='noreferrer' onClick={(e) => handleLinks(e, alias.pathAndParams)} />
                 </Tooltip>
                 <Tooltip label='Enable alias' openDelay={tooltipDelayFast}>
                   <IconButton
@@ -281,12 +280,8 @@ export default function AliasesModal() {
                   />
                 </Tooltip>
               </div>
-              {alias.aliasError ? (
-                <div className={style.error}>{`Alias error: ${alias.aliasError}`}</div>
-              ) : null}
-              {alias.urlError ? (
-                <div className={style.error}>{`URL error: ${alias.urlError}`}</div>
-              ) : null}
+              {alias.aliasError ? <div className={style.error}>{`Alias error: ${alias.aliasError}`}</div> : null}
+              {alias.urlError ? <div className={style.error}>{`URL error: ${alias.urlError}`}</div> : null}
             </div>
           ))}
 
@@ -296,12 +291,7 @@ export default function AliasesModal() {
             </Button>
           </div>
         </div>
-        <SubmitContainer
-          revert={revert}
-          submitting={submitting}
-          changed={changed}
-          status={status}
-        />
+        <SubmitContainer revert={revert} submitting={submitting} changed={changed} status={status} />
       </form>
     </ModalBody>
   );

apps/client/src/features/modals/AppSettingsModal.jsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import isEqual from 'react-fast-compare';
 import {
   Button,
@@ -16,11 +16,12 @@ import { FiEye } from '@react-icons/all-files/fi/FiEye';
 import { FiX } from '@react-icons/all-files/fi/FiX';
 import { useAtom } from 'jotai';
 
+import { useEmitLog } from '@/common/stores/logger';
+
 import { version } from '../../../package.json';
 import { getLatestVersion, postSettings } from '../../common/api/ontimeApi';
 import { eventSettingsAtom } from '../../common/atoms/LocalEventSettings';
 import TooltipActionBtn from '../../common/components/buttons/TooltipActionBtn';
-import { LoggingContext } from '../../common/context/LoggingContext';
 import useSettings from '../../common/hooks-query/useSettings';
 import { ontimePlaceholderSettings } from '../../common/models/OntimeSettings';
 
@@ -31,7 +32,7 @@ import style from './Modals.module.scss';
 
 export default function AppSettingsModal() {
   const { data, status, refetch } = useSettings();
-  const { emitError, emitWarning } = useContext(LoggingContext);
+  const { emitError, emitWarning } = useEmitLog();
   const [formData, setFormData] = useState(ontimePlaceholderSettings);
   const [changed, setChanged] = useState(false);
   const [submitting, setSubmitting] = useState(false);

apps/client/src/features/modals/EventSettingsModal.jsx

@@ -1,8 +1,9 @@
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { FormLabel, Input, ModalBody, Textarea } from '@chakra-ui/react';
 
+import { useEmitLog } from '@/common/stores/logger';
+
 import { postEventData } from '../../common/api/eventDataApi';
-import { LoggingContext } from '../../common/context/LoggingContext';
 import useEventData from '../../common/hooks-query/useEventData';
 import { eventDataPlaceholder } from '../../common/models/EventData';
 
@@ -13,7 +14,7 @@ import style from './Modals.module.scss';
 
 export default function SettingsModal() {
   const { data, status, refetch } = useEventData();
-  const { emitError } = useContext(LoggingContext);
+  const { emitError } = useEmitLog();
   const [formData, setFormData] = useState(eventDataPlaceholder);
   const [changed, setChanged] = useState(false);
   const [submitting, setSubmitting] = useState(false);

apps/client/src/features/modals/TableOptionsModal.jsx

@@ -1,9 +1,10 @@
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Input, ModalBody } from '@chakra-ui/react';
 import { IoInformationCircleOutline } from '@react-icons/all-files/io5/IoInformationCircleOutline';
 
+import { useEmitLog } from '@/common/stores/logger';
+
 import { postUserFields } from '../../common/api/ontimeApi';
-import { LoggingContext } from '../../common/context/LoggingContext';
 import useUserFields from '../../common/hooks-query/useUserFields';
 import { userFieldsPlaceholder } from '../../common/models/UserFields';
 import { handleLinks, host } from '../../common/utils/linkUtils';
@@ -14,7 +15,7 @@ import style from './Modals.module.scss';
 
 export default function TableOptionsModal() {
   const { data, status, refetch } = useUserFields();
-  const { emitError } = useContext(LoggingContext);
+  const { emitError } = useEmitLog();
   const [changed, setChanged] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [userFields, setUserFields] = useState(userFieldsPlaceholder);

apps/client/src/features/modals/ViewsSettingsModal.jsx

@@ -1,11 +1,12 @@
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { FormControl, FormLabel, ModalBody } from '@chakra-ui/react';
 import { IoCheckmarkSharp } from '@react-icons/all-files/io5/IoCheckmarkSharp';
 import { IoInformationCircleOutline } from '@react-icons/all-files/io5/IoInformationCircleOutline';
 
+import { useEmitLog } from '@/common/stores/logger';
+
 import { postView } from '../../common/api/ontimeApi';
 import EnableBtn from '../../common/components/buttons/EnableBtn';
-import { LoggingContext } from '../../common/context/LoggingContext';
 import useViewSettings from '../../common/hooks-query/useViewSettings';
 import { viewsSettingsPlaceholder } from '../../common/models/ViewSettings.type';
 import { openLink } from '../../common/utils/linkUtils';
@@ -17,7 +18,7 @@ import style from './Modals.module.scss';
 export default function ViewsSettingsModal() {
   const { data, status, refetch } = useViewSettings();
 
-  const { emitError } = useContext(LoggingContext);
+  const { emitError } = useEmitLog();
   const [formData, setFormData] = useState(viewsSettingsPlaceholder);
   const [changed, setChanged] = useState(false);
   const [submitting, setSubmitting] = useState(false);

apps/client/src/features/modals/integration-modal/OscIntegrationSettings.tsx

@@ -1,18 +1,17 @@
-import { useContext } from 'react';
 import { useForm } from 'react-hook-form';
 import { Button, FormControl, Input, ModalBody, ModalFooter, Switch } from '@chakra-ui/react';
 
 import { postOSC } from '../../../common/api/ontimeApi';
-import { LoggingContext } from '../../../common/context/LoggingContext';
 import useOscSettings from '../../../common/hooks-query/useOscSettings';
 import { PlaceholderSettings } from '../../../common/models/OscSettings';
+import { useEmitLog } from '../../../common/stores/logger';
 import { isIPAddress, isOnlyNumbers } from '../../../common/utils/regex';
 
 import styles from '../Modal.module.scss';
 
 export default function OscIntegrationSettings() {
   const { data } = useOscSettings();
-  const { emitError } = useContext(LoggingContext);
+  const { emitError } = useEmitLog();
   const {
     handleSubmit,
     register,

apps/client/src/features/modals/integration-modal/OscSettingsModal.jsx

@@ -1,10 +1,11 @@
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { FormControl, FormLabel, Input, ModalBody } from '@chakra-ui/react';
 import { IoInformationCircleOutline } from '@react-icons/all-files/io5/IoInformationCircleOutline';
 
+import { useEmitLog } from '@/common/stores/logger';
+
 import { postOSC } from '../../../common/api/ontimeApi';
 import EnableBtn from '../../../common/components/buttons/EnableBtn';
-import { LoggingContext } from '../../../common/context/LoggingContext';
 import useOscSettings from '../../../common/hooks-query/useOscSettings';
 import { oscPlaceholderSettings } from '../../../common/models/OscSettings';
 import { inputProps, portInputProps } from '../modalHelper';
@@ -76,7 +77,7 @@ const oscTriggerEndpoints = [
 
 export default function OscSettingsModal() {
   const { data, status, refetch } = useOscSettings();
-  const { emitError } = useContext(LoggingContext);
+  const { emitError } = useEmitLog();
   const [formData, setFormData] = useState(oscPlaceholderSettings);
   const [changed, setChanged] = useState(false);
   const [submitting, setSubmitting] = useState(false);
@@ -122,8 +123,8 @@ export default function OscSettingsModal() {
       } else {
         try {
           await postOSC(formData);
-        } catch (error){
-          emitError(`Error setting OSC: ${error}`)
+        } catch (error) {
+          emitError(`Error setting OSC: ${error}`);
         } finally {
           await refetch();
           setChanged(false);
@@ -131,7 +132,7 @@ export default function OscSettingsModal() {
       }
       setSubmitting(false);
     },
-    [emitError, formData, refetch]
+    [emitError, formData, refetch],
   );
 
   /**
@@ -154,7 +155,7 @@ export default function OscSettingsModal() {
       setFormData(temp);
       setChanged(true);
     },
-    [formData]
+    [formData],
   );
 
   return (
@@ -283,12 +284,7 @@ export default function OscSettingsModal() {
             </table>
           </div>
         </div>
-        <SubmitContainer
-          revert={revert}
-          submitting={submitting}
-          changed={changed}
-          status={status}
-        />
+        <SubmitContainer revert={revert} submitting={submitting} changed={changed} status={status} />
       </form>
     </ModalBody>
   );