refactor: create AddGuestbookForm and add new onValid props for Guest…

…bookForm
ixartz · May 6, 2024 · df9fd9e · df9fd9e
1 parent 250fb06
commit df9fd9e
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 34 deletions.
diff --git a/src/app/[locale]/(unauth)/guestbook/page.tsx b/src/app/[locale]/(unauth)/guestbook/page.tsx
@@ -3,7 +3,7 @@ import { useTranslations } from 'next-intl';
 import { getTranslations } from 'next-intl/server';
 import { Suspense } from 'react';
 
-import { GuestbookForm } from '@/components/GuestbookForm';
+import { AddGuestbookForm } from '@/components/AddGuestbookForm';
 import { GuestbookList } from '@/components/GuestbookList';
 
 export async function generateMetadata(props: { params: { locale: string } }) {
@@ -23,7 +23,7 @@ const Guestbook = () => {
 
   return (
     <>
-      <GuestbookForm />
+      <AddGuestbookForm />
 
       <Suspense fallback={<p>{t('loading_guestbook')}</p>}>
         <GuestbookList />

diff --git a/src/components/AddGuestbookForm.tsx b/src/components/AddGuestbookForm.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import { GuestbookForm } from './GuestbookForm';
+
+const AddGuestbookForm = () => (
+  <GuestbookForm
+    onValid={async (data) => {
+      await fetch(`/api/guestbook`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      });
+    }}
+  />
+);
+
+export { AddGuestbookForm };
diff --git a/src/components/EditableGuestbookEntry.tsx b/src/components/EditableGuestbookEntry.tsx
@@ -15,10 +15,6 @@ const EditableGuestbookEntry = (props: {
     setIsEditing((value) => !value);
   };
 
-  const handleStopEditing = () => {
-    setIsEditing(false);
-  };
-
   return (
     <>
       <button
@@ -49,7 +45,20 @@ const EditableGuestbookEntry = (props: {
               username: props.username,
               body: props.body,
             }}
-            handleStopEditing={handleStopEditing}
+            onValid={async (data) => {
+              await fetch(`/api/guestbook`, {
+                method: 'PUT',
+                headers: {
+                  'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                  id: props.id,
+                  ...data,
+                }),
+              });
+
+              setIsEditing(false);
+            }}
           />
         ) : (
           <>

diff --git a/src/components/GuestbookForm.tsx b/src/components/GuestbookForm.tsx
@@ -3,7 +3,7 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/navigation';
 import { useTranslations } from 'next-intl';
-import { useForm } from 'react-hook-form';
+import { type SubmitHandler, useForm } from 'react-hook-form';
 import type { z } from 'zod';
 
 import { GuestbookValidation } from '@/validations/GuestbookValidation';
@@ -13,9 +13,12 @@ type IGuestbookFormProps =
       edit: true;
       id: number;
       defaultValues: z.infer<typeof GuestbookValidation>;
-      handleStopEditing: () => void;
+      onValid: SubmitHandler<z.infer<typeof GuestbookValidation>>;
     }
-  | { edit?: false };
+  | {
+      edit?: false;
+      onValid: SubmitHandler<z.infer<typeof GuestbookValidation>>;
+    };
 
 const GuestbookForm = (props: IGuestbookFormProps) => {
   const {
@@ -31,31 +34,9 @@ const GuestbookForm = (props: IGuestbookFormProps) => {
   const t = useTranslations('GuestbookForm');
 
   const handleCreate = handleSubmit(async (data) => {
-    if (props.edit) {
-      await fetch(`/api/guestbook`, {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          id: props.id,
-          ...data,
-        }),
-      });
-
-      props.handleStopEditing();
-    } else {
-      await fetch(`/api/guestbook`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(data),
-      });
-
-      reset();
-    }
+    await props.onValid(data);
 
+    reset();
     router.refresh();
   });