studiocms 0.3.0 → 0.4.0

package/frontend/components/dashboard/sidebar/VersionCheck.astro

@@ -37,7 +37,9 @@ const status: false | 'outdated' | 'latest' | 'future' = (() => {
   import { dateTimeListener } from "../../../scripts/dateTimeListener.js";
   import { dateWithTimeAndZone } from "../../../scripts/dateWithTimeAndZone.js";
   import { timeAgo } from "../../../scripts/timeAgo.js";
-  // import type { VersionCacheObject } from "studiocms:sdk/types";
+  import * as Effect from 'effect/Effect';
+  import { sdkClient } from 'studiocms:client/apiClients';
+  import { toast } from 'studiocms:ui/components/toaster/client';
 
   function setupVersionChecker() {
     const reloadButton = document.getElementById(
@@ -70,21 +72,34 @@ const status: false | 'outdated' | 'latest' | 'future' = (() => {
     new ModalHelper("version-modal", "version-modal-trigger");
 
     reloadButton.addEventListener("click", async () => {
-      const response = await fetch(reloadButton.dataset.link!);
-      if (response.ok) {
-        const data: { success: boolean; latestVersion: { version: string; lastCacheUpdate: Date } } =
-          await response.json();
-
-        if (data.success) {
-          latestVersionElem.textContent = `v${data.latestVersion.version}`;
-          timeElem.dateTime = new Date(
-            data.latestVersion.lastCacheUpdate,
-          ).toISOString();
-          timeElem.textContent = dateWithTimeAndZone(
-            new Date(data.latestVersion.lastCacheUpdate),
-          );
-          latestUpdateCheck.textContent = `(${timeAgo(new Date(data.latestVersion.lastCacheUpdate))})`;
-        }
+      reloadButton.disabled = true;
+
+      type FailureVersionResponse = {
+        readonly success: false;
+        readonly latestVersion: null;
+      };
+
+      const { latestVersion, success } = await Effect.orElse(
+        sdkClient.pipe(Effect.flatMap((client) => 
+          client.sdk.updateLatestVersionCache()
+        )),
+        () => Effect.succeed({ success: false, latestVersion: null } as FailureVersionResponse)
+      ).pipe(Effect.runPromise);
+
+      if (success) {
+        latestVersionElem.textContent = `v${latestVersion.version}`;
+        timeElem.dateTime = new Date(latestVersion.lastCacheUpdate).toISOString();
+        timeElem.textContent = dateWithTimeAndZone(new Date(latestVersion.lastCacheUpdate));
+        latestUpdateCheck.textContent = `(${timeAgo(new Date(latestVersion.lastCacheUpdate))})`;
+
+        reloadButton.disabled = false;
+      } else {
+        reloadButton.disabled = false;
+        toast({
+          title: "Failed to update version check",
+          description: "Please try again later.",
+          type: "danger",
+        });
       }
     });
   }

package/frontend/components/dashboard/sidebar/VersionCheckChangelog.astro

@@ -2,18 +2,20 @@
 import css from '@studiocms/ui/css/prose.css?raw';
 
 interface Props {
-	link: string;
 	changelog: string;
 }
 
-const { link, changelog } = Astro.props;
+const { changelog } = Astro.props;
 ---
 
-<frame-button data-link={link} data-changelog={changelog} data-styles={css}>
+<frame-button data-changelog={changelog} data-styles={css}>
     <slot />
 </frame-button>
 
 <script>
+    import * as Effect from 'effect/Effect';
+    import { sdkClient } from 'studiocms:client/apiClients';
+
     if (!customElements.get('frame-button')) {
         
         class FrameButton extends HTMLElement {
@@ -81,15 +83,20 @@ const { link, changelog } = Astro.props;
                 });
                 
                 slot.addEventListener('click', async () => {
+                    const { changelog } = await Effect.orElse(
+                        sdkClient.pipe(Effect.flatMap((client) => 
+                            client.sdk.fullChangelog({ 
+                                payload: { currentURLOrigin: window.location.origin },
+                            })
+                        )),
+                        () => Effect.succeed({ 
+                            success: false, 
+                            changelog: 'Failed to load changelog. Please try again later.'
+                        })
+                    ).pipe(
+                        Effect.runPromise
+                    );
                     const changelogLink = this.getAttribute('data-changelog')!;
-                    const link = this.getAttribute('data-link')!;
-                    const { changelog } = await (await fetch(link, {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify({ currentURLOrigin: window.location.origin }),
-                    })).json();
                     const styles = this.getAttribute('data-styles')!;
 
                     frameContent.innerHTML = `

package/frontend/components/dashboard/sidebar-modals/VersionModal.astro

@@ -25,7 +25,7 @@ const lastChecked = new Date(Astro.locals.StudioCMS.latestVersion.lastCacheUpdat
 
     <h2 slot="header" class="inline-title">
       <span><t-vcm key="header-title">{t('header-title')}</t-vcm></span>
-        <button data-link={Astro.locals.StudioCMS.routeMap.sdk.updateLatestVersionCache}
+        <button
             id="version-modal-reload"
             class="reload-button"
             title="Check for updates"
@@ -58,7 +58,7 @@ const lastChecked = new Date(Astro.locals.StudioCMS.latestVersion.lastCacheUpdat
         <div class="version-modal-release-notes">
             <div class="prose"><Fragment set:html={parseMarkdown(changelog)} /></div>
             <span class="release-notes-read-more">
-                <VersionCheckChangelog changelog={studioCMSSocials.changelog} link={Astro.locals.StudioCMS.routeMap.sdk.changelog}><span class="read-more-text"><t-vcm key="full-changelog">{t('full-changelog')}</t-vcm></span></VersionCheckChangelog>
+                <VersionCheckChangelog changelog={studioCMSSocials.changelog}><span class="read-more-text"><t-vcm key="full-changelog">{t('full-changelog')}</t-vcm></span></VersionCheckChangelog>
             </span>
         </div>
 

package/frontend/components/dashboard/smtp-config/TemplateEditor.astro

@@ -11,8 +11,6 @@ interface Props {
 }
 
 const { templateKeys, templates, defaultTemplates, t } = Astro.props;
-
-const templateSaveAPIEndpoint = Astro.locals.StudioCMS.routeMap.endpointLinks.templates;
 ---
 
 <Modal id='template-editor-preview-modal' size='lg'>
@@ -44,7 +42,6 @@ const templateSaveAPIEndpoint = Astro.locals.StudioCMS.routeMap.endpointLinks.te
     data-templates={JSON.stringify(templates)}
     data-template-keys={JSON.stringify(templateKeys)}
     data-default-templates={JSON.stringify(defaultTemplates)}
-    data-save-endpoint={templateSaveAPIEndpoint}
 ></div>
 
 <script>
@@ -83,6 +80,8 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 import { $i18n, baseTranslation, updateSelectOptions } from 'studiocms:i18n/client';
 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";
 import 'ace-builds/src-noconflict/ace';
 import 'ace-builds/src-noconflict/mode-handlebars';
 import 'ace-builds/src-noconflict/theme-cloud_editor';
@@ -151,7 +150,6 @@ const defaultTemplates = JSON.parse(templateEditor.dataset.defaultTemplates || '
 	string,
 	string
 >;
-const saveEndpoint = templateEditor.dataset.saveEndpoint as string;
 
 // --- INTERNATIONALIZATION SETUP ---
 const i18n = $i18n(i18nCurrentPage, baseTranslation[i18nCurrentPage]);
@@ -243,16 +241,18 @@ async function saveTemplate(templateKey: string, content: string) {
 	const allTemplates = { ...templates, [templateKey]: content };
 
 	try {
-		const response = await fetch(saveEndpoint, {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json',
-			},
-			body: JSON.stringify({ templates: allTemplates }),
-		});
-
-		if (!response.ok) {
-			throw new Error(`${t['template-editor-save-failed']}: ${response.statusText}`);
+		const response = await dashboardClient.pipe(
+			Effect.flatMap((client) => 
+				client.templates.updateEmailTemplates({
+					payload: allTemplates,
+				})
+			),
+			Effect.catchTags(dashboardSharedCatchTags),
+			Effect.runPromise,
+		);
+
+		if ('error' in response) {
+			throw new Error(`${t['template-editor-save-failed']}: ${response.error}`);
 		}
 
 		displaySuccessToastThenReload(t['template-editor-save-success']);

package/frontend/components/dashboard/taxonomy/InnerSidebarElement.astro

@@ -108,7 +108,6 @@ const tagData = tagsToTaxonomyNodes(tags);
     id="inner-sidebar-items-search"
     class="folder-tree-search-container scrollbar"
     style="display: none;"
-    data-searchlist={Astro.locals.StudioCMS.routeMap.endpointLinks.taxonomySearch}
     data-base-category-link={Astro.locals.StudioCMS.routeMap.mainLinks.taxonomyCategories}
     data-base-tag-link={Astro.locals.StudioCMS.routeMap.mainLinks.taxonomyTags}
 >

package/frontend/components/dashboard/taxonomy/MetaContainer.astro

@@ -216,8 +216,6 @@ const { name, entries } = Astro.props;
 </style>
 
 <script>
-import { keys } from "effect/Record";
-
     class DynamicKeyValuePair extends HTMLElement {
         static formAssociated = true;
         #internals: ElementInternals;

package/frontend/components/dashboard/taxonomy/PageHeader.astro

@@ -180,8 +180,10 @@ const replaceNameParam = (str: string) => str.replace('{name}', pageTitle);
 ></div>
 
 <script>
+    import { dashboardClient, dashboardSharedCatchTags } from 'studiocms:client/apiClients';
     import { ModalHelper } from 'studiocms:ui/components/modal/client';
     import { toast } from "studiocms:ui/components/toaster/client";
+    import * as Effect from "effect/Effect";
 
     function setup() {
         const modeSelectorEl = document.getElementById('current-mode-selector') as HTMLDivElement;
@@ -232,10 +234,10 @@ const replaceNameParam = (str: string) => str.replace('{name}', pageTitle);
 
                         const { actionRoute, slug, confirmSlug, ...jsonData } = {
                             type: type,
-                            id: formData.get('id'),
-                            actionRoute: formData.get('action-route'),
-                            slug: formData.get('slug'),
-                            confirmSlug: formData.get('confirm-slug'),
+                            id: formData.get('id')?.toString() || '',
+                            actionRoute: formData.get('action-route')?.toString(),
+                            slug: formData.get('slug')?.toString(),
+                            confirmSlug: formData.get('confirm-slug')?.toString(),
                         }
 
                         if (!actionRoute || typeof actionRoute !== 'string') {
@@ -288,25 +290,22 @@ const replaceNameParam = (str: string) => str.replace('{name}', pageTitle);
                             id: Number.parseInt(jsonData.id, 10),
                         }
 
-                        const response = await fetch(actionRoute, {
-                            method: 'DELETE',
-                            headers: {
-                                'Content-Type': 'application/json',
-                            },
-                            body: JSON.stringify(parsedJsonData),
-                        });
+                        const response = await dashboardClient.pipe(
+                            Effect.flatMap((client) => client.taxonomy.taxonomyDelete({
+                                payload: parsedJsonData,
+                            })),
+                            Effect.catchTags(dashboardSharedCatchTags),
+                            Effect.runPromise
+                        );
 
-                        if (!response.ok) {
-                            const errorData = await response.json();
+                        if ('error' in response) {
                             toast({
                                 title: 'Error',
-                                description: errorData.message || `Failed to delete ${type === 'categories' ? 'category' : 'tag'}.`,
+                                description: response.error,
                                 type: 'danger',
                             });
                             return;
-                        }
-
-                        if (response.ok) {
+                        } else {
                             toast({
                                 title: 'Success',
                                 description: `Deleted ${type === 'categories' ? 'category' : 'tag'} successfully.`,
@@ -317,13 +316,6 @@ const replaceNameParam = (str: string) => str.replace('{name}', pageTitle);
                             window.location.href = indexPage;
                             return;
                         }
-
-                        toast({
-                            title: 'Error',
-                            description: 'An unexpected error occurred during deletion.',
-                            type: 'danger',
-                        });
-                        return;
                     })
                     break;
                 }

package/frontend/components/dashboard/taxonomy/TaxonomySearch.astro

@@ -33,6 +33,8 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-sidebar');
         baseTranslation,
         updateElmPlaceholder,
     } from "studiocms:i18n/client";
+    import { dashboardClient } from "studiocms:client/apiClients";
+    import * as Effect from "effect/Effect";
 
     const currentPage = "@studiocms/dashboard:content-sidebar";
 
@@ -53,19 +55,19 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-sidebar');
     const searchOutputEl = $<HTMLDivElement>(`#${searchOutputElId}`);
     
     interface TaxonomyNode {
-        id: number;
-        name: string;
-        slug: string;
-        description: string;
-        meta: {
+        readonly id: number;
+        readonly name: string;
+        readonly slug: string;
+        readonly description: string;
+        readonly meta: {
             readonly [x: string]: unknown;
         };
-        parent: number | null | undefined;
-        children: TaxonomyNode[];
-        type: 'category' | 'tag';
+        readonly parent: number | null | undefined;
+        readonly children: readonly TaxonomyNode[];
+        readonly type: 'category' | 'tag';
     }
 
-    type SearchList = TaxonomyNode[];
+    type SearchList = readonly TaxonomyNode[];
 
     function getIcons(item: TaxonomyNode) {
         switch (item.type) {
@@ -85,24 +87,18 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-sidebar');
         }
     }
 
-    async function getSearchList(searchItems: HTMLDivElement) {
-        const response = await fetch(
-            searchItems.dataset.searchlist as string,
-            {
-                method: "GET",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-            },
+    async function getSearchList(): Promise<SearchList> {
+        return await Effect.runPromise(
+            Effect.orElse(
+                dashboardClient.pipe(
+                    Effect.flatMap((client) => client.taxonomy.taxonomySearch({})),
+                    Effect.tapError(Effect.logError)
+                    ),
+                    () => Effect.log("Failed to fetch search list, returning empty array").pipe(
+                        Effect.as([] as SearchList)
+                    )
+            )
         );
-
-        if (response.ok) {
-            const data: SearchList = await response.json();
-            return data;
-        } else {
-            console.error("Failed to fetch search list");
-            return [];
-        }
     }
 
     function clearSearchParams(innerSidebarItemsSearch: HTMLDivElement) {
@@ -176,7 +172,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-sidebar');
         currentUrl.searchParams.set("search", searchTerm);
         window.history.pushState({}, "", currentUrl);
 
-        const searchList = await getSearchList(searchItems);
+        const searchList = await getSearchList();
 
         const fuse = new Fuse(searchList, {
             keys: ["name", "slug"],