feat: refactor category update functionality

app/pages/dashboard-category-update/index.tsx

@@ -1,5 +0,0 @@
-import React from 'react'
-
-export const UpdateCategoryPage = () => {
-  return <div>UpdateCategoryPage</div>
-}

app/pages/form-category/index.tsx

@@ -1,9 +1,10 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState, type ChangeEvent } from 'react'
+import { useEffect, useState } from 'react'
 import { useFetcher, useNavigate } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
 
+import type { TCategoryResponse } from '~/apis/common/get-categories'
 import { Button } from '~/components/ui/button'
 import { Input } from '~/components/ui/input'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
@@ -14,21 +15,28 @@ export const createCategorySchema = z.object({
   name: z.string().min(3, 'Nama minimal 3 karakter'),
 })
 export type TCategorySchema = z.infer<typeof createCategorySchema>
+type TProperties = {
+  categoryData?: TCategoryResponse
+}
 
-export const FormCategoryPage = () => {
+export const FormCategoryPage = (properties: TProperties) => {
+  const { categoryData } = properties || {}
   const fetcher = useFetcher()
   const navigate = useNavigate()
   const formMethods = useRemixForm<TCategorySchema>({
     mode: 'onSubmit',
     fetcher,
     resolver: zodResolver(createCategorySchema),
+    values: {
+      code: categoryData?.code || '',
+      name: categoryData?.name || '',
+    },
   })
   const [error, setError] = useState<string>()
   const [disabled, setDisabled] = useState(false)
-  const [code, setCode] = useState<string>('')
-  const [name, setName] = useState<string>('')
 
-  const { handleSubmit } = formMethods
+  const { handleSubmit, watch, setValue } = formMethods
+  const watchName = watch('name')
 
   useEffect(() => {
     if (!fetcher.data?.success) {
@@ -42,15 +50,14 @@ export const FormCategoryPage = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher])
 
-  const handelCodeAuto = (name: ChangeEvent<HTMLInputElement>) => {
+  useEffect(() => {
-    const inputName = name.target.value
+    setValue('code', urlFriendlyCode(watchName))
-    setName(inputName)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
-    setCode(urlFriendlyCode(inputName))
+  }, [watchName])
-  }
 
   return (
     <div className="relative">
-      <TitleDashboard title="Buat Kategory" />
+      <TitleDashboard title={`${categoryData ? 'Update' : 'Buat'} Kategori`} />
       <div>
         <RemixFormProvider {...formMethods}>
           <fetcher.Form
@@ -65,25 +72,22 @@ export const FormCategoryPage = () => {
             <div className="flex items-end justify-between gap-4">
               <Input
                 id="name"
-                label="Nama Kategory"
+                label="Kategori"
-                placeholder="Masukkan Nama Kategory"
+                placeholder="Masukkan Nama Kategori"
                 name="name"
-                onChange={handelCodeAuto}
+                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
-                className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
                 labelClassName="text-sm font-medium text-[#363636]"
                 containerClassName="flex-1"
-                value={name}
               />
               <Input
                 id="code"
-                label="Kode Kategory"
+                label="Kode"
+                placeholder="Masukkan Kode Kategori"
                 readOnly
-                placeholder="Masukkan Kode Kategory"
                 name="code"
-                className="border-0 bg-gray-100 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"
-                value={code}
               />
               <Button
                 disabled={disabled}

app/pages/form-contents/index.tsx

@@ -124,16 +124,17 @@ export const FormContentsPage = (properties: TProperties) => {
               label="Judul"
               placeholder="Masukkan Judul"
               name="title"
-              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"
+              disabled={!!newsData}
             />
             <Input
               id="featured_image"
               label="Gambar Unggulan"
               placeholder="Masukkan Gambar Unggulan"
               name="featured_image"
-              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.categories.update.$id.tsx

@@ -0,0 +1,24 @@
+import { getCategories } from '~/apis/common/get-categories'
+import { handleCookie } from '~/libs/cookies'
+import { FormCategoryPage } from '~/pages/form-category'
+
+import type { Route } from './+types/_admin.lg-admin._dashboard.categories.update.$id'
+
+export const loader = async ({ request, params }: Route.LoaderArgs) => {
+  const { staffToken } = await handleCookie(request)
+  const { data: categoriesData } = await getCategories({
+    accessToken: staffToken,
+  })
+  const categoryData = categoriesData.find(
+    (category) => category.id === params.id,
+  )
+  return { categoryData }
+}
+
+const DashboardCategoriesUpdateLayout = ({
+  loaderData,
+}: Route.ComponentProps) => {
+  const categoryData = loaderData.categoryData
+  return <FormCategoryPage categoryData={categoryData} />
+}
+export default DashboardCategoriesUpdateLayout

app/routes/_admin.lg-admin._dashboard.categories.update.$slug.tsx

@@ -1,4 +0,0 @@
-import { UpdateCategoryPage } from '~/pages/dashboard-category-update'
-
-const DashboardCategoriesUpdateLayout = () => <UpdateCategoryPage />
-export default DashboardCategoriesUpdateLayout

app/routes/_admin.lg-admin._dashboard.contents.update.$slug.tsx

@@ -4,11 +4,11 @@ import { FormContentsPage } from '~/pages/form-contents'
 
 import type { Route } from './+types/_admin.lg-admin._dashboard.contents.update.$slug'
 
-export const loader = async ({ request }: Route.LoaderArgs) => {
+export const loader = async ({ request, params }: Route.LoaderArgs) => {
   const { staffToken } = await handleCookie(request)
   const { data: newsData } = await getNewsBySlug({
     accessToken: staffToken,
-    slug: request.url.split('/').pop() ?? '',
+    slug: params.slug,
   })
   return { newsData }
 }