Feat/excel (#45)

* add dependency

adding dependency to parse the excel file in the node side

* import file

ability to import file
- add extension
- safeguard file type and size

* user is able to upload json or excel

* chore: extract logic into self contained function

* associate model with version

* test id generation

* parse excel data

* prevent UI crash on bad data

* extract validation into self contained function

* chore: add more tests for bad data

* config: stop from opening browser on start

* fix comma in sample db

* handle corrupt files

* error boundary around main components

* jsdocs

* increase id length

* parse excel time string

* feat: excel parsing

* validate json db before import

* chore: test event validator

* feat: make function to clean convert strings

* chore: test parser

* chore: jsdocs

* fix: bug on upload

prevent bug where the component would prevent upload of same file twice

client/src/features/editors/Editor.jsx

@@ -4,6 +4,7 @@ import { useDisclosure } from '@chakra-ui/hooks';
 import styles from './Editor.module.css';
 import MenuBar from 'features/menu/MenuBar';
 import ModalManager from 'features/modals/ModalManager';
+import ErrorBoundary from 'common/components/errorBoundary/ErrorBoundary';
 
 const EventListWrapper = lazy(() =>
   import('features/editors/list/EventListWrapper')
@@ -26,34 +27,44 @@ export default function Editor() {
 
       <div className={styles.mainContainer}>
         <Box id='settings' className={styles.settings}>
-          <MenuBar onOpen={onOpen} />
+          <ErrorBoundary>
+            <MenuBar onOpen={onOpen} />
+          </ErrorBoundary>
         </Box>
 
         <Box className={styles.editor}>
           <h1>Event List</h1>
           <div className={styles.content}>
-            <EventListWrapper />
+            <ErrorBoundary>
+              <EventListWrapper />
+            </ErrorBoundary>
           </div>
         </Box>
 
         <Box className={styles.messages}>
           <h1>Display Messages</h1>
           <div className={styles.content}>
-            <MessageControl />
+            <ErrorBoundary>
+              <MessageControl />
+            </ErrorBoundary>
           </div>
         </Box>
 
         <Box className={styles.playback}>
           <h1>Timer Control</h1>
           <div className={styles.content}>
-            <PlaybackControl />
+            <ErrorBoundary>
+              <PlaybackControl />
+            </ErrorBoundary>
           </div>
         </Box>
 
         <Box className={styles.info}>
           <h1>Info</h1>
           <div className={styles.content}>
-            <Info />
+            <ErrorBoundary>
+              <Info />
+            </ErrorBoundary>
           </div>
         </Box>
       </div>

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

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from 'react-query';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import {
   fetchAllEvents,
   requestPatch,
@@ -26,6 +26,7 @@ export default function EventListWrapper() {
     EVENTS_TABLE,
     fetchAllEvents
   );
+  const [events, setEvents] = useState(null);
 
   const addEvent = useMutation(requestPost, {
     // we optimistically update here
@@ -327,11 +328,17 @@ export default function EventListWrapper() {
     [data]
   );
 
+  // Front end should handle bad arguments
+  useEffect(() => {
+    if (data == null) return;
+    setEvents(data.filter((d) => Object.keys(d).length > 0));
+  }, [data]);
+
   return (
     <>
       <EventListMenu eventsHandler={eventsHandler} />
-      {status === 'success' ? (
-        <EventList events={data} eventsHandler={eventsHandler} />
+      {status === 'success' && events != null ? (
+        <EventList events={events} eventsHandler={eventsHandler} />
       ) : (
         <Empty text='Connecting to server' />
       )}

client/src/features/menu/MenuBar.jsx

@@ -33,14 +33,33 @@ export default function MenuBar(props) {
 
   const handleUpload = (event) => {
     const fileUploaded = event.target.files[0];
-
     if (fileUploaded == null) return;
+    console.log(fileUploaded);
+
+    // Limit file size to 1MB
+    if (fileUploaded.size > 1000000) {
+      console.log('Error: File size limit (1MB) exceeded');
+      return;
+    }
+
+    // Check file extension
+    if (fileUploaded.name.endsWith('.xlsx')) {
+      console.log('excel file');
+    } else if (fileUploaded.name.endsWith('.json')) {
+      console.log('json file');
+    } else {
+      console.log('Error: File type unknown');
+      return;
+    }
 
     try {
       uploaddb.mutate(fileUploaded);
     } catch (error) {
       console.log(error);
     }
+
+    // reset input value
+    hiddenFileInput.current.value = '';
   };
 
   const handleIPC = (action) => {
@@ -102,7 +121,7 @@ export default function MenuBar(props) {
         style={{ display: 'none' }}
         ref={hiddenFileInput}
         onChange={handleUpload}
-        accept='.json'
+        accept='.json, .xlsx'
       />
       <UploadIconBtn
         style={{ fontSize: '1.5em' }}