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

app/apis/admin/create-tags.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod'
 
 import { HttpServer } from '~/libs/http-server'
-import type { TTagSchema } from '~/pages/dashboard-tags-create'
+import type { TTagSchema } from '~/pages/form-tag'
 
 const tagsResponseSchema = z.object({
   data: z.object({

app/apis/admin/update-tag.ts

@@ -0,0 +1,30 @@
+import { z } from 'zod'
+
+import { HttpServer } from '~/libs/http-server'
+import type { TTagSchema } from '~/pages/form-tag'
+
+const tagResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameters = {
+  accessToken: string
+  payload: TTagSchema
+}
+
+export const updateTagRequest = async (parameters: TParameters) => {
+  const { accessToken, payload } = parameters
+  try {
+    const { id, ...restPayload } = payload
+    const { data } = await HttpServer({ accessToken }).put(
+      `/api/tag/${id}/update`,
+      restPayload,
+    )
+    return tagResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

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({
+export const createTagSchema = z.object({
-  code: z.string().min(3, 'Kode minimal 3 karakter'),
+  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"
               />

app/routes/_admin.lg-admin._dashboard.tags.create.tsx

@@ -1,4 +1,4 @@
-import { CreateTagsPage } from '~/pages/dashboard-tags-create'
+import { FormTagPage } from '~/pages/form-tag'
 
-const DashboardTagsCreateLayout = () => <CreateTagsPage />
+const DashboardTagsCreateLayout = () => <FormTagPage />
 export default DashboardTagsCreateLayout

app/routes/_admin.lg-admin._dashboard.tags.update.$id.tsx

@@ -0,0 +1,20 @@
+import { getTags } from '~/apis/common/get-tags'
+import { handleCookie } from '~/libs/cookies'
+import { FormTagPage } from '~/pages/form-tag'
+
+import type { Route } from './+types/_admin.lg-admin._dashboard.tags.update.$id'
+
+export const loader = async ({ request, params }: Route.LoaderArgs) => {
+  const { staffToken } = await handleCookie(request)
+  const { data: tagsData } = await getTags({
+    accessToken: staffToken,
+  })
+  const tagData = tagsData.find((tag) => tag.id === params.id)
+  return { tagData }
+}
+
+const DashboardTagUpdateLayout = ({ loaderData }: Route.ComponentProps) => {
+  const tagData = loaderData.tagData
+  return <FormTagPage tagData={tagData} />
+}
+export default DashboardTagUpdateLayout

app/routes/actions.admin.tags.create.ts

@@ -5,10 +5,7 @@ import { XiorError } from 'xior'
 
 import { createTagsRequest } from '~/apis/admin/create-tags'
 import { handleCookie } from '~/libs/cookies'
-import {
+import { createTagSchema, type TTagSchema } from '~/pages/form-tag'
-  createTagsSchema,
-  type TTagSchema,
-} from '~/pages/dashboard-tags-create'
 
 import type { Route } from './+types/actions.register'
 
@@ -21,7 +18,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
       receivedValues: defaultValues,
     } = await getValidatedFormData<TTagSchema>(
       request,
-      zodResolver(createTagsSchema),
+      zodResolver(createTagSchema),
       false,
     )
 

app/routes/actions.admin.tags.update.ts

@@ -0,0 +1,64 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { data } from 'react-router'
+import { getValidatedFormData } from 'remix-hook-form'
+import { XiorError } from 'xior'
+
+import { updateTagRequest } from '~/apis/admin/update-tag'
+import { handleCookie } from '~/libs/cookies'
+import { createTagSchema, type TTagSchema } from '~/pages/form-tag'
+
+import type { Route } from './+types/actions.register'
+
+export const action = async ({ request }: Route.ActionArgs) => {
+  const { staffToken } = await handleCookie(request)
+  try {
+    const {
+      errors,
+      data: payload,
+      receivedValues: defaultValues,
+    } = await getValidatedFormData<TTagSchema>(
+      request,
+      zodResolver(createTagSchema),
+      false,
+    )
+
+    if (errors) {
+      return data({ success: false, errors, defaultValues }, { status: 400 })
+    }
+
+    const { data: tagData } = await updateTagRequest({
+      accessToken: staffToken,
+      payload,
+    })
+
+    return data(
+      {
+        success: true,
+        tagData,
+      },
+      {
+        status: 200,
+        statusText: 'OK',
+      },
+    )
+  } catch (error) {
+    if (error instanceof XiorError) {
+      return data(
+        {
+          success: false,
+          message: error?.response?.data?.error?.message || error.message,
+        },
+        {
+          status: error?.response?.status || 500,
+        },
+      )
+    }
+    return data(
+      {
+        success: false,
+        message: 'Internal server error',
+      },
+      { status: 500 },
+    )
+  }
+}