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

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: {
-      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]
+        : '',
     },
   })
 
@@ -98,12 +105,12 @@ export const ContentsFormPage = () => {
 
   return (
     <div className="relative">
-      <TitleDashboard title="Buat Artikel" />
+      <TitleDashboard title={`${newsData ? 'Update' : 'Buat'} Artikel`} />
       <RemixFormProvider {...formMethods}>
         <fetcher.Form
           method="post"
           onSubmit={handleSubmit}
-          action="/actions/admin/contents/create"
+          action="/actions/admin/contents/update"
           className="space-y-4"
         >
           {error && (

app/pages/dashboard-contents/index.tsx

@@ -81,7 +81,7 @@ export const ContentsPage = () => {
         className="text-md rounded-md"
         size="sm"
       >
-        Lihat Detail
+        Update Artikel
       </Button>
     ),
   }
@@ -103,7 +103,7 @@ export const ContentsPage = () => {
           className="text-md h-[42px] rounded-md"
           size="lg"
         >
-          Create New
+          Buat Artikel
         </Button>
       </div>
 

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