Feat/161 (#186)

* feat(time): add optional time format
* feat(time): show 12 hour time in stage timer
* feat(time): override locally
* feat(time): show timer in selected format
* feat(time): show 12 hour time in table header
* refactor: extract time formatting into utility
* refactor: migrate datetime library
* refactor(formatTime): centralise time formatting for viewers
* feature(12hour): version bump

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,
 };
-