feat: restructure ads mgmt by creating a new layout for ads creation and updating related schemas
This commit is contained in:
parent
90e2042a91
commit
70cbb134d8
28
app/apis/admin/create-ads.ts
Normal file
28
app/apis/admin/create-ads.ts
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import { z } from 'zod'
|
||||||
|
|
||||||
|
import { HttpServer, type THttpServer } from '~/libs/http-server'
|
||||||
|
import type { TAdsSchema } from '~/pages/form-advertisements'
|
||||||
|
|
||||||
|
const advertisementsResponseSchema = z.object({
|
||||||
|
data: z.object({
|
||||||
|
Message: z.string(),
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
|
||||||
|
type TParameters = {
|
||||||
|
payload: TAdsSchema
|
||||||
|
} & THttpServer
|
||||||
|
|
||||||
|
export const createAdsRequest = async (parameters: TParameters) => {
|
||||||
|
const { payload, ...restParameters } = parameters
|
||||||
|
try {
|
||||||
|
const { data } = await HttpServer(restParameters).post(
|
||||||
|
'/api/advertisements/create',
|
||||||
|
payload,
|
||||||
|
)
|
||||||
|
return advertisementsResponseSchema.parse(data)
|
||||||
|
} catch (error) {
|
||||||
|
// eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
}
|
||||||
25
app/apis/common/get-ads.ts
Normal file
25
app/apis/common/get-ads.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { z } from 'zod'
|
||||||
|
|
||||||
|
import { HttpServer, type THttpServer } from '~/libs/http-server'
|
||||||
|
|
||||||
|
const adResponseSchema = z.object({
|
||||||
|
id: z.string(),
|
||||||
|
image_url: z.string(),
|
||||||
|
url: z.string(),
|
||||||
|
})
|
||||||
|
const adsResponseSchema = z.object({
|
||||||
|
data: z.array(adResponseSchema),
|
||||||
|
})
|
||||||
|
|
||||||
|
export type TAdResponse = z.infer<typeof adResponseSchema>
|
||||||
|
export type TAdsResponse = z.infer<typeof adsResponseSchema>
|
||||||
|
|
||||||
|
export const getAds = async (parameters?: THttpServer) => {
|
||||||
|
try {
|
||||||
|
const { data } = await HttpServer(parameters).get(`/api/ads`)
|
||||||
|
return adsResponseSchema.parse(data)
|
||||||
|
} catch (error) {
|
||||||
|
// eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -25,6 +25,7 @@ type TInputProperties<T extends FieldValues> = Omit<
|
|||||||
rules?: RegisterOptions
|
rules?: RegisterOptions
|
||||||
containerClassName?: string
|
containerClassName?: string
|
||||||
labelClassName?: string
|
labelClassName?: string
|
||||||
|
category?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export const InputFile = <TFormValues extends Record<string, unknown>>(
|
export const InputFile = <TFormValues extends Record<string, unknown>>(
|
||||||
@ -40,6 +41,7 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
|
|||||||
className,
|
className,
|
||||||
containerClassName,
|
containerClassName,
|
||||||
labelClassName,
|
labelClassName,
|
||||||
|
category,
|
||||||
...restProperties
|
...restProperties
|
||||||
} = properties
|
} = properties
|
||||||
const { setIsUploadOpen, uploadedFile, setUploadedFile, isUploadOpen } =
|
const { setIsUploadOpen, uploadedFile, setUploadedFile, isUploadOpen } =
|
||||||
@ -86,7 +88,7 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
|
|||||||
size="fit"
|
size="fit"
|
||||||
className="absolute right-3 h-[42px]"
|
className="absolute right-3 h-[42px]"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setIsUploadOpen(name as TUpload)
|
setIsUploadOpen((category || name) as TUpload)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />
|
<CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />
|
||||||
|
|||||||
@ -2,8 +2,8 @@ import { type PropsWithChildren } from 'react'
|
|||||||
|
|
||||||
import { PopupModal } from '~/components/popup/modal'
|
import { PopupModal } from '~/components/popup/modal'
|
||||||
import { SuccessModal } from '~/components/popup/success-modal'
|
import { SuccessModal } from '~/components/popup/success-modal'
|
||||||
import { Banner } from '~/components/ui/banner'
|
|
||||||
import { useNewsContext } from '~/contexts/news'
|
import { useNewsContext } from '~/contexts/news'
|
||||||
|
import { Banner } from '~/layouts/news/banner'
|
||||||
import { FormForgotPassword } from '~/layouts/news/form-forgot-password'
|
import { FormForgotPassword } from '~/layouts/news/form-forgot-password'
|
||||||
import { FormLogin } from '~/layouts/news/form-login'
|
import { FormLogin } from '~/layouts/news/form-login'
|
||||||
import { FormRegister } from '~/layouts/news/form-register'
|
import { FormRegister } from '~/layouts/news/form-register'
|
||||||
|
|||||||
@ -1,23 +1,36 @@
|
|||||||
import type { ConfigColumns } from 'datatables.net-dt'
|
import type { ConfigColumns } from 'datatables.net-dt'
|
||||||
import type { DataTableSlots } from 'datatables.net-react'
|
import type { DataTableSlots } from 'datatables.net-react'
|
||||||
import { Link } from 'react-router'
|
import { Link, useRouteLoaderData } from 'react-router'
|
||||||
import { twMerge } from 'tailwind-merge'
|
|
||||||
|
|
||||||
import { Button } from '~/components/ui/button'
|
import { Button } from '~/components/ui/button'
|
||||||
import { UiTable } from '~/components/ui/table'
|
import { UiTable } from '~/components/ui/table'
|
||||||
import { TitleDashboard } from '~/components/ui/title-dashboard'
|
import { TitleDashboard } from '~/components/ui/title-dashboard'
|
||||||
import { BANNER } from '~/data/contents'
|
import type { loader } from '~/routes/_admin.lg-admin._dashboard.advertisements._index'
|
||||||
|
|
||||||
type TStatusColors = 'draft' | 'active' | 'inactive'
|
|
||||||
|
|
||||||
export const AdvertisementsPage = () => {
|
export const AdvertisementsPage = () => {
|
||||||
const dataBanner = BANNER
|
const loaderData = useRouteLoaderData<typeof loader>(
|
||||||
|
'routes/_admin.lg-admin._dashboard.advertisements._index',
|
||||||
|
)
|
||||||
|
const { adsData: dataTable } = loaderData || {}
|
||||||
|
|
||||||
const dataColumns: ConfigColumns[] = [
|
const dataColumns: ConfigColumns[] = [
|
||||||
{ title: 'No', data: 'id' },
|
{
|
||||||
{ title: 'Banner', data: 'urlImage' },
|
title: 'No',
|
||||||
{ title: 'Link', data: 'link' },
|
render: (
|
||||||
{ title: 'Tgl Create', data: 'createdAt' },
|
_data: unknown,
|
||||||
{ title: 'Status', data: 'status' },
|
_type: unknown,
|
||||||
|
_row: unknown,
|
||||||
|
meta: { row: number },
|
||||||
|
) => {
|
||||||
|
return meta.row + 1
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{ title: 'Banner', data: 'image_url' },
|
||||||
|
{ title: 'Link', data: 'url' },
|
||||||
|
{
|
||||||
|
title: 'Action',
|
||||||
|
data: 'id',
|
||||||
|
},
|
||||||
]
|
]
|
||||||
const dataSlot: DataTableSlots = {
|
const dataSlot: DataTableSlots = {
|
||||||
1: (value: string) => {
|
1: (value: string) => {
|
||||||
@ -25,30 +38,22 @@ export const AdvertisementsPage = () => {
|
|||||||
<div>
|
<div>
|
||||||
<img
|
<img
|
||||||
src={value}
|
src={value}
|
||||||
alt={`banner - ${value}`}
|
alt={value}
|
||||||
className="aspect-[15/1] h-[50px] max-w-[200px] rounded"
|
className="aspect-[15/1] h-[50px] max-h-[100px] min-h-[65px] rounded object-cover"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
4: (value: string) => {
|
3: (value: string) => (
|
||||||
const statusColors = {
|
<Button
|
||||||
draft: 'bg-gray-300',
|
as="a"
|
||||||
active: 'bg-[#04D182]',
|
href={`/lg-admin/advertisements/update/${value}`}
|
||||||
inactive: 'bg-[#F96D19]',
|
className="text-md rounded-md"
|
||||||
}
|
size="sm"
|
||||||
const status = value as TStatusColors
|
|
||||||
return (
|
|
||||||
<span
|
|
||||||
className={twMerge(
|
|
||||||
'rounded-md px-2 py-1 text-sm',
|
|
||||||
status ? statusColors[status] : '',
|
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
{status}
|
Update Banner Iklan
|
||||||
</span>
|
</Button>
|
||||||
)
|
),
|
||||||
},
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -68,7 +73,7 @@ export const AdvertisementsPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<UiTable
|
<UiTable
|
||||||
data={dataBanner}
|
data={dataTable}
|
||||||
columns={dataColumns}
|
columns={dataColumns}
|
||||||
slots={dataSlot}
|
slots={dataSlot}
|
||||||
title="Daftar Banner Iklan"
|
title="Daftar Banner Iklan"
|
||||||
|
|||||||
@ -3,7 +3,7 @@ import DataTable, { type DataTableSlots } from 'datatables.net-react'
|
|||||||
import { Link, useRouteLoaderData } from 'react-router'
|
import { Link, useRouteLoaderData } from 'react-router'
|
||||||
|
|
||||||
import type { TCategoryResponse } from '~/apis/common/get-categories'
|
import type { TCategoryResponse } from '~/apis/common/get-categories'
|
||||||
import type { TNewsResponse } from '~/apis/common/get-news'
|
import type { TAuthor } from '~/apis/common/get-news'
|
||||||
import type { TTagResponse } from '~/apis/common/get-tags'
|
import type { TTagResponse } from '~/apis/common/get-tags'
|
||||||
import { Button } from '~/components/ui/button'
|
import { Button } from '~/components/ui/button'
|
||||||
import { UiTable } from '~/components/ui/table'
|
import { UiTable } from '~/components/ui/table'
|
||||||
@ -39,6 +39,7 @@ export const ContentsPage = () => {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Penulis',
|
title: 'Penulis',
|
||||||
|
data: 'author',
|
||||||
},
|
},
|
||||||
{ title: 'Judul', data: 'title' },
|
{ title: 'Judul', data: 'title' },
|
||||||
{
|
{
|
||||||
@ -57,12 +58,10 @@ export const ContentsPage = () => {
|
|||||||
]
|
]
|
||||||
const dataSlot: DataTableSlots = {
|
const dataSlot: DataTableSlots = {
|
||||||
1: (value: string) => formatDate(value),
|
1: (value: string) => formatDate(value),
|
||||||
2: (_value: unknown, _type: unknown, data: TNewsResponse) => (
|
2: (value: TAuthor) => (
|
||||||
<div>
|
<div>
|
||||||
<div>{data.author.name}</div>
|
<div>{value.name}</div>
|
||||||
<div className="text-sm text-[#7C7C7C]">
|
<div className="text-sm text-[#7C7C7C]">ID: {value.id.slice(0, 8)}</div>
|
||||||
ID: {data.author.id.slice(0, 8)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
3: (value: string) => <span className="text-sm">{value}</span>,
|
3: (value: string) => <span className="text-sm">{value}</span>,
|
||||||
|
|||||||
103
app/pages/form-advertisements/index.tsx
Normal file
103
app/pages/form-advertisements/index.tsx
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
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 { TAdResponse } from '~/apis/common/get-ads'
|
||||||
|
import { Button } from '~/components/ui/button'
|
||||||
|
import { Input } from '~/components/ui/input'
|
||||||
|
import { InputFile } from '~/components/ui/input-file'
|
||||||
|
import { TitleDashboard } from '~/components/ui/title-dashboard'
|
||||||
|
|
||||||
|
export const adsSchema = z.object({
|
||||||
|
id: z.string().optional(),
|
||||||
|
image: z.string().url({
|
||||||
|
message: 'Gambar must be a valid URL',
|
||||||
|
}),
|
||||||
|
url: z.string().url({
|
||||||
|
message: 'URL must be valid',
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
export type TAdsSchema = z.infer<typeof adsSchema>
|
||||||
|
type TProperties = {
|
||||||
|
adData?: TAdResponse
|
||||||
|
}
|
||||||
|
|
||||||
|
export const FormAdvertisementsPage = (properties: TProperties) => {
|
||||||
|
const { adData } = properties || {}
|
||||||
|
const fetcher = useFetcher()
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const formMethods = useRemixForm<TAdsSchema>({
|
||||||
|
mode: 'onSubmit',
|
||||||
|
fetcher,
|
||||||
|
resolver: zodResolver(adsSchema),
|
||||||
|
values: {
|
||||||
|
id: adData?.id || undefined,
|
||||||
|
image: adData?.image_url || '',
|
||||||
|
url: adData?.url || '',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const [error, setError] = useState<string>()
|
||||||
|
|
||||||
|
const { handleSubmit } = formMethods
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!fetcher.data?.success) {
|
||||||
|
setError(fetcher.data?.message)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
navigate('/lg-admin/advertisements')
|
||||||
|
setError(undefined)
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [fetcher])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative">
|
||||||
|
<TitleDashboard title={`${adData ? 'Update' : 'Buat'} Banner Iklan`} />
|
||||||
|
<div>
|
||||||
|
<RemixFormProvider {...formMethods}>
|
||||||
|
<fetcher.Form
|
||||||
|
method="post"
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
action={`/actions/admin/advertisements/${adData ? '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">
|
||||||
|
<InputFile
|
||||||
|
id="image"
|
||||||
|
label="Gambar"
|
||||||
|
placeholder="Masukkan Url Gambar"
|
||||||
|
name="image"
|
||||||
|
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="url"
|
||||||
|
label="Link"
|
||||||
|
placeholder="Masukkan Url Link"
|
||||||
|
name="url"
|
||||||
|
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
|
||||||
|
isLoading={fetcher.state !== 'idle'}
|
||||||
|
disabled={fetcher.state !== 'idle'}
|
||||||
|
type="submit"
|
||||||
|
size="lg"
|
||||||
|
className="text-md h-[42px] rounded-md"
|
||||||
|
>
|
||||||
|
Save
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</fetcher.Form>
|
||||||
|
</RemixFormProvider>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -10,14 +10,14 @@ import { Input } from '~/components/ui/input'
|
|||||||
import { TitleDashboard } from '~/components/ui/title-dashboard'
|
import { TitleDashboard } from '~/components/ui/title-dashboard'
|
||||||
import { urlFriendlyCode } from '~/utils/formatter'
|
import { urlFriendlyCode } from '~/utils/formatter'
|
||||||
|
|
||||||
export const createCategorySchema = z.object({
|
export const categorySchema = z.object({
|
||||||
id: z.string().optional(),
|
id: z.string().optional(),
|
||||||
name: z.string().min(3, 'Nama minimal 3 karakter'),
|
name: z.string().min(3, 'Nama minimal 3 karakter'),
|
||||||
code: z.string(),
|
code: z.string(),
|
||||||
sequence: z.preprocess(Number, z.number().optional()),
|
sequence: z.preprocess(Number, z.number().optional()),
|
||||||
description: z.string(),
|
description: z.string(),
|
||||||
})
|
})
|
||||||
export type TCategorySchema = z.infer<typeof createCategorySchema>
|
export type TCategorySchema = z.infer<typeof categorySchema>
|
||||||
type TProperties = {
|
type TProperties = {
|
||||||
categoryData?: TCategoryResponse
|
categoryData?: TCategoryResponse
|
||||||
}
|
}
|
||||||
@ -29,7 +29,7 @@ export const FormCategoryPage = (properties: TProperties) => {
|
|||||||
const formMethods = useRemixForm<TCategorySchema>({
|
const formMethods = useRemixForm<TCategorySchema>({
|
||||||
mode: 'onSubmit',
|
mode: 'onSubmit',
|
||||||
fetcher,
|
fetcher,
|
||||||
resolver: zodResolver(createCategorySchema),
|
resolver: zodResolver(categorySchema),
|
||||||
values: {
|
values: {
|
||||||
id: categoryData?.id || undefined,
|
id: categoryData?.id || undefined,
|
||||||
code: categoryData?.code || '',
|
code: categoryData?.code || '',
|
||||||
|
|||||||
@ -10,7 +10,7 @@ import { Input } from '~/components/ui/input'
|
|||||||
import { TitleDashboard } from '~/components/ui/title-dashboard'
|
import { TitleDashboard } from '~/components/ui/title-dashboard'
|
||||||
import { urlFriendlyCode } from '~/utils/formatter'
|
import { urlFriendlyCode } from '~/utils/formatter'
|
||||||
|
|
||||||
export const createSubscribePlanSchema = z.object({
|
export const subscribePlanSchema = z.object({
|
||||||
id: z.string().optional(),
|
id: z.string().optional(),
|
||||||
name: z.string().min(3, 'Nama minimal 3 karakter'),
|
name: z.string().min(3, 'Nama minimal 3 karakter'),
|
||||||
code: z.string(),
|
code: z.string(),
|
||||||
@ -18,7 +18,7 @@ export const createSubscribePlanSchema = z.object({
|
|||||||
price: z.preprocess(Number, z.number().optional()),
|
price: z.preprocess(Number, z.number().optional()),
|
||||||
status: z.number().optional(),
|
status: z.number().optional(),
|
||||||
})
|
})
|
||||||
export type TSubscribePlanSchema = z.infer<typeof createSubscribePlanSchema>
|
export type TSubscribePlanSchema = z.infer<typeof subscribePlanSchema>
|
||||||
type TProperties = {
|
type TProperties = {
|
||||||
subscribePlanData?: TSubscribePlanSchema
|
subscribePlanData?: TSubscribePlanSchema
|
||||||
}
|
}
|
||||||
@ -30,7 +30,7 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
|
|||||||
const formMethods = useRemixForm<TSubscribePlanSchema>({
|
const formMethods = useRemixForm<TSubscribePlanSchema>({
|
||||||
mode: 'onSubmit',
|
mode: 'onSubmit',
|
||||||
fetcher,
|
fetcher,
|
||||||
resolver: zodResolver(createSubscribePlanSchema),
|
resolver: zodResolver(subscribePlanSchema),
|
||||||
values: {
|
values: {
|
||||||
id: subscribePlanData?.id || undefined,
|
id: subscribePlanData?.id || undefined,
|
||||||
code: subscribePlanData?.code || '',
|
code: subscribePlanData?.code || '',
|
||||||
|
|||||||
@ -10,12 +10,12 @@ import { Input } from '~/components/ui/input'
|
|||||||
import { TitleDashboard } from '~/components/ui/title-dashboard'
|
import { TitleDashboard } from '~/components/ui/title-dashboard'
|
||||||
import { urlFriendlyCode } from '~/utils/formatter'
|
import { urlFriendlyCode } from '~/utils/formatter'
|
||||||
|
|
||||||
export const createTagSchema = z.object({
|
export const tagSchema = z.object({
|
||||||
id: z.string().optional(),
|
id: z.string().optional(),
|
||||||
name: z.string().min(3, 'Nama minimal 3 karakter'),
|
name: z.string().min(3, 'Nama minimal 3 karakter'),
|
||||||
code: z.string(),
|
code: z.string(),
|
||||||
})
|
})
|
||||||
export type TTagSchema = z.infer<typeof createTagSchema>
|
export type TTagSchema = z.infer<typeof tagSchema>
|
||||||
type TProperties = {
|
type TProperties = {
|
||||||
tagData?: TTagResponse
|
tagData?: TTagResponse
|
||||||
}
|
}
|
||||||
@ -27,7 +27,7 @@ export const FormTagPage = (properties: TProperties) => {
|
|||||||
const formMethods = useRemixForm<TTagSchema>({
|
const formMethods = useRemixForm<TTagSchema>({
|
||||||
mode: 'onSubmit',
|
mode: 'onSubmit',
|
||||||
fetcher,
|
fetcher,
|
||||||
resolver: zodResolver(createTagSchema),
|
resolver: zodResolver(tagSchema),
|
||||||
values: {
|
values: {
|
||||||
id: tagData?.id || undefined,
|
id: tagData?.id || undefined,
|
||||||
code: tagData?.code || '',
|
code: tagData?.code || '',
|
||||||
|
|||||||
@ -0,0 +1,42 @@
|
|||||||
|
import { isRouteErrorResponse } from 'react-router'
|
||||||
|
|
||||||
|
import { getAds } from '~/apis/common/get-ads'
|
||||||
|
import { AdvertisementsPage } from '~/pages/dashboard-advertisements'
|
||||||
|
|
||||||
|
import type { Route } from './+types/_admin.lg-admin._dashboard.advertisements._index'
|
||||||
|
|
||||||
|
export const loader = async ({}: Route.LoaderArgs) => {
|
||||||
|
const { data: adsData } = await getAds()
|
||||||
|
return { adsData }
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
|
||||||
|
let message = 'Oops!'
|
||||||
|
let details = 'An unexpected error occurred.'
|
||||||
|
let stack: string | undefined
|
||||||
|
|
||||||
|
if (isRouteErrorResponse(error)) {
|
||||||
|
message = error.status === 404 ? '404' : 'Error'
|
||||||
|
details =
|
||||||
|
error.status === 404
|
||||||
|
? 'The requested page could not be found.'
|
||||||
|
: error.statusText || details
|
||||||
|
} else if (import.meta.env.DEV && error && error instanceof Error) {
|
||||||
|
details = error.message
|
||||||
|
stack = error.stack
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto p-4">
|
||||||
|
<h1>{message}</h1>
|
||||||
|
<p>{details}</p>
|
||||||
|
{stack && (
|
||||||
|
<pre className="w-full p-4 whitespace-pre-wrap">
|
||||||
|
<code>{stack}</code>
|
||||||
|
</pre>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
const DashboardAdvertisementsLayout = () => <AdvertisementsPage />
|
||||||
|
export default DashboardAdvertisementsLayout
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
import { FormAdvertisementsPage } from '~/pages/form-advertisements'
|
||||||
|
|
||||||
|
const DashboardAdvertisementsCreateLayout = () => <FormAdvertisementsPage />
|
||||||
|
export default DashboardAdvertisementsCreateLayout
|
||||||
@ -1,4 +0,0 @@
|
|||||||
import { AdvertisementsPage } from '~/pages/dashboard-advertisements'
|
|
||||||
|
|
||||||
const DashboardAdvertisementsLayout = () => <AdvertisementsPage />
|
|
||||||
export default DashboardAdvertisementsLayout
|
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
import { isRouteErrorResponse } from 'react-router'
|
||||||
|
|
||||||
|
import { getAds } from '~/apis/common/get-ads'
|
||||||
|
import { FormAdvertisementsPage } from '~/pages/form-advertisements'
|
||||||
|
|
||||||
|
import type { Route } from './+types/_admin.lg-admin._dashboard.advertisements.update.$id'
|
||||||
|
|
||||||
|
export const loader = async ({ params }: Route.LoaderArgs) => {
|
||||||
|
const { data: adsData } = await getAds()
|
||||||
|
const adData = adsData.find((ads) => ads.id === params.id)
|
||||||
|
return { adData }
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
|
||||||
|
let message = 'Oops!'
|
||||||
|
let details = 'An unexpected error occurred.'
|
||||||
|
let stack: string | undefined
|
||||||
|
|
||||||
|
if (isRouteErrorResponse(error)) {
|
||||||
|
message = error.status === 404 ? '404' : 'Error'
|
||||||
|
details =
|
||||||
|
error.status === 404
|
||||||
|
? 'The requested page could not be found.'
|
||||||
|
: error.statusText || details
|
||||||
|
} else if (import.meta.env.DEV && error && error instanceof Error) {
|
||||||
|
details = error.message
|
||||||
|
stack = error.stack
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto p-4">
|
||||||
|
<h1>{message}</h1>
|
||||||
|
<p>{details}</p>
|
||||||
|
{stack && (
|
||||||
|
<pre className="w-full p-4 whitespace-pre-wrap">
|
||||||
|
<code>{stack}</code>
|
||||||
|
</pre>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const DashboardAdvertisementsCreateLayout = ({
|
||||||
|
loaderData,
|
||||||
|
}: Route.ComponentProps) => {
|
||||||
|
const { adData } = loaderData || {}
|
||||||
|
return <FormAdvertisementsPage adData={adData} />
|
||||||
|
}
|
||||||
|
export default DashboardAdvertisementsCreateLayout
|
||||||
64
app/routes/actions.admin.advertisements.create.ts
Normal file
64
app/routes/actions.admin.advertisements.create.ts
Normal file
@ -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 { createAdsRequest } from '~/apis/admin/create-ads'
|
||||||
|
import { handleCookie } from '~/libs/cookies'
|
||||||
|
import { adsSchema, type TAdsSchema } from '~/pages/form-advertisements'
|
||||||
|
|
||||||
|
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<TAdsSchema>(
|
||||||
|
request,
|
||||||
|
zodResolver(adsSchema),
|
||||||
|
false,
|
||||||
|
)
|
||||||
|
|
||||||
|
if (errors) {
|
||||||
|
return data({ success: false, errors, defaultValues }, { status: 400 })
|
||||||
|
}
|
||||||
|
|
||||||
|
const { data: categoryData } = await createAdsRequest({
|
||||||
|
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 },
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -5,10 +5,7 @@ import { XiorError } from 'xior'
|
|||||||
|
|
||||||
import { createCategoryRequest } from '~/apis/admin/create-category'
|
import { createCategoryRequest } from '~/apis/admin/create-category'
|
||||||
import { handleCookie } from '~/libs/cookies'
|
import { handleCookie } from '~/libs/cookies'
|
||||||
import {
|
import { categorySchema, type TCategorySchema } from '~/pages/form-category'
|
||||||
createCategorySchema,
|
|
||||||
type TCategorySchema,
|
|
||||||
} from '~/pages/form-category'
|
|
||||||
|
|
||||||
import type { Route } from './+types/actions.register'
|
import type { Route } from './+types/actions.register'
|
||||||
|
|
||||||
@ -21,7 +18,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
|
|||||||
receivedValues: defaultValues,
|
receivedValues: defaultValues,
|
||||||
} = await getValidatedFormData<TCategorySchema>(
|
} = await getValidatedFormData<TCategorySchema>(
|
||||||
request,
|
request,
|
||||||
zodResolver(createCategorySchema),
|
zodResolver(categorySchema),
|
||||||
false,
|
false,
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|||||||
@ -5,10 +5,7 @@ import { XiorError } from 'xior'
|
|||||||
|
|
||||||
import { updateCategoryRequest } from '~/apis/admin/update-category'
|
import { updateCategoryRequest } from '~/apis/admin/update-category'
|
||||||
import { handleCookie } from '~/libs/cookies'
|
import { handleCookie } from '~/libs/cookies'
|
||||||
import {
|
import { categorySchema, type TCategorySchema } from '~/pages/form-category'
|
||||||
createCategorySchema,
|
|
||||||
type TCategorySchema,
|
|
||||||
} from '~/pages/form-category'
|
|
||||||
|
|
||||||
import type { Route } from './+types/actions.register'
|
import type { Route } from './+types/actions.register'
|
||||||
|
|
||||||
@ -21,7 +18,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
|
|||||||
receivedValues: defaultValues,
|
receivedValues: defaultValues,
|
||||||
} = await getValidatedFormData<TCategorySchema>(
|
} = await getValidatedFormData<TCategorySchema>(
|
||||||
request,
|
request,
|
||||||
zodResolver(createCategorySchema),
|
zodResolver(categorySchema),
|
||||||
false,
|
false,
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|||||||
@ -6,7 +6,7 @@ import { XiorError } from 'xior'
|
|||||||
import { createSubscribePlanRequest } from '~/apis/admin/create-subscribe-plan'
|
import { createSubscribePlanRequest } from '~/apis/admin/create-subscribe-plan'
|
||||||
import { handleCookie } from '~/libs/cookies'
|
import { handleCookie } from '~/libs/cookies'
|
||||||
import {
|
import {
|
||||||
createSubscribePlanSchema,
|
subscribePlanSchema,
|
||||||
type TSubscribePlanSchema,
|
type TSubscribePlanSchema,
|
||||||
} from '~/pages/form-subscriptions-plan'
|
} from '~/pages/form-subscriptions-plan'
|
||||||
|
|
||||||
@ -21,7 +21,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
|
|||||||
receivedValues: defaultValues,
|
receivedValues: defaultValues,
|
||||||
} = await getValidatedFormData<TSubscribePlanSchema>(
|
} = await getValidatedFormData<TSubscribePlanSchema>(
|
||||||
request,
|
request,
|
||||||
zodResolver(createSubscribePlanSchema),
|
zodResolver(subscribePlanSchema),
|
||||||
false,
|
false,
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|||||||
@ -6,7 +6,7 @@ import { XiorError } from 'xior'
|
|||||||
import { updateSubscribePlanRequest } from '~/apis/admin/update-subscribe-plan'
|
import { updateSubscribePlanRequest } from '~/apis/admin/update-subscribe-plan'
|
||||||
import { handleCookie } from '~/libs/cookies'
|
import { handleCookie } from '~/libs/cookies'
|
||||||
import {
|
import {
|
||||||
createSubscribePlanSchema,
|
subscribePlanSchema,
|
||||||
type TSubscribePlanSchema,
|
type TSubscribePlanSchema,
|
||||||
} from '~/pages/form-subscriptions-plan'
|
} from '~/pages/form-subscriptions-plan'
|
||||||
|
|
||||||
@ -21,7 +21,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
|
|||||||
receivedValues: defaultValues,
|
receivedValues: defaultValues,
|
||||||
} = await getValidatedFormData<TSubscribePlanSchema>(
|
} = await getValidatedFormData<TSubscribePlanSchema>(
|
||||||
request,
|
request,
|
||||||
zodResolver(createSubscribePlanSchema),
|
zodResolver(subscribePlanSchema),
|
||||||
false,
|
false,
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|||||||
@ -5,7 +5,7 @@ import { XiorError } from 'xior'
|
|||||||
|
|
||||||
import { createTagsRequest } from '~/apis/admin/create-tags'
|
import { createTagsRequest } from '~/apis/admin/create-tags'
|
||||||
import { handleCookie } from '~/libs/cookies'
|
import { handleCookie } from '~/libs/cookies'
|
||||||
import { createTagSchema, type TTagSchema } from '~/pages/form-tag'
|
import { tagSchema, type TTagSchema } from '~/pages/form-tag'
|
||||||
|
|
||||||
import type { Route } from './+types/actions.register'
|
import type { Route } from './+types/actions.register'
|
||||||
|
|
||||||
@ -18,7 +18,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
|
|||||||
receivedValues: defaultValues,
|
receivedValues: defaultValues,
|
||||||
} = await getValidatedFormData<TTagSchema>(
|
} = await getValidatedFormData<TTagSchema>(
|
||||||
request,
|
request,
|
||||||
zodResolver(createTagSchema),
|
zodResolver(tagSchema),
|
||||||
false,
|
false,
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|||||||
@ -5,7 +5,7 @@ import { XiorError } from 'xior'
|
|||||||
|
|
||||||
import { updateTagRequest } from '~/apis/admin/update-tag'
|
import { updateTagRequest } from '~/apis/admin/update-tag'
|
||||||
import { handleCookie } from '~/libs/cookies'
|
import { handleCookie } from '~/libs/cookies'
|
||||||
import { createTagSchema, type TTagSchema } from '~/pages/form-tag'
|
import { tagSchema, type TTagSchema } from '~/pages/form-tag'
|
||||||
|
|
||||||
import type { Route } from './+types/actions.register'
|
import type { Route } from './+types/actions.register'
|
||||||
|
|
||||||
@ -18,7 +18,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
|
|||||||
receivedValues: defaultValues,
|
receivedValues: defaultValues,
|
||||||
} = await getValidatedFormData<TTagSchema>(
|
} = await getValidatedFormData<TTagSchema>(
|
||||||
request,
|
request,
|
||||||
zodResolver(createTagSchema),
|
zodResolver(tagSchema),
|
||||||
false,
|
false,
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user