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

Merge remote-tracking branch 'origin/master' into feature/slicing

Browse Source
This commit is contained in:
fredy.siswanto 2025-03-08 04:34:08 +07:00
commit b7f51ea46f
22 changed files with 308 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/apis/admin/create-category.ts
View File

@ -1,7 +1,7 @@
import { z } from 'zod'
import { HttpServer } from '~/libs/http-server'
import type { TCategorySchema } from '~/pages/dashboard-category-create'
import type { TCategorySchema } from '~/pages/form-category'
const categoryResponseSchema = z.object({
data: z.object({
@ -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) {

2
app/apis/admin/create-news.ts
View File

@ -1,7 +1,7 @@
import { z } from 'zod'
import { HttpServer } from '~/libs/http-server'
import type { TContentSchema } from '~/pages/contents-form'
import type { TContentSchema } from '~/pages/form-contents'
const newsResponseSchema = z.object({
data: z.object({

30
app/apis/admin/update-category.ts Normal file
View File

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

2
app/apis/admin/update-news.ts
View File

@ -1,7 +1,7 @@
import { z } from 'zod'
import { HttpServer } from '~/libs/http-server'
import type { TContentSchema } from '~/pages/contents-form'
import type { TContentSchema } from '~/pages/form-contents'
const newsResponseSchema = z.object({
data: z.object({

2
app/apis/common/get-categories.ts
View File

@ -6,6 +6,8 @@ export const categoryResponseSchema = z.object({
id: z.string(),
name: z.string(),
code: z.string(),
sequence: z.number().nullable(),
description: z.string().nullable(),
})
const categoriesResponseSchema = z.object({
data: z.array(categoryResponseSchema),

6
app/layouts/news/header-menu.tsx
View File

@ -7,7 +7,11 @@ import { HeaderSearch } from './header-search'
export const HeaderMenu = () => {
const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
const menu = loaderData?.categoriesData
const menu = loaderData?.categoriesData?.sort((a, b) => {
if (a.sequence === null) return 1
if (b.sequence === null) return -1
return a.sequence - b.sequence
})
return (
<>

28
app/pages/dashboard-categories/index.tsx
View File

@ -2,6 +2,7 @@ import DT from 'datatables.net-dt'
import DataTable from 'datatables.net-react'
import { Link, useRouteLoaderData } from 'react-router'
import type { TCategoryResponse } from '~/apis/common/get-categories'
import { Button } from '~/components/ui/button'
import { UiTable } from '~/components/ui/table'
import { TitleDashboard } from '~/components/ui/title-dashboard'
@ -13,26 +14,33 @@ export const CategoriesPage = () => {
const categoriesData = loaderData?.dataCategories
DataTable.use(DT)
const dataTable = categoriesData
const dataTable = categoriesData?.sort((a, b) => {
if (a.sequence === null) return 1
if (b.sequence === null) return -1
return a.sequence - b.sequence
})
const dataColumns = [
{
title: 'No',
render: (
data: unknown,
type: unknown,
row: unknown,
row: TCategoryResponse,
meta: { row: number },
) => {
return meta.row + 1
return `<div>${meta.row + 1}</div> ${
row.sequence === null
? ''
: `<pre class="text-sm text-[#7C7C7C] inline">Urutan: ${row.sequence}</pre>`
}`
},
},
{
title: 'Nama',
data: 'name',
title: 'Kategori',
},
{
title: 'Kode',
data: 'code',
title: 'Deskripsi',
data: 'description',
},
{
title: 'Action',
@ -40,6 +48,12 @@ export const CategoriesPage = () => {
},
]
const dataSlot = {
1: (_value: unknown, _type: unknown, data: TCategoryResponse) => (
<div>
<div>{data.name}</div>
<pre className="text-sm text-[#7C7C7C]">Kode: {data.code}</pre>
</div>
),
3: (value: string) => (
<Button
as="a"

89
app/pages/dashboard-category-create/index.tsx
View File

@ -1,89 +0,0 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { useEffect, useState } from 'react'
import { useFetcher, useNavigate } from 'react-router'
import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
import { z } from 'zod'
import { Button } from '~/components/ui/button'
import { Input } from '~/components/ui/input'
import { TitleDashboard } from '~/components/ui/title-dashboard'
export const createCategorySchema = z.object({
code: z.string().min(3, 'Kode minimal 3 karakter'),
name: z.string().min(3, 'Nama minimal 3 karakter'),
})
export type TCategorySchema = z.infer<typeof createCategorySchema>
export const CreateCategoryPage = () => {
const fetcher = useFetcher()
const navigate = useNavigate()
const formMethods = useRemixForm<TCategorySchema>({
mode: 'onSubmit',
fetcher,
resolver: zodResolver(createCategorySchema),
})
const [error, setError] = useState<string>()
const [disabled, setDisabled] = useState(false)
const { handleSubmit } = formMethods
useEffect(() => {
if (!fetcher.data?.success) {
setError(fetcher.data?.message)
setDisabled(false)
return
}
navigate('/lg-admin/categories')
setDisabled(true)
setError(undefined)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [fetcher])
return (
<div className="relative">
<TitleDashboard title="Buat Kategori" />
<div>
<RemixFormProvider {...formMethods}>
<fetcher.Form
method="post"
onSubmit={handleSubmit}
action="/actions/admin/categories/create"
className="space-y-4"
>
{error && (
<div className="text-sm text-red-500 capitalize">{error}</div>
)}
<div className="flex items-end justify-between gap-4">
<Input
id="name"
label="Nama Kategori"
placeholder="Masukkan Nama Kategori"
name="name"
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"
/>
<Input
id="code"
label="Kode Kategori"
placeholder="Masukkan Kode Kategori"
name="code"
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"
/>
<Button
disabled={disabled}
type="submit"
size="lg"
className="text-md h-[42px] rounded-md"
>
Save
</Button>
</div>
</fetcher.Form>
</RemixFormProvider>
</div>
</div>
)
}

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

133
app/pages/form-category/index.tsx Normal file
View File

@ -0,0 +1,133 @@
import { zodResolver } from '@hookform/resolvers/zod'
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'
import { urlFriendlyCode } from '~/utils/formatter'
export const createCategorySchema = z.object({
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 = {
categoryData?: TCategoryResponse
}
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: {
id: categoryData?.id || undefined,
code: categoryData?.code || '',
name: categoryData?.name || '',
sequence: categoryData?.sequence || undefined,
description: categoryData?.description || '',
},
})
const [error, setError] = useState<string>()
const [disabled, setDisabled] = useState(false)
const { handleSubmit, watch, setValue } = formMethods
const watchName = watch('name')
useEffect(() => {
if (!fetcher.data?.success) {
setError(fetcher.data?.message)
setDisabled(false)
return
}
navigate('/lg-admin/categories')
setDisabled(true)
setError(undefined)
// 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={`${categoryData ? 'Update' : 'Buat'} Kategori`} />
<div>
<RemixFormProvider {...formMethods}>
<fetcher.Form
method="post"
onSubmit={handleSubmit}
action={`/actions/admin/categories/${categoryData ? 'update' : 'create'}`}
className="space-y-4"
>
{error && (
<div className="text-sm text-red-500 capitalize">{error}</div>
)}
<div className="flex items-end justify-between gap-4">
<Input
id="name"
label="Kategori"
placeholder="Masukkan Nama Kategori"
name="name"
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"
placeholder="Masukkan Kode Kategori"
readOnly
name="code"
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"
/>
<Button
disabled={disabled}
type="submit"
size="lg"
className="text-md h-[42px] rounded-md"
>
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>
</div>
)
}

9
app/pages/contents-form/index.tsx → app/pages/form-contents/index.tsx
View File

@ -60,7 +60,7 @@ type TProperties = {
newsData?: z.infer<typeof newsResponseSchema>
}
export const ContentsFormPage = (properties: TProperties) => {
export const FormContentsPage = (properties: TProperties) => {
const { newsData } = properties || {}
const fetcher = useFetcher()
const navigate = useNavigate()
@ -75,7 +75,7 @@ export const ContentsFormPage = (properties: TProperties) => {
fetcher,
resolver: zodResolver(contentSchema),
values: {
id: newsData?.id || '',
id: newsData?.id || undefined,
categories: newsData?.categories || [],
tags: newsData?.tags || [],
title: newsData?.title || '',
@ -124,16 +124,17 @@ export const ContentsFormPage = (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"
/>

13
app/pages/news-categories/index.tsx
View File

@ -1,18 +1,17 @@
import { useLocation, useRouteLoaderData } from 'react-router'
import { useParams, useRouteLoaderData } from 'react-router'
import { Card } from '~/components/ui/card'
import { CategorySection } from '~/components/ui/category-section'
import { DUMMY_DESCRIPTION } from '~/data/contents'
import type { loader } from '~/routes/_news'
import { BERITA } from './data'
export const NewsCategoriesPage = () => {
const { pathname } = useLocation()
const code = pathname.split('/')[2]
const parameters = useParams()
const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
const { name } =
loaderData?.categoriesData.find((item) => item.code === code) || {}
const { name, description } =
loaderData?.categoriesData.find((item) => item.code === parameters.code) ||
{}
const { items } = BERITA
return (
@ -20,7 +19,7 @@ export const NewsCategoriesPage = () => {
<Card>
<CategorySection
title={name || ''}
description={DUMMY_DESCRIPTION}
description={description || ''}
items={items}
/>
</Card>

4
app/routes/_admin.lg-admin._dashboard.categories.create.tsx
View File

@ -1,4 +1,4 @@
import { CreateCategoryPage } from '~/pages/dashboard-category-create'
import { FormCategoryPage } from '~/pages/form-category'
const DashboardCategoriesCreateLayout = () => <CreateCategoryPage />
const DashboardCategoriesCreateLayout = () => <FormCategoryPage />
export default DashboardCategoriesCreateLayout

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.create.tsx
View File

@ -1,4 +1,4 @@
import { ContentsFormPage } from '~/pages/contents-form'
import { FormContentsPage } from '~/pages/form-contents'
const DashboardContentCreateLayout = () => <ContentsFormPage />
const DashboardContentCreateLayout = () => <FormContentsPage />
export default DashboardContentCreateLayout

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

@ -1,20 +1,20 @@
import { getNewsBySlug } from '~/apis/common/get-news-by-slug'
import { handleCookie } from '~/libs/cookies'
import { ContentsFormPage } from '~/pages/contents-form'
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 }
}
const DashboardContentUpdateLayout = ({ loaderData }: Route.ComponentProps) => {
const newsData = loaderData.newsData
return <ContentsFormPage newsData={newsData} />
return <FormContentsPage newsData={newsData} />
}
export default DashboardContentUpdateLayout

0
app/routes/_news.category.$name.tsx → app/routes/_news.category.$code.tsx
View File

2
app/routes/actions.admin.categories.create.ts
View File

@ -8,7 +8,7 @@ import { handleCookie } from '~/libs/cookies'
import {
createCategorySchema,
type TCategorySchema,
} from '~/pages/dashboard-category-create'
} from '~/pages/form-category'
import type { Route } from './+types/actions.register'

67
app/routes/actions.admin.categories.update.ts Normal file
View File

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

2
app/routes/actions.admin.contents.create.ts
View File

@ -5,7 +5,7 @@ import { XiorError } from 'xior'
import { createNewsRequest } from '~/apis/admin/create-news'
import { handleCookie } from '~/libs/cookies'
import { contentSchema, type TContentSchema } from '~/pages/contents-form'
import { contentSchema, type TContentSchema } from '~/pages/form-contents'
import type { Route } from './+types/actions.register'

2
app/routes/actions.admin.contents.update.ts
View File

@ -5,7 +5,7 @@ import { XiorError } from 'xior'
import { updateNewsRequest } from '~/apis/admin/update-news'
import { handleCookie } from '~/libs/cookies'
import { contentSchema, type TContentSchema } from '~/pages/contents-form'
import { contentSchema, type TContentSchema } from '~/pages/form-contents'
import type { Route } from './+types/actions.register'