State now properly saving the current layout even when you exit the e…

…dit mode:
Nounspace · May 5, 2024 · 3d317c0 · 3d317c0
1 parent 7e38d55
commit 3d317c0
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 41 deletions.
diff --git a/src/common/ui/templates/space/index.tsx b/src/common/ui/templates/space/index.tsx
@@ -22,6 +22,7 @@ type SpaceArgs = {
 const ReactGridLayout = WidthProvider(RGL);
 
 export default function Space({ config, isEditable }: SpaceArgs){
+
   function generateDOM() {    
     return _.map(_.range(config.layoutConfig.items), function(i) {
       return (

diff --git a/src/pages/homebase/index.tsx b/src/pages/homebase/index.tsx
@@ -6,64 +6,61 @@ import Gallery from "@/fidgets/ui/gallery";
 import Feed from "@/pages/feed";
 
 export default function Homebase(spaceID) {
-    function retrieveConfig(user, space){
+    const [editMode, setMode] = useState(false);
+
+    //const { getCurrentUser } = useAccountStore();
+    const user = useAccountStore.getState().accounts[0];
+
+    const availableHandles = ["s", "w", "e", "n", "sw", "nw", "se", "ne"];
 
-        const availableHandles = ["s", "w", "e", "n", "sw", "nw", "se", "ne"];
+    const [fidgetConfigs, setFidgetConfigs] = useState([
+        {   
+            f: <Feed/>,
+            resizeHandles: availableHandles,
+            x: 0,
+            y: 0,
+            w: 6,
+            minW: 4,
+            maxW: 8,
+            h: 20,
+            minH: 10,
+            maxH: 20
+        },
+        {
+            f: <Gallery/>,
+            resizeHandles: availableHandles,
+            x: 6,
+            y: 0,
+            w: 4,
+            minW: 2,
+            maxW: 4,
+            h: 9,
+            minH: 3,
+            maxH: 12
+        },
+    ]);
 
-        const fidgetConfigs = [
-            {   
-                f: <Feed/>,
-                resizeHandles: editMode ? availableHandles : [],
-                x: 0,
-                y: 0,
-                w: 6,
-                minW: 4,
-                maxW: 8,
-                h: 20,
-                minH: 10,
-                maxH: 20
-            },
-            {
-                f: <Gallery/>,
-                resizeHandles: editMode ? availableHandles : [],
-                x: 6,
-                y: 0,
-                w: 4,
-                minW: 2,
-                maxW: 4,
-                h: 9,
-                minH: 3,
-                maxH: 12
-            },
-        ];
+    function switchMode() {
+        setMode(!editMode);
+    }  
 
+    function retrieveConfig(user, space){
         const layoutConfig = {
             isDraggable: editMode,
             isResizable: editMode,
             items: 2,
             cols: 12,
             rowHeight: 30,
-            onLayoutChange: function() {},
+            onLayoutChange: function(){},
             // This turns off compaction so you can place items wherever.
-            verticalCompact: false,
+            compactType: null,
             // This turns off rearrangement so items will not be pushed arround.
             preventCollision: true
         };
         const layoutID = "";
 
         return ({fidgetConfigs, layoutConfig, layoutID})
     }
-
-    const images = ["image1","image2","image3"]
-
-    const [editMode, setMode] = useState(false);
-
-    function switchMode() {
-      setMode(!editMode);
-    }
-
-   //const { getCurrentUser } = useAccountStore();
-    const user = useAccountStore.getState().accounts[0];
 
     return (
         <div>