From 0e8026a6e05407277b883ed5110163b5c52f0d95 Mon Sep 17 00:00:00 2001
From: Artur Gunka <arturel101010@mail.ru>
Date: Mon, 15 Jan 2024 16:55:29 +0200
Subject: [PATCH] connect to layouts to API

---
 .../src/defaultTemplates/index.ts             |  87 +++--
 .../{tempComverters.ts => tempConverters.ts}  |   0
 .../src/defaultTemplates/utils.ts             | 313 +++++-------------
 .../src/types/DefaultTemplate.ts              |  78 ++++-
 public/editor-client/src/types/global.d.ts    |   7 +-
 5 files changed, 211 insertions(+), 274 deletions(-)
 rename public/editor-client/src/defaultTemplates/{tempComverters.ts => tempConverters.ts} (100%)

diff --git a/public/editor-client/src/defaultTemplates/index.ts b/public/editor-client/src/defaultTemplates/index.ts
index 5090642a89..e4ff8bc58e 100644
--- a/public/editor-client/src/defaultTemplates/index.ts
+++ b/public/editor-client/src/defaultTemplates/index.ts
@@ -1,6 +1,8 @@
+import { Json } from "@brizy/readers";
 import { Config } from "../config";
 import {
   BlocksArray,
+  CustomTemplatePage,
   DefaultBlock,
   DefaultBlockWithID,
   DefaultTemplate,
@@ -9,7 +11,9 @@ import {
   KitItem,
   Kits,
   KitsWithThumbs,
-  Layouts,
+  LayoutsDefaultTemplate,
+  LayoutsPageAPI,
+  LayoutsPages,
   LayoutsWithThumbs,
   Popups,
   PopupsWithThumbs,
@@ -17,7 +21,8 @@ import {
   StoriesWithThumbs
 } from "../types/DefaultTemplate";
 import { t } from "../utils/i18n";
-import { tempConverterKit } from "./tempComverters";
+import { tempConverterKit } from "./tempConverters";
+import { convertLayouts, convertToCategories, fetchAllLayouts1 } from "./utils";
 
 const defaultKits = (
   config: Config
@@ -243,30 +248,28 @@ const defaultStories = (
 
 const defaultLayouts = (
   config: Config
-): DefaultTemplate<LayoutsWithThumbs, BlocksArray<DefaultBlockWithID>> => {
+): LayoutsDefaultTemplate<
+  LayoutsWithThumbs,
+  BlocksArray<DefaultBlockWithID>,
+  LayoutsPages
+> => {
+  // @ts-expect-error: temporary solution, wait until new API will come via config
   const { layoutsUrl } = config.api.templates;
+  const imageUrl = "https://cloud-1de12d.b-cdn.net/media/iW=1024&iH=1024/";
+  const apiLayoutsUrl1 =
+    "https://phplaravel-1109775-4184176.cloudwaysapps.com/api";
+  const apiLayoutsUrl = "https://j6dfq8pl41.b-cdn.net/api";
 
   return {
     async getMeta(res, rej) {
       try {
-        const meta: Layouts = await fetch(`${layoutsUrl}/meta.json`).then((r) =>
-          r.json()
+        const meta = await fetchAllLayouts1(
+          `${apiLayoutsUrl1}/get-layouts-chunk`
         );
 
-        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(meta.templates, `${imageUrl}`),
+          categories: convertToCategories(meta.categories)
         };
 
         res(data);
@@ -274,16 +277,52 @@ const defaultLayouts = (
         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 fetch(
+          `${apiLayoutsUrl}/get-layouts-page?project_id=${layoutId}&page_slug=${id}`
+        ).then((r) => r.json());
 
-        res(data);
+        const pageData = Json.read(data[0].pageData) as {
+          items: DefaultBlockWithID[];
+        };
+
+        const result: BlocksArray<DefaultBlockWithID> = {
+          blocks: [...pageData.items]
+        };
+
+        res(result);
       } catch (e) {
         rej(t("Failed to load resolves for selected DefaultTemplate"));
       }
+    },
+    async getPages(res, rej, id) {
+      try {
+        const data = await fetch(
+          `${apiLayoutsUrl}/get-layouts-pages?project_id=${id}&per_page=20`
+        ).then((r) => r.json());
+
+        const parsedData: CustomTemplatePage[] = data.collections.map(
+          ({
+            slug,
+            title,
+            thumbnailHeight,
+            thumbnailWidth,
+            thumbs
+          }: LayoutsPageAPI) => ({
+            id: slug,
+            title,
+            thumbnailWidth,
+            thumbnailHeight,
+            thumbnailSrc: `${imageUrl}${thumbs}`,
+            layoutId: id
+          })
+        );
+
+        res({ pages: parsedData, styles: [data.styles] });
+      } catch (e) {
+        rej(t("Failed to load pages for selected Layout"));
+      }
     }
   };
 };
diff --git a/public/editor-client/src/defaultTemplates/tempComverters.ts b/public/editor-client/src/defaultTemplates/tempConverters.ts
similarity index 100%
rename from public/editor-client/src/defaultTemplates/tempComverters.ts
rename to public/editor-client/src/defaultTemplates/tempConverters.ts
diff --git a/public/editor-client/src/defaultTemplates/utils.ts b/public/editor-client/src/defaultTemplates/utils.ts
index 2cfe123df0..d293fde69f 100644
--- a/public/editor-client/src/defaultTemplates/utils.ts
+++ b/public/editor-client/src/defaultTemplates/utils.ts
@@ -5,7 +5,8 @@ import {
   Categories,
   Kit,
   KitType,
-  Style
+  LayoutsAPI,
+  LayoutTemplateWithThumbs
 } from "../types/DefaultTemplate";
 import { pipe } from "../utils/fp/pipe";
 
@@ -121,244 +122,37 @@ export const converterPopup = (
   };
 };
 
-export const getStyles = (): Array<Style> => [
-  {
-    colorPalette: [
-      { id: "color1", hex: "#A170D9" },
-      { id: "color2", hex: "#1C1C1C" },
-      { id: "color3", hex: "#05CAB6" },
-      { id: "color4", hex: "#B8E6E1" },
-      { id: "color5", hex: "#F5D4D1" },
-      { id: "color6", hex: "#EBEBEB" },
-      { id: "color7", hex: "#666666" },
-      { id: "color8", hex: "#FFFFFF" }
-    ],
-    fontStyles: [
-      {
-        deletable: "off",
-        id: "paragraph",
-        title: "Paragraph",
-        fontFamily: "overpass",
-        fontFamilyType: "google",
-        fontSize: 16,
-        fontSizeSuffix: "px",
-        fontWeight: 400,
-        lineHeight: 1.9,
-        letterSpacing: 0,
-        tabletFontSize: 15,
-        tabletFontSizeSuffix: "px",
-        tabletFontWeight: 400,
-        tabletLineHeight: 1.6,
-        tabletLetterSpacing: 0,
-        mobileFontSize: 15,
-        mobileFontSizeSuffix: "px",
-        mobileFontWeight: 400,
-        mobileLineHeight: 1.6,
-        mobileLetterSpacing: 0
-      },
-      {
-        deletable: "off",
-        id: "subtitle",
-        title: "Subtitle",
-        fontFamily: "overpass",
-        fontFamilyType: "google",
-        fontSize: 17,
-        fontSizeSuffix: "px",
-        fontWeight: 400,
-        lineHeight: 1.8,
-        letterSpacing: 0,
-        tabletFontSize: 17,
-        tabletFontSizeSuffix: "px",
-        tabletFontWeight: 400,
-        tabletLineHeight: 1.5,
-        tabletLetterSpacing: 0,
-        mobileFontSize: 16,
-        mobileFontSizeSuffix: "px",
-        mobileFontWeight: 400,
-        mobileLineHeight: 1.5,
-        mobileLetterSpacing: 0
-      },
-      {
-        deletable: "off",
-        id: "abovetitle",
-        title: "Above Title",
-        fontFamily: "overpass",
-        fontFamilyType: "google",
-        fontSize: 13,
-        fontSizeSuffix: "px",
-        fontWeight: 700,
-        lineHeight: 1.5,
-        letterSpacing: 1.1,
-        tabletFontSize: 13,
-        tabletFontSizeSuffix: "px",
-        tabletFontWeight: 700,
-        tabletLineHeight: 1.5,
-        tabletLetterSpacing: 1,
-        mobileFontSize: 13,
-        mobileFontSizeSuffix: "px",
-        mobileFontWeight: 700,
-        mobileLineHeight: 1.5,
-        mobileLetterSpacing: 1
-      },
-      {
-        deletable: "off",
-        id: "heading1",
-        title: "Heading 1",
-        fontFamily: "overpass",
-        fontFamilyType: "google",
-        fontSize: 46,
-        fontSizeSuffix: "px",
-        fontWeight: 700,
-        lineHeight: 1.3,
-        letterSpacing: -1.5,
-        tabletFontSize: 38,
-        tabletFontSizeSuffix: "px",
-        tabletFontWeight: 700,
-        tabletLineHeight: 1.2,
-        tabletLetterSpacing: -1,
-        mobileFontSize: 36,
-        mobileFontSizeSuffix: "px",
-        mobileFontWeight: 700,
-        mobileLineHeight: 1.3,
-        mobileLetterSpacing: -1
-      },
-      {
-        deletable: "off",
-        id: "heading2",
-        title: "Heading 2",
-        fontFamily: "overpass",
-        fontFamilyType: "google",
-        fontSize: 36,
-        fontSizeSuffix: "px",
-        fontWeight: 700,
-        lineHeight: 1.3,
-        letterSpacing: -1.5,
-        tabletFontSize: 30,
-        tabletFontSizeSuffix: "px",
-        tabletFontWeight: 700,
-        tabletLineHeight: 1.2,
-        tabletLetterSpacing: -1,
-        mobileFontSize: 28,
-        mobileFontSizeSuffix: "px",
-        mobileFontWeight: 700,
-        mobileLineHeight: 1.3,
-        mobileLetterSpacing: -1
-      },
-      {
-        deletable: "off",
-        id: "heading3",
-        title: "Heading 3",
-        fontFamily: "overpass",
-        fontFamilyType: "google",
-        fontSize: 28,
-        fontSizeSuffix: "px",
-        fontWeight: 700,
-        lineHeight: 1.4,
-        letterSpacing: -1.5,
-        tabletFontSize: 27,
-        tabletFontSizeSuffix: "px",
-        tabletFontWeight: 700,
-        tabletLineHeight: 1.3,
-        tabletLetterSpacing: -1,
-        mobileFontSize: 22,
-        mobileFontSizeSuffix: "px",
-        mobileFontWeight: 700,
-        mobileLineHeight: 1.3,
-        mobileLetterSpacing: -0.5
-      },
-      {
-        deletable: "off",
-        id: "heading4",
-        title: "Heading 4",
-        fontFamily: "overpass",
-        fontFamilyType: "google",
-        fontSize: 22,
-        fontSizeSuffix: "px",
-        fontWeight: 700,
-        lineHeight: 1.5,
-        letterSpacing: -0.5,
-        tabletFontSize: 22,
-        tabletFontSizeSuffix: "px",
-        tabletFontWeight: 700,
-        tabletLineHeight: 1.4,
-        tabletLetterSpacing: -0.5,
-        mobileFontSize: 20,
-        mobileFontSizeSuffix: "px",
-        mobileFontWeight: 700,
-        mobileLineHeight: 1.4,
-        mobileLetterSpacing: 0
-      },
-      {
-        deletable: "off",
-        id: "heading5",
-        title: "Heading 5",
-        fontFamily: "overpass",
-        fontFamilyType: "google",
-        fontSize: 20,
-        fontSizeSuffix: "px",
-        fontWeight: 700,
-        lineHeight: 1.6,
-        letterSpacing: 0,
-        tabletFontSize: 17,
-        tabletFontSizeSuffix: "px",
-        tabletFontWeight: 700,
-        tabletLineHeight: 1.7,
-        tabletLetterSpacing: 0,
-        mobileFontSize: 17,
-        mobileFontSizeSuffix: "px",
-        mobileFontWeight: 700,
-        mobileLineHeight: 1.8,
-        mobileLetterSpacing: 0
-      },
-      {
-        deletable: "off",
-        id: "heading6",
-        title: "Heading 6",
-        fontFamily: "overpass",
-        fontFamilyType: "google",
-        fontSize: 16,
-        fontSizeSuffix: "px",
-        fontWeight: 700,
-        lineHeight: 1.5,
-        letterSpacing: 0,
-        tabletFontSize: 16,
-        tabletFontSizeSuffix: "px",
-        tabletFontWeight: 700,
-        tabletLineHeight: 1.5,
-        tabletLetterSpacing: 0,
-        mobileFontSize: 16,
-        mobileFontSizeSuffix: "px",
-        mobileFontWeight: 700,
-        mobileLineHeight: 1.5,
-        mobileLetterSpacing: 0
-      },
-      {
-        deletable: "off",
-        id: "button",
-        title: "Button",
-        fontFamily: "overpass",
-        fontFamilyType: "google",
-        fontSize: 15,
-        fontSizeSuffix: "px",
-        fontWeight: 700,
-        lineHeight: 1.6,
-        letterSpacing: 0,
-        tabletFontSize: 17,
-        tabletFontSizeSuffix: "px",
-        tabletFontWeight: 700,
-        tabletLineHeight: 1.6,
-        tabletLetterSpacing: 0,
-        mobileFontSize: 15,
-        mobileFontSizeSuffix: "px",
-        mobileFontWeight: 700,
-        mobileLineHeight: 1.6,
-        mobileLetterSpacing: 0
-      }
-    ],
-    id: "bahcadtpvdhdphmhymrsgrwobyzhxcdzytyx",
-    title: "Overpass"
-  }
-];
+export const convertLayouts = (
+  collections: LayoutsAPI[],
+  thumbUrl: string
+): LayoutTemplateWithThumbs[] =>
+  collections.map(
+    ({
+      title,
+      categories,
+      color,
+      pagesCount,
+      pro,
+      keywords,
+      thumbnailWidth,
+      thumbnailHeight,
+      thumbnail,
+      slug
+    }) => {
+      return {
+        name: title,
+        cat: categories.split(",").map((item) => item.trim()),
+        color,
+        pagesCount: Number(pagesCount),
+        pro: pro === "True",
+        keywords,
+        thumbnailWidth,
+        thumbnailHeight,
+        thumbnailSrc: `${thumbUrl}${thumbnail}`,
+        layoutId: slug
+      };
+    }
+  );
 
 export const fetchAllElements = async <T>(
   url: string,
@@ -385,3 +179,44 @@ export const fetchAllElements = async <T>(
 
   return allElements;
 };
+
+export const fetchAllLayouts = async <T>(
+  url: string,
+  itemsPerPage: number
+): Promise<T[]> => {
+  let allElements: T[] = [];
+
+  const firstPageResponse = await fetch(`${url}?per_page=${itemsPerPage}`).then(
+    (r) => r.json()
+  );
+
+  const lastPage = firstPageResponse.paginationInfo.lastPage;
+
+  allElements = allElements.concat(firstPageResponse.collections);
+
+  for (let currentPage = 2; currentPage <= lastPage; currentPage++) {
+    const nextPageResponse = await fetch(
+      `${url}?per_page=${itemsPerPage}&page_number=${currentPage}`
+    ).then((r) => r.json());
+
+    allElements = allElements.concat(nextPageResponse.collections);
+  }
+
+  return allElements;
+};
+
+export const fetchAllLayouts1 = async (
+  url: string
+): Promise<{ templates: LayoutsAPI[]; categories: Record<string, string> }> => {
+  const res = await fetch(url).then((r) => r.json());
+
+  return { templates: res.collections, categories: res.categories };
+};
+
+export function convertToCategories(obj: Record<string, string>): Categories[] {
+  return Object.entries(obj).map(([_, title]) => ({
+    id: upperFirst(title),
+    slug: title.toLowerCase(),
+    title: upperFirst(title)
+  }));
+}
diff --git a/public/editor-client/src/types/DefaultTemplate.ts b/public/editor-client/src/types/DefaultTemplate.ts
index c9d3ca17e8..771573858f 100644
--- a/public/editor-client/src/types/DefaultTemplate.ts
+++ b/public/editor-client/src/types/DefaultTemplate.ts
@@ -15,11 +15,6 @@ export interface DefaultTemplate<T1, T2> {
   ) => void;
 }
 
-export interface Layouts {
-  templates: Array<Template>;
-  categories: Pick<Categories, "id" | "title">;
-}
-
 export interface DefaultBlockWithID extends DefaultBlock {
   blockId: string;
 }
@@ -28,10 +23,6 @@ export interface BlocksArray<T> {
   blocks: Array<T>;
 }
 
-export interface LayoutsWithThumbs extends Omit<Layouts, "templates"> {
-  templates: Array<TemplateWithThumbs>;
-}
-
 export interface Stories {
   stories: Array<Template>;
   categories: Array<Omit<Categories, "slug">>;
@@ -87,6 +78,10 @@ export interface TemplatePageWithThumbs extends TemplatePage {
   thumbnailSrc: string;
 }
 
+export type CustomTemplatePage = TemplatePageWithThumbs & {
+  [key: string]: string;
+};
+
 export interface Categories {
   id: number | string;
   slug: string;
@@ -215,3 +210,68 @@ export interface PopupsWithThumbs extends Omit<Popups, "blocks"> {
   blocks: Array<BlockWithThumbs>;
 }
 // endregion
+
+// region Layouts
+export interface LayoutsDefaultTemplate<T1, T2, T3> {
+  label?: string;
+  getMeta: (res: Response<T1>, rej: Response<string>) => void;
+  getData: (
+    res: Response<T2>,
+    rej: Response<string>,
+    page: CustomTemplatePage
+  ) => void;
+  getPages: (res: Response<T3>, rej: Response<string>, id: string) => void;
+}
+
+export interface LayoutTemplate {
+  blank?: boolean;
+  name: string;
+  cat: Array<number | string>;
+  color: string;
+  pagesCount: number;
+  layoutId: string;
+  pro: boolean;
+  keywords: string;
+}
+
+export interface Layouts {
+  templates: Array<LayoutTemplateWithThumbs>;
+  categories: Pick<Categories, "id" | "title">[];
+}
+
+export interface LayoutsPages {
+  pages: CustomTemplatePage[];
+  styles: Style[];
+}
+
+export interface LayoutsWithThumbs extends Omit<Layouts, "templates"> {
+  templates: Array<LayoutTemplateWithThumbs>;
+}
+
+export interface LayoutTemplateWithThumbs extends LayoutTemplate {
+  thumbnailSrc: string;
+  thumbnailWidth: number;
+  thumbnailHeight: number;
+}
+
+export type LayoutsPageAPI = {
+  title: string;
+  slug: string;
+  thumbs: string;
+  thumbnailWidth: number;
+  thumbnailHeight: number;
+};
+
+export type LayoutsAPI = {
+  title: string;
+  pro: string;
+  categories: string;
+  pagesCount: string;
+  slug: string;
+  thumbnail: string;
+  thumbnailWidth: number;
+  thumbnailHeight: number;
+  keywords: string;
+  color: string;
+};
+// endregion
diff --git a/public/editor-client/src/types/global.d.ts b/public/editor-client/src/types/global.d.ts
index 65d1c87534..5d0b085bf8 100644
--- a/public/editor-client/src/types/global.d.ts
+++ b/public/editor-client/src/types/global.d.ts
@@ -11,6 +11,8 @@ import {
   DefaultTemplatePopup,
   KitItem,
   KitsWithThumbs,
+  LayoutsDefaultTemplate,
+  LayoutsPages,
   LayoutsWithThumbs,
   PopupsWithThumbs,
   StoriesWithThumbs
@@ -144,9 +146,10 @@ export interface VISUAL_CONFIG {
       Array<KitItem>
     >;
     defaultPopups?: DefaultTemplatePopup<PopupsWithThumbs, DefaultBlockWithID>;
-    defaultLayouts?: DefaultTemplate<
+    defaultLayouts?: LayoutsDefaultTemplate<
       LayoutsWithThumbs,
-      BlocksArray<DefaultBlockWithID>
+      BlocksArray<DefaultBlockWithID>,
+      LayoutsPages
     >;
     defaultStories?: DefaultTemplate<
       StoriesWithThumbs,