adds server action

pagevamp · Feb 8, 2024 · 06f2a26 · 06f2a26
1 parent d0ed649
commit 06f2a26
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 40 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,6 +5,8 @@ import ThemeRegistry from './ThemeRegistry';
 import { AppContextProvider } from '@/context';
 import { ToggleDecider } from '@/hoc/ToggleDecider';
 import { Footer } from '@/layouts/Footer';
+import { apiUrl } from '@/config';
+import { revalidateTag } from 'next/cache';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -21,7 +23,21 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <ThemeRegistry options={{ key: 'mui' }}>
             <ToggleDecider>
               {children}
-              <Footer />
+              <Footer
+                handleSave={async (customFieldAccessPayload, settingsPayload) => {
+                  'use server';
+                  await fetch(`${apiUrl}/api/custom-field-access`, {
+                    method: 'PUT',
+                    body: JSON.stringify(customFieldAccessPayload),
+                  });
+                  await fetch(`${apiUrl}/api/settings`, {
+                    method: 'PUT',
+                    body: JSON.stringify(settingsPayload),
+                  });
+
+                  await Promise.all([revalidateTag('settings'), revalidateTag('customFieldAccess')]);
+                }}
+              />
             </ToggleDecider>
           </ThemeRegistry>
         </body>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -34,7 +34,9 @@ async function getCustomFieldAccess({
   token: string;
   portalId: string;
 }): Promise<CustomFieldAccessResponse> {
-  const res = await fetch(`${apiUrl}/api/custom-field-access?token=${token}&portalId=${portalId}`);
+  const res = await fetch(`${apiUrl}/api/custom-field-access?token=${token}&portalId=${portalId}`, {
+    next: { tags: ['customFieldAccess'] },
+  });
 
   if (!res.ok) {
     throw new Error('Something went wrong in getCustomFieldAccess');
@@ -46,7 +48,9 @@ async function getCustomFieldAccess({
 }
 
 async function getSettings({ token, portalId }: { token: string; portalId: string }) {
-  const res = await fetch(`${apiUrl}/api/settings?token=${token}&portalId=${portalId}`);
+  const res = await fetch(`${apiUrl}/api/settings?token=${token}&portalId=${portalId}`, {
+    next: { tags: ['settings'] },
+  });
 
   if (!res.ok) {
     throw new Error('Something went wrong in getSettings');

diff --git a/src/layouts/Footer.tsx b/src/layouts/Footer.tsx
@@ -5,7 +5,14 @@ import { useAppState } from '@/hooks/useAppState';
 import { arraysHaveSameElements } from '@/utils/arrayHaveSameElements';
 import { useState } from 'react';
 
-export const Footer = () => {
+interface Prop {
+  handleSave(
+    customFieldAccessPayload: { token: string; portalId: string; accesses: any },
+    settingsPayload: { token: string; portalId: string; profileLinks: any },
+  ): Promise<void>;
+}
+
+export const Footer = ({ handleSave }: Prop) => {
   const appState = useAppState();
   const [loading, setLoading] = useState(false);
 
@@ -14,52 +21,35 @@ export const Footer = () => {
     appState?.setAppState((prev) => ({ ...prev, mutableCustomFieldAccess: appState?.customFieldAccess }));
   };
 
-  const handleSave = async () => {
-    setLoading(true);
+  const initiateSave = async () => {
     let accesses = appState?.mutableCustomFieldAccess.map(({ id, permission }: any) => ({
       customFieldId: id,
       permissions: permission,
     }));
-    await fetch(`/api/custom-field-access`, {
-      method: 'PUT',
-      body: JSON.stringify({
-        token: appState?.token,
-        portalId: appState?.portalId,
-        accesses: accesses,
-      }),
-    });
-    await fetch(`/api/settings`, {
-      method: 'PUT',
-      body: JSON.stringify({
-        token: appState?.token,
-        portalId: appState?.portalId,
-        profileLinks: appState?.mutableSettings,
-      }),
-    });
-    const settingsRes = await fetch(`/api/settings?token=${appState?.token}&portalId=${appState?.portalId}`);
-    const settings = await settingsRes.json();
-    const customFieldAccessRes = await fetch(
-      `/api/custom-field-access?token=${appState?.token}&portalId=${appState?.portalId}`,
-    );
-    const customFieldAccess = await customFieldAccessRes.json();
-    appState?.setAppState((prev) => ({
-      ...prev,
-      settings: settings.data.profileLinks,
-      mutableSettings: settings.data.profileLinks,
-    }));
-    appState?.setAppState((prev) => ({
-      ...prev,
-      customFieldAccess: customFieldAccess.data,
-      mutableCustomFieldAccess: customFieldAccess.data,
-    }));
-    setLoading(false);
+    setLoading(true);
+    try {
+      await handleSave(
+        {
+          token: appState?.token as string,
+          portalId: appState?.portalId as string,
+          accesses: accesses,
+        },
+        {
+          token: appState?.token as string,
+          portalId: appState?.portalId as string,
+          profileLinks: appState?.mutableSettings,
+        },
+      );
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
     <>
       {arraysHaveSameElements(appState?.mutableSettings, appState?.settings) &&
       JSON.stringify(appState?.customFieldAccess) === JSON.stringify(appState?.mutableCustomFieldAccess) ? null : (
-        <FooterSave type="1" loading={loading} handleSave={handleSave} handleCancel={handleCancel} />
+        <FooterSave type="1" loading={loading} handleSave={initiateSave} handleCancel={handleCancel} />
       )}
     </>
   );