refactor: refactoring project

.prettierrc

@@ -11,7 +11,9 @@
   "arrowParens": "always",
   "importOrder": [
     "^@/components(.*)$",
+    "^@/types(.*)$",
     "^@/lib(.*)$",
+    "^@/providers(.*)$",
     "^@/styles(.*)$",
     "^[./]"
   ],

src/app/form/[id]/done/page.tsx

@@ -0,0 +1,15 @@
+import { Box } from '@/components'
+
+export default function Page() {
+  return (
+    <div className='mt-8 flex w-full items-center justify-center'>
+      <Box>
+        <h1 className='text-header-1 font-bold text-neutral-900'>
+          คำตอบของคุณถูกบันทึกแล้ว
+        </h1>
+        <hr />
+        <h2 className='text-subtitle text-neutral-500'>ขอบคุณสำหรับคำตอบ</h2>
+      </Box>
+    </div>
+  )
+}

src/app/form/[id]/layout.tsx

@@ -1,14 +1,23 @@
-import FormProvider from '@/providers/form-provider'
+import { getFormSchema } from '@/lib/form/get-form-schema'
+
+import { FormSchemaProvider } from '@/providers/form-schema-provider'
+
+export async function generateMetadata({
+  params: { id },
+}: {
+  params: { id: string }
+}) {
+  const form = await getFormSchema(id)
+
+  return {
+    title: form.heading,
+  }
+}
 
 export default async function FormLayout({
   children,
 }: Readonly<{
   children: React.ReactNode
 }>) {
-  return <FormProvider>{children}</FormProvider>
-  return (
-    <div className='flex size-full flex-col items-center justify-start gap-8 px-5 py-8'>
-      <FormProvider>{children}</FormProvider>
-    </div>
-  )
+  return <FormSchemaProvider>{children}</FormSchemaProvider>
 }

src/app/form/[id]/page.tsx

@@ -1,19 +1,21 @@
 'use client'
 
-import { useForm } from '@/providers/form-provider'
+import { useRouter } from 'next/navigation'
 import { useEffect } from 'react'
 import { Toaster, toast } from 'react-hot-toast'
 
-import { FormContainer } from '@/components/form/form-container'
-import { FormHeader } from '@/components/form/form-header'
-import { FormQuestion } from '@/components/form/form-question'
+import { Box } from '@/components'
+import { Field } from '@/components/form/field'
+
+import { useFormSchema } from '@/providers/form-schema-provider'
 
 interface PageProps {
   params: { id: string }
 }
 
 export default function Page({ params: { id } }: PageProps) {
-  const { form, setID } = useForm()
+  const { formSchema, setID } = useFormSchema()
+  const router = useRouter()
 
   useEffect(() => {
     setID(id)
@@ -37,7 +39,8 @@ export default function Page({ params: { id } }: PageProps) {
       toast.error(errorData.error)
       return
     }
-    window.location.href = `${process.env.NEXT_PUBLIC_BASE_URL}/form/done`
+
+    router.push(`/form/${id}/done`)
   }
 
   const handleReset = (e: React.FormEvent<HTMLFormElement>) => {
@@ -47,19 +50,27 @@ export default function Page({ params: { id } }: PageProps) {
   return (
     <div className='flex w-full flex-col items-center justify-center space-y-4 px-5 pb-6'>
       <Toaster position='top-center' reverseOrder={false} />
-      <FormHeader form={form} />
-      <FormContainer>
+      <Box>
+        <h1 className='text-header-1 font-bold text-neutral-900'>
+          {formSchema.heading}
+        </h1>
+        <hr />
+        <h2 className='text-subtitle text-neutral-500'>
+          {formSchema.subheading}
+        </h2>
+      </Box>
+      <Box>
         <form
           onSubmit={handleSubmit}
           onReset={handleReset}
           className='flex flex-col gap-14'
         >
-          {form.columns.map((column) => (
+          {formSchema.columns.map((column) => (
             <div
-              key={column.order}
+              key={column.id}
               className='flex w-full flex-col items-start gap-2.5'
             >
-              <FormQuestion column={column} />
+              <Field column={column} />
             </div>
           ))}
           <div className='flex w-full flex-col gap-5'>
@@ -77,7 +88,7 @@ export default function Page({ params: { id } }: PageProps) {
             </div>
           </div>
         </form>
-      </FormContainer>
+      </Box>
     </div>
   )
 }

src/app/form/api/route.ts

@@ -1,6 +1,6 @@
 import { checkIdParams } from '@/lib/form/check-form'
+import { getFormIds } from '@/lib/form/get-form-ids'
 import { getFormSchema } from '@/lib/form/get-form-schema'
-import { getNocoID } from '@/lib/form/get-nocoID'
 
 export async function GET(request: Request) {
   // checking id
@@ -23,7 +23,7 @@ export async function POST(request: Request) {
 
   const body = await request.json()
 
-  const tableIdResponse = await getNocoID(id)
+  const tableIdResponse = await getFormIds(id)
   if (tableIdResponse === null) {
     return Response.json({ error: 'No matching form name' }, { status: 400 })
   }

src/app/layout.tsx

@@ -16,8 +16,8 @@ const ibmPlexSansThai = IBM_Plex_Sans_Thai({
 
 // TODO: Add your own metadata
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'Intania Form',
+  description: 'Form wrapper for Chula Intania',
 }
 
 export default function RootLayout({

src/app/page.tsx

@@ -1,7 +1,3 @@
 export default function Home() {
-  return (
-    <main>
-      <h1>Hello World!</h1>
-    </main>
-  )
+  return <main>Unauthorized</main>
 }

src/components/box.tsx

@@ -0,0 +1,11 @@
+interface BoxProps {
+  children: React.ReactNode
+}
+
+export const Box = ({ children }: BoxProps): JSX.Element => {
+  return (
+    <div className='flex w-full max-w-3xl flex-col gap-5 rounded-box border-default bg-white p-10 shadow-default'>
+      {children}
+    </div>
+  )
+}

src/components/checkbox.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import toast from 'react-hot-toast'
+
+import type { FormColumn } from '@/types'
+
+interface CheckboxProps {
+  column: FormColumn
+}
+
+export const Checkbox = ({ column }: CheckboxProps): JSX.Element => {
+  return (
+    <div className='flex w-full flex-col items-start justify-start'>
+      <label className='relative flex w-full cursor-pointer select-none flex-row-reverse items-center justify-end'>
+        <p className='ml-2 text-body-1 text-black'>{column.name}</p>
+        <input
+          type='checkbox'
+          name={column.name}
+          required={column.required}
+          className='size-4 rounded-md'
+          onInvalid={(e) => {
+            e.preventDefault()
+            toast.error('กรุณายอมรับข้อตกลง', { id: 'invalid' })
+          }}
+        />
+        <p className='absolute -bottom-10 my-2 hidden w-full text-body-2 italic text-red-600'>
+          จำเป็นต้องยอมรับ
+        </p>
+      </label>
+    </div>
+  )
+}

src/components/form/form-question.tsx → src/components/form/field.tsx

@@ -1,8 +1,8 @@
-import { FormColumn } from '@/types/form'
+import { FormComponent } from '@/components/form/form-component'
 
-import { getFormComponent } from '@/components/form/form-component'
+import type { FormColumn } from '@/types'
 
-export function FormQuestion({ column }: { column: FormColumn }) {
+export function Field({ column }: { column: FormColumn }) {
   return (
     <div className='flex w-full flex-col items-start justify-start gap-2.5'>
       <div className='flex flex-col'>
@@ -14,7 +14,7 @@ export function FormQuestion({ column }: { column: FormColumn }) {
           {column.description}
         </p>
       </div>
-      {getFormComponent(column)}
+      {FormComponent(column)}
     </div>
   )
 }