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

Compare commits

base: legalgonews:d63884dde125e3c2813da2679829957bbe22f40f
Branches Tags
legalgonews:master
legalgonews:dev
..
compare: legalgonews:ea6462f3ea7ba6f0fe6214c14d1f3dd82f21c8ac
Branches Tags
legalgonews:dev
legalgonews:master

No commits in common. "d63884dde125e3c2813da2679829957bbe22f40f" and "ea6462f3ea7ba6f0fe6214c14d1f3dd82f21c8ac" have entirely different histories.
d63884dde1 ... ea6462f3ea

66 changed files with 570 additions and 1288 deletions
Show Stats Expand all files Collapse all files

28
app/apis/admin/create-ads.ts
View File

@ -1,28 +0,0 @@
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/ads/create',
payload,
)
return advertisementsResponseSchema.parse(data)
} catch (error) {
// eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
return Promise.reject(error)
}
}

27
app/apis/admin/delete-ads.ts
View File

@ -1,27 +0,0 @@
import { z } from 'zod'
import { HttpServer, type THttpServer } from '~/libs/http-server'
import type { TAdsSchema } from '~/pages/form-advertisements'
const deleteAdsResponseSchema = z.object({
data: z.object({
Message: z.string(),
}),
})
type TParameters = {
id: TAdsSchema['id']
} & THttpServer
export const deleteAdsRequest = async (parameters: TParameters) => {
const { id, ...restParameters } = parameters
try {
const { data } = await HttpServer(restParameters).delete(
`/api/ads/${id}/delete`,
)
return deleteAdsResponseSchema.parse(data)
} catch (error) {
// eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
return Promise.reject(error)
}
}

2
app/apis/admin/get-users.ts
View File

@ -12,7 +12,7 @@ const subscribeResponseSchema = z.object({
subscribe_plan_id: z.string(), subscribe_plan_id: z.string(),
start_date: z.string(), start_date: z.string(),
end_date: z.string().nullable(), end_date: z.string().nullable(),
status: z.number(), status: z.string(),
auto_renew: z.boolean(), auto_renew: z.boolean(),
subscribe_plan: subscribePlanResponseSchema, subscribe_plan: subscribePlanResponseSchema,
}) })

24
app/apis/common/get-ads.ts
View File

@ -1,24 +0,0 @@
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 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)
}
}

23
app/components/icons/chart.tsx Normal file
View File

@ -0,0 +1,23 @@
import type { JSX, SVGProps } from 'react'
export const ChartIcon = (
properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
) => {
return (
<svg
width={18}
height={19}
viewBox="0 0 18 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...properties}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.498 1.61h7.004c2.55 0 3.99 1.447 3.998 3.998v7.005c0 2.55-1.447 3.997-3.998 3.997H5.498c-2.551 0-3.998-1.447-3.998-3.997V5.608c0-2.55 1.447-3.998 3.998-3.998zm3.539 11.895a.62.62 0 00.623-.562V5.3a.612.612 0 00-.285-.592.63.63 0 00-.96.592v7.643a.632.632 0 00.622.562zm3.45 0c.316 0 .585-.24.623-.562v-2.46a.629.629 0 00-.96-.593.604.604 0 00-.285.593v2.46c.03.322.3.562.623.562zm-6.322-.562a.62.62 0 01-.623.562.62.62 0 01-.622-.562V7.76a.63.63 0 01.293-.592.617.617 0 01.66 0c.202.127.315.36.292.592v5.183z"
fill="currentColor"
/>
</svg>
)
}

23
app/components/icons/chat.tsx Normal file
View File

@ -0,0 +1,23 @@
import type { JSX, SVGProps } from 'react'
export const ChatIcon = (
properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
) => {
return (
<svg
width={18}
height={19}
viewBox="0 0 18 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...properties}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M1.5 9.122C1.5 5.17 4.657 1.61 9.015 1.61c4.26 0 7.485 3.493 7.485 7.49 0 4.633-3.78 7.51-7.5 7.51-1.23 0-2.595-.33-3.69-.976-.382-.233-.705-.406-1.117-.27l-1.515.45c-.383.12-.728-.18-.615-.586l.502-1.682a.786.786 0 00-.052-.676C1.868 11.683 1.5 10.384 1.5 9.122zm6.525 0c0 .533.427.961.96.969a.963.963 0 000-1.923.956.956 0 00-.96.954zm3.457.007c0 .526.428.962.96.962a.963.963 0 000-1.923.958.958 0 00-.96.961zm-5.954.962a.967.967 0 01-.96-.962c0-.533.427-.961.96-.961.532 0 .96.428.96.961a.967.967 0 01-.96.962z"
fill="currentColor"
/>
</svg>
)
}

23
app/components/icons/document.tsx Normal file
View File

@ -0,0 +1,23 @@
import type { JSX, SVGProps } from 'react'
export const DocumentIcon = (
properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
) => {
return (
<svg
width={18}
height={19}
viewBox="0 0 18 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...properties}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.857 1.61h6.286c2.317 0 3.607 1.335 3.607 3.623v7.747c0 2.325-1.29 3.63-3.607 3.63H5.857c-2.28 0-3.607-1.305-3.607-3.63V5.233c0-2.288 1.328-3.623 3.607-3.623zm.203 3.495v-.007h2.242a.588.588 0 010 1.178H6.06a.585.585 0 010-1.17zm0 4.56h5.88a.586.586 0 000-1.17H6.06a.586.586 0 000 1.17zm0 3.428h5.88c.3-.03.525-.286.525-.585a.588.588 0 00-.525-.593H6.06a.596.596 0 00-.563.908c.12.187.338.3.563.27z"
fill="currentColor"
/>
</svg>
)
}

21
app/components/icons/medical-notes.tsx Normal file
View File

@ -0,0 +1,21 @@
import type { JSX, SVGProps } from 'react'
export const MedicalNotesIcon = (
properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
) => {
return (
<svg
width={12}
height={16}
viewBox="0 0 12 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...properties}
>
<path
d="M9.844 1.985H7.5C7.5.951 6.66.11 5.625.11 4.591.11 3.75.951 3.75 1.985H1.406C.63 1.985 0 2.615 0 3.392v10.312c0 .776.63 1.406 1.406 1.406h8.438c.776 0 1.406-.63 1.406-1.406V3.392c0-.777-.63-1.407-1.406-1.407zm-4.219-.703c.39 0 .703.314.703.703 0 .39-.313.703-.703.703a.701.701 0 01-.703-.703c0-.39.313-.703.703-.703zm2.813 8.906a.235.235 0 01-.235.235h-1.64v1.64a.235.235 0 01-.235.235H4.922a.235.235 0 01-.234-.235v-1.64H3.046a.235.235 0 01-.235-.235V8.782c0-.129.106-.234.235-.234h1.64v-1.64c0-.13.106-.235.235-.235h1.406c.129 0 .234.105.234.234v1.64h1.641c.129 0 .235.106.235.235v1.406zm0-5.625a.235.235 0 01-.235.235H3.047a.235.235 0 01-.235-.235v-.468c0-.13.106-.235.235-.235h5.156c.129 0 .235.106.235.235v.468z"
fill="currentColor"
/>
</svg>
)
}

20
app/components/icons/plus.tsx Normal file
View File

@ -0,0 +1,20 @@
import type { JSX, SVGProps } from 'react'
export const PlusIcon = (
properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
) => {
return (
<svg
width={14}
height={14}
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...properties}
>
<path
d="M6 8H1a.965.965 0 01-.712-.288A.972.972 0 010 7c0-.283.095-.52.288-.712A.97.97 0 011 6h5V1c0-.283.096-.52.288-.712A.972.972 0 017 0c.283 0 .52.095.713.288A.96.96 0 018 1v5h5c.283 0 .521.096.713.288.192.192.288.43.287.712 0 .283-.097.52-.288.713A.957.957 0 0113 8H8v5a.968.968 0 01-.288.713A.964.964 0 017 14a.973.973 0 01-.712-.288A.965.965 0 016 13V8z"
fill="currentColor"
/>
</svg>
)
}

14
app/layouts/news/banner.tsx → app/components/ui/banner.tsx
View File

@ -1,12 +1,10 @@
import Autoplay from 'embla-carousel-autoplay' import Autoplay from 'embla-carousel-autoplay'
import useEmblaCarousel from 'embla-carousel-react' import useEmblaCarousel from 'embla-carousel-react'
import { Link, useRouteLoaderData } from 'react-router' import { Link } from 'react-router'
import type { loader } from '~/routes/_news' import { BANNER } from '~/data/contents'
export const Banner = () => { export const Banner = () => {
const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
const { adsData } = loaderData || {}
const [emblaReference] = useEmblaCarousel({ loop: true }, [Autoplay()]) const [emblaReference] = useEmblaCarousel({ loop: true }, [Autoplay()])
return ( return (
@ -17,7 +15,7 @@ export const Banner = () => {
ref={emblaReference} ref={emblaReference}
> >
<div className="embla__container flex"> <div className="embla__container flex">
{adsData?.map(({ image_url: urlImage, url: link, id }, index) => ( {BANNER.map(({ urlImage, alt, link }, index) => (
<div <div
key={index} key={index}
className="embla__slide max-h-[100px] min-h-[65px] w-full min-w-0 flex-none" className="embla__slide max-h-[100px] min-h-[65px] w-full min-w-0 flex-none"
@ -25,13 +23,11 @@ export const Banner = () => {
<Link <Link
to={link} to={link}
className="mt-2 h-full py-2" className="mt-2 h-full py-2"
target="_blank"
rel="noopener noreferrer"
> >
<img <img
src={urlImage} src={urlImage}
alt={id} alt={alt}
className="h-[70px] w-[100%] object-contain object-center sm:h-full" className="h-[70px] w-[100%] content-center sm:h-full"
/> />
</Link> </Link>
</div> </div>

4
app/components/ui/button.tsx
View File

@ -11,8 +11,6 @@ const buttonVariants = cva(
variant: { variant: {
newsPrimary: newsPrimary:
'bg-[#2E2F7C] text-white text-lg hover:bg-[#4C5CA0] hover:shadow transition active:bg-[#6970B4]', 'bg-[#2E2F7C] text-white text-lg hover:bg-[#4C5CA0] hover:shadow transition active:bg-[#6970B4]',
newsDanger:
'bg-red-500 text-white text-lg hover:bg-red-600 hover:shadow transition active:bg-red-700',
newsPrimaryOutline: newsPrimaryOutline:
'border-[3px] bg-[#2E2F7C] border-white text-white text-lg hover:bg-[#4C5CA0] hover:shadow-lg active:shadow-2xl transition active:bg-[#6970B4]', 'border-[3px] bg-[#2E2F7C] border-white text-white text-lg hover:bg-[#4C5CA0] hover:shadow-lg active:shadow-2xl transition active:bg-[#6970B4]',
newsSecondary: newsSecondary:
@ -23,7 +21,7 @@ const buttonVariants = cva(
size: { size: {
default: 'h-[50px] w-[150px]', default: 'h-[50px] w-[150px]',
block: 'h-[50px] w-full', block: 'h-[50px] w-full',
icon: 'h-9 w-9 rounded-full', icon: 'h-9 w-9',
sm: 'h-8 rounded-md px-3 text-xs', sm: 'h-8 rounded-md px-3 text-xs',
lg: 'h-10 rounded-md px-8', lg: 'h-10 rounded-md px-8',
fit: 'w-fit', fit: 'w-fit',

23
app/components/ui/color-badge.tsx
View File

@ -1,23 +0,0 @@
export type TColorBadge =
| 'baru'
| 'premium'
| 'pembayaran'
| 'active'
| 'inactive'
| 'expired'
| 1
| 0
export const getStatusBadge = (status: TColorBadge) => {
const statusColors = {
baru: 'bg-[#DFE5FF] text-[#4C5CA0]',
premium: 'bg-[#FFFCAF] text-[#DBCA6E]',
pembayaran: 'bg-[#FEC4FF] text-[#CC6EDB]',
active: 'bg-[#D1FAE5] text-[#10B981]',
inactive: 'bg-[#FEE2E2] text-[#EF4444]',
expired: 'bg-[#FEC4FF] text-[#CC6EDB]',
1: 'bg-[#DFE5FF] text-[#4C5CA0]',
0: 'bg-[#FEE2E2] text-[#EF4444]',
}
return statusColors[status] || 'bg-gray-200 text-gray-700'
}

27
app/components/ui/input-file.tsx
View File

@ -1,7 +1,13 @@
import { Field, Label, Input as HeadlessInput } from '@headlessui/react' import { Field, Label, Input as HeadlessInput } from '@headlessui/react'
import { CloudArrowUpIcon } from '@heroicons/react/20/solid' import { CloudArrowUpIcon } from '@heroicons/react/20/solid'
import { useEffect, type ComponentProps, type ReactNode } from 'react' import { useEffect, type ComponentProps, type ReactNode } from 'react'
import { get, type FieldError, type RegisterOptions } from 'react-hook-form' import {
get,
type FieldError,
type FieldValues,
type Path,
type RegisterOptions,
} from 'react-hook-form'
import { useRemixFormContext } from 'remix-hook-form' import { useRemixFormContext } from 'remix-hook-form'
import { twMerge } from 'tailwind-merge' import { twMerge } from 'tailwind-merge'
@ -9,17 +15,21 @@ import { useAdminContext, type TUpload } from '~/contexts/admin'
import { Button } from './button' import { Button } from './button'
type TInputProperties = Omit<ComponentProps<'input'>, 'size'> & { type TInputProperties<T extends FieldValues> = Omit<
ComponentProps<'input'>,
'size'
> & {
id: string id: string
label?: ReactNode label?: ReactNode
name: string name: Path<T>
rules?: RegisterOptions rules?: RegisterOptions
containerClassName?: string containerClassName?: string
labelClassName?: string labelClassName?: string
category: TUpload
} }
export const InputFile = (properties: TInputProperties) => { export const InputFile = <TFormValues extends Record<string, unknown>>(
properties: TInputProperties<TFormValues>,
) => {
const { const {
id, id,
label, label,
@ -30,7 +40,6 @@ export const InputFile = (properties: TInputProperties) => {
className, className,
containerClassName, containerClassName,
labelClassName, labelClassName,
category,
...restProperties ...restProperties
} = properties } = properties
const { setIsUploadOpen, uploadedFile, setUploadedFile, isUploadOpen } = const { setIsUploadOpen, uploadedFile, setUploadedFile, isUploadOpen } =
@ -45,8 +54,8 @@ export const InputFile = (properties: TInputProperties) => {
const error: FieldError = get(errors, name) const error: FieldError = get(errors, name)
useEffect(() => { useEffect(() => {
if (uploadedFile && isUploadOpen === (category || name)) { if (uploadedFile && isUploadOpen === name) {
setValue(name, uploadedFile) setValue(name as string, uploadedFile)
setUploadedFile(undefined) setUploadedFile(undefined)
setIsUploadOpen(undefined) setIsUploadOpen(undefined)
} }
@ -77,7 +86,7 @@ export const InputFile = (properties: TInputProperties) => {
size="fit" size="fit"
className="absolute right-3 h-[42px]" className="absolute right-3 h-[42px]"
onClick={() => { onClick={() => {
setIsUploadOpen(category) setIsUploadOpen(name as TUpload)
}} }}
> >
<CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" /> <CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />

51
app/data/contents.ts Normal file
View File

@ -0,0 +1,51 @@
type TBanner = {
id: number
urlImage: string
alt: string
link: string
status: 'active' | 'draft' | 'inactive'
createdAt?: string
}
export const BANNER: TBanner[] = [
{
id: 1,
urlImage: '/images/banner.png',
alt: 'banner',
link: '/category/spotlight',
status: 'active',
createdAt: '2021-08-01',
},
{
id: 2,
urlImage: 'https://placehold.co/1000x65.png',
alt: 'banner',
status: 'draft',
link: '/#',
createdAt: '2021-08-01',
},
{
id: 3,
urlImage: 'https://placehold.co/1000x65.png',
alt: 'banner',
status: 'draft',
link: '/#',
createdAt: '2021-08-01',
},
{
id: 4,
urlImage: '/images/banner.png',
alt: 'banner',
link: '/#',
status: 'active',
createdAt: '2021-08-01',
},
{
id: 5,
urlImage: '/images/banner.png',
alt: 'banner',
link: '/#',
status: 'inactive',
createdAt: '2021-08-01',
},
]

2
app/layouts/admin/default.tsx
View File

@ -1,12 +1,10 @@
import type { PropsWithChildren } from 'react' import type { PropsWithChildren } from 'react'
import { Toaster } from 'react-hot-toast'
export const AdminDefaultLayout = (properties: PropsWithChildren) => { export const AdminDefaultLayout = (properties: PropsWithChildren) => {
const { children } = properties const { children } = properties
return ( return (
<main className="font-admin relative min-h-dvh bg-[#F7F8FC]"> <main className="font-admin relative min-h-dvh bg-[#F7F8FC]">
{children} {children}
<Toaster />
</main> </main>
) )
} }

22
app/layouts/admin/menu.ts
View File

@ -1,15 +1,15 @@
import { import {
ChartBarSquareIcon,
ClipboardDocumentCheckIcon, ClipboardDocumentCheckIcon,
DocumentCurrencyDollarIcon, DocumentCurrencyDollarIcon,
MegaphoneIcon,
NewspaperIcon,
PresentationChartLineIcon,
TagIcon, TagIcon,
UsersIcon,
} from '@heroicons/react/20/solid' } from '@heroicons/react/20/solid'
import type { SVGProps } from 'react' import type { SVGProps } from 'react'
import { ChartIcon } from '~/components/icons/chart'
import { ChatIcon } from '~/components/icons/chat'
import { DocumentIcon } from '~/components/icons/document'
import { MedicalNotesIcon } from '~/components/icons/medical-notes'
type TMenu = { type TMenu = {
group: string group: string
items: { items: {
@ -26,27 +26,27 @@ export const MENU: TMenu[] = [
{ {
title: 'Dashboard', title: 'Dashboard',
url: '/lg-admin', url: '/lg-admin',
icon: ChartBarSquareIcon, icon: ChartIcon,
}, },
{ {
title: 'User', title: 'User',
url: '/lg-admin/users', url: '/lg-admin/users',
icon: UsersIcon, icon: DocumentIcon,
}, },
{ {
title: 'Artikel', title: 'Artikel',
url: '/lg-admin/contents', url: '/lg-admin/contents',
icon: NewspaperIcon, icon: ChatIcon,
}, },
{ {
title: 'Banner Iklan', title: 'Advertisement',
url: '/lg-admin/advertisements', url: '/lg-admin/advertisements',
icon: MegaphoneIcon, icon: MedicalNotesIcon,
}, },
{ {
title: 'Subscription', title: 'Subscription',
url: '/lg-admin/subscriptions', url: '/lg-admin/subscriptions',
icon: PresentationChartLineIcon, icon: ChartIcon,
}, },
], ],
}, },

5
app/layouts/news/default.tsx
View File

@ -1,10 +1,9 @@
import { type PropsWithChildren } from 'react' import { type PropsWithChildren } from 'react'
import { Toaster } from 'react-hot-toast'
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'
@ -45,8 +44,6 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
<FooterLinks /> <FooterLinks />
</footer> </footer>
<Toaster />
<PopupModal <PopupModal
isOpen={isLoginOpen} isOpen={isLoginOpen}
onClose={() => setIsLoginOpen(false)} onClose={() => setIsLoginOpen(false)}

97
app/pages/dashboard-advertisements/dialog-delete.tsx
View File

@ -1,97 +0,0 @@
import {
Description,
Dialog,
DialogBackdrop,
DialogPanel,
DialogTitle,
} from '@headlessui/react'
import { useEffect, type Dispatch, type SetStateAction } from 'react'
import toast from 'react-hot-toast'
import { Link, useFetcher } from 'react-router'
import type { TAdResponse } from '~/apis/common/get-ads'
import { Button } from '~/components/ui/button'
type TProperties = {
selectedAds?: TAdResponse
setSelectedAds: Dispatch<SetStateAction<TAdResponse | undefined>>
}
export const DialogDelete = (properties: TProperties) => {
const { selectedAds, setSelectedAds } = properties || {}
const fetcher = useFetcher()
useEffect(() => {
if (fetcher.data?.success === false) {
toast.error(fetcher.data?.message)
return
}
if (fetcher.data?.success === true) {
setSelectedAds(undefined)
toast.success('Banner iklan berhasil dihapus!')
return
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [fetcher.data])
return (
<Dialog
open={!!selectedAds}
onClose={() => {
if (fetcher.state === 'idle') {
setSelectedAds(undefined)
}
}}
className="relative z-50"
transition
>
<DialogBackdrop
className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
transition
/>
<div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm:p-4">
<DialogPanel
transition
className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg"
>
<DialogTitle className="relative flex justify-start text-xl font-bold">
Anda akan menghapus banner berikut?
</DialogTitle>
<Description className="space-y-1 text-center text-[#565658]">
<img
src={selectedAds?.image_url}
alt={selectedAds?.image_url}
className="aspect-[150/1] h-[50px] rounded object-contain"
/>
<Button
as={Link}
to={selectedAds?.url || ''}
variant="link"
size="fit"
>
{selectedAds?.url}
</Button>
</Description>
<div className="flex justify-end">
<fetcher.Form
method="POST"
action={`/actions/admin/advertisements/delete/${selectedAds?.id}`}
className="grid"
>
<Button
type="submit"
variant="newsDanger"
className="text-md h-[42px] rounded-md"
disabled={fetcher.state !== 'idle'}
isLoading={fetcher.state !== 'idle'}
>
Hapus
</Button>
</fetcher.Form>
</div>
</DialogPanel>
</div>
</Dialog>
)
}

246
app/pages/dashboard-advertisements/index.tsx
View File

@ -1,107 +1,195 @@
import { import { Field, Input, Label, Select } from '@headlessui/react'
PencilSquareIcon, import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
PlusIcon,
TrashIcon,
} from '@heroicons/react/20/solid'
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 { useState } from 'react' import { useState } from 'react'
import { Link, useRouteLoaderData } from 'react-router' import { twMerge } from 'tailwind-merge'
import type { TAdResponse } from '~/apis/common/get-ads' import { PlusIcon } from '~/components/icons/plus'
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 type { loader } from '~/routes/_admin.lg-admin._dashboard.advertisements._index' import { BANNER } from '~/data/contents'
import { DialogDelete } from './dialog-delete' type BannerUploadProperties = {
onBannerChange?: (file: File | undefined) => void
onLinkChange?: (link: string) => void
}
type TStatusColors = 'draft' | 'active' | 'inactive'
export const AdvertisementsPage = () => { export const AdvertisementsPage = ({
const loaderData = useRouteLoaderData<typeof loader>( onBannerChange,
'routes/_admin.lg-admin._dashboard.advertisements._index', onLinkChange,
) }: BannerUploadProperties) => {
const { adsData: dataTable } = loaderData || {} const [banner, setBanner] = useState<File | null>()
const [selectedAds, setSelectedAds] = useState<TAdResponse>() const [link, setLink] = useState<string>('')
const [listAdvertisement, setListAdvertisement] = useState(true)
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0] || undefined
setBanner(file)
onBannerChange?.(file)
}
const handleLinkChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const newLink = event.target.value
setLink(newLink)
onLinkChange?.(newLink)
}
const dataBanner = BANNER
const dataColumns: ConfigColumns[] = [ const dataColumns: ConfigColumns[] = [
{ { title: 'No', data: 'id' },
title: 'No', { title: 'Banner', data: 'urlImage' },
render: ( { title: 'Link', data: 'link' },
_data: unknown, { title: 'Tgl Create', data: 'createdAt' },
_type: unknown, { title: 'Status', data: 'status' },
_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) => {
return ( return (
<img <div>
src={value} <img
alt={value} src={value}
className="aspect-[150/1] h-[50px] rounded object-contain" alt={`banner - ${value}`}
/> className="aspect-[15/1] h-[50px] max-w-[200px] rounded"
/>
</div>
) )
}, },
3: (value: string, _type: unknown, data: TAdResponse) => ( 4: (value: string) => {
<div className="flex space-x-2"> const statusColors = {
<Button draft: 'bg-gray-300',
as="a" active: 'bg-[#04D182]',
href={`/lg-admin/advertisements/update/${value}`} inactive: 'bg-[#F96D19]',
className="" }
size="icon" const status = value as TStatusColors
title="Update Banner Iklan" return (
<span
className={twMerge(
'rounded-md px-2 py-1 text-sm',
status ? statusColors[status] : '',
)}
> >
<PencilSquareIcon className="h-4 w-4" /> {status}
</Button> </span>
<Button )
type="button" },
size="icon" }
variant="newsDanger"
onClick={() => setSelectedAds(data)} const switchView = () => {
title="Hapus Banner Iklan" setListAdvertisement(!listAdvertisement)
>
<TrashIcon className="h-4 w-4" />
</Button>
</div>
),
} }
return ( return (
<div className="relative"> <div className="relative">
<TitleDashboard title="Banner Iklan" /> <TitleDashboard title="Advertisement" />
<div className="mb-8 flex items-end justify-between gap-5"> {!listAdvertisement && (
<div className="flex-1">{/* TODO: Filter */}</div> <div className="flex gap-5">
<Button <div className="w-[400px] rounded-xl bg-gray-50 py-6">
as={Link} <Field className="mb-6">
to="/lg-admin/advertisements/create" <Label className="mb-2 block text-sm font-bold text-gray-700">
size="lg" Banner Design
> </Label>
<PlusIcon className="h-8 w-8" /> Buat Banner Iklan <Label
</Button> htmlFor="banner-upload"
</div> className="flex cursor-pointer items-center justify-between rounded-lg border-2 border-gray-300 p-3 hover:bg-gray-100 focus:ring-[#5363AB]"
>
<span className="text-gray-500">
{banner ? banner.name : 'Upload Banner'}
</span>
<PlusIcon className="h-4 w-4 text-gray-500" />
</Label>
<Input
id="banner-upload"
type="file"
accept="image/*"
// className="hidden"
onChange={handleFileChange}
aria-label="Upload Banner"
/>
</Field>
<UiTable <Field>
data={dataTable} <Label className="mb-2 block text-sm font-bold text-gray-700">
columns={dataColumns} Link Banner
slots={dataSlot} </Label>
title="Daftar Banner Iklan" <Input
/> type="text"
placeholder="Link Banner"
className="w-full rounded-lg border-2 border-gray-300 p-3 hover:bg-gray-100 focus:ring-2 focus:ring-[#5363AB] focus:outline-none"
value={link}
onChange={handleLinkChange}
aria-label="Link Banner"
/>
</Field>
</div>
{banner && (
<div className="h-[100px] w-[200px] shadow-2xl">
<div className="mb-4">
<img
src={URL.createObjectURL(banner)}
alt="Banner Preview"
className="h-max-[350px] rasio-15-1 w-full rounded-lg"
/>
</div>
</div>
)}
</div>
)}
<DialogDelete {listAdvertisement && (
selectedAds={selectedAds} <>
setSelectedAds={setSelectedAds} <div className="mb-8 flex items-end justify-between">
/> <div className="flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">
<div className="w-[400px]">
<Field>
<Label className="mb-2 block text-sm font-medium">
Cari Banner
</Label>
<div className="relative">
<Input
type="text"
placeholder="Cari Nama"
className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
/>
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
<MagnifyingGlassIcon className="h-5 w-5" />
</div>
</div>
</Field>
</div>
<div className="w-[235px]">
<Field>
<Label className="mb-2 block text-sm font-medium">
Status
</Label>
<Select className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none">
<option>Pilih Status</option>
<option>Aktif</option>
<option>Nonaktif</option>
</Select>
</Field>
</div>
</div>
<Button
onClick={switchView}
className="text-md rounded-md"
size="lg"
>
Create New
</Button>
</div>
<UiTable
data={dataBanner}
columns={dataColumns}
slots={dataSlot}
title="Daftar Banner"
/>
</>
)}
</div> </div>
) )
} }

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

@ -7,7 +7,6 @@ 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 type { loader } from '~/routes/_admin.lg-admin._dashboard' import type { loader } from '~/routes/_admin.lg-admin._dashboard'
export const CategoriesPage = () => { export const CategoriesPage = () => {
const loaderData = useRouteLoaderData<typeof loader>( const loaderData = useRouteLoaderData<typeof loader>(
'routes/_admin.lg-admin._dashboard', 'routes/_admin.lg-admin._dashboard',

11
app/pages/dashboard-contents/index.tsx
View File

@ -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 { TAuthor } from '~/apis/common/get-news' import type { TNewsResponse } 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,7 +39,6 @@ export const ContentsPage = () => {
}, },
{ {
title: 'Penulis', title: 'Penulis',
data: 'author',
}, },
{ title: 'Judul', data: 'title' }, { title: 'Judul', data: 'title' },
{ {
@ -58,10 +57,12 @@ export const ContentsPage = () => {
] ]
const dataSlot: DataTableSlots = { const dataSlot: DataTableSlots = {
1: (value: string) => formatDate(value), 1: (value: string) => formatDate(value),
2: (value: TAuthor) => ( 2: (_value: unknown, _type: unknown, data: TNewsResponse) => (
<div> <div>
<div>{value.name}</div> <div>{data.author.name}</div>
<div className="text-sm text-[#7C7C7C]">ID: {value.id.slice(0, 8)}</div> <div className="text-sm text-[#7C7C7C]">
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>,

27
app/pages/dashboard-plan-subscribe/index.tsx
View File

@ -3,11 +3,9 @@ import DataTable from 'datatables.net-react'
import { Link, useRouteLoaderData } from 'react-router' import { Link, useRouteLoaderData } from 'react-router'
import { Button } from '~/components/ui/button' import { Button } from '~/components/ui/button'
import { getStatusBadge, type TColorBadge } from '~/components/ui/color-badge'
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 type { loader } from '~/routes/_admin.lg-admin._dashboard.subscribe-plan._index' import type { loader } from '~/routes/_admin.lg-admin._dashboard.subscribe-plan._index'
import { formatNumberWithPeriods } from '~/utils/formatter'
export const SubscribePlanPage = () => { export const SubscribePlanPage = () => {
const loaderData = useRouteLoaderData<typeof loader>( const loaderData = useRouteLoaderData<typeof loader>(
@ -16,7 +14,6 @@ export const SubscribePlanPage = () => {
DataTable.use(DT) DataTable.use(DT)
const { subscriptionsData: dataTable } = loaderData || {} const { subscriptionsData: dataTable } = loaderData || {}
const dataColumns = [ const dataColumns = [
{ {
title: 'No', title: 'No',
@ -37,35 +34,13 @@ export const SubscribePlanPage = () => {
title: 'Kode', title: 'Kode',
data: 'code', data: 'code',
}, },
{
title: 'Length',
data: 'length',
},
{
title: 'Price',
data: 'price',
},
{
title: 'Status',
data: 'status',
},
{ {
title: 'Action', title: 'Action',
data: 'id', data: 'id',
}, },
] ]
const dataSlot = { const dataSlot = {
4: (value: number) => ( 3: (value: string) => (
<div className="text-right">Rp. {formatNumberWithPeriods(value)}</div>
),
5: (value: number) => (
<span
className={`rounded-lg px-2 text-sm ${getStatusBadge(value as TColorBadge)}`}
>
{value === 1 ? 'Active' : 'Inactive'}
</span>
),
6: (value: string) => (
<Button <Button
as="a" as="a"
href={`/lg-admin/subscribe-plan/update/${value}`} href={`/lg-admin/subscribe-plan/update/${value}`}

17
app/pages/dashboard-users/index.tsx
View File

@ -3,12 +3,21 @@ import DataTable, { type DataTableSlots } from 'datatables.net-react'
import { useRouteLoaderData } from 'react-router' import { useRouteLoaderData } from 'react-router'
import type { TUserResponse } from '~/apis/admin/get-users' import type { TUserResponse } from '~/apis/admin/get-users'
import { getStatusBadge, type TColorBadge } from '~/components/ui/color-badge'
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 type { loader } from '~/routes/_admin.lg-admin._dashboard.users._index' import type { loader } from '~/routes/_admin.lg-admin._dashboard.users._index'
import { formatDate } from '~/utils/formatter' import { formatDate } from '~/utils/formatter'
type TColorBadge = 'Baru' | 'Premium' | 'Pembayaran'
const getStatusBadge = (status: TColorBadge) => {
const statusColors = {
Baru: 'bg-[#DFE5FF] text-[#4C5CA0]',
Premium: 'bg-[#FFFCAF] text-[#DBCA6E]',
Pembayaran: 'bg-[#FEC4FF] text-[#CC6EDB]',
}
return statusColors[status] || 'bg-gray-200 text-gray-700'
}
export const UsersPage = () => { export const UsersPage = () => {
const loaderData = useRouteLoaderData<typeof loader>( const loaderData = useRouteLoaderData<typeof loader>(
'routes/_admin.lg-admin._dashboard.users._index', 'routes/_admin.lg-admin._dashboard.users._index',
@ -63,10 +72,8 @@ export const UsersPage = () => {
</div> </div>
), ),
4: (_value: string) => <span className="text-sm">Pribadi</span>, 4: (_value: string) => <span className="text-sm">Pribadi</span>,
5: (value: TColorBadge, _type: unknown, data: TUserResponse) => ( 5: (value: TColorBadge) => (
<span <span className={`rounded-lg px-2 text-sm ${getStatusBadge(value)}`}>
className={`rounded-lg px-2 text-sm ${getStatusBadge(data.subscribe.status as TColorBadge)}`}
>
{value} {value}
</span> </span>
), ),

105
app/pages/form-advertisements/index.tsx
View File

@ -1,105 +0,0 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { useEffect } from 'react'
import toast from 'react-hot-toast'
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 { handleSubmit } = formMethods
useEffect(() => {
if (fetcher.data?.success === false) {
toast.error(fetcher.data?.message)
return
}
if (fetcher.data?.success === true) {
toast.success(`Banner iklan berhasil ${adData ? 'diupdate' : 'dibuat'}!`)
navigate('/lg-admin/advertisements')
return
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [fetcher.data])
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"
>
<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"
category="ads"
/>
<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>
)
}

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

@ -1,6 +1,5 @@
import { zodResolver } from '@hookform/resolvers/zod' import { zodResolver } from '@hookform/resolvers/zod'
import { useEffect } from 'react' import { useEffect, useState } from 'react'
import toast from 'react-hot-toast'
import { useFetcher, useNavigate } from 'react-router' import { useFetcher, useNavigate } from 'react-router'
import { RemixFormProvider, useRemixForm } from 'remix-hook-form' import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
import { z } from 'zod' import { z } from 'zod'
@ -11,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 categorySchema = z.object({ export const createCategorySchema = 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 categorySchema> export type TCategorySchema = z.infer<typeof createCategorySchema>
type TProperties = { type TProperties = {
categoryData?: TCategoryResponse categoryData?: TCategoryResponse
} }
@ -30,7 +29,7 @@ export const FormCategoryPage = (properties: TProperties) => {
const formMethods = useRemixForm<TCategorySchema>({ const formMethods = useRemixForm<TCategorySchema>({
mode: 'onSubmit', mode: 'onSubmit',
fetcher, fetcher,
resolver: zodResolver(categorySchema), resolver: zodResolver(createCategorySchema),
values: { values: {
id: categoryData?.id || undefined, id: categoryData?.id || undefined,
code: categoryData?.code || '', code: categoryData?.code || '',
@ -39,25 +38,20 @@ export const FormCategoryPage = (properties: TProperties) => {
description: categoryData?.description || '', description: categoryData?.description || '',
}, },
}) })
const [error, setError] = useState<string>()
const { handleSubmit, watch, setValue } = formMethods const { handleSubmit, watch, setValue } = formMethods
const watchName = watch('name') const watchName = watch('name')
useEffect(() => { useEffect(() => {
if (fetcher.data?.success === false) { if (!fetcher.data?.success) {
toast.error(fetcher.data?.message) setError(fetcher.data?.message)
return
}
if (fetcher.data?.success === true) {
toast.success(
`Kategori berhasil ${categoryData ? 'diupdate' : 'dibuat'}!`,
)
navigate('/lg-admin/categories')
return return
} }
navigate('/lg-admin/categories')
setError(undefined)
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [fetcher.data]) }, [fetcher])
useEffect(() => { useEffect(() => {
setValue('code', urlFriendlyCode(watchName)) setValue('code', urlFriendlyCode(watchName))
@ -75,6 +69,9 @@ export const FormCategoryPage = (properties: TProperties) => {
action={`/actions/admin/categories/${categoryData ? 'update' : 'create'}`} action={`/actions/admin/categories/${categoryData ? 'update' : 'create'}`}
className="space-y-4" className="space-y-4"
> >
{error && (
<div className="text-sm text-red-500 capitalize">{error}</div>
)}
<div className="flex items-end justify-between gap-4"> <div className="flex items-end justify-between gap-4">
<Input <Input
id="name" id="name"

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

@ -1,7 +1,6 @@
import { DevTool } from '@hookform/devtools' import { DevTool } from '@hookform/devtools'
import { zodResolver } from '@hookform/resolvers/zod' import { zodResolver } from '@hookform/resolvers/zod'
import { useEffect } from 'react' import { useEffect, useState } from 'react'
import toast from 'react-hot-toast'
import { useFetcher, useNavigate, useRouteLoaderData } from 'react-router' import { useFetcher, useNavigate, useRouteLoaderData } from 'react-router'
import { RemixFormProvider, useRemixForm } from 'remix-hook-form' import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
import { z } from 'zod' import { z } from 'zod'
@ -73,6 +72,7 @@ export const FormContentsPage = (properties: TProperties) => {
) )
const { categoriesData: categories } = loaderData || {} const { categoriesData: categories } = loaderData || {}
const { tagsData: tags } = loaderData || {} const { tagsData: tags } = loaderData || {}
const [error, setError] = useState<string>()
const formMethods = useRemixForm<TContentSchema>({ const formMethods = useRemixForm<TContentSchema>({
mode: 'onSubmit', mode: 'onSubmit',
@ -97,18 +97,15 @@ export const FormContentsPage = (properties: TProperties) => {
const watchTags = watch('tags') const watchTags = watch('tags')
useEffect(() => { useEffect(() => {
if (fetcher.data?.success === false) { if (!fetcher.data?.success) {
toast.error(fetcher.data?.message) setError(fetcher.data?.message)
return return
} }
if (fetcher.data?.success === true) { navigate('/lg-admin/contents')
toast.success(`Artikel berhasil ${newsData ? 'diupdate' : 'dibuat'}!`) setError(undefined)
navigate('/lg-admin/contents')
return
}
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [fetcher.data]) }, [fetcher])
return ( return (
<div className="relative"> <div className="relative">
@ -120,6 +117,9 @@ export const FormContentsPage = (properties: TProperties) => {
action={`/actions/admin/contents/${newsData ? 'update' : 'create'}`} action={`/actions/admin/contents/${newsData ? 'update' : 'create'}`}
className="space-y-4" className="space-y-4"
> >
{error && (
<div className="text-sm text-red-500 capitalize">{error}</div>
)}
<div className="flex items-end justify-between gap-4"> <div className="flex items-end justify-between gap-4">
<Input <Input
id="title" id="title"
@ -139,7 +139,6 @@ export const FormContentsPage = (properties: TProperties) => {
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 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]" labelClassName="text-sm font-medium text-[#363636]"
containerClassName="flex-1" containerClassName="flex-1"
category="featured_image"
/> />
<Button <Button
isLoading={fetcher.state !== 'idle'} isLoading={fetcher.state !== 'idle'}

31
app/pages/form-subscriptions-plan/index.tsx
View File

@ -1,7 +1,6 @@
import { Field, Label, Select } from '@headlessui/react' import { Field, Label, Select } from '@headlessui/react'
import { zodResolver } from '@hookform/resolvers/zod' import { zodResolver } from '@hookform/resolvers/zod'
import { useEffect } from 'react' import { useEffect, useState } from 'react'
import toast from 'react-hot-toast'
import { useFetcher, useNavigate } from 'react-router' import { useFetcher, useNavigate } from 'react-router'
import { RemixFormProvider, useRemixForm } from 'remix-hook-form' import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
import { z } from 'zod' import { z } from 'zod'
@ -11,15 +10,15 @@ 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 subscribePlanSchema = z.object({ export const createSubscribePlanSchema = 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(),
length: z.preprocess(Number, z.number().optional()), length: z.preprocess(Number, z.number().optional()),
price: z.preprocess(Number, z.number().optional()), price: z.preprocess(Number, z.number().optional()),
status: z.number().optional(), status: z.boolean().optional(),
}) })
export type TSubscribePlanSchema = z.infer<typeof subscribePlanSchema> export type TSubscribePlanSchema = z.infer<typeof createSubscribePlanSchema>
type TProperties = { type TProperties = {
subscribePlanData?: TSubscribePlanSchema subscribePlanData?: TSubscribePlanSchema
} }
@ -31,7 +30,7 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
const formMethods = useRemixForm<TSubscribePlanSchema>({ const formMethods = useRemixForm<TSubscribePlanSchema>({
mode: 'onSubmit', mode: 'onSubmit',
fetcher, fetcher,
resolver: zodResolver(subscribePlanSchema), resolver: zodResolver(createSubscribePlanSchema),
values: { values: {
id: subscribePlanData?.id || undefined, id: subscribePlanData?.id || undefined,
code: subscribePlanData?.code || '', code: subscribePlanData?.code || '',
@ -41,25 +40,20 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
status: subscribePlanData?.status || undefined, status: subscribePlanData?.status || undefined,
}, },
}) })
const [error, setError] = useState<string>()
const { handleSubmit, watch, setValue } = formMethods const { handleSubmit, watch, setValue } = formMethods
const watchName = watch('name') const watchName = watch('name')
useEffect(() => { useEffect(() => {
if (fetcher.data?.success === false) { if (!fetcher.data?.success) {
toast.error(fetcher.data?.message) setError(fetcher.data?.message)
return
}
if (fetcher.data?.success === true) {
toast.success(
`Subscribe Plan berhasil ${subscribePlanData ? 'diupdate' : 'dibuat'}!`,
)
navigate('/lg-admin/subscribe-plan')
return return
} }
navigate('/lg-admin/subscribe-plan')
setError(undefined)
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [fetcher.data]) }, [fetcher])
useEffect(() => { useEffect(() => {
setValue('code', urlFriendlyCode(watchName)) setValue('code', urlFriendlyCode(watchName))
@ -79,6 +73,9 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
action={`/actions/admin/subscribe-plan/${subscribePlanData ? 'update' : 'create'}`} action={`/actions/admin/subscribe-plan/${subscribePlanData ? 'update' : 'create'}`}
className="space-y-4" className="space-y-4"
> >
{error && (
<div className="text-sm text-red-500 capitalize">{error}</div>
)}
<div className="flex items-end justify-between gap-4"> <div className="flex items-end justify-between gap-4">
<Input <Input
id="name" id="name"

27
app/pages/form-tag/index.tsx
View File

@ -1,6 +1,5 @@
import { zodResolver } from '@hookform/resolvers/zod' import { zodResolver } from '@hookform/resolvers/zod'
import { useEffect } from 'react' import { useEffect, useState } from 'react'
import toast from 'react-hot-toast'
import { useFetcher, useNavigate } from 'react-router' import { useFetcher, useNavigate } from 'react-router'
import { RemixFormProvider, useRemixForm } from 'remix-hook-form' import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
import { z } from 'zod' import { z } from 'zod'
@ -11,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 tagSchema = z.object({ export const createTagSchema = 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 tagSchema> export type TTagSchema = z.infer<typeof createTagSchema>
type TProperties = { type TProperties = {
tagData?: TTagResponse tagData?: TTagResponse
} }
@ -28,30 +27,27 @@ export const FormTagPage = (properties: TProperties) => {
const formMethods = useRemixForm<TTagSchema>({ const formMethods = useRemixForm<TTagSchema>({
mode: 'onSubmit', mode: 'onSubmit',
fetcher, fetcher,
resolver: zodResolver(tagSchema), resolver: zodResolver(createTagSchema),
values: { values: {
id: tagData?.id || undefined, id: tagData?.id || undefined,
code: tagData?.code || '', code: tagData?.code || '',
name: tagData?.name || '', name: tagData?.name || '',
}, },
}) })
const [error, setError] = useState<string>()
const { handleSubmit, watch, setValue } = formMethods const { handleSubmit, watch, setValue } = formMethods
const watchName = watch('name') const watchName = watch('name')
useEffect(() => { useEffect(() => {
if (fetcher.data?.success === false) { if (!fetcher.data?.success) {
toast.error(fetcher.data?.message) setError(fetcher.data?.message)
return
}
if (fetcher.data?.success === true) {
toast.success(`Tag berhasil ${tagData ? 'diupdate' : 'dibuat'}!`)
navigate('/lg-admin/tags')
return return
} }
navigate('/lg-admin/tags')
setError(undefined)
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [fetcher.data]) }, [fetcher])
useEffect(() => { useEffect(() => {
setValue('code', urlFriendlyCode(watchName)) setValue('code', urlFriendlyCode(watchName))
@ -69,6 +65,9 @@ export const FormTagPage = (properties: TProperties) => {
action={`/actions/admin/tags/${tagData ? 'update' : 'create'}`} action={`/actions/admin/tags/${tagData ? 'update' : 'create'}`}
className="space-y-4" className="space-y-4"
> >
{error && (
<div className="text-sm text-red-500 capitalize">{error}</div>
)}
<div className="flex items-end justify-between gap-4"> <div className="flex items-end justify-between gap-4">
<Input <Input
id="name" id="name"

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

@ -1,13 +0,0 @@
import { Card } from '~/components/ui/card'
export const NewsPaymentPage = () => {
return (
<div>
<div className="sm-max:mx-5 relative">
<Card>
<h1>Payment</h1>
</Card>
</div>
</div>
)
}

4
app/root.tsx
View File

@ -74,11 +74,11 @@ export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
} }
return ( return (
<main className="container mx-auto p-4"> <main className="container mx-auto p-4 pt-16">
<h1>{message}</h1> <h1>{message}</h1>
<p>{details}</p> <p>{details}</p>
{stack && ( {stack && (
<pre className="w-full p-4 whitespace-pre-wrap"> <pre className="w-full overflow-x-auto p-4">
<code>{stack}</code> <code>{stack}</code>
</pre> </pre>
)} )}

42
app/routes/_admin.lg-admin._dashboard.advertisements._index.tsx
View File

@ -1,42 +0,0 @@
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

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

@ -1,4 +0,0 @@
import { FormAdvertisementsPage } from '~/pages/form-advertisements'
const DashboardAdvertisementsCreateLayout = () => <FormAdvertisementsPage />
export default DashboardAdvertisementsCreateLayout

4
app/routes/_admin.lg-admin._dashboard.advertisements.tsx Normal file
View File

@ -0,0 +1,4 @@
import { AdvertisementsPage } from '~/pages/dashboard-advertisements'
const DashboardAdvertisementsLayout = () => <AdvertisementsPage />
export default DashboardAdvertisementsLayout

50
app/routes/_admin.lg-admin._dashboard.advertisements.update.$id.tsx
View File

@ -1,50 +0,0 @@
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 { id } = params
const adData = adsData.find((ads) => ads.id === 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

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

@ -1,5 +1,3 @@
import { isRouteErrorResponse } from 'react-router'
import { getCategories } from '~/apis/common/get-categories' import { getCategories } from '~/apis/common/get-categories'
import { FormCategoryPage } from '~/pages/form-category' import { FormCategoryPage } from '~/pages/form-category'
@ -7,38 +5,10 @@ import type { Route } from './+types/_admin.lg-admin._dashboard.categories.updat
export const loader = async ({ params }: Route.LoaderArgs) => { export const loader = async ({ params }: Route.LoaderArgs) => {
const { data: categoriesData } = await getCategories() const { data: categoriesData } = await getCategories()
const { id } = params const categoryData = categoriesData.find(
const categoryData = categoriesData.find((category) => category.id === id) (category) => category.id === params.id,
return { categoryData }
}
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>
) )
return { categoryData }
} }
const DashboardCategoriesUpdateLayout = ({ const DashboardCategoriesUpdateLayout = ({

31
app/routes/_admin.lg-admin._dashboard.contents._index.tsx
View File

@ -1,5 +1,3 @@
import { isRouteErrorResponse } from 'react-router'
import { getNews } from '~/apis/common/get-news' import { getNews } from '~/apis/common/get-news'
import { ContentsPage } from '~/pages/dashboard-contents' import { ContentsPage } from '~/pages/dashboard-contents'
@ -10,34 +8,5 @@ export const loader = async ({}: Route.LoaderArgs) => {
return { newsData } return { newsData }
} }
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 DashboardContentsIndexLayout = () => <ContentsPage /> const DashboardContentsIndexLayout = () => <ContentsPage />
export default DashboardContentsIndexLayout export default DashboardContentsIndexLayout

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

@ -1,5 +1,3 @@
import { isRouteErrorResponse } from 'react-router'
import { getNewsBySlug } from '~/apis/common/get-news-by-slug' import { getNewsBySlug } from '~/apis/common/get-news-by-slug'
import { handleCookie } from '~/libs/cookies' import { handleCookie } from '~/libs/cookies'
import { FormContentsPage } from '~/pages/form-contents' import { FormContentsPage } from '~/pages/form-contents'
@ -7,41 +5,14 @@ import { FormContentsPage } from '~/pages/form-contents'
import type { Route } from './+types/_admin.lg-admin._dashboard.contents.update.$slug' import type { Route } from './+types/_admin.lg-admin._dashboard.contents.update.$slug'
export const loader = async ({ request, params }: Route.LoaderArgs) => { export const loader = async ({ request, params }: Route.LoaderArgs) => {
const { staffToken: accessToken } = await handleCookie(request) const { staffToken } = await handleCookie(request)
const { slug } = params const { data: newsData } = await getNewsBySlug({
const { data: newsData } = await getNewsBySlug({ accessToken, slug }) accessToken: staffToken,
slug: params.slug,
})
return { newsData } return { newsData }
} }
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 DashboardContentUpdateLayout = ({ loaderData }: Route.ComponentProps) => { const DashboardContentUpdateLayout = ({ loaderData }: Route.ComponentProps) => {
const { newsData } = loaderData || {} const { newsData } = loaderData || {}
return <FormContentsPage newsData={newsData} /> return <FormContentsPage newsData={newsData} />

34
app/routes/_admin.lg-admin._dashboard.subscribe-plan._index.tsx
View File

@ -1,43 +1,11 @@
import { isRouteErrorResponse } from 'react-router'
import { getSubscriptions } from '~/apis/common/get-subscriptions' import { getSubscriptions } from '~/apis/common/get-subscriptions'
import { SubscribePlanPage } from '~/pages/dashboard-plan-subscribe' import { SubscribePlanPage } from '~/pages/dashboard-plan-subscribe'
import type { Route } from './+types/_admin.lg-admin._dashboard.subscribe-plan._index' import type { Route } from './+types/_admin.lg-admin._dashboard.contents._index'
export const loader = async ({}: Route.LoaderArgs) => { export const loader = async ({}: Route.LoaderArgs) => {
const { data: subscriptionsData } = await getSubscriptions() const { data: subscriptionsData } = await getSubscriptions()
return { subscriptionsData } return { subscriptionsData }
} }
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 DashboardSubscriptionsSettingsLayout = () => <SubscribePlanPage /> const DashboardSubscriptionsSettingsLayout = () => <SubscribePlanPage />
export default DashboardSubscriptionsSettingsLayout export default DashboardSubscriptionsSettingsLayout

34
app/routes/_admin.lg-admin._dashboard.subscribe-plan.update.$id.tsx
View File

@ -1,5 +1,3 @@
import { isRouteErrorResponse } from 'react-router'
import { getSubscriptions } from '~/apis/common/get-subscriptions' import { getSubscriptions } from '~/apis/common/get-subscriptions'
import { FormSubscribePlanPage } from '~/pages/form-subscriptions-plan' import { FormSubscribePlanPage } from '~/pages/form-subscriptions-plan'
@ -7,42 +5,12 @@ import type { Route } from './+types/_admin.lg-admin._dashboard.subscribe-plan.u
export const loader = async ({ params }: Route.LoaderArgs) => { export const loader = async ({ params }: Route.LoaderArgs) => {
const { data: subscribePlansData } = await getSubscriptions() const { data: subscribePlansData } = await getSubscriptions()
const { id } = params
const subscribePlanData = subscribePlansData.find( const subscribePlanData = subscribePlansData.find(
(subscribePlan) => subscribePlan.id === id, (subscribePlan) => subscribePlan.id === params.id,
) )
return { subscribePlanData } return { subscribePlanData }
} }
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 DashboardSubscribePlanUpdateLayout = ({ const DashboardSubscribePlanUpdateLayout = ({
loaderData, loaderData,
}: Route.ComponentProps) => { }: Route.ComponentProps) => {

34
app/routes/_admin.lg-admin._dashboard.tags.update.$id.tsx
View File

@ -1,5 +1,3 @@
import { isRouteErrorResponse } from 'react-router'
import { getTags } from '~/apis/common/get-tags' import { getTags } from '~/apis/common/get-tags'
import { FormTagPage } from '~/pages/form-tag' import { FormTagPage } from '~/pages/form-tag'
@ -7,40 +5,10 @@ import type { Route } from './+types/_admin.lg-admin._dashboard.tags.update.$id'
export const loader = async ({ params }: Route.LoaderArgs) => { export const loader = async ({ params }: Route.LoaderArgs) => {
const { data: tagsData } = await getTags() const { data: tagsData } = await getTags()
const { id } = params const tagData = tagsData.find((tag) => tag.id === params.id)
const tagData = tagsData.find((tag) => tag.id === id)
return { tagData } return { tagData }
} }
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 DashboardTagUpdateLayout = ({ loaderData }: Route.ComponentProps) => { const DashboardTagUpdateLayout = ({ loaderData }: Route.ComponentProps) => {
const { tagData } = loaderData || {} const { tagData } = loaderData || {}
return <FormTagPage tagData={tagData} /> return <FormTagPage tagData={tagData} />

31
app/routes/_admin.lg-admin._dashboard.tsx
View File

@ -1,4 +1,4 @@
import { isRouteErrorResponse, Outlet } from 'react-router' import { Outlet } from 'react-router'
import { getCategories } from '~/apis/common/get-categories' import { getCategories } from '~/apis/common/get-categories'
import { getTags } from '~/apis/common/get-tags' import { getTags } from '~/apis/common/get-tags'
@ -17,35 +17,6 @@ export const loader = async ({}: Route.LoaderArgs) => {
} }
} }
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 DashboardLayout = () => { const DashboardLayout = () => {
return ( return (
<AdminProvider> <AdminProvider>

37
app/routes/_admin.lg-admin._dashboard.users._index.tsx
View File

@ -1,5 +1,3 @@
import { isRouteErrorResponse } from 'react-router'
import { getUsers } from '~/apis/admin/get-users' import { getUsers } from '~/apis/admin/get-users'
import { handleCookie } from '~/libs/cookies' import { handleCookie } from '~/libs/cookies'
import { UsersPage } from '~/pages/dashboard-users' import { UsersPage } from '~/pages/dashboard-users'
@ -7,40 +5,13 @@ import { UsersPage } from '~/pages/dashboard-users'
import type { Route } from './+types/_admin.lg-admin._dashboard.users._index' import type { Route } from './+types/_admin.lg-admin._dashboard.users._index'
export const loader = async ({ request }: Route.LoaderArgs) => { export const loader = async ({ request }: Route.LoaderArgs) => {
const { staffToken: accessToken } = await handleCookie(request) const { staffToken } = await handleCookie(request)
const { data: usersData } = await getUsers({ accessToken }) const { data: usersData } = await getUsers({
accessToken: staffToken,
})
return { usersData } return { usersData }
} }
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 DashboardUsersLayout = () => <UsersPage /> const DashboardUsersLayout = () => <UsersPage />
export default DashboardUsersLayout export default DashboardUsersLayout

43
app/routes/_admin.lg-admin.tsx
View File

@ -1,4 +1,4 @@
import { isRouteErrorResponse, Outlet, redirect } from 'react-router' import { Outlet, redirect } from 'react-router'
import { XiorError } from 'xior' import { XiorError } from 'xior'
import { getStaff } from '~/apis/admin/get-staff' import { getStaff } from '~/apis/admin/get-staff'
@ -10,14 +10,16 @@ import { setStaffLogoutHeaders } from '~/libs/logout-header.server'
import type { Route } from './+types/_admin.lg-admin' import type { Route } from './+types/_admin.lg-admin'
export const loader = async ({ request }: Route.LoaderArgs) => { export const loader = async ({ request }: Route.LoaderArgs) => {
const { staffToken: accessToken } = await handleCookie(request) const { staffToken } = await handleCookie(request)
const { pathname } = new URL(request.url) const { pathname } = new URL(request.url)
const isAuthPage = AUTH_PAGES.includes(pathname) const isAuthPage = AUTH_PAGES.includes(pathname)
let staffData let staffData
if (accessToken) { if (staffToken) {
try { try {
const { data } = await getStaff({ accessToken }) const { data } = await getStaff({
accessToken: staffToken,
})
staffData = data staffData = data
} catch (error) { } catch (error) {
if (error instanceof XiorError && error.response?.status === 401) { if (error instanceof XiorError && error.response?.status === 401) {
@ -26,11 +28,11 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
} }
} }
if (!isAuthPage && !accessToken) { if (!isAuthPage && !staffToken) {
throw redirect('/lg-admin/login') throw redirect('/lg-admin/login')
} }
if (isAuthPage && accessToken) { if (isAuthPage && staffToken) {
throw redirect('/lg-admin') throw redirect('/lg-admin')
} }
@ -39,35 +41,6 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
} }
} }
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 AdminLayout = () => { const AdminLayout = () => {
return ( return (
<AdminDefaultLayout> <AdminDefaultLayout>

31
app/routes/_news._index.tsx
View File

@ -1,5 +1,3 @@
import { isRouteErrorResponse } from 'react-router'
import { getCategories } from '~/apis/common/get-categories' import { getCategories } from '~/apis/common/get-categories'
import { getNews } from '~/apis/common/get-news' import { getNews } from '~/apis/common/get-news'
import { NewsPage } from '~/pages/news' import { NewsPage } from '~/pages/news'
@ -37,35 +35,6 @@ export const loader = async ({}: Route.LoaderArgs) => {
} }
} }
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 NewsIndexLayout = () => <NewsPage /> const NewsIndexLayout = () => <NewsPage />
export default NewsIndexLayout export default NewsIndexLayout

38
app/routes/_news.category.$code.tsx
View File

@ -1,5 +1,3 @@
import { isRouteErrorResponse } from 'react-router'
import { getCategories } from '~/apis/common/get-categories' import { getCategories } from '~/apis/common/get-categories'
import { getNews } from '~/apis/common/get-news' import { getNews } from '~/apis/common/get-news'
import { APP } from '~/configs/meta' import { APP } from '~/configs/meta'
@ -9,9 +7,10 @@ import type { Route } from './+types/_news.category.$code'
export const loader = async ({ params }: Route.LoaderArgs) => { export const loader = async ({ params }: Route.LoaderArgs) => {
const { data: categoriesData } = await getCategories() const { data: categoriesData } = await getCategories()
const { code } = params const categoryData = categoriesData.find(
const categoryData = categoriesData.find((category) => category.code === code) (category) => category.code === params.code,
const { data: newsData } = await getNews({ categories: [code] }) )
const { data: newsData } = await getNews({ categories: [params.code] })
return { categoryData, newsData } return { categoryData, newsData }
} }
@ -27,35 +26,6 @@ export const meta = ({ data }: Route.MetaArgs) => {
] ]
} }
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 NewsCategoriesLayout = () => <NewsCategoriesPage /> const NewsCategoriesLayout = () => <NewsCategoriesPage />
export default NewsCategoriesLayout export default NewsCategoriesLayout

39
app/routes/_news.detail.$slug.tsx
View File

@ -1,5 +1,3 @@
import { isRouteErrorResponse } from 'react-router'
import { getCategories } from '~/apis/common/get-categories' import { getCategories } from '~/apis/common/get-categories'
import { getNews } from '~/apis/common/get-news' import { getNews } from '~/apis/common/get-news'
import { getNewsBySlug } from '~/apis/common/get-news-by-slug' import { getNewsBySlug } from '~/apis/common/get-news-by-slug'
@ -10,9 +8,11 @@ import { NewsDetailPage } from '~/pages/news-detail'
import type { Route } from './+types/_news.detail.$slug' import type { Route } from './+types/_news.detail.$slug'
export const loader = async ({ request, params }: Route.LoaderArgs) => { export const loader = async ({ request, params }: Route.LoaderArgs) => {
const { userToken: accessToken } = await handleCookie(request) const { userToken } = await handleCookie(request)
const { slug } = params const { data: newsDetailData } = await getNewsBySlug({
const { data: newsDetailData } = await getNewsBySlug({ slug, accessToken }) slug: params.slug,
accessToken: userToken,
})
const { data: categoriesData } = await getCategories() const { data: categoriesData } = await getCategories()
const beritaCode = 'berita' const beritaCode = 'berita'
const beritaCategory = categoriesData.find( const beritaCategory = categoriesData.find(
@ -39,35 +39,6 @@ export const meta = ({ data }: Route.MetaArgs) => {
] ]
} }
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 NewsDetailLayout = () => <NewsDetailPage /> const NewsDetailLayout = () => <NewsDetailPage />
export default NewsDetailLayout export default NewsDetailLayout

37
app/routes/_news.payment.tsx
View File

@ -1,37 +0,0 @@
import { isRouteErrorResponse } from 'react-router'
import { NewsPaymentPage } from '~/pages/news-payment'
import type { Route } from './+types/_news.payment'
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 NewsPaymentLayout = () => <NewsPaymentPage />
export default NewsPaymentLayout

42
app/routes/_news.tsx
View File

@ -1,7 +1,6 @@
import { isRouteErrorResponse, Outlet } from 'react-router' import { Outlet } from 'react-router'
import { XiorError } from 'xior' import { XiorError } from 'xior'
import { getAds } from '~/apis/common/get-ads'
import { getCategories } from '~/apis/common/get-categories' import { getCategories } from '~/apis/common/get-categories'
import { getSubscriptions } from '~/apis/common/get-subscriptions' import { getSubscriptions } from '~/apis/common/get-subscriptions'
import { getUser } from '~/apis/news/get-user' import { getUser } from '~/apis/news/get-user'
@ -13,11 +12,13 @@ import { setUserLogoutHeaders } from '~/libs/logout-header.server'
import type { Route } from './+types/_news' import type { Route } from './+types/_news'
export const loader = async ({ request }: Route.LoaderArgs) => { export const loader = async ({ request }: Route.LoaderArgs) => {
const { userToken: accessToken } = await handleCookie(request) const { userToken } = await handleCookie(request)
let userData let userData
if (accessToken) { if (userToken) {
try { try {
const { data } = await getUser({ accessToken }) const { data } = await getUser({
accessToken: userToken,
})
userData = data userData = data
} catch (error) { } catch (error) {
if (error instanceof XiorError && error.response?.status === 401) { if (error instanceof XiorError && error.response?.status === 401) {
@ -27,45 +28,14 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
} }
const { data: subscriptionsData } = await getSubscriptions() const { data: subscriptionsData } = await getSubscriptions()
const { data: categoriesData } = await getCategories() const { data: categoriesData } = await getCategories()
const { data: adsData } = await getAds()
return { return {
userData, userData,
subscriptionsData, subscriptionsData,
categoriesData, categoriesData,
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 NewsLayout = () => { const NewsLayout = () => {
return ( return (
<NewsProvider> <NewsProvider>

61
app/routes/actions.admin.advertisements.create.ts
View File

@ -1,61 +0,0 @@
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.admin.advertisements.create'
export const action = async ({ request }: Route.ActionArgs) => {
const { staffToken: accessToken } = 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: adsData } = await createAdsRequest({ accessToken, payload })
return data(
{
success: true,
adsData,
},
{
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 },
)
}
}

45
app/routes/actions.admin.advertisements.delete.$id.ts
View File

@ -1,45 +0,0 @@
import { data } from 'react-router'
import { XiorError } from 'xior'
import { deleteAdsRequest } from '~/apis/admin/delete-ads'
import { handleCookie } from '~/libs/cookies'
import type { Route } from './+types/actions.admin.advertisements.create'
export const action = async ({ request, params }: Route.ActionArgs) => {
const { staffToken: accessToken } = await handleCookie(request)
const { id } = params
try {
const { data: adsData } = await deleteAdsRequest({ accessToken, id })
return data(
{
success: true,
adsData,
},
{
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 },
)
}
}

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

@ -5,12 +5,15 @@ 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 { categorySchema, type TCategorySchema } from '~/pages/form-category' import {
createCategorySchema,
type TCategorySchema,
} from '~/pages/form-category'
import type { Route } from './+types/actions.admin.categories.create' import type { Route } from './+types/actions.register'
export const action = async ({ request }: Route.ActionArgs) => { export const action = async ({ request }: Route.ActionArgs) => {
const { staffToken: accessToken } = await handleCookie(request) const { staffToken } = await handleCookie(request)
try { try {
const { const {
errors, errors,
@ -18,7 +21,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
receivedValues: defaultValues, receivedValues: defaultValues,
} = await getValidatedFormData<TCategorySchema>( } = await getValidatedFormData<TCategorySchema>(
request, request,
zodResolver(categorySchema), zodResolver(createCategorySchema),
false, false,
) )
@ -27,7 +30,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
} }
const { data: categoryData } = await createCategoryRequest({ const { data: categoryData } = await createCategoryRequest({
accessToken, accessToken: staffToken,
payload, payload,
}) })

13
app/routes/actions.admin.categories.update.ts
View File

@ -5,12 +5,15 @@ 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 { categorySchema, type TCategorySchema } from '~/pages/form-category' import {
createCategorySchema,
type TCategorySchema,
} from '~/pages/form-category'
import type { Route } from './+types/actions.admin.categories.update' import type { Route } from './+types/actions.register'
export const action = async ({ request }: Route.ActionArgs) => { export const action = async ({ request }: Route.ActionArgs) => {
const { staffToken: accessToken } = await handleCookie(request) const { staffToken } = await handleCookie(request)
try { try {
const { const {
errors, errors,
@ -18,7 +21,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
receivedValues: defaultValues, receivedValues: defaultValues,
} = await getValidatedFormData<TCategorySchema>( } = await getValidatedFormData<TCategorySchema>(
request, request,
zodResolver(categorySchema), zodResolver(createCategorySchema),
false, false,
) )
@ -27,7 +30,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
} }
const { data: categoryData } = await updateCategoryRequest({ const { data: categoryData } = await updateCategoryRequest({
accessToken, accessToken: staffToken,
payload, payload,
}) })

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

@ -7,10 +7,10 @@ import { createNewsRequest } from '~/apis/admin/create-news'
import { handleCookie } from '~/libs/cookies' import { handleCookie } from '~/libs/cookies'
import { contentSchema, type TContentSchema } from '~/pages/form-contents' import { contentSchema, type TContentSchema } from '~/pages/form-contents'
import type { Route } from './+types/actions.admin.contents.create' import type { Route } from './+types/actions.register'
export const action = async ({ request }: Route.ActionArgs) => { export const action = async ({ request }: Route.ActionArgs) => {
const { staffToken: accessToken } = await handleCookie(request) const { staffToken } = await handleCookie(request)
try { try {
const { const {
errors, errors,
@ -26,7 +26,10 @@ export const action = async ({ request }: Route.ActionArgs) => {
return data({ success: false, errors, defaultValues }, { status: 400 }) return data({ success: false, errors, defaultValues }, { status: 400 })
} }
const { data: newsData } = await createNewsRequest({ accessToken, payload }) const { data: newsData } = await createNewsRequest({
accessToken: staffToken,
payload,
})
return data( return data(
{ {

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

@ -7,10 +7,10 @@ import { updateNewsRequest } from '~/apis/admin/update-news'
import { handleCookie } from '~/libs/cookies' import { handleCookie } from '~/libs/cookies'
import { contentSchema, type TContentSchema } from '~/pages/form-contents' import { contentSchema, type TContentSchema } from '~/pages/form-contents'
import type { Route } from './+types/actions.admin.contents.update' import type { Route } from './+types/actions.register'
export const action = async ({ request }: Route.ActionArgs) => { export const action = async ({ request }: Route.ActionArgs) => {
const { staffToken: accessToken } = await handleCookie(request) const { staffToken } = await handleCookie(request)
try { try {
const { const {
errors, errors,
@ -26,7 +26,10 @@ export const action = async ({ request }: Route.ActionArgs) => {
return data({ success: false, errors, defaultValues }, { status: 400 }) return data({ success: false, errors, defaultValues }, { status: 400 })
} }
const { data: newsData } = await updateNewsRequest({ accessToken, payload }) const { data: newsData } = await updateNewsRequest({
accessToken: staffToken,
payload,
})
return data( return data(
{ {

12
app/routes/actions.admin.login.ts
View File

@ -8,7 +8,7 @@ import { staffLoginRequest } from '~/apis/admin/login-staff'
import { loginSchema, type TLoginSchema } from '~/pages/staff-login' import { loginSchema, type TLoginSchema } from '~/pages/staff-login'
import { generateStaffTokenCookie } from '~/utils/token' import { generateStaffTokenCookie } from '~/utils/token'
import type { Route } from './+types/actions.admin.login' import type { Route } from './+types/actions.login'
export const action = async ({ request }: Route.ActionArgs) => { export const action = async ({ request }: Route.ActionArgs) => {
try { try {
@ -27,9 +27,13 @@ export const action = async ({ request }: Route.ActionArgs) => {
} }
const { data: loginData } = await staffLoginRequest(payload) const { data: loginData } = await staffLoginRequest(payload)
const { token: accessToken } = loginData const { token } = loginData
const { data: staffData } = await getStaff({ accessToken }) const { data: staffData } = await getStaff({
const tokenCookie = generateStaffTokenCookie({ accessToken }) accessToken: token,
})
const tokenCookie = generateStaffTokenCookie({
token,
})
const headers = new Headers() const headers = new Headers()
headers.append('Set-Cookie', await tokenCookie) headers.append('Set-Cookie', await tokenCookie)

10
app/routes/actions.admin.subscribe-plan.create.ts
View File

@ -6,14 +6,14 @@ 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 {
subscribePlanSchema, createSubscribePlanSchema,
type TSubscribePlanSchema, type TSubscribePlanSchema,
} from '~/pages/form-subscriptions-plan' } from '~/pages/form-subscriptions-plan'
import type { Route } from './+types/actions.admin.subscribe-plan.create' import type { Route } from './+types/actions.register'
export const action = async ({ request }: Route.ActionArgs) => { export const action = async ({ request }: Route.ActionArgs) => {
const { staffToken: accessToken } = await handleCookie(request) const { staffToken } = await handleCookie(request)
try { try {
const { const {
errors, errors,
@ -21,7 +21,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
receivedValues: defaultValues, receivedValues: defaultValues,
} = await getValidatedFormData<TSubscribePlanSchema>( } = await getValidatedFormData<TSubscribePlanSchema>(
request, request,
zodResolver(subscribePlanSchema), zodResolver(createSubscribePlanSchema),
false, false,
) )
@ -30,7 +30,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
} }
const { data: subscribePlanData } = await createSubscribePlanRequest({ const { data: subscribePlanData } = await createSubscribePlanRequest({
accessToken, accessToken: staffToken,
payload, payload,
}) })

10
app/routes/actions.admin.subscribe-plan.update.ts
View File

@ -6,14 +6,14 @@ 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 {
subscribePlanSchema, createSubscribePlanSchema,
type TSubscribePlanSchema, type TSubscribePlanSchema,
} from '~/pages/form-subscriptions-plan' } from '~/pages/form-subscriptions-plan'
import type { Route } from './+types/actions.admin.subscribe-plan.update' import type { Route } from './+types/actions.register'
export const action = async ({ request }: Route.ActionArgs) => { export const action = async ({ request }: Route.ActionArgs) => {
const { staffToken: accessToken } = await handleCookie(request) const { staffToken } = await handleCookie(request)
try { try {
const { const {
errors, errors,
@ -21,7 +21,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
receivedValues: defaultValues, receivedValues: defaultValues,
} = await getValidatedFormData<TSubscribePlanSchema>( } = await getValidatedFormData<TSubscribePlanSchema>(
request, request,
zodResolver(subscribePlanSchema), zodResolver(createSubscribePlanSchema),
false, false,
) )
@ -30,7 +30,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
} }
const { data: subscribePlanData } = await updateSubscribePlanRequest({ const { data: subscribePlanData } = await updateSubscribePlanRequest({
accessToken, accessToken: staffToken,
payload, payload,
}) })

13
app/routes/actions.admin.tags.create.ts
View File

@ -5,12 +5,12 @@ 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 { tagSchema, type TTagSchema } from '~/pages/form-tag' import { createTagSchema, type TTagSchema } from '~/pages/form-tag'
import type { Route } from './+types/actions.admin.tags.create' import type { Route } from './+types/actions.register'
export const action = async ({ request }: Route.ActionArgs) => { export const action = async ({ request }: Route.ActionArgs) => {
const { staffToken: accessToken } = await handleCookie(request) const { staffToken } = await handleCookie(request)
try { try {
const { const {
errors, errors,
@ -18,7 +18,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
receivedValues: defaultValues, receivedValues: defaultValues,
} = await getValidatedFormData<TTagSchema>( } = await getValidatedFormData<TTagSchema>(
request, request,
zodResolver(tagSchema), zodResolver(createTagSchema),
false, false,
) )
@ -26,7 +26,10 @@ export const action = async ({ request }: Route.ActionArgs) => {
return data({ success: false, errors, defaultValues }, { status: 400 }) return data({ success: false, errors, defaultValues }, { status: 400 })
} }
const { data: tagsData } = await createTagsRequest({ accessToken, payload }) const { data: tagsData } = await createTagsRequest({
accessToken: staffToken,
payload,
})
return data( return data(
{ {

13
app/routes/actions.admin.tags.update.ts
View File

@ -5,12 +5,12 @@ 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 { tagSchema, type TTagSchema } from '~/pages/form-tag' import { createTagSchema, type TTagSchema } from '~/pages/form-tag'
import type { Route } from './+types/actions.admin.tags.update' import type { Route } from './+types/actions.register'
export const action = async ({ request }: Route.ActionArgs) => { export const action = async ({ request }: Route.ActionArgs) => {
const { staffToken: accessToken } = await handleCookie(request) const { staffToken } = await handleCookie(request)
try { try {
const { const {
errors, errors,
@ -18,7 +18,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
receivedValues: defaultValues, receivedValues: defaultValues,
} = await getValidatedFormData<TTagSchema>( } = await getValidatedFormData<TTagSchema>(
request, request,
zodResolver(tagSchema), zodResolver(createTagSchema),
false, false,
) )
@ -26,7 +26,10 @@ export const action = async ({ request }: Route.ActionArgs) => {
return data({ success: false, errors, defaultValues }, { status: 400 }) return data({ success: false, errors, defaultValues }, { status: 400 })
} }
const { data: tagData } = await updateTagRequest({ accessToken, payload }) const { data: tagData } = await updateTagRequest({
accessToken: staffToken,
payload,
})
return data( return data(
{ {

7
app/routes/actions.admin.upload.ts → app/routes/actions.admin.upload.tsx
View File

@ -7,11 +7,10 @@ import { uploadFileRequest } from '~/apis/admin/upload-file'
import { uploadSchema, type TUploadSchema } from '~/layouts/admin/dialog-upload' import { uploadSchema, type TUploadSchema } from '~/layouts/admin/dialog-upload'
import { handleCookie } from '~/libs/cookies' import { handleCookie } from '~/libs/cookies'
import type { Route } from './+types/actions.admin.upload' import type { Route } from './+types/actions.register'
export const action = async ({ request }: Route.ActionArgs) => { export const action = async ({ request }: Route.ActionArgs) => {
const { staffToken: accessToken } = await handleCookie(request) const { staffToken } = await handleCookie(request)
try { try {
const { const {
errors, errors,
@ -29,7 +28,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
const { data: uploadData } = await uploadFileRequest({ const { data: uploadData } = await uploadFileRequest({
payload, payload,
accessToken, accessToken: staffToken,
}) })
return data( return data(

10
app/routes/actions.login.ts
View File

@ -27,9 +27,13 @@ export const action = async ({ request }: Route.ActionArgs) => {
} }
const { data: loginData } = await userLoginRequest(payload) const { data: loginData } = await userLoginRequest(payload)
const { token: accessToken } = loginData const { token } = loginData
const { data: userData } = await getUser({ accessToken }) const { data: userData } = await getUser({
const tokenCookie = generateUserTokenCookie({ accessToken }) accessToken: token,
})
const tokenCookie = generateUserTokenCookie({
token,
})
const headers = new Headers() const headers = new Headers()
headers.append('Set-Cookie', await tokenCookie) headers.append('Set-Cookie', await tokenCookie)

10
app/routes/actions.register.ts
View File

@ -30,9 +30,13 @@ export const action = async ({ request }: Route.ActionArgs) => {
} }
const { data: registerData } = await userRegisterRequest(payload) const { data: registerData } = await userRegisterRequest(payload)
const { token: accessToken } = registerData const { token } = registerData
const { data: userData } = await getUser({ accessToken }) const { data: userData } = await getUser({
const tokenCookie = generateUserTokenCookie({ accessToken }) accessToken: token,
})
const tokenCookie = generateUserTokenCookie({
token,
})
const headers = new Headers() const headers = new Headers()
headers.append('Set-Cookie', await tokenCookie) headers.append('Set-Cookie', await tokenCookie)

8
app/routes/actions.subscribe.ts
View File

@ -10,10 +10,10 @@ import {
} from '~/layouts/news/form-subscription' } from '~/layouts/news/form-subscription'
import { handleCookie } from '~/libs/cookies' import { handleCookie } from '~/libs/cookies'
import type { Route } from './+types/actions.subscribe' import type { Route } from './+types/actions.register'
export const action = async ({ request }: Route.ActionArgs) => { export const action = async ({ request }: Route.ActionArgs) => {
const { userToken: accessToken } = await handleCookie(request) const { userToken } = await handleCookie(request)
try { try {
const { const {
errors, errors,
@ -32,7 +32,9 @@ export const action = async ({ request }: Route.ActionArgs) => {
// TODO: implement subscribe // TODO: implement subscribe
console.log('payload', payload) // eslint-disable-line no-console console.log('payload', payload) // eslint-disable-line no-console
const { data: userData } = await getUser({ accessToken }) const { data: userData } = await getUser({
accessToken: userToken,
})
return data( return data(
{ {

14
app/utils/token.ts
View File

@ -6,33 +6,33 @@ import {
} from '~/libs/cookie.server' } from '~/libs/cookie.server'
type TTokenCookie = { type TTokenCookie = {
accessToken: string token: string
} }
export const generateUserTokenCookie = (parameters: TTokenCookie) => { export const generateUserTokenCookie = (parameters: TTokenCookie) => {
const { accessToken } = parameters const { token } = parameters
const decodedToken = decodeJwt(accessToken) const decodedToken = decodeJwt(token)
const decodedTokenExp = decodedToken.exp const decodedTokenExp = decodedToken.exp
const expirationDate = decodedTokenExp const expirationDate = decodedTokenExp
? new Date(decodedTokenExp * 1000) ? new Date(decodedTokenExp * 1000)
: undefined : undefined
return userTokenCookieConfig.serialize(accessToken, { return userTokenCookieConfig.serialize(token, {
expires: expirationDate, expires: expirationDate,
}) })
} }
export const generateStaffTokenCookie = (parameters: TTokenCookie) => { export const generateStaffTokenCookie = (parameters: TTokenCookie) => {
const { accessToken } = parameters const { token } = parameters
const decodedToken = decodeJwt(accessToken) const decodedToken = decodeJwt(token)
const decodedTokenExp = decodedToken.exp const decodedTokenExp = decodedToken.exp
const expirationDate = decodedTokenExp const expirationDate = decodedTokenExp
? new Date(decodedTokenExp * 1000) ? new Date(decodedTokenExp * 1000)
: undefined : undefined
return staffTokenCookieConfig.serialize(accessToken, { return staffTokenCookieConfig.serialize(token, {
expires: expirationDate, expires: expirationDate,
}) })
} }

1
package.json
View File

@ -44,7 +44,6 @@
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
"react-hook-form": "^7.54.2", "react-hook-form": "^7.54.2",
"react-hook-reading-time": "^1.0.0", "react-hook-reading-time": "^1.0.0",
"react-hot-toast": "^2.5.2",
"react-router": "^7.1.3", "react-router": "^7.1.3",
"react-share": "^5.2.2", "react-share": "^5.2.2",
"remix-hook-form": "^6.1.3", "remix-hook-form": "^6.1.3",

26
pnpm-lock.yaml generated
View File

@ -98,9 +98,6 @@ importers:
react-hook-reading-time: react-hook-reading-time:
specifier: ^1.0.0 specifier: ^1.0.0
version: 1.0.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0) version: 1.0.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
react-hot-toast:
specifier: ^2.5.2
version: 2.5.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
react-router: react-router:
specifier: ^7.1.3 specifier: ^7.1.3
version: 7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0) version: 7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@ -2794,11 +2791,6 @@ packages:
globrex@0.1.2: globrex@0.1.2:
resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==} resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
goober@2.1.16:
resolution: {integrity: sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==}
peerDependencies:
csstype: ^3.0.10
gopd@1.2.0: gopd@1.2.0:
resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==} resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
engines: {node: '>= 0.4'} engines: {node: '>= 0.4'}
@ -3952,13 +3944,6 @@ packages:
react: ^16.13.1 react: ^16.13.1
react-dom: ^16.13.1 react-dom: ^16.13.1
react-hot-toast@2.5.2:
resolution: {integrity: sha512-Tun3BbCxzmXXM7C+NI4qiv6lT0uwGh4oAfeJyNOjYUejTsm35mK9iCaYLGv8cBz9L5YxZLx/2ii7zsIwPtPUdw==}
engines: {node: '>=10'}
peerDependencies:
react: '>=16'
react-dom: '>=16'
react-hotkeys-hook@4.6.1: react-hotkeys-hook@4.6.1:
resolution: {integrity: sha512-XlZpbKUj9tkfgPgT9gA+1p7Ey6vFIZHttUjPqpTdyT5nqQ8mHL7elxvSbaC+dpSiHUSmr21Ya1mDxBZG3aje4Q==} resolution: {integrity: sha512-XlZpbKUj9tkfgPgT9gA+1p7Ey6vFIZHttUjPqpTdyT5nqQ8mHL7elxvSbaC+dpSiHUSmr21Ya1mDxBZG3aje4Q==}
peerDependencies: peerDependencies:
@ -7666,10 +7651,6 @@ snapshots:
globrex@0.1.2: {} globrex@0.1.2: {}
goober@2.1.16(csstype@3.1.3):
dependencies:
csstype: 3.1.3
gopd@1.2.0: {} gopd@1.2.0: {}
graceful-fs@4.2.11: {} graceful-fs@4.2.11: {}
@ -8756,13 +8737,6 @@ snapshots:
react: 19.0.0 react: 19.0.0
react-dom: 19.0.0(react@19.0.0) react-dom: 19.0.0(react@19.0.0)
react-hot-toast@2.5.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
dependencies:
csstype: 3.1.3
goober: 2.1.16(csstype@3.1.3)
react: 19.0.0
react-dom: 19.0.0(react@19.0.0)
react-hotkeys-hook@4.6.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0): react-hotkeys-hook@4.6.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
dependencies: dependencies:
react: 19.0.0 react: 19.0.0