Feat/161

client/src/common/atoms/LocalEventSettings.js

@@ -0,0 +1,20 @@
+import { atomWithStorage, selectAtom } from 'jotai/utils';
+
+export const eventSettingsAtom = atomWithStorage('ontime-eventSettings', {
+  showQuickEntry: false,
+  startTimeIsLastEnd: false,
+  defaultPublic: false,
+});
+
+export const showQuickEntryAtom = selectAtom(
+  eventSettingsAtom,
+  (settings) => settings.showQuickEntry
+);
+export const startTimeIsLastEndAtom = selectAtom(
+  eventSettingsAtom,
+  (settings) => settings.startTimeIsLastEnd
+);
+export const defaultPublicAtom = selectAtom(
+  eventSettingsAtom,
+  (settings) => settings.defaultPublic
+);

client/src/common/components/protectRoute/ProtectRoute.jsx

@@ -24,9 +24,7 @@ export default function ProtectRoute({ children }) {
   }, [pin, validate]);
 
   // Set window title
-  useEffect(() => {
-    document.title = 'ontime';
-  }, []);
+  document.title = 'ontime';
 
   // Handle keyboard shortcuts
   const handleKeyPress = useCallback(

client/src/features/editors/Editor.jsx

@@ -1,10 +1,9 @@
-import React, { lazy, useEffect } from 'react';
+import React, { lazy } from 'react';
 import { useDisclosure } from '@chakra-ui/hooks';
 import { Box } from '@chakra-ui/layout';
 import ErrorBoundary from 'common/components/errorBoundary/ErrorBoundary';
 import ModalManager from 'features/modals/ModalManager';
 
-import { LocalEventSettingsProvider } from '../../common/context/LocalEventSettingsContext';
 import { LoggingProvider } from '../../common/context/LoggingContext';
 import MenuBar from '../menu/MenuBar';
 
@@ -19,28 +18,24 @@ export default function Editor() {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   // Set window title
-  useEffect(() => {
-    document.title = 'ontime - Editor';
-  }, []);
+  document.title = 'ontime - Editor';
 
   return (
     <LoggingProvider>
-      <LocalEventSettingsProvider>
-        <ErrorBoundary>
-          <ModalManager isOpen={isOpen} onClose={onClose} />
-        </ErrorBoundary>
-        <div className={styles.mainContainer}>
-          <Box id='settings' className={styles.settings}>
-            <ErrorBoundary>
-              <MenuBar onOpen={onOpen} isOpen={isOpen} onClose={onClose} />
-            </ErrorBoundary>
-          </Box>
-          <EventList onOpen={onOpen} isOpen={isOpen} onClose={onClose} />
-          <MessageControl />
-          <TimerControl />
-          <Info />
-        </div>
-      </LocalEventSettingsProvider>
+      <ErrorBoundary>
+        <ModalManager isOpen={isOpen} onClose={onClose} />
+      </ErrorBoundary>
+      <div className={styles.mainContainer}>
+        <Box id='settings' className={styles.settings}>
+          <ErrorBoundary>
+            <MenuBar onOpen={onOpen} isOpen={isOpen} onClose={onClose} />
+          </ErrorBoundary>
+        </Box>
+        <EventList onOpen={onOpen} isOpen={isOpen} onClose={onClose} />
+        <MessageControl />
+        <TimerControl />
+        <Info />
+      </div>
     </LoggingProvider>
   );
 }

client/src/features/editors/EntryBlock/EntryBlock.jsx

@@ -1,9 +1,13 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Checkbox } from '@chakra-ui/react';
 import { Tooltip } from '@chakra-ui/tooltip';
+import { useAtomValue } from 'jotai';
 import PropTypes from 'prop-types';
 
-import { LocalEventSettingsContext } from '../../../common/context/LocalEventSettingsContext';
+import {
+  defaultPublicAtom,
+  startTimeIsLastEndAtom,
+} from '../../../common/atoms/LocalEventSettings';
 
 import style from './EntryBlock.module.scss';
 
@@ -16,13 +20,14 @@ export default function EntryBlock(props) {
     disableAddDelay = true,
     disableAddBlock,
   } = props;
-  const { starTimeIsLastEnd, defaultPublic } = useContext(LocalEventSettingsContext);
-  const [doStartTime, setStartTime] = useState(starTimeIsLastEnd);
+  const startTimeIsLastEnd = useAtomValue(startTimeIsLastEndAtom);
+  const defaultPublic = useAtomValue(defaultPublicAtom);
+  const [doStartTime, setStartTime] = useState(startTimeIsLastEnd);
   const [doPublic, setPublic] = useState(defaultPublic);
 
   useEffect(() => {
-    setStartTime(starTimeIsLastEnd);
-  }, [starTimeIsLastEnd]);
+    setStartTime(startTimeIsLastEnd);
+  }, [startTimeIsLastEnd]);
 
   useEffect(() => {
     setPublic(defaultPublic);
@@ -36,7 +41,7 @@ export default function EntryBlock(props) {
           onClick={() =>
             eventsHandler(
               'add',
-              { type: 'event', after:  previousId, isPublic: doPublic },
+              { type: 'event', after: previousId, isPublic: doPublic },
               { startIsLastEnd: doStartTime ? previousId : undefined }
             )
           }
@@ -68,7 +73,9 @@ export default function EntryBlock(props) {
           size='sm'
           colorScheme='blue'
           isChecked={doStartTime}
-          onChange={(e) => setStartTime(e.target.checked)}
+          onChange={(e) => {
+            setStartTime(e.target.checked);
+          }}
         >
           Start time is last end
         </Checkbox>
@@ -93,4 +100,3 @@ EntryBlock.propTypes = {
   disableAddDelay: PropTypes.bool,
   disableAddBlock: PropTypes.bool,
 };
-

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

@@ -2,9 +2,10 @@ import React, { createRef, useCallback, useContext, useEffect, useState } from '
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import Empty from 'common/components/state/Empty';
 import { useSocket } from 'common/context/socketContext';
+import { useAtomValue } from 'jotai';
 
+import { showQuickEntryAtom } from '../../../common/atoms/LocalEventSettings';
 import { CursorContext } from '../../../common/context/CursorContext';
-import { LocalEventSettingsContext } from '../../../common/context/LocalEventSettingsContext';
 import EntryBlock from '../EntryBlock/EntryBlock';
 
 import EventListItem from './EventListItem';
@@ -19,21 +20,24 @@ export default function EventList(props) {
   const [selectedId, setSelectedId] = useState(null);
   const [nextId, setNextId] = useState(null);
   const cursorRef = createRef();
-  const { showQuickEntry } = useContext(LocalEventSettingsContext);
-
-  const insertAtCursor = useCallback((type, cursor) => {
-    if (cursor === -1) {
-      eventsHandler('add', { type: type });
-    } else {
-      const previousEvent = events[cursor];
-      const nextEvent = events[cursor + 1];
-      if (type === 'event') {
-        eventsHandler('add', { type: type, after: previousEvent.id });
-      } else if (previousEvent?.type !== type && nextEvent?.type !== type) {
-        eventsHandler('add', { type: type, after: previousEvent.id });
+  const showQuickEntry = useAtomValue(showQuickEntryAtom);
+
+  const insertAtCursor = useCallback(
+    (type, cursor) => {
+      if (cursor === -1) {
+        eventsHandler('add', { type: type });
+      } else {
+        const previousEvent = events[cursor];
+        const nextEvent = events[cursor + 1];
+        if (type === 'event') {
+          eventsHandler('add', { type: type, after: previousEvent.id });
+        } else if (previousEvent?.type !== type && nextEvent?.type !== type) {
+          eventsHandler('add', { type: type, after: previousEvent.id });
+        }
       }
-    }
-  },[events, eventsHandler])
+    },
+    [events, eventsHandler]
+  );
 
   // Handle keyboard shortcuts
   const handleKeyPress = useCallback(
@@ -54,19 +58,19 @@ export default function EventList(props) {
         if (e.key === 'e' || e.key === 'E') {
           e.preventDefault();
           if (cursor == null) return;
-          insertAtCursor('event', cursor)
+          insertAtCursor('event', cursor);
         }
         // D
         if (e.key === 'd' || e.key === 'D') {
           e.preventDefault();
           if (cursor == null) return;
-          insertAtCursor('delay', cursor)
+          insertAtCursor('delay', cursor);
         }
         // B
         if (e.key === 'b' || e.key === 'B') {
           e.preventDefault();
           if (cursor == null) return;
-          insertAtCursor('block', cursor)
+          insertAtCursor('block', cursor);
         }
       }
     },

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

@@ -1,7 +1,11 @@
 import React, { memo, useCallback, useContext } from 'react';
+import { useAtomValue } from 'jotai';
 import PropTypes from 'prop-types';
 
-import { LocalEventSettingsContext } from '../../../common/context/LocalEventSettingsContext';
+import {
+  defaultPublicAtom,
+  startTimeIsLastEndAtom,
+} from '../../../common/atoms/LocalEventSettings';
 import { LoggingContext } from '../../../common/context/LoggingContext';
 import BlockBlock from '../BlockBlock/BlockBlock';
 import DelayBlock from '../DelayBlock/DelayBlock';
@@ -19,19 +23,11 @@ const areEqual = (prevProps, nextProps) => {
 };
 
 const EventListItem = (props) => {
-  const {
-    type,
-    index,
-    eventIndex,
-    data,
-    selected,
-    next,
-    eventsHandler,
-    delay,
-    previousEnd,
-  } = props;
+  const { type, index, eventIndex, data, selected, next, eventsHandler, delay, previousEnd } =
+    props;
   const { emitError } = useContext(LoggingContext);
-  const { starTimeIsLastEnd, defaultPublic } = useContext(LocalEventSettingsContext);
+  const startTimeIsLastEnd = useAtomValue(startTimeIsLastEndAtom);
+  const defaultPublic = useAtomValue(defaultPublicAtom);
 
   /**
    * @description calculates duration from given options
@@ -56,7 +52,7 @@ const EventListItem = (props) => {
               after: data.id,
               isPublic: defaultPublic,
             },
-            { startIsLastEnd: starTimeIsLastEnd ? data.id : undefined }
+            { startIsLastEnd: startTimeIsLastEnd ? data.id : undefined }
           );
           break;
         case 'delay':
@@ -103,7 +99,7 @@ const EventListItem = (props) => {
           break;
       }
     },
-    [calculateDuration, data, defaultPublic, emitError, eventsHandler, starTimeIsLastEnd]
+    [calculateDuration, data, defaultPublic, emitError, eventsHandler, startTimeIsLastEnd]
   );
 
   switch (type) {
@@ -147,5 +143,5 @@ EventListItem.propTypes = {
   next: PropTypes.bool,
   eventsHandler: PropTypes.func,
   delay: PropTypes.number,
-  previousEnd: PropTypes.number
-}
+  previousEnd: PropTypes.number,
+};