feat: integrate news data fetching by slug and update ContentsFormPage to utilize fetched data

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(),

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

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<typeof contentSchema>
+type TProperties = {
+  newsData?: z.infer<typeof newsResponseSchema>
+}
 
-export const ContentsFormPage = () => {
+export const ContentsFormPage = (properties: TProperties) => {
+  const { newsData } = properties || {}
   const fetcher = useFetcher()
   const navigate = useNavigate()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_admin.lg-admin')
@@ -68,14 +73,16 @@ export const ContentsFormPage = () => {
     mode: 'onSubmit',
     fetcher,
     resolver: zodResolver(contentSchema),
-    defaultValues: {
+    values: {
-      categories: [],
+      categories: newsData?.categories || [],
-      tags: [],
+      tags: newsData?.tags || [],
-      title: '',
+      title: newsData?.title || '',
-      content: '',
+      content: newsData?.content || '',
-      featured_image: '',
+      featured_image: newsData?.featured_image || '',
-      is_premium: false,
+      is_premium: newsData?.is_premium || false,
-      live_at: '',
+      live_at: newsData?.live_at
+        ? new Date(newsData.live_at).toISOString().split('T')[0]
+        : '',
     },
   })
 
@@ -103,7 +110,7 @@ export const ContentsFormPage = () => {
         <fetcher.Form
           method="post"
           onSubmit={handleSubmit}
-          action="/actions/admin/contents/create"
+          action="/actions/admin/contents/update"
           className="space-y-4"
         >
           {error && (

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 = () => <ContentsFormPage />
+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 <ContentsFormPage newsData={newsData} />
+}
 export default DashboardContentUpdateLayout