connect to layouts to API

brizy.php

@@ -17,7 +17,7 @@
     $_SERVER['HTTPS'] = 'on';
 }
 
-define('BRIZY_DEVELOPMENT', false );
+define('BRIZY_DEVELOPMENT', true );
 define('BRIZY_LOG', false );
 define('BRIZY_VERSION', '2.4.40');
 define('BRIZY_MINIMUM_PRO_VERSION', '2.4.15');

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

@@ -1,6 +1,7 @@
 import { Config } from "../config";
 import {
   BlocksArray,
+  CustomTemplatePage,
   DefaultBlock,
   DefaultBlockWithID,
   DefaultTemplate,
@@ -9,15 +10,23 @@ import {
   KitItem,
   Kits,
   KitsWithThumbs,
-  Layouts,
+  LayoutsAPI,
+  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,
+  fetchAllLayouts,
+  getUniqueLayoutsCategories
+} from "./utils";
 
 const defaultKits = (
   config: Config
@@ -243,47 +252,78 @@ 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 apiLayoutsUrl =
+    "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 meta = await fetchAllLayouts<LayoutsAPI>(
+          `${apiLayoutsUrl}/get-layouts`,
+          50
         );
 
-        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, imageUrl),
+          categories: getUniqueLayoutsCategories(meta)
         };
-
         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 fetch(
+          `${apiLayoutsUrl}/get-layouts-page?project_id=${layoutId}&page_slug=${id}`
+        ).then((r) => r.json());
 
-        res(data);
+        const pageData = JSON.parse(data[0].pageData);
+
+        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}`
+        ).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"));
+      }
     }
   };
 };

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

@@ -5,6 +5,8 @@ import {
   Categories,
   Kit,
   KitType,
+  LayoutsAPI,
+  LayoutTemplateWithThumbs,
   Style
 } from "../types/DefaultTemplate";
 import { pipe } from "../utils/fp/pipe";
@@ -25,6 +27,24 @@ export const getUniqueKitCategories = (collections: CatTypes[]): Categories[] =>
       }))
   )(collections);
 
+export const getUniqueLayoutsCategories = (
+  collections: LayoutsAPI[]
+): Categories[] =>
+  pipe(
+    (collections: LayoutsAPI[]) =>
+      collections.map((collection: LayoutsAPI) => collection.categories),
+    (cats: string[]) => cats.map((it) => it.split(",")),
+    flatten,
+    (cats: string[]) => cats.map((cat) => cat.trim()),
+    uniq,
+    (cats) =>
+      cats.map((cat) => ({
+        title: cat,
+        slug: cat,
+        id: cat
+      }))
+  )(collections);
+
 export const getUniqueKitTypes = (collections: Kit[]): KitType[] =>
   pipe(
     (collections: Kit[]) => collections.map((collection) => collection.theme),
@@ -121,6 +141,38 @@ export const converterPopup = (
   };
 };
 
+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 getStyles = (): Array<Style> => [
   {
     colorPalette: [
@@ -385,3 +437,28 @@ 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;
+};

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

public/editor-client/src/types/global.d.ts

@@ -11,6 +11,8 @@ import {
   DefaultTemplatePopup,
   KitItem,
   KitsWithThumbs,
+  LayoutsDefaultTemplate,
+  LayoutsPages,
   LayoutsWithThumbs,
   PopupsWithThumbs,
   StoriesWithThumbs
@@ -124,9 +126,10 @@ export interface VISUAL_CONFIG {
       Array<KitItem>
     >;
     defaultPopups?: DefaultTemplatePopup<PopupsWithThumbs, DefaultBlockWithID>;
-    defaultLayouts?: DefaultTemplate<
+    defaultLayouts?: LayoutsDefaultTemplate<
       LayoutsWithThumbs,
-      BlocksArray<DefaultBlockWithID>
+      BlocksArray<DefaultBlockWithID>,
+      LayoutsPages
     >;
     defaultStories?: DefaultTemplate<
       StoriesWithThumbs,