Merge pull request #42 from mochi-sann/update-readme

ブラウザに時間割を保存できるようにした
mochi-sann · Feb 13, 2023 · 6a2ec9a · 6a2ec9a
2 parents acda06e + 455e45d
commit 6a2ec9a
Show file tree

Hide file tree

Showing 4 changed files with 263 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -33,8 +33,9 @@
     "next": "12.2.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "^7.34.2",
-    "react-textarea-autosize": "^8.3.4"
+    "react-hook-form": "^7.43.1",
+    "react-textarea-autosize": "^8.3.4",
+    "react-use": "^17.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.18.13",

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "class2icall",
-    "version": "0.3.1"
+    "version": "0.4.0"
   },
   "tauri": {
     "allowlist": {

diff --git a/src/components/ClassScheduleTable.tsx b/src/components/ClassScheduleTable.tsx
@@ -1,18 +1,18 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import {
   Box,
   Button,
   Flex,
   HStack,
-  Input,
   Table,
   TableContainer,
   Tbody,
   Td,
   Th,
   Thead,
   Tr,
+  VStack,
 } from "@chakra-ui/react";
 import {
   createColumnHelper,
@@ -21,6 +21,7 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import { FormProvider, useForm } from "react-hook-form";
+import { useLocalStorage } from "react-use";
 
 import { useClassTableIcal } from "src/hooks/useClassTableIcal";
 import { ConvertToIcal } from "src/lib/ConvertToIcal";
@@ -112,13 +113,14 @@ const columns = [
 ];
 
 const ClassScheduleTable: React.FC<ClassScheduleTableProps> = (props) => {
-  const [data, setData] = React.useState(() => [...defaultData]);
+  const [data] = React.useState(() => [...defaultData]);
 
   const table = useReactTable({
     data,
     columns,
     getCoreRowModel: getCoreRowModel(),
   });
+
   const TestClassSchedule = (dayOfweek: string) => {
     return {
       summary: "",
@@ -127,30 +129,44 @@ const ClassScheduleTable: React.FC<ClassScheduleTableProps> = (props) => {
       location: "",
     };
   };
+  const defaultValues: FormValue = {
+    startDate: dayjsWapper().format("YYYY-MM-DD"),
+    endDate: dayjsWapper().add(90, "day").format("YYYY-MM-DD"),
+
+    LessonTime: [
+      { start: "08:40", end: "10:10" },
+      { start: "10:20", end: "11:50" },
+      { start: "12:40", end: "14:10" },
+      { start: "14:20", end: "15:50" },
+      { start: "16:00", end: "17:30" },
+      { start: "17:40", end: "19:10" },
+    ],
+    Mon: new Array(6).fill({ ...TestClassSchedule("Mon") }),
+    Tue: new Array(6).fill({ ...TestClassSchedule("Tue") }),
+    Wed: new Array(6).fill({ ...TestClassSchedule("Wed") }),
+    Thu: new Array(6).fill({ ...TestClassSchedule("Thu") }),
+    Fri: new Array(6).fill({ ...TestClassSchedule("Fri") }),
+    Sat: new Array(6).fill({ ...TestClassSchedule("Sat") }),
+  };
+
+  const [LocalStoragevalue, setLocalStorageValue] = useLocalStorage<FormValue>(
+    "form-local-storage",
+    defaultValues
+  );
+
   const methods = useForm<FormValue>({
-    defaultValues: {
-      startDate: dayjsWapper().format("YYYY-MM-DD"),
-      endDate: dayjsWapper().add(90, "day").format("YYYY-MM-DD"),
-
-      LessonTime: [
-        { start: "08:40", end: "10:10" },
-        { start: "10:20", end: "11:50" },
-        { start: "12:40", end: "14:10" },
-        { start: "14:20", end: "15:50" },
-        { start: "16:00", end: "17:30" },
-        { start: "17:40", end: "19:10" },
-      ],
-      Mon: new Array(6).fill({ ...TestClassSchedule("Mon") }),
-      Tue: new Array(6).fill({ ...TestClassSchedule("Tue") }),
-      Wed: new Array(6).fill({ ...TestClassSchedule("Wed") }),
-      Thu: new Array(6).fill({ ...TestClassSchedule("Thu") }),
-      Fri: new Array(6).fill({ ...TestClassSchedule("Fri") }),
-      Sat: new Array(6).fill({ ...TestClassSchedule("Sat") }),
-    },
+    defaultValues: defaultValues,
   });
+
+  useEffect(() => {
+    if (LocalStoragevalue) {
+      methods.reset(LocalStoragevalue);
+    }
+  }, []);
+
   const { DownloadFile } = useClassTableIcal();
+
   const onSubmit = (data: FormValue) => {
-    console.log(data);
     // setCalenderEvents(ConvertToIcal(data));
     DownloadFile(ConvertToIcal(data));
   };
@@ -232,9 +248,30 @@ const ClassScheduleTable: React.FC<ClassScheduleTableProps> = (props) => {
               </Table>
             </TableContainer>
             <Box py={4}>
-              <Button type={"submit"} w="full" colorScheme={"blue"}>
-                ダウンロード
-              </Button>
+              <VStack>
+                <Button type={"submit"} w="full" colorScheme={"blue"}>
+                  ダウンロード
+                </Button>
+                <Button
+                  w="full"
+                  colorScheme={"green"}
+                  onClick={() => {
+                    setLocalStorageValue(methods.getValues());
+                  }}
+                >
+                  ブラウザに保存
+                </Button>
+                <Button
+                  w="full"
+                  colorScheme={"red"}
+                  onClick={() => {
+                    setLocalStorageValue(defaultValues);
+                    location.reload();
+                  }}
+                >
+                  リセット
+                </Button>
+              </VStack>
             </Box>
           </Flex>
         </form>