Improve system storage and data structure

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.17",
     "@types/node": "20.6.0",
+    "@types/papaparse": "^5.3.14",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.15",
@@ -23,8 +24,10 @@
     "eslint-config-next": "13.4.19",
     "fast-sort": "3.4.0",
     "framer-motion": "^10.17.4",
+    "idb-wrapper": "^1.7.2",
     "lightweight-charts": "^4.1.0",
     "next": "13.5.1",
+    "papaparse": "^5.4.1",
     "postcss": "8.4.31",
     "pretty-ms": "^8.0.0",
     "react": "18.2.0",

src/app/cubes/page.tsx

@@ -11,11 +11,14 @@ import { OptionsContainer } from "@/components/cubes/OptionsContainer";
 import { useCubes } from "@/hooks/useCubes";
 import { AnimatePresence } from "framer-motion";
 import useModalCube from "@/hooks/useModalCube";
+import { useCubesModalStore } from "@/store/CubesModalStore";
+import { useSettingsModalStore } from "@/store/SettingsModalStore";
 
 export default function CubesPage() {
-  const { filterCubes, modalOpen, setModalOpen, lang, handleSearchFilter } =
-    useCubes();
+  const { filterCubes, handleSearchFilter } = useCubes();
+  const { modalOpen, setModalOpen } = useCubesModalStore();
   const { setSelectedCategory } = useModalCube();
+  const { lang } = useSettingsModalStore();
 
   return (
     <>

src/app/page.tsx

@@ -8,6 +8,7 @@ import FullscreenOption from "@/components/timer/FullscreenOption";
 import HintPanel from "@/components/timer/HintPanel";
 import ScrambleModal from "@/components/timer/ScrambleModal";
 import useInitializeTimer from "@/hooks/useInitializeHint";
+import ImportModal from "@/components/menu-settings/ImportModal";
 
 export default function Home() {
   useInitializeTimer();
@@ -22,6 +23,7 @@ export default function Home() {
       <HintPanel />
       <FullscreenOption />
       <ScrambleModal />
+      <ImportModal />
     </>
   );
 }

src/components/PreloadSettings.tsx

@@ -3,24 +3,18 @@ import { usePreloadSettings } from "@/hooks/usePreloadSettings";
 import { Navbar } from "@/components/navbar/index";
 import { useSettingsModalStore } from "@/store/SettingsModalStore";
 import { useTimerStore } from "@/store/timerStore";
-import { useEffect } from "react";
 import { useBackgroundImageStore } from "@/store/BackgroundThemeStore";
 export default function PreloadSettings({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  usePreloadSettings();
   const { settings } = useSettingsModalStore();
   const { isSolving, timerStatus } = useTimerStore();
   const theme = settings ? settings.theme.background.color : "light";
-  const { backgroundImage, setBackgroundImage } = useBackgroundImageStore();
-  useEffect(() => {
-    const storedImage = localStorage.getItem("customBackgroundImage");
-    if (storedImage) {
-      setBackgroundImage(storedImage);
-    }
-  }, [setBackgroundImage]);
+  const { backgroundImage } = useBackgroundImageStore();
+
+  usePreloadSettings();
 
   return (
     <>

src/components/Select.tsx

@@ -7,13 +7,13 @@ import { Categories } from "@/interfaces/Categories";
 import { cubeCollection } from "@/lib/const/cubeCollection";
 import genId from "@/lib/genId";
 import { useTimerStore } from "@/store/timerStore";
-import findCube from "@/lib/findCube";
 import translation from "@/translations/global.json";
 import { useSettingsModalStore } from "@/store/SettingsModalStore";
 import { useCubesModalStore } from "@/store/CubesModalStore";
 import useClickOutside from "@/hooks/useClickOutside";
 import { AnimatePresence, motion } from "framer-motion";
 import { useBackgroundImageStore } from "@/store/BackgroundThemeStore";
+import { Cube } from "@/interfaces/Cube";
 
 export default function Select() {
   const [open, setOpen] = useState<boolean>(false);
@@ -138,19 +138,18 @@ function Option({
   cubeId: string;
   handleClose: () => void;
 }) {
-  const { selectedCube, setSelectedCube, setNewScramble, setLastSolve } =
+  const { selectedCube, setSelectedCube, setNewScramble, setLastSolve, cubes } =
     useTimerStore();
 
   return (
     <div
       onClick={() => {
         if (setSelectedCube && setNewScramble) {
-          const cube = findCube({ cubeId: cubeId });
-          if (cube) {
-            setSelectedCube(cube);
-            setNewScramble(cube);
-            setLastSolve(null);
-          }
+          const selectCube = cubes?.find((cube: Cube) => cube.id === cubeId);
+          if (!selectCube) return;
+          setSelectedCube(selectCube);
+          setNewScramble(selectCube);
+          setLastSolve(null);
         }
         handleClose();
       }}

src/components/cubes/BookmarkFav.tsx

@@ -1,21 +1,22 @@
 import FavoriteSolid from "@/icons/FavoriteSolid";
+import { Cube } from "@/interfaces/Cube";
 import { useState } from "react";
 
 export default function BookmarkFav({
   isChecked,
   setFavorite,
-  cubeId,
+  cube,
 }: {
   isChecked: boolean;
-  setFavorite: (cubeId: string) => void;
-  cubeId: string;
+  setFavorite: (cube: Cube) => void;
+  cube: Cube;
 }) {
   const [checked, setChecked] = useState(isChecked);
 
   return (
     <button
       onClick={() => {
-        setFavorite(cubeId);
+        setFavorite(cube);
         setChecked(!checked);
       }}
       aria-pressed={checked}

src/components/cubes/ModalCreate.tsx

@@ -101,9 +101,7 @@ export default function ModalCreate() {
                     alt={category.name}
                     id={category.id}
                     value={category.name}
-                    handleClickRadio={
-                      !editingCube ? handleClickRadio : () => {}
-                    }
+                    handleClickRadio={handleClickRadio}
                     selectedCategory={selectedCategory}
                   />
                 );
@@ -140,10 +138,10 @@ export default function ModalCreate() {
               ) : null}
 
               <button
-                onClick={() =>
+                onClick={async () =>
                   editingCube
-                    ? handleEditCube(cubeName, selectedCategory)
-                    : handleCreateCube(cubeName, selectedCategory)
+                    ? await handleEditCube(cubeName, selectedCategory)
+                    : await handleCreateCube(cubeName, selectedCategory)
                 }
                 data-modal-hide="defaultModal"
                 type="button"

src/components/cubes/TableRow.tsx

@@ -1,29 +1,36 @@
 import { Cube } from "@/interfaces/Cube";
 import BookmarkFav from "@/components/cubes/BookmarkFav";
 import Ellipsis from "@/icons/Ellipsis";
-import updateCube from "@/lib/updateCube";
 import { useTimerStore } from "@/store/timerStore";
 import { useCubesModalStore } from "@/store/CubesModalStore";
 import Play from "@/icons/Play";
 import Stop from "@/icons/Stop";
 import translation from "@/translations/global.json";
 import { useSettingsModalStore } from "@/store/SettingsModalStore";
 import { useRouter } from "next/navigation";
+import { getAllCubes, saveCube } from "@/db/dbOperations";
 
 export default function TableRow({ cube }: { cube: Cube }) {
   const { lang } = useSettingsModalStore();
   const router = useRouter();
-  const { setSelectedCube, setNewScramble, setLastSolve } = useTimerStore();
-  const { setCubes } = useTimerStore();
+  const { setSelectedCube, setNewScramble, setLastSolve, setCubes } =
+    useTimerStore();
   const { setEditingCube, setModalOpen, setCubeName, setSelectedCategory } =
     useCubesModalStore();
-  const setFavorite = (cubeId: string) => {
-    const updatedCube = updateCube({ cubeId });
-    setCubes(updatedCube);
+  const setFavorite = async (cube: Cube) => {
+    const updatedCube = await saveCube({
+      id: cube.id,
+      name: cube.name,
+      category: cube.category,
+      favorite: !cube.favorite,
+    });
+
+    const cubesDB = await getAllCubes();
+    setCubes(cubesDB);
   };
 
   function formatDate(msDate: number) {
-    const creationDate = new Date(cube.createdAt);
+    const creationDate = new Date(msDate);
     const month = creationDate.getMonth() + 1;
     const day = creationDate.getDate();
     const year = creationDate.getFullYear();
@@ -32,8 +39,6 @@ export default function TableRow({ cube }: { cube: Cube }) {
       .padStart(2, "0")}/${year}`;
   }
 
-  const status = cube.solves.session.length > 0;
-
   const redirectToHome = (e: any) => {
     const targetDiv = e.target;
     const divIndex = Array.from(e.currentTarget.children).indexOf(targetDiv);
@@ -53,7 +58,7 @@ export default function TableRow({ cube }: { cube: Cube }) {
       >
         <div className="table-cell w-10 align-middle">
           <BookmarkFav
-            cubeId={cube.id}
+            cube={cube}
             isChecked={cube.favorite}
             setFavorite={setFavorite}
           />
@@ -62,16 +67,16 @@ export default function TableRow({ cube }: { cube: Cube }) {
           {cube.name}
         </div>
         <div className="table-cell text-center align-middle cursor-pointer">
-          {cube.category}
+          {cube?.category}
         </div>
         <div className="table-cell text-center align-middle cursor-pointer">
-          {`${cube.solves.session.length}/${cube.solves.all.length}`}
+          {`${cube?.solves?.session.length}/${cube?.solves?.all.length}`}
         </div>
         <div className="hidden text-center align-middle cursor-pointer md:table-cell">
-          {formatDate(cube.createdAt)}
+          {formatDate(cube?.createdAt)}
         </div>
         <div className="hidden text-center align-middle md:table-cell">
-          {status ? (
+          {cube?.solves?.session.length > 0 ? (
             <div className="flex items-center justify-center gap-1">
               <div className="w-4 h-4">
                 <Play />

src/components/menu-settings/DataImportExport.tsx

@@ -1,36 +1,20 @@
 import exportDataToFile from "@/lib/exportDataToFile";
 import { Button } from "@/components/button";
-import { useRef } from "react";
-import importDataFromFile from "@/lib/importDataFromFile";
 import Import from "@/icons/Import";
 import Export from "@/icons/Export";
 import translation from "@/translations/global.json";
 import { useSettingsModalStore } from "@/store/SettingsModalStore";
-import { useTimerStore } from "@/store/timerStore";
-import { useRouter } from "next/navigation";
 
 export function DataImportExport() {
-  const dataInputRef = useRef<HTMLInputElement>(null);
   const { lang } = useSettingsModalStore();
-  const { setSelectedCube } = useTimerStore();
-  const router = useRouter();
+  const { setImportModalOpen } = useSettingsModalStore();
   return (
     <div className="flex justify-center w-11/12 gap-2 mx-auto light">
-      <input
-        type="file"
-        accept=".txt"
-        ref={dataInputRef}
-        className="hidden"
-        onChange={(e) => {
-          importDataFromFile(e);
-          router.push("/cubes");
-          setSelectedCube(null);
-        }}
-      />
       <Button
         className="font-normal transition duration-400"
         label={translation.settings["import-from-file"][lang]}
-        onClick={() => dataInputRef.current && dataInputRef.current.click()}
+        onClick={() => setImportModalOpen(true)}
+        // onClick={() => dataInputRef.current && dataInputRef.current.click()}
         minimalistic={false}
         icon={<Import />}
       />