From 5c716d721014169172d6d463957b3c8b7563f6a0 Mon Sep 17 00:00:00 2001 From: Ardeman Date: Fri, 7 Mar 2025 13:50:16 +0800 Subject: [PATCH 1/2] feat: integrate news data fetching by slug and update ContentsFormPage to utilize fetched data --- app/apis/admin/get-news.ts | 2 +- app/apis/common/get-news-by-slug.ts | 23 ++++++++++++++++ app/pages/contents-form/index.tsx | 27 ++++++++++++------- ...admin._dashboard.contents.update.$slug.tsx | 18 ++++++++++++- 4 files changed, 58 insertions(+), 12 deletions(-) create mode 100644 app/apis/common/get-news-by-slug.ts diff --git a/app/apis/admin/get-news.ts b/app/apis/admin/get-news.ts index 6426a0b..0b540f2 100644 --- a/app/apis/admin/get-news.ts +++ b/app/apis/admin/get-news.ts @@ -9,7 +9,7 @@ const authorSchema = z.object({ name: z.string(), profile_picture: z.string(), }) -const newsResponseSchema = z.object({ +export const newsResponseSchema = z.object({ id: z.string(), title: z.string(), content: z.string(), diff --git a/app/apis/common/get-news-by-slug.ts b/app/apis/common/get-news-by-slug.ts new file mode 100644 index 0000000..de39135 --- /dev/null +++ b/app/apis/common/get-news-by-slug.ts @@ -0,0 +1,23 @@ +import { z } from 'zod' + +import { newsResponseSchema } from '~/apis/admin/get-news' +import { HttpServer, type THttpServer } from '~/libs/http-server' + +const dataResponseSchema = z.object({ + data: z.object(newsResponseSchema.shape), +}) + +type TParameters = { + slug: string +} & THttpServer + +export const getNewsBySlug = async (parameters: TParameters) => { + const { slug, accessToken } = parameters + try { + const { data } = await HttpServer({ accessToken }).get(`/api/news/${slug}`) + return dataResponseSchema.parse(data) + } catch (error) { + // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject + return Promise.reject(error) + } +} diff --git a/app/pages/contents-form/index.tsx b/app/pages/contents-form/index.tsx index 4404608..bec876b 100644 --- a/app/pages/contents-form/index.tsx +++ b/app/pages/contents-form/index.tsx @@ -5,6 +5,7 @@ import { useFetcher, useNavigate, useRouteLoaderData } from 'react-router' import { RemixFormProvider, useRemixForm } from 'remix-hook-form' import { z } from 'zod' +import type { newsResponseSchema } from '~/apis/admin/get-news' import { TextEditor } from '~/components/text-editor' import { Button } from '~/components/ui/button' import { Combobox } from '~/components/ui/combobox' @@ -54,8 +55,12 @@ export const contentSchema = z.object({ }) export type TContentSchema = z.infer +type TProperties = { + newsData?: z.infer +} -export const ContentsFormPage = () => { +export const ContentsFormPage = (properties: TProperties) => { + const { newsData } = properties || {} const fetcher = useFetcher() const navigate = useNavigate() const loaderData = useRouteLoaderData('routes/_admin.lg-admin') @@ -68,14 +73,16 @@ export const ContentsFormPage = () => { mode: 'onSubmit', fetcher, resolver: zodResolver(contentSchema), - defaultValues: { - categories: [], - tags: [], - title: '', - content: '', - featured_image: '', - is_premium: false, - live_at: '', + values: { + categories: newsData?.categories || [], + tags: newsData?.tags || [], + title: newsData?.title || '', + content: newsData?.content || '', + featured_image: newsData?.featured_image || '', + is_premium: newsData?.is_premium || false, + live_at: newsData?.live_at + ? new Date(newsData.live_at).toISOString().split('T')[0] + : '', }, }) @@ -103,7 +110,7 @@ export const ContentsFormPage = () => { {error && ( diff --git a/app/routes/_admin.lg-admin._dashboard.contents.update.$slug.tsx b/app/routes/_admin.lg-admin._dashboard.contents.update.$slug.tsx index 9ef9064..0fa7c06 100644 --- a/app/routes/_admin.lg-admin._dashboard.contents.update.$slug.tsx +++ b/app/routes/_admin.lg-admin._dashboard.contents.update.$slug.tsx @@ -1,4 +1,20 @@ +import { getNewsBySlug } from '~/apis/common/get-news-by-slug' +import { handleCookie } from '~/libs/cookies' import { ContentsFormPage } from '~/pages/contents-form' -const DashboardContentUpdateLayout = () => +import type { Route } from './+types/_admin.lg-admin._dashboard.contents.update.$slug' + +export const loader = async ({ request }: Route.LoaderArgs) => { + const { staffToken } = await handleCookie(request) + const { data: newsData } = await getNewsBySlug({ + accessToken: staffToken, + slug: request.url.split('/').pop() ?? '', + }) + return { newsData } +} + +const DashboardContentUpdateLayout = ({ loaderData }: Route.ComponentProps) => { + const newsData = loaderData.newsData + return +} export default DashboardContentUpdateLayout From e0b68611bd9865c62add926e47e587bee6cfc38e Mon Sep 17 00:00:00 2001 From: Ardeman Date: Fri, 7 Mar 2025 13:53:07 +0800 Subject: [PATCH 2/2] feat: update Titles in ContentsFormPage and ContentsPage for better context --- app/pages/contents-form/index.tsx | 2 +- app/pages/dashboard-contents/index.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/pages/contents-form/index.tsx b/app/pages/contents-form/index.tsx index bec876b..e94cc7d 100644 --- a/app/pages/contents-form/index.tsx +++ b/app/pages/contents-form/index.tsx @@ -105,7 +105,7 @@ export const ContentsFormPage = (properties: TProperties) => { return (
- + { className="text-md rounded-md" size="sm" > - Lihat Detail + Update Artikel ), } @@ -103,7 +103,7 @@ export const ContentsPage = () => { className="text-md h-[42px] rounded-md" size="lg" > - Create New + Buat Artikel