Merge pull request #45 from ItsukiKigoshi/39-feat-google-drive-sync

Add Download CSV Feature

Author: ItsukiKigoshi

.gitignore

@@ -41,4 +41,5 @@ next-env.d.ts
 **/public/workbox-*.js
 **/public/workbox-*.js.map
 
-.env
+.env
+yarn.lock

package.json

@@ -28,12 +28,14 @@
     "@tiptap/extension-link": "^2.1.12",
     "@tiptap/react": "^2.1.12",
     "@tiptap/starter-kit": "^2.1.12",
+    "@types/react-csv": "^1.1.10",
     "@vercel/analytics": "^1.1.2",
     "dayjs": "^1.11.10",
     "embla-carousel-react": "^7.1.0",
     "next": "14.0.3",
     "next-pwa": "^5.6.0",
     "react": "^18",
+    "react-csv": "^2.2.2",
     "react-dom": "^18"
   },
   "devDependencies": {

src/app/page.tsx

@@ -1,8 +1,9 @@
 "use client";
-import { AppShell, Button, Flex, em } from "@mantine/core";
+import { AppShell, Button, Flex, Group, Text, em } from "@mantine/core";
 import { useDisclosure, useMediaQuery, useToggle } from "@mantine/hooks";
-import { IconCalendar, IconList } from "@tabler/icons-react";
+import { IconCalendar, IconDownload, IconList } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
+import { CSVLink } from "react-csv";
 import { Header } from "../components/Header";
 import { Navbar } from "../components/Navbar";
 import { Timetable } from "../components/Timetable";
@@ -207,7 +208,6 @@ export default function Page() {
       </AppShell.Main>
       <AppShell.Footer
         withBorder={false}
-        hiddenFrom="sm"
         h="60px"
         style={{ background: "rgba(0,0,0,0)" }}
       >
@@ -220,6 +220,17 @@ export default function Page() {
           >
             Search
           </Button> */}
+          <CSVLink
+            data={courses}
+            filename={`courses-${new Date().toISOString().slice(0, 10)}.csv`}
+          >
+            <Button color="gray" size="lg">
+              <Group>
+                <IconDownload />
+                <Text visibleFrom="sm">Download CSV</Text>
+              </Group>
+            </Button>
+          </CSVLink>
           <Button
             hiddenFrom="sm"
             size="lg"

src/components/AddCourse/index.tsx

@@ -1,7 +1,7 @@
 import { Course } from "@/src/type/Types";
-import { Button, Flex } from "@mantine/core";
+import { Button, Group, TextInput } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import { IconPlus } from "@tabler/icons-react";
+import { IconClipboard, IconPlus } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
 import ModalCourseEditor from "../ModalCourseEditor";
 
@@ -157,32 +157,22 @@ export default function AddCourse(props: {
         modalCourseEditorOpened={modalCourseEditorOpened}
         editorClose={editorClose}
       />
-      <Flex justify="center" gap="xs">
-        <Button
-          leftSection={<IconPlus />}
-          color="gray"
-          onClick={editorOpen}
-          w="100%"
-        >
+      <Group grow>
+        <Button leftSection={<IconPlus />} color="gray" onClick={editorOpen}>
           Add Manually
         </Button>
 
-        {/* <TextInput
+        <TextInput
           m="0"
           placeholder="Paste it!"
-          leftSection={
-            <IconClipboard
-              style={{ width: rem(12), height: rem(12) }}
-              stroke={1.5}
-            />
-          }
+          leftSection={<IconClipboard />}
           styles={{ section: { pointerEvents: "none" } }}
           value={query}
           error={errorMessage}
           onChange={(e) => setQuery(e.currentTarget.value)}
           onSubmit={handleSubmit}
-        />*/}
-      </Flex>
+        />
+      </Group>
     </>
   );
 }

yarn.lock

@@ -4820,6 +4820,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-csv@npm:^1.1.10":
+  version: 1.1.10
+  resolution: "@types/react-csv@npm:1.1.10"
+  dependencies:
+    "@types/react": "npm:*"
+  checksum: 10c0/58d300aacccc70c67d2df538726983b4483f3b446db67687baa0026bd4d562cbb956a47eab49516bbe22b9bf8e9b92d1e28f608361a77b2ffa36825bd9c72295
+  languageName: node
+  linkType: hard
+
 "@types/react-dom@npm:^18":
   version: 18.2.18
   resolution: "@types/react-dom@npm:18.2.18"
@@ -6445,6 +6454,7 @@ __metadata:
     "@types/jest": "npm:^29.5.9"
     "@types/node": "npm:^20"
     "@types/react": "npm:^18"
+    "@types/react-csv": "npm:^1.1.10"
     "@types/react-dom": "npm:^18"
     "@vercel/analytics": "npm:^1.1.2"
     dayjs: "npm:^1.11.10"
@@ -6458,6 +6468,7 @@ __metadata:
     postcss-preset-mantine: "npm:^1.11.0"
     postcss-simple-vars: "npm:^7.0.1"
     react: "npm:^18"
+    react-csv: "npm:^2.2.2"
     react-dom: "npm:^18"
     storybook: "npm:^7.5.3"
     storybook-addon-mantine: "npm:^3.0.1"
@@ -12955,6 +12966,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-csv@npm:^2.2.2":
+  version: 2.2.2
+  resolution: "react-csv@npm:2.2.2"
+  checksum: 10c0/287e7ba2085a32a0e65d7a19b9e063e43f06f75ab6ebc18bb52b518007a1d6ec5f5ce33fc7c4e290e3ea41cfb251657b6e62aadadc8d7ffcef7e53d43bf3eb69
+  languageName: node
+  linkType: hard
+
 "react-docgen-typescript@npm:^2.2.2":
   version: 2.2.2
   resolution: "react-docgen-typescript@npm:2.2.2"