Merge pull request #275 from ixartz/refactor-guestbook

refactor: create AddGuestbookForm and add new onValid props for GuestbookForm

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 />

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 };

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);
+            }}
           />
         ) : (
           <>

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();
   });
 

tailwind.config.ts

@@ -3,44 +3,7 @@ import type { Config } from 'tailwindcss';
 export default {
   content: ['./src/**/*.{js,ts,jsx,tsx}'],
   theme: {
-    fontSize: {
-      xs: '0.75rem',
-      sm: '0.875rem',
-      base: '1rem',
-      lg: '1.125rem',
-      xl: '1.25rem',
-      '2xl': '1.5rem',
-      '3xl': '1.875rem',
-      '4xl': '2.25rem',
-      '5xl': '3rem',
-      '6xl': '4rem',
-    },
-    extend: {
-      colors: {
-        gray: {
-          100: '#f7fafc',
-          200: '#edf2f7',
-          300: '#e2e8f0',
-          400: '#cbd5e0',
-          500: '#a0aec0',
-          600: '#718096',
-          700: '#4a5568',
-          800: '#2d3748',
-          900: '#1a202c',
-        },
-        blue: {
-          100: '#ebf8ff',
-          200: '#bee3f8',
-          300: '#90cdf4',
-          400: '#63b3ed',
-          500: '#4299e1',
-          600: '#3182ce',
-          700: '#2b6cb0',
-          800: '#2c5282',
-          900: '#2a4365',
-        },
-      },
-    },
+    extend: {},
   },
   plugins: [],
 } satisfies Config;