feat: implement update news functionality with API integration and form handling

app/apis/admin/create-news.ts

@@ -21,12 +21,9 @@ export const createNewsRequest = async (parameters: TParameter) => {
     const transformedPayload = {
       ...restPayload,
       categories: categories.map((category) => category?.id),
-      tags: tags?.map((tag) => tag?.id),
+      tags: tags?.map((tag) => tag?.id) || [],
       live_at: new Date(payload?.live_at).toISOString(),
     }
-    if (transformedPayload.tags?.length === 0) {
-      delete transformedPayload.tags
-    }
     const { data } = await HttpServer({ accessToken }).post(
       '/api/news/create',
       transformedPayload,

app/apis/admin/update-news.ts

@@ -0,0 +1,36 @@
+import { z } from 'zod'
+
+import { HttpServer } from '~/libs/http-server'
+import type { TContentSchema } from '~/pages/contents-form'
+
+const newsResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameter = {
+  accessToken: string
+  payload: TContentSchema
+}
+
+export const updateNewsRequest = async (parameters: TParameter) => {
+  const { accessToken, payload } = parameters
+  try {
+    const { categories, tags, id, ...restPayload } = payload
+    const transformedPayload = {
+      ...restPayload,
+      categories: categories.map((category) => category?.id),
+      tags: tags?.map((tag) => tag?.id) || [],
+      live_at: new Date(payload?.live_at).toISOString(),
+    }
+    const { data } = await HttpServer({ accessToken }).put(
+      `/api/news/${id}/update`,
+      transformedPayload,
+    )
+    return newsResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/pages/contents-form/index.tsx

@@ -15,6 +15,7 @@ import { TitleDashboard } from '~/components/ui/title-dashboard'
 import type { loader } from '~/routes/_admin.lg-admin'
 
 export const contentSchema = z.object({
+  id: z.string().optional(),
   categories: z
     .array(
       z
@@ -74,6 +75,7 @@ export const ContentsFormPage = (properties: TProperties) => {
     fetcher,
     resolver: zodResolver(contentSchema),
     values: {
+      id: newsData?.id || '',
       categories: newsData?.categories || [],
       tags: newsData?.tags || [],
       title: newsData?.title || '',
@@ -110,7 +112,7 @@ export const ContentsFormPage = (properties: TProperties) => {
         <fetcher.Form
           method="post"
           onSubmit={handleSubmit}
-          action="/actions/admin/contents/update"
+          action={`/actions/admin/contents/${newsData ? 'update' : 'create'}`}
           className="space-y-4"
         >
           {error && (

app/pages/dashboard-contents/index.tsx

@@ -32,7 +32,7 @@ export const ContentsPage = () => {
       },
     },
     {
-      title: 'Tanggal Konten',
+      title: 'Tanggal Live',
       data: 'live_at',
     },
     {

app/routes/actions.admin.contents.update.ts

@@ -0,0 +1,64 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { data } from 'react-router'
+import { getValidatedFormData } from 'remix-hook-form'
+import { XiorError } from 'xior'
+
+import { updateNewsRequest } from '~/apis/admin/update-news'
+import { handleCookie } from '~/libs/cookies'
+import { contentSchema, type TContentSchema } from '~/pages/contents-form'
+
+import type { Route } from './+types/actions.register'
+
+export const action = async ({ request }: Route.ActionArgs) => {
+  const { staffToken } = await handleCookie(request)
+  try {
+    const {
+      errors,
+      data: payload,
+      receivedValues: defaultValues,
+    } = await getValidatedFormData<TContentSchema>(
+      request,
+      zodResolver(contentSchema),
+      false,
+    )
+
+    if (errors) {
+      return data({ success: false, errors, defaultValues }, { status: 400 })
+    }
+
+    const { data: newsData } = await updateNewsRequest({
+      accessToken: staffToken,
+      payload,
+    })
+
+    return data(
+      {
+        success: true,
+        newsData,
+      },
+      {
+        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 },
+    )
+  }
+}