Feat/62 logger (#79)

* feat/62-logger request log data in app
* feat/62-logger refact osc integration
* feat/62-logger feedback on osc
* feat/62-logger refact broadcast on triggers
* feat/62-logger log triggers
* feat/62-logger add link to studio
* feat/62-logger replace toasts with logger context
* feat/62-logger style improvements
* feat/62-logger refactor code duplications
* feat/62-logger cleanup and version bump

client/src/features/editors/Editor.jsx

@@ -1,10 +1,11 @@
 import { lazy, useEffect } from 'react';
 import { Box } from '@chakra-ui/layout';
 import { useDisclosure } from '@chakra-ui/hooks';
-import styles from './Editor.module.css';
+import styles from './Editor.module.scss';
 import MenuBar from 'features/menu/MenuBar';
 import ModalManager from 'features/modals/ModalManager';
 import ErrorBoundary from 'common/components/errorBoundary/ErrorBoundary';
+import { LoggingProvider } from '../../app/context/LoggingContext';
 
 const EventListWrapper = lazy(() =>
   import('features/editors/list/EventListWrapper')
@@ -22,7 +23,7 @@ export default function Editor() {
   }, []);
 
   return (
-    <>
+    <LoggingProvider>
       <ModalManager isOpen={isOpen} onClose={onClose} />
 
       <div className={styles.mainContainer}>
@@ -68,6 +69,6 @@ export default function Editor() {
           </div>
         </Box>
       </div>
-    </>
+    </LoggingProvider>
   );
 }

client/src/features/editors/Editor.module.scss

@@ -8,7 +8,7 @@
 
   display: grid;
   grid-template-rows: auto 1fr;
-  grid-template-columns: 40px 48em auto auto;
+  grid-template-columns: 40px 48em 31em auto;
   grid-template-areas:
     'sett even play info'
     'sett even mess info';
@@ -110,12 +110,23 @@ h1 {
 
 .editor {
   grid-area: even;
+
+  .content {
+    height: calc(100% - 3em);
+    overflow: hidden;
+  }
 }
 
 .info {
   grid-area: info;
   min-width: 17em;
-  max-width: 32em;
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    height: calc(100% - 3em);
+    overflow: hidden;
+  }
 }
 
 .messages {

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

@@ -1,4 +1,4 @@
-import style from './List.module.css';
+import style from './List.module.scss';
 import { createRef, useCallback, useEffect, useMemo, useState } from 'react';
 import { useSocket } from 'app/context/socketContext';
 import Empty from 'common/state/Empty';

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

@@ -1,8 +1,8 @@
 import DelayBlock from './DelayBlock';
 import BlockBlock from './BlockBlock';
 import EventBlock from './EventBlock';
-import { showErrorToast } from 'common/helpers/toastManager';
-import { memo } from 'react';
+import { memo, useContext } from 'react';
+import { LoggingContext } from '../../../app/context/LoggingContext';
 
 const areEqual = (prevProps, nextProps) => {
   return (
@@ -26,6 +26,7 @@ const EventListItem = (props) => {
     delay,
     ...rest
   } = props;
+  const { emitError } = useContext(LoggingContext);
 
   // Create / delete new events
   const actionHandler = (action, payload) => {
@@ -59,7 +60,7 @@ const EventListItem = (props) => {
           // request update in parent
           eventsHandler('patch', newData);
         } else {
-          showErrorToast('Field Error: ' + field);
+          emitError(`Unknown field: ${field}`);
         }
         break;
       default:

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

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from 'react-query';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import {
   fetchAllEvents,
   requestPatch,
@@ -12,16 +12,17 @@ import {
 } from 'app/api/eventsApi.js';
 import EventList from './EventList';
 import EventListMenu from 'features/menu/EventListMenu.jsx';
-import { showErrorToast } from 'common/helpers/toastManager';
 import { useFetch } from 'app/hooks/useFetch.js';
 import Empty from 'common/state/Empty';
 import { EVENTS_TABLE } from 'app/api/apiConstants';
 import { BatchOperation } from 'app/context/collapseAtom';
 import { useAtom } from 'jotai';
+import { LoggingContext } from '../../../app/context/LoggingContext';
 
 export default function EventListWrapper() {
   const [, setCollapsed] = useAtom(BatchOperation);
   const queryClient = useQueryClient();
+  const { emitError } = useContext(LoggingContext);
   const { data, status, isError, refetch } = useFetch(
     EVENTS_TABLE,
     fetchAllEvents
@@ -230,9 +231,9 @@ export default function EventListWrapper() {
   // Show toasts on errors
   useEffect(() => {
     if (isError) {
-      showErrorToast('Error fetching data');
+      emitError('Error fetching data');
     }
-  }, [isError]);
+  }, [emitError, isError]);
 
   // Events API
   const eventsHandler = useCallback(
@@ -242,35 +243,35 @@ export default function EventListWrapper() {
           try {
             await addEvent.mutateAsync(payload);
           } catch (error) {
-            showErrorToast('Error creating event', error.message);
+            emitError(`Error fetching data: ${error.message}`);
           }
           break;
         case 'update':
           try {
             await updateEvent.mutateAsync(payload);
           } catch (error) {
-            showErrorToast('Error updating event', error.message);
+            emitError(`Error updating event: ${error.message}`);
           }
           break;
         case 'patch':
           try {
             await patchEvent.mutateAsync(payload);
           } catch (error) {
-            showErrorToast('Error updating event', error.message);
+            emitError(`Error updating event: ${error.message}`);
           }
           break;
         case 'delete':
           try {
             await deleteEvent.mutateAsync(payload);
           } catch (error) {
-            showErrorToast('Error deleting event', error.message);
+            emitError(`Error deleting event: ${error.message}`);
           }
           break;
         case 'reorder':
           try {
             await reorderEvent.mutateAsync(payload);
           } catch (error) {
-            showErrorToast('Error reordering event', error.message);
+            emitError(`Error re-ordering event: ${error.message}`);
           }
           break;
         case 'applyDelay':
@@ -293,13 +294,13 @@ export default function EventListWrapper() {
               // delete block after, if any
               if (blockAfter) await deleteEvent.mutateAsync(blockAfter);
             } catch (error) {
-              showErrorToast('Error applying delay', error.message);
+              emitError(`Error applying delay: ${error.message}`);
             }
           } else {
             try {
               await applyDelay.mutateAsync(payload.id);
             } catch (error) {
-              showErrorToast('Error applying delay', error.message);
+              emitError(`Error applying delay: ${error.message}`);
             }
           }
           break;
@@ -317,11 +318,11 @@ export default function EventListWrapper() {
           try {
             await deleteAllEvents.mutateAsync();
           } catch (error) {
-            showErrorToast('Error deleting events', error.message);
+            emitError(`Error deleting events: ${error.message}`);
           }
           break;
         default:
-          showErrorToast('Unrecognised request', action);
+          emitError(`Unhandled request: ${action}`);
           break;
       }
     },

client/src/features/editors/list/List.module.scss

@@ -7,7 +7,7 @@
   border-radius: 4px;
   padding: 8px;
   overflow-y: scroll;
-  height: 73vh;
+  height: 100%;
 }
 
 .list {