studiocms 0.2.0 → 0.4.0

package/frontend/components/dashboard/content-mgmt/EditPage.astro

@@ -74,8 +74,8 @@ const CurrentEditorComponent = editor;
 const pluginFields = pluginList
 	.flatMap(({ pageTypes }) => {
 		const pageTypeOutput: {
-			identifier: string;
-			fields?: SettingsField[];
+			readonly identifier: string;
+			readonly fields?: readonly SettingsField[];
 		}[] = [];
 
 		if (!pageTypes) {
@@ -100,10 +100,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
       data-content-management-url={Astro.locals.StudioCMS.routeMap.mainLinks
         .contentManagement}
     >
-      <form
-        id="edit-page-form"
-        action={Astro.locals.StudioCMS.routeMap.endpointLinks.content.page}
-      >
+      <form id="edit-page-form">
         <Tabs variant={"starlight"}>
           <TabItem
             id="tab-label-basic-info"
@@ -181,11 +178,9 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
                   label={t("select-page-categories")}
                   name="categories"
                   fullWidth
-                  placeholder={
-                    categories.length === 0
-                      ? 'No categories available'
-                      : 'Select'
-                  }
+                  placeholder={categories.length === 0
+                    ? "No categories available"
+                    : "Select"}
                   options={createSelectOptions(
                     categories.map(({ id: value, name: label }) => ({
                       label,
@@ -194,24 +189,22 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
                   )}
                   disabled={categories.length === 0}
                   multiple
-                  defaultValue={
-                    (() => {
-                      const categories = pageData.categories.map(({id}) => String(id));
-
-                      if (categories.length > 0) return categories;
-                      return undefined;
-                    })()
-                  }
+                  defaultValue={(() => {
+                    const categories = pageData.categories.map(({ id }) =>
+                      String(id),
+                    );
+
+                    if (categories.length > 0) return categories;
+                    return undefined;
+                  })()}
                 />
                 <Select
                   label={t("select-page-tags")}
                   name="tags"
                   fullWidth
-                  placeholder={
-                    tags.length === 0
-                      ? 'No tags available'
-                      : 'Select'
-                  }
+                  placeholder={tags.length === 0
+                    ? "No tags available"
+                    : "Select"}
                   options={createSelectOptions(
                     tags.map(({ id: value, name: label }) => ({
                       label,
@@ -220,14 +213,12 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
                   )}
                   disabled={tags.length === 0}
                   multiple
-                  defaultValue={
-                    (() => {
-                      const tags = pageData.tags.map(({id}) => String(id));
+                  defaultValue={(() => {
+                    const tags = pageData.tags.map(({ id }) => String(id));
 
-                      if (tags.length > 0) return tags;
-                      return undefined;
-                    })()
-                  }
+                    if (tags.length > 0) return tags;
+                    return undefined;
+                  })()}
                 />
               </div>
 
@@ -501,7 +492,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
     updateTrueFalseSelectOptions("draft", trueFalseOptions);
     updateTrueFalseSelectOptions("show-in-nav", trueFalseOptions);
     updateSelectOptions("cms-plugin-augments", {
-      'no-augments': comp["no-augments"],
+      "no-augments": comp["no-augments"],
     });
   });
 
@@ -526,22 +517,19 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
 </script>
 
 <script>
-  import type { tsPageData } from "studiocms:sdk/types";
   import { toast } from "studiocms:ui/components/toaster/client";
+  import * as Schema from "effect/Schema";
   import {
-    formDataToRecord,
-    studioCMSEditPageDataAndContentSchema,
-  } from "../../../scripts/formdata-utils.js";
-
-  type tsPageDataInsert = tsPageData['Insert']['Type'];
+    EditPageDataFromFormDataObjectSchema,
+    ObjectFromFormData,
+  } from "../../../scripts/formdata.js";
+  import { dashboardClient, dashboardSharedCatchTags } from "studiocms:client/apiClients";
+  import * as Effect from "effect/Effect";
 
   // get the elements
   const editPageForm = document.getElementById(
     "edit-page-form",
   ) as HTMLFormElement;
-  const createContainer = document.getElementById(
-    "edit-page-container",
-  ) as HTMLDivElement;
 
   const knownFormDataKeys = [
     "page-title",
@@ -583,100 +571,64 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
 
   type KnownDataKeys = (typeof knownDataKeys)[number];
 
-  const formDataKeysToPageDataKeys: Record<
-    KnownFormDataKeys,
-    keyof tsPageDataInsert | "contentId" | "content"
-  > = {
-    "page-title": "title",
-    "page-slug": "slug",
-    "page-description": "description",
-    "page-hero-image": "heroImage",
-    "page-type": "package",
-    "show-in-nav": "showOnNav",
-    "parent-folder": "parentFolder",
-    draft: "draft",
-    categories: "categories",
-    tags: "tags",
-    "show-author": "showAuthor",
-    "show-contributors": "showContributors",
-    "page-content-id": "contentId",
-    "page-content": "content",
-    "page-id": "id",
-  };
-
-  const { contentManagementUrl } = createContainer.dataset;
-
   editPageForm.addEventListener("submit", async (e) => {
     e.preventDefault();
     const formData = new FormData(editPageForm);
 
-    const formDataObject = formDataToRecord(
-      formData,
-      formDataKeysToPageDataKeys,
-    );
-
-    const pluginsFormData = Object.entries(formDataObject).reduce(
-      (acc, [key, value]) => {
-        // if the key is not in the knownFormDataKeys or knownDataKeys, it's a plugin field
-        if (
-          !knownFormDataKeys.includes(key as KnownFormDataKeys) &&
-          !knownDataKeys.includes(key as KnownDataKeys)
-        ) {
-          acc[key] = value;
-          delete formDataObject[key];
-        }
-        return acc;
-      },
-      {} as Record<string, FormDataEntryValue>,
-    );
-
     const augments = [...formData.getAll("cms-plugin-augments")].filter(
       (a) => a !== "no-augments",
     ) as string[];
 
-    const formResult = studioCMSEditPageDataAndContentSchema.safeParse({
-      ...formDataObject,
-      augments,
-      pluginFields: pluginsFormData,
-    });
-
-    if (!formResult.success) {
-      console.error(formResult.error);
-      toast({
-        title: "Error",
-        description:
-          "There was an error with the form data. Please check the console for details.",
-        type: "danger",
-      });
-      return;
-    }
-
-    const response = await fetch(editPageForm.action, {
-      method: "PATCH",
-      body: formResult.data
-        ? JSON.stringify({ ...formResult.data, pluginFields: pluginsFormData })
-        : undefined,
-    });
-
-    const res = await response.json();
+    const response = await Schema.decode(ObjectFromFormData)(formData).pipe(
+      Effect.map((data) => {
+        const pluginFields = Object.entries(data).reduce(
+          (acc, [key, value]) => {
+            // if the key is not in the knownFormDataKeys or knownDataKeys, it's a plugin field
+            if (
+              !knownFormDataKeys.includes(key as KnownFormDataKeys) &&
+              !knownDataKeys.includes(key as KnownDataKeys)
+            ) {
+              acc[key] = value;
+              delete data[key];
+            }
+            return acc;
+          },
+          {} as Record<string, FormDataEntryValue>,
+        );
+
+        return {
+          ...data,
+          augments,
+          pluginFields,
+        };
+      }),
+      Schema.decodeUnknown(EditPageDataFromFormDataObjectSchema),
+      Effect.flatMap((payload) =>
+        dashboardClient.pipe(
+          Effect.flatMap((client) =>
+            client.content.updatePage({
+              payload,
+            }),
+          ),
+        ),
+      ),
+      Effect.catchTags(dashboardSharedCatchTags),
+      Effect.runPromise,
+    );
 
-    if (response.status !== 200) {
+    if ("error" in response) {
       toast({
         title: "Error",
-        description: res.error,
+        description: response.error,
         type: "danger",
       });
       return;
-    }
-
-    if (response.status === 200) {
+    } else {
       toast({
         title: "Success",
-        description: res.message,
+        description: response.message || "Page updated successfully",
         type: "success",
       });
-      if (contentManagementUrl) window.location.href = contentManagementUrl;
-      return;
     }
   });
 </script>
@@ -700,29 +652,29 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
     height: 100%;
 
     > .sui-tabs-container {
-    	height: 100%;
-     	display: flex;
+      height: 100%;
+      display: flex;
       flex-direction: column;
 
       .sui-tab-header.active::after {
-				bottom: 1px;
-			}
+        bottom: 1px;
+      }
 
       > .sui-tabs-list {
-      	overflow-y: hidden;
+        overflow-y: hidden;
       }
 
       > .sui-tabs-content {
-      	height: 100%;
+        height: 100%;
 
-      	> sui-tab-item {
-     			height: 100%;
-        	flex-direction: column;
+        > sui-tab-item {
+          height: 100%;
+          flex-direction: column;
 
-					&.active {
-     				display: flex;
-					}
-       	}
+          &.active {
+            display: flex;
+          }
+        }
       }
     }
   }
@@ -747,13 +699,13 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
   }
 
   .form-row-booleans {
-	  display: flex;
-	  flex-direction: row;
+    display: flex;
+    flex-direction: row;
     flex-wrap: wrap;
     gap: 0.75rem;
 
     > * {
-   		flex-grow: 1;
+      flex-grow: 1;
     }
   }
 
@@ -787,7 +739,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
   }
 
   .page-content-editor {
-		height: 100%;
+    height: 100%;
     margin-bottom: 2rem;
 
     .editor-container {

package/frontend/components/dashboard/content-mgmt/InnerSidebarElement.astro

@@ -90,7 +90,6 @@ const PageFolderTree = await runSDK(SDKCoreJs.GET.pageFolderTree());
   class="folder-tree-search-container scrollbar"
   id="inner-sidebar-items-search"
   style="display: none;"
-  data-searchlist={Astro.locals.StudioCMS.routeMap.endpointLinks.searchList}
   data-editpage={Astro.locals.StudioCMS.routeMap.mainLinks
     .contentManagementEdit}
   data-editfolder={Astro.locals.StudioCMS.routeMap.mainLinks

package/frontend/components/dashboard/content-mgmt/PageHeader.astro

@@ -93,7 +93,7 @@ const currentMode = getCurrentMode();
     <Button color='primary' id='nav-open' class='mobile-btn'>
       <Icon name="heroicons:bars-3" height={24} width={24} slot="start-content" />
     </Button>
-    <h1 class="page-title" data-link={Astro.locals.StudioCMS.routeMap.sdk.pages}>
+    <h1 class="page-title">
       {currentMode === 'none' ? (
         <t-content-header key="title">
           {pageTitle}
@@ -149,7 +149,6 @@ const currentMode = getCurrentMode();
           <div class="modal-body">
             <input type="hidden" name="page-id" value={currentId} />
             <input type="hidden" name="page-slug" value={pageSlug} />
-            <input type="hidden" name="action-route" value={Astro.locals.StudioCMS.routeMap.endpointLinks.content.page} />
                     
             <span><t-content-header key="delete-modal-desc-1">
             {t('delete-modal-desc-1')}
@@ -197,7 +196,6 @@ const currentMode = getCurrentMode();
           <div class="modal-body">
             <input type="hidden" name="folder-id" value={currentId} />
             <input type="hidden" name="folder-name" value={folderName} />
-            <input type="hidden" name="action-route" value={Astro.locals.StudioCMS.routeMap.endpointLinks.content.folder} />
 
             <span><t-content-header key="delete-folder-modal-desc-1">
             {t('delete-folder-modal-desc-1')}
@@ -268,6 +266,8 @@ const currentMode = getCurrentMode();
 <script>
     import { ModalHelper } from 'studiocms:ui/components/modal/client';
     import { toast } from "studiocms:ui/components/toaster/client";
+    import { dashboardClient, dashboardSharedCatchTags } from "studiocms:client/apiClients";
+    import * as Effect from "effect/Effect";
 
     const mode = (document.getElementById('current-mode-selector') as HTMLDivElement).dataset.mode;
 
@@ -285,15 +285,11 @@ const currentMode = getCurrentMode();
               return;
             }
 
+            const id = formData?.get('page-id')?.toString();
+            const slug = formData?.get('page-slug')?.toString();
             const slugConfirm = formData?.get('slug-confirm')?.toString();
-            const action = formData.get('action-route') as string;
 
-            const data = {
-              id: formData?.get('page-id')?.toString(),
-              slug: formData?.get('page-slug')?.toString(),
-            }
-
-            if (!slugConfirm) {
+            if (!id || !slug || !slugConfirm) {
               toast({
                   title: 'Error',
                   description: 'Something went wrong',
@@ -302,16 +298,7 @@ const currentMode = getCurrentMode();
               return;
             }
 
-            if (!data.id || !data.slug) {
-              toast({
-                  title: 'Error',
-                  description: 'Something went wrong',
-                  type: 'danger'
-              })
-              return;
-            }
-
-            if (slugConfirm !== data.slug) {
+            if (slugConfirm !== slug) {
               toast({
                   title: 'Error',
                   description: 'Slug does not match',
@@ -320,29 +307,28 @@ const currentMode = getCurrentMode();
               return;
             }
 
-            const response = await fetch(action, {
-              method: 'DELETE',
-              headers: {
-                  'Content-Type': 'application/json',
-              },
-              body: JSON.stringify(data),
-            });
-
-            const res = await response.json();
-
-            if (response.status !== 200) {
+            const response = await dashboardClient.pipe(
+              Effect.flatMap((client) => client.content.deletePage({
+                payload: {
+                  id,
+                  slug
+                }
+              })),
+              Effect.catchTags(dashboardSharedCatchTags),
+              Effect.runPromise
+            );
+
+            if ("error" in response) {
               toast({
                   title: 'Error',
-                  description: res.error,
+                  description: response.error,
                   type: 'danger'
               })
               return;
-            }
-
-            if (response.status === 200) {
+            } else {
               toast({
                   title: 'Success',
-                  description: res.message,
+                  description: "Page deleted successfully",
                   type: 'success'
               })
               return;
@@ -372,7 +358,6 @@ const currentMode = getCurrentMode();
             const folderName = formData.get('folder-name') as string;
             const id = formData.get('folder-id') as string;
             const confirmFolderName = formData?.get('confirm-folder-name');
-            const action = formData.get('action-route') as string;
 
             if (!folderName || !confirmFolderName) {
               toast({
@@ -398,29 +383,25 @@ const currentMode = getCurrentMode();
               parentFolder: null,
             };
 
-            const response = await fetch(action, {
-              method: 'DELETE',
-              headers: {
-                  'Content-Type': 'application/json',
-              },
-              body: JSON.stringify(data),
-            });
-
-            const res = await response.json();
+            const response = await dashboardClient.pipe(
+              Effect.flatMap((client) => client.content.deleteFolder({
+                payload: data,
+              })),
+              Effect.catchTags(dashboardSharedCatchTags),
+              Effect.runPromise
+            );
 
-            if (response.status !== 200) {
+            if ("error" in response) {
               toast({
                   title: 'Error',
-                  description: res.error,
+                  description: response.error,
                   type: 'danger'
               })
               return;
-            }
-
-            if (response.status === 200) {
+            } else {
               toast({
                   title: 'Success',
-                  description: res.message,
+                  description: "Folder deleted successfully",
                   type: 'success'
               })
               return;

package/frontend/components/dashboard/content-mgmt/PageTypeHandler.astro

@@ -3,8 +3,8 @@ import type { SettingsField } from 'studiocms:plugin-helpers';
 
 interface Props {
 	pluginFields: {
-		identifier: string;
-		fields?: SettingsField[];
+		readonly identifier: string;
+		readonly fields?: readonly SettingsField[];
 	}[];
 }