feat: upload file

client/src/features/menu/MenuBar.jsx

@@ -1,4 +1,6 @@
-import { downloadEvents } from 'app/api/ontimeApi';
+import { useMutation, useQueryClient } from 'react-query';
+import { downloadEvents, uploadEventsWithPath } from 'app/api/ontimeApi';
+import { EVENTS_TABLE } from 'app/api/apiConstants';
 import DownloadIconBtn from './buttons/DownloadIconBtn';
 import SettingsIconBtn from './buttons/SettingsIconBtn';
 import InfoIconBtn from './buttons/InfoIconBtn';
@@ -7,15 +9,49 @@ import MinIconBtn from './buttons/MinIconBtn';
 import QuitIconBtn from './buttons/QuitIconBtn';
 import style from './MenuBar.module.css';
 import HelpIconBtn from './buttons/HelpIconBtn';
-const { ipcRenderer } = window.require('electron');
+import UploadIconBtn from './buttons/UploadIconBtn';
+
+const { ipcRenderer, remote } = window.require('electron');
 
 export default function MenuBar(props) {
   const { onOpen, onClose } = props;
+  const queryClient = useQueryClient();
+  const uploaddbPath = useMutation(uploadEventsWithPath, {
+    onSettled: () => {
+      queryClient.invalidateQueries(EVENTS_TABLE);
+    },
+  });
 
   const handleDownload = () => {
     downloadEvents();
   };
 
+  const handleUpload = () => {
+    remote.dialog
+      .showOpenDialog({
+        title: 'Select the File to be uploaded',
+        buttonLabel: 'Upload',
+        filters: [
+          {
+            name: 'Text Files',
+            extensions: ['json'],
+          },
+        ],
+        // Specifying the File Selector Property
+        properties: ['openFile'],
+      })
+      .then((file) => {
+        // Stating whether dialog operation was
+        // cancelled or not.
+        if (!file.canceled) {
+          uploaddbPath.mutate(file.filePaths[0].toString());
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
   const handleIPC = (action) => {
     switch (action) {
       case 'min':
@@ -55,11 +91,17 @@ export default function MenuBar(props) {
         clickhandler={() => handleIPC('help')}
       />
       <SettingsIconBtn style={{ fontSize: '1.5em' }} size='lg' disabled />
+      <div className={style.gap} />
       <InfoIconBtn
         style={{ fontSize: '1.5em' }}
         size='lg'
         clickhandler={onOpen}
       />
+      <UploadIconBtn
+        style={{ fontSize: '1.5em' }}
+        size='lg'
+        clickhandler={handleUpload}
+      />
       <DownloadIconBtn
         style={{ fontSize: '1.5em' }}
         size='lg'

client/src/features/menu/buttons/UploadIconBtn.jsx

@@ -0,0 +1,19 @@
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { FiUpload } from 'react-icons/fi';
+
+export default function UploadIconBtn(props) {
+  const { clickhandler, ...rest } = props;
+  return (
+    <Tooltip label='Upload File'>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<FiUpload />}
+        colorScheme='white'
+        onClick={clickhandler}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}