feat(editor-client): symbols crud

public/editor-client/package.json

@@ -18,7 +18,8 @@
   "author": "brizy",
   "license": "MIT",
   "dependencies": {
-    "fp-utilities": "^1.1.4"
+    "fp-utilities": "^1.1.4",
+    "valtio": "^1.10.6"
   },
   "devDependencies": {
     "@babel/parser": "^7.21.8",

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

@@ -1,3 +1,5 @@
+import { ClassSymbol } from "src/types/Symbols";
+import { State } from "src/valtio/types";
 import { getConfig } from "../config";
 import { Page } from "../types/Page";
 import { Rule } from "../types/PopupConditions";
@@ -739,3 +741,86 @@ export const updatePopupRules = async (
 };
 
 //#endregion
+
+//#region Symbols
+
+export const createSymbol = async (data: ClassSymbol[]): Promise<unknown> => {
+  const config = getConfig();
+
+  if (!config) {
+    throw new Error(t("Invalid __BRZ_PLUGIN_ENV__ at createSymbols"));
+  }
+
+  const { editorVersion, url: _url, hash, actions } = config;
+
+  const url = makeUrl(_url, {
+    action: actions.symbolCreate,
+    version: editorVersion,
+    hash
+  });
+
+  return request(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json; charset=utf-8"
+    },
+    body: JSON.stringify(data)
+  });
+};
+
+export const updateSymbol = async (data: ClassSymbol[]): Promise<unknown> => {
+  const config = getConfig();
+
+  if (!config) {
+    throw new Error(t("Invalid __BRZ_PLUGIN_ENV__ at update symbol"));
+  }
+
+  const { editorVersion, url: _url, hash, actions } = config;
+
+  const url = makeUrl(_url, {
+    action: actions.symbolUpdate,
+    version: editorVersion,
+    hash
+  });
+
+  return request(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json; charset=utf-8"
+    },
+    body: JSON.stringify(data)
+  });
+};
+
+export const deleteSymbol = async (data: ClassSymbol[]): Promise<unknown> => {
+  const config = getConfig();
+
+  if (!config) {
+    throw new Error(t("Invalid __BRZ_PLUGIN_ENV__ at delete symbol"));
+  }
+
+  const { editorVersion, url: _url, hash, actions } = config;
+
+  const url = makeUrl(_url, {
+    action: actions.symbolDelete,
+    version: editorVersion,
+    hash
+  });
+
+  return request(url, {
+    method: "DELETE",
+    body: JSON.stringify(data)
+  });
+};
+
+export const updateSymbols = async (store: Readonly<State>) => {
+  const { toCreate, toUpdate, toDelete } = store.symbols;
+
+  const createPromise = createSymbol(toCreate);
+  const updatePromise = updateSymbol(toUpdate);
+  const deletePromise = deleteSymbol(toDelete);
+
+  await Promise.all([createPromise, updatePromise, deletePromise]);
+};
+
+//#endregion

public/editor-client/src/config.ts

@@ -40,6 +40,11 @@ interface Actions {
 
   searchPosts: string;
   getPostObjects: string;
+
+  symbolCreate: string;
+  symbolList: string;
+  symbolUpdate: string;
+  symbolDelete: string;
 }
 
 interface API {
@@ -184,6 +189,22 @@ const actionsReader = parseStrict<PLUGIN_ENV["actions"], Actions>({
   getPostObjects: pipe(
     mPipe(Obj.readKey("getPostObjects"), Str.read),
     throwOnNullish("Invalid actions: getPostObjects")
+  ),
+  symbolList: pipe(
+    mPipe(Obj.readKey("symbolList"), Str.read),
+    throwOnNullish("Invalid actions: symbolList")
+  ),
+  symbolCreate: pipe(
+    mPipe(Obj.readKey("symbolCreate"), Str.read),
+    throwOnNullish("Invalid actions: symbolCreate")
+  ),
+  symbolUpdate: pipe(
+    mPipe(Obj.readKey("symbolUpdate"), Str.read),
+    throwOnNullish("Invalid actions: symbolUpdate")
+  ),
+  symbolDelete: pipe(
+    mPipe(Obj.readKey("symbolDelete"), Str.read),
+    throwOnNullish("Invalid actions: symbolDelete")
   )
 });
 

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

@@ -1,5 +1,6 @@
 import { updatePage, updateProject } from "../api";
 import { OnChange } from "../types/OnChange";
+import { handleSymbols } from "./symbols";
 
 export const onChange = (data: OnChange) => {
   if (data.projectData) {
@@ -9,4 +10,8 @@ export const onChange = (data: OnChange) => {
   if (data.pageData) {
     updatePage(data.pageData, { is_autosave: 0 });
   }
+
+  if (data.symbols) {
+    handleSymbols(data.symbols);
+  }
 };

public/editor-client/src/onChange/symbols.ts

@@ -0,0 +1,32 @@
+import { isSymbol } from "src/symbols/utils";
+import { SymbolAction } from "src/types/Symbols";
+import { store } from "src/valtio";
+
+export const handleSymbols = (data: SymbolAction): void => {
+  const { type, payload } = data;
+
+  if (type && payload && isSymbol(payload)) {
+    switch (type) {
+      case "CREATE": {
+        store.symbols.toCreate.push(payload);
+        break;
+      }
+      case "UPDATE": {
+        const candidateIndex = store.symbols.toUpdate.findIndex(
+          (s) => s.uid === payload.uid
+        );
+
+        if (candidateIndex === -1) {
+          store.symbols.toUpdate.push(payload);
+        }
+
+        store.symbols.toUpdate[candidateIndex] = payload;
+        break;
+      }
+      case "DELETE": {
+        store.symbols.toDelete.push(payload);
+        break;
+      }
+    }
+  }
+};

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

@@ -1,10 +1,14 @@
-import { updatePage, updateProject } from "../api";
+import { store } from "src/valtio";
+import { State } from "src/valtio/types";
+import { clearSymbols } from "src/valtio/utils";
+import { snapshot } from "valtio/vanilla";
+import { updatePage, updateProject, updateSymbols } from "../api";
 import { Publish } from "../types/Publish";
 import { t } from "../utils/i18n";
 
 export const publish: Publish = {
   async handler(res, rej, args) {
-    const { projectData, pageData } = args;
+    const { projectData, pageData, symbols } = args;
 
     if (projectData) {
       try {
@@ -23,5 +27,18 @@ export const publish: Publish = {
         rej(t("Failed to update page"));
       }
     }
+
+    if (symbols) {
+      try {
+        const snap = snapshot<State>(store) as Readonly<State>;
+
+        await updateSymbols(snap);
+
+        clearSymbols(store);
+        res(args);
+      } catch (error) {
+        rej(t("Failed to update symbols"));
+      }
+    }
   }
 };

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

@@ -0,0 +1,62 @@
+// import { createSymbol, deleteSymbol, getSymbols, updateSymbol } from "src/api";
+// import { Symbols } from "src/types/Symbols";
+// import { t } from "src/utils/i18n";
+
+// export const symbols: Symbols = {
+//   async get(res, rej) {
+//     try {
+//       const data = await getSymbols();
+
+//       if (!data) {
+//         return rej(t("Could not get symbols"));
+//       }
+
+//       res(data);
+//     } catch (e) {
+//       rej(t("Failed to get symbols"));
+//     }
+//   },
+//   async create(res, rej, extra) {
+//     try {
+//       const data = await createSymbol(extra);
+
+//       if (!data.data) {
+//         return rej(t("Could not create symbols"));
+//       }
+
+//       res(data.data);
+//     } catch (error) {
+//       rej(t("Failed to create symbol"));
+//     }
+//   },
+//   async update(res, rej, extra) {
+//     try {
+//       const data = await updateSymbol(extra);
+
+//       if (!data.data) {
+//         return rej(t("Could not update symbols"));
+//       }
+
+//       console.log("data: ", data);
+
+//       res(data.data);
+//     } catch (error) {
+//       rej(t("Failed to update symbol"));
+//     }
+//   },
+//   async delete(res, rej, extra) {
+//     try {
+//       const data = await deleteSymbol(extra);
+
+//       if (!data.success) {
+//         return rej(t("Could not delete symbols"));
+//       }
+
+//       res(data.success);
+//     } catch (error) {
+//       rej(t("Failed to delete symbol"));
+//     }
+//   }
+// };
+
+export {};