Merge pull request #454 from webstudio-is/feat/add-pages-to-http-client

Able to query pages in loadProject

packages/http-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/http-client",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Webstudio HTTP Client",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",

packages/http-client/src/index.d.ts

@@ -4,13 +4,17 @@ import type {
   UserProp,
 } from "@webstudio-is/react-sdk";
 
-export type IncludeTypes = "tree" | "props" | "breakpoints";
+export type IncludeTypes = "tree" | "props" | "breakpoints" | "pages";
 export type Includes<T> = { [include in IncludeTypes]: T };
-
+export type Page = {
+  id: string;
+  root: [string, string];
+};
 export type Project = {
   tree: BaseInstance & { errors: string };
   props: Array<UserProp> & { errors: string };
   breakpoints: Array<Breakpoint> & {
     errors: string;
   };
+  pages: Record<string, unknown> | null;
 };

packages/http-client/src/index.test.ts

@@ -1,10 +1,26 @@
 import { loadProject } from "./index";
 
-const existingProjectId = "ab3619d3-831f-46f8-abb6-609558cffd99";
+const existingProjectId = "398d3918-9b00-4a43-8ab6-de4e151ae98a";
 const notPublishedProjectId = "7ec397c6-b3d0-4967-9073-9d83623fcf8e";
 const apiUrl = "http://localhost:3000";
 
 describe("getProjectDetails", () => {
+  test("include pages", async () => {
+    const response = await loadProject({
+      apiUrl,
+      projectId: existingProjectId,
+      include: { tree: true, props: true, breakpoints: true, pages: true },
+    });
+    expect(response.pages).toBeTruthy();
+  });
+  test("does not include pages", async () => {
+    const response = await loadProject({
+      apiUrl,
+      projectId: notPublishedProjectId,
+      include: { tree: true, props: true, breakpoints: true, pages: true },
+    });
+    expect(response.pages).toBeNull();
+  });
   test("loads existing project", async () => {
     const response = await loadProject({
       apiUrl,
@@ -18,7 +34,7 @@ describe("getProjectDetails", () => {
       projectId: notPublishedProjectId,
     });
     expect(response.tree.errors).toBe(
-      "Project 7ec397c6-b3d0-4967-9073-9d83623fcf8e needs to be published first"
+      `Project ${notPublishedProjectId} needs to be published first`
     );
   });
 });

packages/http-client/src/index.ts

@@ -1,10 +1,10 @@
 import fetch from "isomorphic-fetch";
-import type { Includes, Project } from "./index.d";
+import type { Includes, Project, Page } from "./index.d";
 
 export const loadProject = async ({
   apiUrl,
   projectId,
-  include = { tree: true, props: true, breakpoints: true },
+  include = { tree: true, props: true, breakpoints: true, pages: false },
 }: {
   apiUrl: string;
   projectId: string;
@@ -13,19 +13,68 @@ export const loadProject = async ({
   if (apiUrl === undefined) {
     throw new Error("Webstudio API URL is required.");
   }
-  const baseUrl = new URL(`${apiUrl}`);
+  const urls = [];
+  const pages: Record<string, unknown> | null = {};
+
+  const baseUrl = new URL(apiUrl);
   const treeUrl = new URL(`/rest/tree/${projectId}`, baseUrl);
   const propsUrl = new URL(`/rest/props/${projectId}`, baseUrl);
   const breakpointsUrl = new URL(`/rest/breakpoints/${projectId}`, baseUrl);
+  const pagesUrl = new URL(`/rest/pages/${projectId}`, baseUrl);
 
-  const [tree, props, breakpoints] = await Promise.all([
+  const [tree, props, breakpoints, listOfPages] = await Promise.all([
     include.tree && (await fetch(treeUrl)).json(),
     include.props && (await fetch(propsUrl)).json(),
     include.breakpoints && (await fetch(breakpointsUrl)).json(),
+    include.pages && (await fetch(pagesUrl)).json(),
   ]);
+
+  if (include.pages && listOfPages.pages && listOfPages.pages.length > 0) {
+    for (const page of listOfPages.pages) {
+      urls.push({
+        url: new URL(`/rest/tree/${projectId}/${page.id}`, baseUrl),
+        path: page.path,
+        type: "tree",
+      });
+      urls.push({
+        url: new URL(`/rest/props/${projectId}/${page.id}`, baseUrl),
+        path: page.path,
+        type: "props",
+      });
+    }
+    if (urls.length === 0) {
+      return {
+        tree,
+        props,
+        breakpoints,
+        pages,
+      };
+    }
+
+    const pagesData = await Promise.all(
+      urls.map(async (url) => {
+        const res = await fetch(url.url);
+        if (res.ok) {
+          return { path: url.path, type: url.type, data: await res.json() };
+        }
+      })
+    );
+    if (Object.keys(pagesData).length > 0) {
+      for (const page of pagesData) {
+        if (page && page.path && page.type && page.data) {
+          pages[page.path] = {
+            ...(pages[page.path] as Record<string, Page>),
+            [page.type]: page.data,
+            breakpoints,
+          };
+        }
+      }
+    }
+  }
   return {
     tree,
     props,
     breakpoints,
+    pages: Object.keys(pages).length > 0 ? pages : null,
   };
 };