little bit update

Author: datvn21

src/components/CommandBox.jsx

@@ -21,7 +21,7 @@ export default function CommandBox({ addWidget }) {
   const [open, setOpen] = useState(false);
   useEffect(() => {
     const down = (e) => {
-      if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
+      if (e.key === "t" || (e.key === "T" && (e.metaKey || e.ctrlKey))) {
         e.preventDefault();
         setOpen((open) => !open);
       }

src/components/Layouts/AppLayout.jsx

@@ -3,7 +3,7 @@ import TitleBar from "../TitleBar";
 import { Outlet } from "react-router";
 import { Toaster } from "../ui/sonner";
 
-import { setData } from "../../utils/store";
+import { getData, setData } from "../../utils/store";
 
 export default function AppLayout() {
   const [isSettingWindow, setIsSettingWindow] = useState(false);
@@ -18,9 +18,16 @@ export default function AppLayout() {
         container.current.offsetWidth,
         container.current.offsetHeight,
       ];
-
-      await setData("container", offSet);
-      setIsSettingWindow(true);
+      const fetchLayout = async () => {
+        // const savedLayout = await getData("container");
+        // console.log("Saving layout", savedLayout);
+        // if (savedLayout == null) {
+        //   await setData("container", offSet);
+        // }
+        await setData("container", offSet);
+        setIsSettingWindow(true);
+      };
+      fetchLayout();
     };
 
     updateContainerSize();

src/components/WorkSpace/DragAndDrop.jsx

@@ -1,11 +1,10 @@
 import "./DragAndDrop.css";
-import { getData } from "@/utils/store";
+import { getData, setData } from "@/utils/store";
 import { v4 as uuidv4 } from "uuid";
 import { useState, useEffect, useRef } from "react";
 import GridLayout from "react-grid-layout";
 import RenderWidget from "../Widgets/RenderWidget";
 import { alertError } from "@/lib/alertCustomized";
-import MenuWidget from "./Menu/MenuWidget";
 import CommandBox from "../CommandBox";
 
 const DragAndDrop = () => {
@@ -50,14 +49,28 @@ const DragAndDrop = () => {
   const [map, setMap] = useState(Array(30).fill(0));
 
   useEffect(() => {
-    const initialLayout = [
-      { i: "Clock_1", x: 0, y: 0, w: 1, h: 1, type: "clock" },
-      { i: "Clock_2", x: 2, y: 0, w: 2, h: 1, type: "clock" },
-      { i: "Music_3", x: 4, y: 0, w: 1, h: 1, type: "music" },
-    ];
-    setLayout(initialLayout);
+    const fetchLayout = async () => {
+      const savedLayout = await getData("layout");
+      //console.log(savedLayout);
+      if (
+        savedLayout &&
+        JSON.stringify(savedLayout) !== JSON.stringify(layout)
+      ) {
+        setLayout(savedLayout);
+      }
+    };
+    fetchLayout();
   }, []);
 
+  useEffect(() => {
+    setMap(createMap(layout));
+    const saveLayout = async () => {
+      //console.log("Saving layout", layout);
+      await setData("layout", layout);
+    };
+    saveLayout();
+  }, [layout]);
+
   const createMap = (layout) => {
     let map = Array(30).fill(0);
 
@@ -73,10 +86,6 @@ const DragAndDrop = () => {
     return map;
   };
 
-  useEffect(() => {
-    setMap(createMap(layout));
-  }, [layout]);
-
   const handleLayoutChange = (newLayout) => {
     let changed = false;
     const fixedLayout = newLayout.map((item) => {