From bf8d90b18cf04202aafd16c9a589a33096c110fc Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Tue, 13 May 2025 18:34:24 +0530
Subject: [PATCH] Refactor SelectFloorPlan and LayoutModel components to use
 Zustand for layout management and improve code clarity

---
 .../components/temporary/SelectFloorPlan.tsx  | 13 +++----
 .../modules/builder/layout/layoutImage.tsx    | 35 +++++++++----------
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/app/src/components/temporary/SelectFloorPlan.tsx b/app/src/components/temporary/SelectFloorPlan.tsx
index 4e9cb1a..b206749 100644
--- a/app/src/components/temporary/SelectFloorPlan.tsx
+++ b/app/src/components/temporary/SelectFloorPlan.tsx
@@ -1,23 +1,24 @@
-import React, { useState } from "react";
+import React from "react";
+import useLayoutStore from "../../store/builder/uselayoutStore";
 
 const SelectFloorPlan: React.FC = () => {
-  const [preset, setPreset] = useState("");
+  const { currentLayout, setLayout } = useLayoutStore();
   return (
     <div className="select-floorplane-wrapper">
       Don't have an idea? Use these presets!
       <div className="presets-container">
         <button
-          className={`preset ${preset === "1" ? "active" : ""}`}
+          className={`preset ${currentLayout === "layout1" ? "active" : ""}`}
           onClick={() => {
-            setPreset("1");
+            setLayout("layout1");
           }}
         >
           Preset 1
         </button>
         <button
-          className={`preset ${preset === "2" ? "active" : ""}`}
+          className={`preset ${currentLayout === "layout2" ? "active" : ""}`}
           onClick={() => {
-            setPreset("2");
+            setLayout("layout2");
           }}
         >
           Preset 2
diff --git a/app/src/modules/builder/layout/layoutImage.tsx b/app/src/modules/builder/layout/layoutImage.tsx
index 1c92978..40c2c3c 100644
--- a/app/src/modules/builder/layout/layoutImage.tsx
+++ b/app/src/modules/builder/layout/layoutImage.tsx
@@ -11,25 +11,24 @@ const modelPaths: Record<string, string> = {
 };
 
 function LayoutModel() {
-    const { toggleView } = useToggleView();
-    const { currentLayout } = useLayoutStore();
-    if (!currentLayout) return null;
+  const { toggleView } = useToggleView();
+  const { currentLayout } = useLayoutStore();
 
-    const path = modelPaths[currentLayout];
-    const gltf = useGLTF(path);
-    const cloned = useMemo(() => gltf?.scene?.clone(), [gltf]);
+  // Always call the hook, but ensure it has a valid fallback
+  const path = currentLayout ? modelPaths[currentLayout] : modelPaths.layout1;
 
-    return (
-        <>
-            {toggleView &&
-                <group position={[0,0,0]} scale={[0,0,0]} dispose={null}>
-                    <primitive
-                        object={cloned}
-                    />
-                </group>
-            }
-        </>
-    );
+  // Explicitly cast the return type to ensure it's not an array
+  const gltf = useGLTF(path) as any;
+
+  const cloned = useMemo(() => gltf.scene.clone(), [gltf]);
+
+  if (!currentLayout || !toggleView) return null;
+
+  return (
+    <group position={[0, 0, 0]} dispose={null}>
+      <primitive object={cloned} />
+    </group>
+  );
 }
 
-export default LayoutModel;
\ No newline at end of file
+export default LayoutModel;