feat: migrate tag creation and update functionality to new form structure

app/pages/form-tag/index.tsx

@@ -4,28 +4,41 @@ import { useFetcher, useNavigate } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
 
+import type { TTagResponse } from '~/apis/common/get-tags'
 import { Button } from '~/components/ui/button'
 import { Input } from '~/components/ui/input'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
+import { urlFriendlyCode } from '~/utils/formatter'
 
-export const createTagsSchema = z.object({
-  code: z.string().min(3, 'Kode minimal 3 karakter'),
+export const createTagSchema = z.object({
+  id: z.string().optional(),
   name: z.string().min(3, 'Nama minimal 3 karakter'),
+  code: z.string(),
 })
-export type TTagSchema = z.infer<typeof createTagsSchema>
+export type TTagSchema = z.infer<typeof createTagSchema>
+type TProperties = {
+  tagData?: TTagResponse
+}
 
-export const CreateTagsPage = () => {
+export const FormTagPage = (properties: TProperties) => {
+  const { tagData } = properties || {}
   const fetcher = useFetcher()
   const navigate = useNavigate()
   const formMethods = useRemixForm<TTagSchema>({
     mode: 'onSubmit',
     fetcher,
-    resolver: zodResolver(createTagsSchema),
+    resolver: zodResolver(createTagSchema),
+    values: {
+      id: tagData?.id || undefined,
+      code: tagData?.code || '',
+      name: tagData?.name || '',
+    },
   })
   const [error, setError] = useState<string>()
   const [disabled, setDisabled] = useState(false)
 
-  const { handleSubmit } = formMethods
+  const { handleSubmit, watch, setValue } = formMethods
+  const watchName = watch('name')
 
   useEffect(() => {
     if (!fetcher.data?.success) {
@@ -39,15 +52,20 @@ export const CreateTagsPage = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher])
 
+  useEffect(() => {
+    setValue('code', urlFriendlyCode(watchName))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [watchName])
+
   return (
     <div className="relative">
-      <TitleDashboard title="Buat Tag" />
+      <TitleDashboard title={`${tagData ? 'Update' : 'Buat'} Tag`} />
       <div>
         <RemixFormProvider {...formMethods}>
           <fetcher.Form
             method="post"
             onSubmit={handleSubmit}
-            action="/actions/admin/tags/create"
+            action={`/actions/admin/tags/${tagData ? 'update' : 'create'}`}
             className="space-y-4"
           >
             {error && (
@@ -56,19 +74,20 @@ export const CreateTagsPage = () => {
             <div className="flex items-end justify-between gap-4">
               <Input
                 id="name"
-                label="Nama Tag"
+                label="Tag"
                 placeholder="Masukkan Nama Tag"
                 name="name"
-                className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
                 labelClassName="text-sm font-medium text-[#363636]"
                 containerClassName="flex-1"
               />
               <Input
                 id="code"
-                label="Kode Tag"
+                label="Kode"
                 placeholder="Masukkan Kode Tag"
+                readOnly
                 name="code"
-                className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
                 labelClassName="text-sm font-medium text-[#363636]"
                 containerClassName="flex-1"
               />