legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: refactor category update functionality

Browse Source
This commit is contained in:
Ardeman 2025-03-08 01:32:25 +08:00
parent 2c64d430bd
commit c975169f05
6 changed files with 53 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/pages/dashboard-category-update/index.tsx
View File

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

44
app/pages/form-category/index.tsx
View File

@ -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>) => {
const inputName = name.target.value
setName(inputName)
setCode(urlFriendlyCode(inputName))
}
useEffect(() => {
setValue('code', urlFriendlyCode(watchName))
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [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"
placeholder="Masukkan Nama Kategory"
label="Kategori"
placeholder="Masukkan Nama Kategori"
name="name"
onChange={handelCodeAuto}
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"
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}

5
app/pages/form-contents/index.tsx
View File

@ -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"
/>

24
app/routes/_admin.lg-admin._dashboard.categories.update.$id.tsx Normal file
View File

@ -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

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

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

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

@ -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 }
}