feat: implement category update functionality with validation and new fields in form

app/apis/admin/create-category.ts

@@ -17,14 +17,9 @@ type TParameters = {
 export const createCategoryRequest = async (parameters: TParameters) => {
   const { accessToken, payload } = parameters
   try {
-    const { ...restPayload } = payload
-    const transformedPayload = {
-      ...restPayload,
-    }
-
     const { data } = await HttpServer({ accessToken }).post(
       '/api/category/create',
-      transformedPayload,
+      payload,
     )
     return categoryResponseSchema.parse(data)
   } catch (error) {

app/apis/admin/update-category.ts

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

app/pages/form-category/index.tsx

@@ -11,8 +11,11 @@ import { TitleDashboard } from '~/components/ui/title-dashboard'
 import { urlFriendlyCode } from '~/utils/formatter'
 
 export const createCategorySchema = 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(),
+  sequence: z.preprocess(Number, z.number().optional()),
+  description: z.string(),
 })
 export type TCategorySchema = z.infer<typeof createCategorySchema>
 type TProperties = {
@@ -28,8 +31,11 @@ export const FormCategoryPage = (properties: TProperties) => {
     fetcher,
     resolver: zodResolver(createCategorySchema),
     values: {
+      id: categoryData?.id || undefined,
       code: categoryData?.code || '',
       name: categoryData?.name || '',
+      sequence: categoryData?.sequence || undefined,
+      description: categoryData?.description || '',
     },
   })
   const [error, setError] = useState<string>()
@@ -63,7 +69,7 @@ export const FormCategoryPage = (properties: TProperties) => {
           <fetcher.Form
             method="post"
             onSubmit={handleSubmit}
-            action="/actions/admin/categories/create"
+            action={`/actions/admin/categories/${categoryData ? 'update' : 'create'}`}
             className="space-y-4"
           >
             {error && (
@@ -98,6 +104,27 @@ export const FormCategoryPage = (properties: TProperties) => {
                 Save
               </Button>
             </div>
+            <div className="flex items-end justify-between gap-4">
+              <Input
+                id="sequence"
+                label="Urutan"
+                placeholder="Urutan Kategori"
+                name="sequence"
+                type="number"
+                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="w-44"
+              />
+              <Input
+                id="description"
+                label="Deskripsi"
+                placeholder="Masukkan Deskripsi Kategori"
+                name="description"
+                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"
+              />
+            </div>
           </fetcher.Form>
         </RemixFormProvider>
       </div>

app/pages/form-contents/index.tsx

@@ -75,7 +75,7 @@ export const FormContentsPage = (properties: TProperties) => {
     fetcher,
     resolver: zodResolver(contentSchema),
     values: {
-      id: newsData?.id || '',
+      id: newsData?.id || undefined,
       categories: newsData?.categories || [],
       tags: newsData?.tags || [],
       title: newsData?.title || '',

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

@@ -0,0 +1,67 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { data } from 'react-router'
+import { getValidatedFormData } from 'remix-hook-form'
+import { XiorError } from 'xior'
+
+import { updateCategoryRequest } from '~/apis/admin/update-category'
+import { handleCookie } from '~/libs/cookies'
+import {
+  createCategorySchema,
+  type TCategorySchema,
+} from '~/pages/form-category'
+
+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<TCategorySchema>(
+      request,
+      zodResolver(createCategorySchema),
+      false,
+    )
+
+    if (errors) {
+      return data({ success: false, errors, defaultValues }, { status: 400 })
+    }
+
+    const { data: categoryData } = await updateCategoryRequest({
+      accessToken: staffToken,
+      payload,
+    })
+
+    return data(
+      {
+        success: true,
+        categoryData,
+      },
+      {
+        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 },
+    )
+  }
+}