VUU-27 add types for responses

ScottLogic · Oct 25, 2023 · 1935ee9 · 1935ee9
1 parent f5dbbc7
commit 1935ee9
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 50 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
@@ -27,7 +27,7 @@ export class LocalLayoutPersistenceManager implements LayoutPersistenceManager {
       Promise.all([this.loadLayouts(), this.loadMetadata()]).then(
         ([existingLayouts, existingMetadata]) => {
           const id = getUniqueId();
-          const newMetadata = {
+          const newMetadata: LayoutMetadata = {
             ...metadata,
             id,
             created: formatDate(new Date(), "dd.mm.yyyy"),

diff --git a/vuu-ui/packages/vuu-layout/src/layout-persistence/RemoteLayoutPersistenceManager.ts b/vuu-ui/packages/vuu-layout/src/layout-persistence/RemoteLayoutPersistenceManager.ts
@@ -3,12 +3,15 @@ import { LayoutPersistenceManager } from "./LayoutPersistenceManager";
 import { LayoutJSON } from "../layout-reducer";
 import { defaultLayout } from "./data";
 
-const DEFAULT_SERVER_BASE_URL = "http://127.0.0.1:8081/api"
+const DEFAULT_SERVER_BASE_URL = "http://127.0.0.1:8081/api";
 
 const baseURL = process.env.LAYOUT_BASE_URL ?? DEFAULT_SERVER_BASE_URL;
 const metadataSaveLocation = "layouts/metadata";
 const layoutsSaveLocation = "layouts";
 
+export type CreateLayoutResponseDto = { metadata: LayoutMetadata };
+export type GetLayoutResponseDto = { definition: LayoutJSON };
+
 export class RemoteLayoutPersistenceManager
   implements LayoutPersistenceManager
 {
@@ -24,14 +27,14 @@ export class RemoteLayoutPersistenceManager
         method: "POST",
         body: JSON.stringify({
           metadata,
-          definition: layout,
+          definition: JSON.stringify(layout),
         }),
       })
         .then((response) => {
           if (!response.ok) {
             reject(new Error(response.statusText));
           }
-          response.json().then(({ metadata }: { metadata: LayoutMetadata }) => {
+          response.json().then(({ metadata }: CreateLayoutResponseDto) => {
             if (!metadata) {
               reject(new Error("Response did not contain valid metadata"));
             }
@@ -95,11 +98,11 @@ export class RemoteLayoutPersistenceManager
           if (!response.ok) {
             reject(new Error(response.statusText));
           }
-          response.json().then((layout) => {
-            if (!layout) {
+          response.json().then(({ definition }: GetLayoutResponseDto) => {
+            if (!definition) {
               reject(new Error("Response did not contain a valid layout"));
             }
-            resolve(layout);
+            resolve(definition);
           });
         })
         .catch((error: Error) => {

diff --git a/vuu-ui/packages/vuu-layout/test/layout-persistence/RemoteLayoutPersistenceManager.test.ts b/vuu-ui/packages/vuu-layout/test/layout-persistence/RemoteLayoutPersistenceManager.test.ts
@@ -1,6 +1,10 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { RemoteLayoutPersistenceManager } from "../../src/layout-persistence/RemoteLayoutPersistenceManager";
-import { LayoutMetadata } from "@finos/vuu-shell";
+import {
+  GetLayoutResponseDto,
+  CreateLayoutResponseDto,
+  RemoteLayoutPersistenceManager,
+} from "../../src/layout-persistence/RemoteLayoutPersistenceManager";
+import { LayoutMetadata, LayoutMetadataDto } from "@finos/vuu-shell";
 import { LayoutJSON } from "../../src/layout-reducer";
 import { v4 as uuidv4 } from "uuid";
 import { expectPromiseRejectsWithError } from "./utils";
@@ -10,18 +14,16 @@ const mockFetch = vi.fn();
 
 global.fetch = mockFetch;
 
-const metadata: LayoutMetadata[] = [
-  {
-    id: "0001",
-    name: "layout 1",
-    group: "group 1",
-    screenshot: "screenshot",
-    user: "username",
-    created: "01.01.2000",
-  },
-];
-
-const metadataToAdd: Omit<LayoutMetadata, "id" | "created"> = {
+const metadata: LayoutMetadata = {
+  id: "0001",
+  name: "layout 1",
+  group: "group 1",
+  screenshot: "screenshot",
+  user: "username",
+  created: "01.01.2000",
+};
+
+const metadataToAdd: LayoutMetadataDto = {
   name: "layout 1",
   group: "group 1",
   screenshot: "screenshot",
@@ -42,17 +44,13 @@ type FetchResponse<T> = {
   statusText?: string;
 };
 
-type CreateLayoutResponseJSON = {
-  metadata: LayoutMetadata;
-};
-
 describe("RemoteLayoutPersistenceManager", () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
   describe("createLayout", () => {
-    const responseJSON: CreateLayoutResponseJSON = {
+    const responseJSON: CreateLayoutResponseDto = {
       metadata: {
         ...metadataToAdd,
         id: uniqueId,
@@ -61,7 +59,7 @@ describe("RemoteLayoutPersistenceManager", () => {
     };
 
     it("resolves with metadata when fetch resolves, response is ok and contains metadata", () => {
-      const fetchResponse: FetchResponse<CreateLayoutResponseJSON> = {
+      const fetchResponse: FetchResponse<CreateLayoutResponseDto> = {
         json: () => new Promise((resolve) => resolve(responseJSON)),
         ok: true,
       };
@@ -76,7 +74,7 @@ describe("RemoteLayoutPersistenceManager", () => {
     it("rejects with error when response is not ok", () => {
       const errorMessage = "Not Found";
 
-      const fetchResponse: FetchResponse<CreateLayoutResponseJSON> = {
+      const fetchResponse: FetchResponse<CreateLayoutResponseDto> = {
         json: () => new Promise((resolve) => resolve(responseJSON)),
         ok: false,
         statusText: errorMessage,
@@ -85,7 +83,7 @@ describe("RemoteLayoutPersistenceManager", () => {
       mockFetch.mockResolvedValue(fetchResponse);
 
       expectPromiseRejectsWithError(
-        () => persistence.createLayout(metadata[0], layout),
+        () => persistence.createLayout(metadata, layout),
         errorMessage
       );
     });
@@ -99,7 +97,7 @@ describe("RemoteLayoutPersistenceManager", () => {
       mockFetch.mockResolvedValue(fetchResponse);
 
       expectPromiseRejectsWithError(
-        () => persistence.createLayout(metadata[0], layout),
+        () => persistence.createLayout(metadata, layout),
         "Response did not contain valid metadata"
       );
     });
@@ -108,7 +106,7 @@ describe("RemoteLayoutPersistenceManager", () => {
       mockFetch.mockRejectedValue(fetchError);
 
       expectPromiseRejectsWithError(
-        () => persistence.createLayout(metadata[0], layout),
+        () => persistence.createLayout(metadata, layout),
         fetchError.message
       );
     });
@@ -122,7 +120,7 @@ describe("RemoteLayoutPersistenceManager", () => {
 
       mockFetch.mockResolvedValue(fetchResponse);
 
-      const result = persistence.updateLayout(uniqueId, metadata[0], layout);
+      const result = persistence.updateLayout(uniqueId, metadata, layout);
 
       expect(result).resolves.toBe(undefined);
     });
@@ -138,7 +136,7 @@ describe("RemoteLayoutPersistenceManager", () => {
       mockFetch.mockResolvedValue(fetchResponse);
 
       expectPromiseRejectsWithError(
-        () => persistence.updateLayout(uniqueId, metadata[0], layout),
+        () => persistence.updateLayout(uniqueId, metadata, layout),
         errorMessage
       );
     });
@@ -147,7 +145,7 @@ describe("RemoteLayoutPersistenceManager", () => {
       mockFetch.mockRejectedValue(fetchError);
 
       expectPromiseRejectsWithError(
-        () => persistence.updateLayout(uniqueId, metadata[0], layout),
+        () => persistence.updateLayout(uniqueId, metadata, layout),
         fetchError.message
       );
     });
@@ -194,16 +192,18 @@ describe("RemoteLayoutPersistenceManager", () => {
 
   describe("loadMetadata", () => {
     it("resolves with array of metadata when response is ok", () => {
+      const responseJson = [metadata];
+
       const fetchResponse: FetchResponse<LayoutMetadata[]> = {
-        json: () => new Promise((resolve) => resolve(metadata)),
+        json: () => new Promise((resolve) => resolve(responseJson)),
         ok: true,
       };
 
       mockFetch.mockResolvedValue(fetchResponse);
 
       const result = persistence.loadMetadata();
 
-      expect(result).resolves.toBe(metadata);
+      expect(result).resolves.toBe(responseJson);
     });
 
     it("rejects with error when response is not ok", () => {
@@ -249,8 +249,8 @@ describe("RemoteLayoutPersistenceManager", () => {
 
   describe("loadLayout", () => {
     it("resolves with array of metadata when response is ok", () => {
-      const fetchResponse: FetchResponse<LayoutJSON> = {
-        json: () => new Promise((resolve) => resolve(layout)),
+      const fetchResponse: FetchResponse<GetLayoutResponseDto> = {
+        json: () => new Promise((resolve) => resolve({ definition: layout })),
         ok: true,
       };
 
@@ -264,8 +264,8 @@ describe("RemoteLayoutPersistenceManager", () => {
     it("rejects with error when response is not ok", () => {
       const errorMessage = "Not Found";
 
-      const fetchResponse: FetchResponse<void> = {
-        json: () => new Promise((resolve) => resolve()),
+      const fetchResponse: FetchResponse<object> = {
+        json: () => new Promise((resolve) => resolve({})),
         ok: false,
         statusText: errorMessage,
       };
@@ -278,9 +278,9 @@ describe("RemoteLayoutPersistenceManager", () => {
       );
     });
 
-    it("rejects with error when metadata is falsey in response", () => {
-      const fetchResponse: FetchResponse<void> = {
-        json: () => new Promise((resolve) => resolve()),
+    it("rejects with error when definition is falsey in response", () => {
+      const fetchResponse: FetchResponse<object> = {
+        json: () => new Promise((resolve) => resolve({})),
         ok: true,
       };
 

diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.tsx
@@ -41,20 +41,20 @@ export const LayoutsList = (props: HTMLAttributes<HTMLDivElement>) => {
                 source={Object.entries(layoutsByGroup)}
                 ListItem={({ item }) => {
                     if (!item) return <></>
-                    const [groupName, layouts] = item
+                    const [groupName, layoutMetadata] = item
                     return <>
                         <div className={`${classBase}-groupName`}>{groupName}</div>
-                        {layouts.map(layout =>
+                        {layoutMetadata.map((metadata) =>
                             <div
                                 className={`${classBase}-layoutContainer`}
-                                key={layout?.id}
-                                onClick={() => handleLoadLayout(layout?.id)}
+                                key={metadata?.id}
+                                onClick={() => handleLoadLayout(metadata?.id)}
                             >
-                                <img className={`${classBase}-screenshot`} src={layout?.screenshot} />
+                                <img className={`${classBase}-screenshot`} src={metadata?.screenshot} />
                                 <div>
-                                    <div className={`${classBase}-layoutName`}>{layout?.name}</div>
+                                    <div className={`${classBase}-layoutName`}>{metadata?.name}</div>
                                     <div className={`${classBase}-layoutDetails`}>
-                                        <div>{`${layout?.user}, ${layout?.date}`}</div>
+                                        <div>{`${metadata?.user}, ${metadata?.created}`}</div>
                                     </div>
                                 </div>
                             </div>