remove unneccessary load

outerbase · Jan 31, 2025 · d491679 · d491679
1 parent 2e61a66
commit d491679
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 30 deletions.
diff --git a/src/app/storybook/board/page.tsx b/src/app/storybook/board/page.tsx
@@ -46,12 +46,13 @@ export default function StorybookBoardPage() {
       <BoardTool editMode={editMode} setEditMode={setEditMode} />
       <Board
         layout={value.layout}
-        onChange={(v) =>
+        onChange={(v) => {
+          console.log("change here");
           setValue({
             ...value,
             layout: v,
-          })
-        }
+          });
+        }}
         editMode={editMode}
       />
     </div>

diff --git a/src/app/storybook/layout.tsx b/src/app/storybook/layout.tsx
@@ -56,7 +56,11 @@ export default function StorybookRootLayout({
             text="Chart"
             href="/storybook/chart"
           />
-          <SidebarMenuItem icon={Component} text="Board" href="/story/board" />
+          <SidebarMenuItem
+            icon={Component}
+            text="Board"
+            href="/storybook/board"
+          />
         </div>
         <div className="flex-1 overflow-y-auto p-4">
           <TooltipProvider>{children}</TooltipProvider>

diff --git a/src/components/board/index.tsx b/src/components/board/index.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "@/lib/utils";
 import { RectangleHorizontal, Square } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback } from "react";
 import RGL, { WidthProvider } from "react-grid-layout";
 import { buttonVariants } from "../ui/button";
 import "./board-style.css";
@@ -23,14 +23,6 @@ interface BoardProps {
 const ReactGridLayout = WidthProvider(RGL);
 
 export default function Board(props: BoardProps) {
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    if (props.layout.length > 0 && !!loading) {
-      setLoading(false);
-    }
-  }, [props, loading]);
-
   const sizes = [
     { w: 1, h: 1, name: "1", icon: <Square className="h-3 w-3" /> },
     {
@@ -50,8 +42,7 @@ export default function Board(props: BoardProps) {
 
   const handleClickResize = useCallback(
     (w: number, h: number, index: number) => {
-      setLoading(true);
-      const dummy = [...props.layout];
+      const dummy = structuredClone(props.layout);
       dummy[index].w = w;
       dummy[index].h = h;
       props.onChange(dummy);
@@ -95,21 +86,19 @@ export default function Board(props: BoardProps) {
 
   return (
     <div>
-      {!loading && (
-        <ReactGridLayout
-          cols={4}
-          rowHeight={220}
-          draggableCancel=".cancelSelectorName"
-          className="layout"
-          layout={props.layout}
-          onLayoutChange={props.onChange}
-          isDraggable={props.editMode === "REARRANGING_CHART"}
-          isResizable={props.editMode === "REARRANGING_CHART"}
-          compactType={"horizontal"}
-        >
-          {mapItem}
-        </ReactGridLayout>
-      )}
+      <ReactGridLayout
+        cols={4}
+        rowHeight={220}
+        draggableCancel=".cancelSelectorName"
+        className="layout overflow-x-hidden"
+        layout={props.layout}
+        onLayoutChange={props.onChange}
+        isDraggable={props.editMode === "REARRANGING_CHART"}
+        isResizable={props.editMode === "REARRANGING_CHART"}
+        compactType={"vertical"}
+      >
+        {mapItem}
+      </ReactGridLayout>
     </div>
   );
 }