feat: download

- able to download file from express

client/src/app/api/eventsApi.js

@@ -1,6 +1,21 @@
 import axios from 'axios';
 import { eventsURL } from '../api/apiConstants';
 
+export const downloadEvents = async () => {
+  await axios({
+    url: eventsURL + '/download',
+    method: 'GET',
+    responseType: 'blob', // important
+  }).then((response) => {
+    const url = window.URL.createObjectURL(new Blob([response.data]));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', 'events.json');
+    document.body.appendChild(link);
+    link.click();
+  });
+};
+
 export const fetchAllEvents = async () => {
   const res = await axios.get(eventsURL);
   return res.data;

client/src/common/components/buttons/DownloadIconBtn.jsx

@@ -0,0 +1,18 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiDownload } from 'react-icons/fi';
+
+export default function DownloadIconBtn(props) {
+  const { clickhandler, ...rest } = props;
+  return (
+    <IconButton
+      size={props.size || 'xs'}
+      icon={<FiDownload />}
+      isRound
+      variant='outline'
+      onClick={clickhandler}
+      _focus={{ boxShadow: 'none' }}
+      colorScheme='whiteAlpha'
+      {...rest}
+    />
+  );
+}

client/src/features/editors/Editor.jsx

@@ -9,6 +9,8 @@ import { useDisclosure } from '@chakra-ui/hooks';
 import SettingsModal from '../modals/SettingsModal';
 import SettingsIconBtn from 'common/components/buttons/SettingsIconBtn';
 import { useEffect } from 'react';
+import DownloadIconBtn from 'common/components/buttons/DownloadIconBtn';
+import { downloadEvents } from 'app/api/eventsApi';
 
 export default function Editor() {
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -18,6 +20,11 @@ export default function Editor() {
     document.title = 'ontime - Editor';
   }, []);
 
+  const handleDownload = () => {
+    console.log('debug download');
+    downloadEvents();
+  };
+
   return (
     <>
       <SettingsModal isOpen={isOpen} onClose={onClose} />
@@ -67,6 +74,7 @@ export default function Editor() {
         <Box className={styles.settings}>
           <div className={styles.content}>
             <SettingsIconBtn size='md' clickhandler={onOpen} />
+            <DownloadIconBtn size='md' clickhandler={handleDownload} />
           </div>
         </Box>
       </div>

client/src/features/editors/Editor.module.css

@@ -101,6 +101,12 @@
   padding-top: 1.5em;
 }
 
+.settings > .content {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}
+
 .cornerButtonContainer {
   position: relative;
   top: -4.5em;

server/controllers/ontimeController.js

@@ -0,0 +1,11 @@
+// Create controller for GET request to '/ontime/download'
+// Returns -
+export const eventsDownload = async (req, res) => {
+  res.download('db.json', 'ontime events.json', (err) => {
+    if (err) {
+      res.status(500).send({
+        message: 'Could not download the file. ' + err,
+      });
+    }
+  });
+};

server/routes/ontimeRouter.js

@@ -0,0 +1,5 @@
+import express from 'express';
+export const router = express.Router();
+
+// create route between controller and '/ontime/download' endpoint
+router.get('/download', eventsDownload);