From b61a82627e8aeac13906df6dabf16424e7837a52 Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Wed, 26 May 2021 23:10:00 +0200
Subject: [PATCH] feat: download

- able to download file from express
---
 client/src/app/api/eventsApi.js                | 15 +++++++++++++++
 .../components/buttons/DownloadIconBtn.jsx     | 18 ++++++++++++++++++
 client/src/features/editors/Editor.jsx         |  8 ++++++++
 client/src/features/editors/Editor.module.css  |  6 ++++++
 server/controllers/ontimeController.js         | 11 +++++++++++
 server/routes/ontimeRouter.js                  |  5 +++++
 6 files changed, 63 insertions(+)
 create mode 100644 client/src/common/components/buttons/DownloadIconBtn.jsx
 create mode 100644 server/controllers/ontimeController.js
 create mode 100644 server/routes/ontimeRouter.js

diff --git a/client/src/app/api/eventsApi.js b/client/src/app/api/eventsApi.js
index 17a2ada40..a185a54be 100644
--- a/client/src/app/api/eventsApi.js
+++ b/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;
diff --git a/client/src/common/components/buttons/DownloadIconBtn.jsx b/client/src/common/components/buttons/DownloadIconBtn.jsx
new file mode 100644
index 000000000..8b30023b4
--- /dev/null
+++ b/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}
+    />
+  );
+}
diff --git a/client/src/features/editors/Editor.jsx b/client/src/features/editors/Editor.jsx
index bc727071b..c25a67f11 100644
--- a/client/src/features/editors/Editor.jsx
+++ b/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>
diff --git a/client/src/features/editors/Editor.module.css b/client/src/features/editors/Editor.module.css
index 3e20053c6..d29ab4a52 100644
--- a/client/src/features/editors/Editor.module.css
+++ b/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;
diff --git a/server/controllers/ontimeController.js b/server/controllers/ontimeController.js
new file mode 100644
index 000000000..c7f3a55d2
--- /dev/null
+++ b/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,
+      });
+    }
+  });
+};
diff --git a/server/routes/ontimeRouter.js b/server/routes/ontimeRouter.js
new file mode 100644
index 000000000..c45d1b3d7
--- /dev/null
+++ b/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);