VUU-20: Generate layout ID from persistence manager

ScottLogic · Sep 12, 2023 · dc107b7 · dc107b7
1 parent 6debc78
commit dc107b7
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 20 deletions.
diff --git a/vuu-ui/packages/vuu-layout/src/layout-persistence/LocalLayoutPersistenceManager.ts b/vuu-ui/packages/vuu-layout/src/layout-persistence/LocalLayoutPersistenceManager.ts
@@ -5,12 +5,26 @@ import { getLocalEntity, saveLocalEntity } from "@finos/vuu-filters";
 import { getUniqueId } from "@finos/vuu-utils";
 
 export class LocalLayoutPersistenceManager implements LayoutPersistenceManager {
-  saveLayout(layouts: Layout[]): string {
-    console.log(`Saving layout as ${layouts[0]?.metadata.name} to group ${layouts[0]?.metadata.group}...`);
+  saveLayout(inputLayouts: Layout[]): string {
+    const layouts = Array.from(inputLayouts);
+
+    if (layouts.length === 0) {
+      return "";
+    }
+
+    const layout = this.deepCopy(layouts[layouts.length - 1]);
+    console.log(`Saving layout as ${layout.metadata.name} to group ${layout.metadata.group}...`);
+    const id = getUniqueId();
+    layout.metadata.id = id;
+    layouts[layouts.length - 1] = layout;
     saveLocalEntity<Layout[]>("layouts", layouts);
-    return layouts[0]?.metadata.id;
+    return id;
   }
 
+  private deepCopy<T>(object: T): T {
+    return JSON.parse(JSON.stringify(object));
+  };
+
   updateLayout(id: string, newMetadata: Omit<LayoutMetadata, "id">, newLayoutJson: LayoutJSON): void {
     const layouts = this.getExistingLayouts();
     const layoutJson = getLocalEntity<LayoutJSON>("api/vui");

diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutManager.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutManager.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useCallback, useContext, useEffect } from "react";
 import { getLocalEntity } from "@finos/vuu-filters";
 import { LayoutJSON, LayoutPersistenceManager } from "@finos/vuu-layout";
-import { getUniqueId } from "@finos/vuu-utils";
 import { LayoutMetadata, Layout } from "./layoutTypes";
 
 export const LayoutManagementContext = React.createContext<{
@@ -14,31 +13,29 @@ export const LayoutManagementProvider = (props: {
     children: JSX.Element | JSX.Element[]
   }) => {
   const [layouts, setLayouts] = useState<Layout[]>([]);
+  const [tempLayouts, setTempLayouts] = useState<Layout[]>([]);
 
   useEffect(() => {
-    const layouts = props.persistenceManager.loadLayouts();
-    setLayouts(layouts || [])
+    const loadedLayouts = props.persistenceManager.loadLayouts();
+    setLayouts(loadedLayouts || [])
   }, [])
 
   useEffect(() => {
-    props.persistenceManager.saveLayout(layouts);
-  }, [layouts])
+    if (tempLayouts.length !== 0) {
+      // Persist layouts
+      const generatedId = props.persistenceManager.saveLayout([...layouts, ...tempLayouts]);
+
+      // Update state
+      const newLayout = tempLayouts[0];
+      newLayout.metadata.id = generatedId;
+      setLayouts(prev => [...prev, newLayout]);
+    }
+  }, [tempLayouts])
 
   const saveLayout = useCallback((metadata: Omit<LayoutMetadata, "id">) => {
     const json = getLocalEntity<LayoutJSON>("api/vui");
     if (json) {
-      setLayouts(prev =>
-        [
-          ...prev,
-          {
-            metadata: {
-              ...metadata,
-              id: getUniqueId()
-            },
-            json
-          }
-        ]
-      )
+      setTempLayouts([...layouts, { metadata: { ...metadata, id: "" }, json }])
     }
   }, [])