WP stories

public/editor-client/src/api/index.ts

@@ -1,11 +1,19 @@
-import { Arr, Obj, Str } from "@brizy/readers";
 import { Config, getConfig } from "@/config";
+import {
+  DefaultBlock,
+  DefaultBlockWithID,
+  LayoutsAPI,
+  LayoutsPageAPI,
+  StoriesAPI,
+  StoryPages,
+  Style
+} from "@/types/DefaultTemplate";
+import { ConfigDCItem } from "@/types/DynamicContent";
 import { GlobalBlock } from "@/types/GlobalBlocks";
 import { Page } from "@/types/Page";
 import { Rule } from "@/types/PopupConditions";
 import { Project } from "@/types/Project";
 import { ResponseWithBody } from "@/types/Response";
-import { ConfigDCItem } from "@/types/DynamicContent";
 import {
   CreateSavedBlock,
   CreateSavedLayout,
@@ -15,8 +23,9 @@ import {
   SavedLayoutMeta
 } from "@/types/SavedBlocks";
 import { ScreenshotData } from "@/types/Screenshots";
-import { Dictionary } from "../types/utils";
 import { t } from "@/utils/i18n";
+import { Arr, Json, Obj, Str } from "@brizy/readers";
+import { Dictionary } from "../types/utils";
 import { Literal } from "../utils/types";
 import {
   GetCollections,
@@ -1262,3 +1271,100 @@ export const updateGlobalBlocks = async (
 };
 
 //#endregion
+
+//#region Default Templates
+export const getDefaultLayouts = async (
+  url: string
+): Promise<{
+  templates: LayoutsAPI[];
+  categories: { slug: string; title: string }[];
+}> => {
+  const res = await fetch(`${url}/get-layouts-chunk`).then((r) => r.json());
+
+  return { templates: res.collections, categories: res.categories };
+};
+
+export const getDefaultLayoutsPages = async (
+  url: string,
+  id: string
+): Promise<{
+  collections: LayoutsPageAPI[];
+  paginationInfo: {
+    itemsPerPage: number;
+    lastPage: number;
+    totalCount: number;
+  };
+  styles: Style;
+}> => {
+  const data = await fetch(
+    `${url}/get-layouts-pages?project_id=${id}&per_page=20`
+  ).then((r) => r.json());
+
+  return data;
+};
+
+export const getDefaultLayoutData = async (
+  url: string,
+  layoutId: Literal,
+  id: string
+): Promise<{
+  items: DefaultBlockWithID[];
+}> => {
+  const data = await fetch(
+    `${url}/get-layouts-page?project_id=${layoutId}&page_slug=${id}`
+  ).then((r) => r.json());
+
+  return Json.read(data[0].pageData) as {
+    items: DefaultBlockWithID[];
+  };
+};
+
+export const getDefaultStories = async (
+  url: string
+): Promise<{
+  templates: StoriesAPI[];
+  categories: { slug: string; title: string }[];
+}> => {
+  const res = await fetch(`${url}/get-story-chunk`).then((r) => r.json());
+
+  return {
+    templates: res.collections,
+    categories: res.categories
+  };
+};
+
+export const getDefaultStory = async (
+  url: string,
+  layoutId: Literal,
+  id: string
+): Promise<{
+  blocks: DefaultBlock[];
+}> => {
+  const data = await fetch(
+    `${url}/get-story-page-data?project_id=${layoutId}&page_slug=${id}`
+  ).then((r) => r.json());
+
+  const pageData = JSON.parse(data.collection);
+
+  return pageData as {
+    blocks: DefaultBlock[];
+  };
+};
+
+export const getDefaultStoryPages = async (
+  url: string,
+  id: string
+): Promise<{
+  collections: StoryPages[];
+  paginationInfo: {
+    itemsPerPage: number;
+    lastPage: number;
+    totalCount: number;
+  };
+  styles: Style;
+}> => {
+  return await fetch(`${url}/get-story-page?project_id=${id}&per_page=20`).then(
+    (r) => r.json()
+  );
+};
+//#endregion

public/editor-client/src/config.ts

@@ -12,6 +12,7 @@ interface DefaultTemplates {
   popupsUrl: string;
   storiesUrl: string;
   layoutsUrl: string;
+  templatesUrl: string;
 }
 
 interface Actions {
@@ -104,6 +105,10 @@ const templatesReader = parseStrict<Record<string, unknown>, DefaultTemplates>({
   storiesUrl: pipe(
     mPipe(Obj.readKey("storiesUrl"), Str.read),
     throwOnNullish("Invalid API Config: stories")
+  ),
+  templatesUrl: pipe(
+    mPipe(Obj.readKey("templatesUrl"), Str.read),
+    throwOnNullish("Invalid API Config: templates")
   )
 });
 

public/editor-client/src/defaultTemplates/index.ts

@@ -1,23 +1,33 @@
+import {
+  getDefaultLayoutData,
+  getDefaultLayouts,
+  getDefaultLayoutsPages,
+  getDefaultStories,
+  getDefaultStory,
+  getDefaultStoryPages
+} from "@/api";
 import { Config } from "../config";
 import {
   BlocksArray,
+  CustomTemplatePage,
   DefaultBlock,
   DefaultBlockWithID,
-  DefaultTemplate,
   DefaultTemplateKits,
   DefaultTemplatePopup,
   KitItem,
   Kits,
   KitsWithThumbs,
-  Layouts,
+  LayoutsDefaultTemplate,
+  LayoutsPageAPI,
+  LayoutsPages,
   LayoutsWithThumbs,
   Popups,
   PopupsWithThumbs,
-  Stories,
   StoriesWithThumbs
 } from "../types/DefaultTemplate";
 import { t } from "../utils/i18n";
-import { tempConverterKit } from "./tempComverters";
+import { tempConverterKit } from "./tempConverters";
+import { convertLayouts, convertStories, convertToCategories } from "./utils";
 
 const defaultKits = (
   config: Config
@@ -197,93 +207,144 @@ const defaultPopups = (
 
 const defaultStories = (
   config: Config
-): DefaultTemplate<StoriesWithThumbs, BlocksArray<DefaultBlock>> => {
+): LayoutsDefaultTemplate<
+  StoriesWithThumbs,
+  BlocksArray<DefaultBlock>,
+  LayoutsPages
+> => {
+  // @ts-expect-error: temporary solution, wait until new API will come via config
   const { storiesUrl } = config.api.templates;
+  const apiLayoutsUrl =
+    "https://phplaravel-1109775-4184176.cloudwaysapps.com/api";
+  const imageUrl = "https://cloud-1de12d.b-cdn.net/media/iW=1024&iH=1024/";
 
   return {
     async getMeta(res, rej) {
       try {
-        const meta: Stories = await fetch(`${storiesUrl}/meta.json`).then((r) =>
-          r.json()
-        );
+        const meta = await getDefaultStories(apiLayoutsUrl);
 
         const data = {
-          ...meta,
-          stories: meta.stories.map((story) => {
-            return {
-              ...story,
-              thumbnailSrc: `${storiesUrl}/thumbs/${story.pages[0].id}.jpg`,
-              pages: story.pages.map((page) => {
-                return {
-                  ...page,
-                  thumbnailSrc: `${storiesUrl}/thumbs/${page.id}.jpg`
-                };
-              })
-            };
-          })
+          stories: convertStories(meta.templates, `${imageUrl}`),
+          categories: convertToCategories(meta.categories)
         };
 
         res(data);
       } catch (e) {
         rej(t("Failed to load meta.json"));
       }
     },
-    async getData(res, rej, id) {
+    async getData(res, rej, { layoutId, id }) {
       try {
-        const data = await fetch(`${storiesUrl}/resolves/${id}.json`).then(
-          (r) => r.json()
-        );
-        res(data);
+        const { blocks } = await getDefaultStory(apiLayoutsUrl, layoutId, id);
+
+        res({ blocks });
       } catch (e) {
         rej(t("Failed to load resolves for selected DefaultTemplate"));
       }
+    },
+    async getPages(res, rej, id) {
+      try {
+        const { collections, styles } = await getDefaultStoryPages(
+          apiLayoutsUrl,
+          id
+        );
+
+        const parsedData: CustomTemplatePage[] = collections.map(
+          ({ slug, thumbnailHeight, thumbnailWidth, thumbnail }) => ({
+            id: slug,
+            title: slug,
+            thumbnailSrc: `${imageUrl}${thumbnail}`,
+            thumbnailHeight,
+            thumbnailWidth,
+            layoutId: id
+          })
+        );
+
+        res({ pages: parsedData, styles: [styles] });
+      } catch (e) {
+        rej(t("Failed to load pages for selected Stories"));
+      }
     }
   };
 };
 
 const defaultLayouts = (
   config: Config
-): DefaultTemplate<LayoutsWithThumbs, BlocksArray<DefaultBlockWithID>> => {
-  const { layoutsUrl } = config.api.templates;
+): LayoutsDefaultTemplate<
+  LayoutsWithThumbs,
+  BlocksArray<DefaultBlockWithID>,
+  LayoutsPages
+> => {
+  const { templatesUrl } = config.api.templates;
+  console.log("TESTING:FIX THIS BEFORE MERGE", templatesUrl);
+  const imageUrl = "https://cloud-1de12d.b-cdn.net/media/iW=1024&iH=1024/";
+  const apiLayoutsUrl1 =
+    "https://phplaravel-1109775-4184176.cloudwaysapps.com/api";
 
   return {
     async getMeta(res, rej) {
       try {
-        const meta: Layouts = await fetch(`${layoutsUrl}/meta.json`).then((r) =>
-          r.json()
+        const { templates, categories } = await getDefaultLayouts(
+          apiLayoutsUrl1
         );
 
-        const data = {
-          ...meta,
-          templates: meta.templates.map((item) => {
-            return {
-              ...item,
-              thumbnailSrc: `${layoutsUrl}/thumbs/${item.pages[0].id}.jpg`,
-              pages: item.pages.map((page) => {
-                return {
-                  ...page,
-                  thumbnailSrc: `${layoutsUrl}/thumbs/${page.id}.jpg`
-                };
-              })
-            };
-          })
+        const data: LayoutsWithThumbs = {
+          templates: convertLayouts(templates, `${imageUrl}`),
+          categories: convertToCategories(categories)
         };
 
         res(data);
       } catch (e) {
         rej(t("Failed to load meta.json"));
       }
     },
-    async getData(res, rej, id) {
+    async getData(res, rej, { id, layoutId }) {
       try {
-        const data = await fetch(`${layoutsUrl}/resolves/${id}.json`).then(
-          (r) => r.json()
+        const data = await getDefaultLayoutData(
+          apiLayoutsUrl1,
+          // `${templatesUrl}/api`,
+          layoutId,
+          id
         );
 
-        res(data);
+        const result: BlocksArray<DefaultBlockWithID> = {
+          blocks: [...data.items]
+        };
+
+        res(result);
       } catch (e) {
         rej(t("Failed to load resolves for selected DefaultTemplate"));
       }
+    },
+    async getPages(res, rej, id) {
+      try {
+        const { collections, styles } = await getDefaultLayoutsPages(
+          apiLayoutsUrl1,
+          // `${templatesUrl}/api`,
+          id
+        );
+
+        const parsedData: CustomTemplatePage[] = collections.map(
+          ({
+            slug,
+            title,
+            thumbnailHeight,
+            thumbnailWidth,
+            thumbs
+          }: LayoutsPageAPI) => ({
+            id: slug,
+            title,
+            thumbnailWidth,
+            thumbnailHeight,
+            thumbnailSrc: `${imageUrl}${thumbs}`,
+            layoutId: id
+          })
+        );
+
+        res({ pages: parsedData, styles: [styles] });
+      } catch (e) {
+        rej(t("Failed to load pages for selected Layout"));
+      }
     }
   };
 };