From 0e4a78f60784040b037845423effbd35ac95052c Mon Sep 17 00:00:00 2001 From: Giang Vu Date: Sun, 15 Sep 2024 13:08:01 +1000 Subject: [PATCH] feat: store user input data in indexedDB; remove sessionStorage --- frontend/package-lock.json | 183 ++++++++++++++++++- frontend/package.json | 5 +- frontend/src/components/ProceedButton.tsx | 16 +- frontend/src/components/Sidebar.tsx | 17 -- frontend/src/components/Spreadsheet.tsx | 55 +++--- frontend/src/components/UploadButton.tsx | 36 ++-- frontend/src/pages/TimetableMod.tsx | 2 +- frontend/src/pages/spreadsheets/Building.tsx | 2 +- frontend/src/pages/spreadsheets/Campus.tsx | 11 -- frontend/src/pages/spreadsheets/Course.tsx | 11 -- frontend/src/pages/spreadsheets/Room.tsx | 4 +- frontend/src/pages/spreadsheets/Unit.tsx | 2 +- frontend/src/routes.tsx | 4 - frontend/src/scripts/persistence.ts | 118 ++++++++++++ 14 files changed, 354 insertions(+), 112 deletions(-) delete mode 100644 frontend/src/pages/spreadsheets/Campus.tsx delete mode 100644 frontend/src/pages/spreadsheets/Course.tsx create mode 100644 frontend/src/scripts/persistence.ts diff --git a/frontend/package-lock.json b/frontend/package-lock.json index edf8bbb..faf991f 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -13,10 +13,13 @@ "@mui/base": "^5.0.0-beta.40", "@mui/icons-material": "^5.16.7", "@mui/material": "^5.16.7", + "dexie": "^4.0.8", + "dexie-react-hooks": "^1.1.7", "jspreadsheet-ce": "^4.2.1", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-router-dom": "^6.26.1" + "react-router-dom": "^6.26.1", + "read-excel-file": "^5.8.5" }, "devDependencies": { "@eslint/js": "^9.9.0", @@ -2025,6 +2028,15 @@ "vite": "^4.2.0 || ^5.0.0" } }, + "node_modules/@xmldom/xmldom": { + "version": "0.8.10", + "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz", + "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==", + "license": "MIT", + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/acorn": { "version": "8.12.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz", @@ -2126,6 +2138,12 @@ "dev": true, "license": "MIT" }, + "node_modules/bluebird": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", + "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==", + "license": "MIT" + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -2273,6 +2291,12 @@ "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", "license": "MIT" }, + "node_modules/core-util-is": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", + "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==", + "license": "MIT" + }, "node_modules/cosmiconfig": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", @@ -2334,6 +2358,23 @@ "dev": true, "license": "MIT" }, + "node_modules/dexie": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/dexie/-/dexie-4.0.8.tgz", + "integrity": "sha512-1G6cJevS17KMDK847V3OHvK2zei899GwpDiqfEXHP1ASvme6eWJmAp9AU4s1son2TeGkWmC0g3y8ezOBPnalgQ==", + "license": "Apache-2.0" + }, + "node_modules/dexie-react-hooks": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/dexie-react-hooks/-/dexie-react-hooks-1.1.7.tgz", + "integrity": "sha512-Lwv5W0Hk+uOW3kGnsU9GZoR1er1B7WQ5DSdonoNG+focTNeJbHW6vi6nBoX534VKI3/uwHebYzSw1fwY6a7mTw==", + "license": "Apache-2.0", + "peerDependencies": { + "@types/react": ">=16", + "dexie": "^3.2 || ^4.0.1-alpha", + "react": ">=16" + } + }, "node_modules/dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", @@ -2357,6 +2398,15 @@ "csstype": "^3.0.2" } }, + "node_modules/duplexer2": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz", + "integrity": "sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==", + "license": "BSD-3-Clause", + "dependencies": { + "readable-stream": "^2.0.2" + } + }, "node_modules/electron-to-chromium": { "version": "1.5.13", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.13.tgz", @@ -2748,6 +2798,12 @@ "reusify": "^1.0.4" } }, + "node_modules/fflate": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.7.4.tgz", + "integrity": "sha512-5u2V/CDW15QM1XbbgS+0DfPxVB+jUKhWEKuuFuHncbk3tEEqzmoXL+2KyOFuKGqOnmdIy0/davWF1CkuwtibCw==", + "license": "MIT" + }, "node_modules/file-entry-cache": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz", @@ -2818,6 +2874,20 @@ "dev": true, "license": "ISC" }, + "node_modules/fs-extra": { + "version": "11.2.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz", + "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==", + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=14.14" + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -2899,6 +2969,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/graceful-fs": { + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", + "license": "ISC" + }, "node_modules/graphemer": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz", @@ -2978,6 +3054,12 @@ "node": ">=0.8.19" } }, + "node_modules/inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "license": "ISC" + }, "node_modules/is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", @@ -3042,6 +3124,12 @@ "node": ">=8" } }, + "node_modules/isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==", + "license": "MIT" + }, "node_modules/isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", @@ -3120,6 +3208,18 @@ "node": ">=6" } }, + "node_modules/jsonfile": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", + "license": "MIT", + "dependencies": { + "universalify": "^2.0.0" + }, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, "node_modules/jspreadsheet-ce": { "version": "4.13.4", "resolved": "https://registry.npmjs.org/jspreadsheet-ce/-/jspreadsheet-ce-4.13.4.tgz", @@ -3278,6 +3378,12 @@ "dev": true, "license": "MIT" }, + "node_modules/node-int64": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz", + "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==", + "license": "MIT" + }, "node_modules/node-releases": { "version": "2.0.18", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz", @@ -3467,6 +3573,12 @@ "node": ">= 0.8.0" } }, + "node_modules/process-nextick-args": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", + "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", + "license": "MIT" + }, "node_modules/prop-types": { "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", @@ -3604,6 +3716,32 @@ "react-dom": ">=16.6.0" } }, + "node_modules/read-excel-file": { + "version": "5.8.5", + "resolved": "https://registry.npmjs.org/read-excel-file/-/read-excel-file-5.8.5.tgz", + "integrity": "sha512-KDDcSsI3VzXTNUBs8q7RwTYrGRE8RZgNwGUivYq13bQtMp1KJmocyBs/EiPTJaFk4I8Ri9iDF+ht2A4GUrudMg==", + "license": "MIT", + "dependencies": { + "@xmldom/xmldom": "^0.8.2", + "fflate": "^0.7.3", + "unzipper": "^0.12.2" + } + }, + "node_modules/readable-stream": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz", + "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==", + "license": "MIT", + "dependencies": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, "node_modules/regenerator-runtime": { "version": "0.14.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", @@ -3707,6 +3845,12 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "license": "MIT" + }, "node_modules/scheduler": { "version": "0.23.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", @@ -3778,6 +3922,15 @@ "node": ">=0.10.0" } }, + "node_modules/string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "license": "MIT", + "dependencies": { + "safe-buffer": "~5.1.0" + } + }, "node_modules/strip-ansi": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", @@ -3927,6 +4080,28 @@ } } }, + "node_modules/universalify": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz", + "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==", + "license": "MIT", + "engines": { + "node": ">= 10.0.0" + } + }, + "node_modules/unzipper": { + "version": "0.12.3", + "resolved": "https://registry.npmjs.org/unzipper/-/unzipper-0.12.3.tgz", + "integrity": "sha512-PZ8hTS+AqcGxsaQntl3IRBw65QrBI6lxzqDEL7IAo/XCEqRTKGfOX56Vea5TH9SZczRVxuzk1re04z/YjuYCJA==", + "license": "MIT", + "dependencies": { + "bluebird": "~3.7.2", + "duplexer2": "~0.1.4", + "fs-extra": "^11.2.0", + "graceful-fs": "^4.2.2", + "node-int64": "^0.4.0" + } + }, "node_modules/update-browserslist-db": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz", @@ -3968,6 +4143,12 @@ "punycode": "^2.1.0" } }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", + "license": "MIT" + }, "node_modules/vite": { "version": "5.4.2", "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index 36456be..6614815 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -15,10 +15,13 @@ "@mui/base": "^5.0.0-beta.40", "@mui/icons-material": "^5.16.7", "@mui/material": "^5.16.7", + "dexie": "^4.0.8", + "dexie-react-hooks": "^1.1.7", "jspreadsheet-ce": "^4.2.1", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-router-dom": "^6.26.1" + "react-router-dom": "^6.26.1", + "read-excel-file": "^5.8.5" }, "devDependencies": { "@eslint/js": "^9.9.0", diff --git a/frontend/src/components/ProceedButton.tsx b/frontend/src/components/ProceedButton.tsx index e096e6a..8630d0c 100644 --- a/frontend/src/components/ProceedButton.tsx +++ b/frontend/src/components/ProceedButton.tsx @@ -5,11 +5,11 @@ interface ProceedButtonProps { fileChosen: File | null; } -export default function ProceedButton({ fileChosen }:ProceedButtonProps) { - const navigate = useNavigate(); - if (fileChosen === null) { - return - } else { - return ; - } -}` ` \ No newline at end of file +export default function ProceedButton({ fileChosen }: ProceedButtonProps) { + const navigate = useNavigate(); + if (fileChosen === null) { + return + } else { + return ; + } +} \ No newline at end of file diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index a51587f..759ace2 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -32,14 +32,6 @@ export default function Sidebar({ marginTop, width }: SidebarProps) { anchor="left" > - - - - - - - - @@ -59,15 +51,6 @@ export default function Sidebar({ marginTop, width }: SidebarProps) { - - - - - - - - - diff --git a/frontend/src/components/Spreadsheet.tsx b/frontend/src/components/Spreadsheet.tsx index 7af472f..20ce1f8 100644 --- a/frontend/src/components/Spreadsheet.tsx +++ b/frontend/src/components/Spreadsheet.tsx @@ -1,18 +1,15 @@ import { useRef, useEffect } from "react"; -import jspreadsheet, { CellValue, JspreadsheetInstance, JspreadsheetInstanceElement, JSpreadsheetOptions } from "jspreadsheet-ce"; +import jspreadsheet, { JspreadsheetInstance, JspreadsheetInstanceElement } from "jspreadsheet-ce"; import "../../node_modules/jspreadsheet-ce/dist/jspreadsheet.css"; import "../styles/spreadsheet.css" import Button from "@mui/material/Button"; +import { getSpreadsheetData, storeSpreadsheetData } from "../scripts/persistence"; interface SpreadsheetProps { headers: string[]; storageKey: string; } -type SavedSpreadsheetOpt = { - cellvalues: CellValue[][]; -} - export default function Spreadsheet({ headers, storageKey }: SpreadsheetProps) { const jRef = useRef(null); @@ -70,7 +67,7 @@ export default function Spreadsheet({ headers, storageKey }: SpreadsheetProps) { } } }); - + return items; }; @@ -107,44 +104,44 @@ export default function Spreadsheet({ headers, storageKey }: SpreadsheetProps) { // ], }; - // mount: create spreadsheet using data from sessionStorage (if exist), + // mount: create spreadsheet using data from indexedDB (if exist), // otherwise create a blank default. useEffect(() => { // console.log(`Mount ${storageKey}`); - if (jRef.current && !jRef.current.jspreadsheet) { - const savedSpreadsheetData = sessionStorage.getItem(storageKey); - - if (savedSpreadsheetData) { - const ssd: SavedSpreadsheetOpt = JSON.parse(savedSpreadsheetData); - options.data = ssd.cellvalues; - } - - jspreadsheet(jRef.current, options); - } + getSpreadsheetData(storageKey) + .then((data) => { + if (data && jRef.current && !jRef.current.jspreadsheet) { + options.data = data; + jspreadsheet(jRef.current, options); + } + }); }); - // unmount: save spreadsheet data to sessionStorage + // unmount: save spreadsheet data to indexedDB useEffect(() => { const instanceElem: JspreadsheetInstanceElement | null = jRef.current; function cleanup() { // console.log(`Unmount ${storageKey}`); - if (instanceElem) { - const newOpts: SavedSpreadsheetOpt = { - cellvalues: instanceElem.jspreadsheet.getData(), - }; - sessionStorage.setItem(storageKey, JSON.stringify(newOpts)); - } - else { - throw new Error( - "JspreadsheetInstanceElement is null" - ) + if (instanceElem && instanceElem.jspreadsheet) { + const data = instanceElem.jspreadsheet.getJson(false); + storeSpreadsheetData(data, storageKey); } } - return cleanup; }) + // page refresh: save spreadsheet data to indexedDB + useEffect(() => { + window.addEventListener("beforeunload", () => { + const instanceElem: JspreadsheetInstanceElement | null = jRef.current; + if (instanceElem && instanceElem.jspreadsheet) { + const data = instanceElem.jspreadsheet.getJson(false); + storeSpreadsheetData(data, storageKey); + } + }); + }) + const addRow = () => { if (jRef.current && jRef.current.jexcel) { jRef.current.jexcel.insertRow(); diff --git a/frontend/src/components/UploadButton.tsx b/frontend/src/components/UploadButton.tsx index 7340f08..d2767b5 100644 --- a/frontend/src/components/UploadButton.tsx +++ b/frontend/src/components/UploadButton.tsx @@ -2,6 +2,7 @@ import React, { useState } from "react"; import { styled } from "@mui/material/styles"; import Button from "@mui/material/Button"; import UploadFileIcon from "@mui/icons-material/UploadFile"; +import { getFile, storeFile } from "../scripts/persistence"; interface InputFileUploadProps { setFileChosen: (file: File | null) => void; @@ -20,39 +21,24 @@ const VisuallyHiddenInput = styled("input")({ }); export default function UploadButton ({ setFileChosen }: InputFileUploadProps) { - const [file, setFile] = useState(null); // Handler for file selection const handleFileChange = (event: React.ChangeEvent) => { if (event.target.files && event.target.files.length > 0) { - setFile(event.target.files[0]); - setFileChosen(event.target.files[0]); + storeFile(event.target.files[0]) + .then(() => { + return getFile(); + }) + .then((file) => { + setFileChosen(file); + }) + .catch((error) => { + alert("Upload failed. Please try again. " + error); + }) console.log("File selected:", event.target.files[0]); } }; - // Example of sending the file to a server - const handleUpload = () => { - if (!file) { - console.error("No file selected for upload."); - return; - } - - const formData = new FormData(); - formData.append("file", file); - - fetch("http://url.com", { - method: "POST", - body: formData, - }) - .then((response) => response.json()) - .then((data) => { - console.log("File uploaded successfully:", data); - }) - .catch((error) => { - console.error("Error uploading file:", error); - }); - }; return (