error handling + cleanup

- handle case where localstorage does not contain item
- eventhandler updates when data changes

.gitignore

@@ -34,3 +34,4 @@ yarn.lock
 package.json
 package-lock.json
 db.json
+server/db backup.json

client/src/App.css

@@ -3,6 +3,8 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+body,
+html,
 .App {
   margin: 0px auto;
   overflow: hidden;

client/src/app/context/collapseAtom.js

@@ -1,12 +1,24 @@
 const { atom } = require('jotai');
 
 const PATH = 'option-collapse';
+const initialValue = {};
 
 // collapse options object, initialised from local storage
 // REFRACT: When do we read from local storage?
 //          on every render?
 
-export const collapseAtom = atom(JSON.parse(localStorage.getItem(PATH)) || {});
+export const collapseAtom = atom(
+  (get) => {
+    const storedOptions = localStorage.getItem(PATH);
+    if (storedOptions == null) return initialValue;
+
+    return JSON.parse(storedOptions);
+  },
+  (get, set, newValues) => {
+    set(collapseAtom, newValues);
+    localStorage.setItem(PATH, JSON.stringify(newValues));
+  }
+);
 
 // get a single option, if it exists
 export const SelectCollapse = (id) => {
@@ -52,9 +64,6 @@ export const setAll = async (items, isCollapsed) => {
   // clear storage
   localStorage.removeItem(PATH);
 
-  // clear local object
-  console.log('debug collapse here', isCollapsed);
-
   // call batch
   BatchOperation({ items: items, isCollapsed: isCollapsed });
 };

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

@@ -206,7 +206,8 @@ export default function EventListWrapper() {
   }, [isError]);
 
   // Events API
-  const eventsHandler = useCallback(async (action, payload) => {
+  const eventsHandler = useCallback(
+    async (action, payload) => {
       switch (action) {
         case 'add':
           try {
@@ -301,7 +302,9 @@ export default function EventListWrapper() {
           showErrorToast('Unrecognised request', action);
           break;
       }
-  }, []);
+    },
+    [data]
+  );
 
   return (
     <>

client/src/features/menu/MenuActionButtons.jsx

@@ -1,7 +1,6 @@
 import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
 import { IconButton } from '@chakra-ui/button';
 import { FiZap, FiPlus, FiClock, FiMinusCircle } from 'react-icons/fi';
-import { useEffect } from 'react';
 
 export default function MenuActionButtons(props) {
   const { actionHandler } = props;
@@ -10,10 +9,6 @@ export default function MenuActionButtons(props) {
     backgroundColor: 'rgba(255,255,255,1)',
   };
 
-  useEffect(() =>{
-    console.log('debug action button render')
-  })
-
   return (
     <Menu isLazy lazyBehavior='unmount'>
       <MenuButton