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

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/layouts/admin/menu.ts

@@ -1,4 +1,5 @@
-import type { JSX, SVGProps } from 'react'
+import { ClipboardDocumentCheckIcon } from '@heroicons/react/20/solid'
+import type { SVGProps } from 'react'
 
 import { ChartIcon } from '~/components/icons/chart'
 import { ChatIcon } from '~/components/icons/chat'
@@ -6,16 +7,13 @@ import { DocumentIcon } from '~/components/icons/document'
 import { MedicalNotesIcon } from '~/components/icons/medical-notes'
 import { ProfileIcon } from '~/components/icons/profile'
 import { SettingIcon } from '~/components/icons/setting'
-import { WalletIcon } from '~/components/icons/wallet'
 
 type TMenu = {
   group: string
   items: {
     title: string
     url: string
-    icon: (
-      properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
-    ) => JSX.Element
+    icon: React.ComponentType<SVGProps<SVGSVGElement>>
   }[]
 }
 
@@ -54,9 +52,9 @@ export const MENU: TMenu[] = [
     group: 'Others',
     items: [
       {
-        title: 'Data Situs',
-        url: '/lg-admin/site-data',
-        icon: WalletIcon,
+        title: 'Kategori',
+        url: '/lg-admin/categories',
+        icon: ClipboardDocumentCheckIcon,
       },
       {
         title: 'Pengaturan',

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-categories/index.tsx

@@ -1,5 +1,5 @@
-import DataTable from 'datatables.net-dt'
-import DT from 'datatables.net-react'
+import DT from 'datatables.net-dt'
+import DataTable from 'datatables.net-react'
 import { Link, useRouteLoaderData } from 'react-router'
 
 import { Button } from '~/components/ui/button'
@@ -10,9 +10,10 @@ export const CategoriesPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_admin.lg-admin._dashboard.categories._index',
   )
-  const dataTable = loaderData?.dataCategories
+  const categoriesData = loaderData?.dataCategories
 
   DataTable.use(DT)
+  const dataTable = categoriesData
   const dataColumns = [
     {
       title: 'No',
@@ -26,11 +27,11 @@ export const CategoriesPage = () => {
       },
     },
     {
-      title: 'Nama Kategori',
+      title: 'Nama',
       data: 'name',
     },
     {
-      title: 'Code Katgeori',
+      title: 'Kode',
       data: 'code',
     },
     {
@@ -38,7 +39,18 @@ export const CategoriesPage = () => {
       data: 'id',
     },
   ]
-
+  const dataSlot = {
+    3: (value: string) => (
+      <Button
+        as="a"
+        href={`/lg-admin/categories/update/${value}`}
+        className="text-md rounded-md"
+        size="sm"
+      >
+        Update Kategori
+      </Button>
+    ),
+  }
   const dataOptions = {
     paging: true,
     searching: true,
@@ -46,18 +58,6 @@ export const CategoriesPage = () => {
     info: true,
   }
 
-  const dataSlot = {
-    3: (value: string) => (
-      <Button
-        as="a"
-        href={`/lg-admin/category/update/${value}`}
-        className="text-md rounded-md"
-        size="sm"
-      >
-        Lihat Detail
-      </Button>
-    ),
-  }
   return (
     <div className="relative">
       <TitleDashboard title="Kategori" />
@@ -65,11 +65,11 @@ export const CategoriesPage = () => {
         <div className="flex-1">{/* TODO: Filter */}</div>
         <Button
           as={Link}
-          to="/lg-admin/category/create"
+          to="/lg-admin/categories/create"
           className="text-md h-[42px] rounded-md"
           size="lg"
         >
-          Create New
+          Buat Kategori
         </Button>
       </div>
 
@@ -78,7 +78,7 @@ export const CategoriesPage = () => {
         columns={dataColumns}
         options={dataOptions}
         slots={dataSlot}
-        title="Daftar Katgeori"
+        title="Daftar Kategori"
       />
     </div>
   )

app/pages/dashboard-contents/index.tsx

@@ -18,7 +18,9 @@ export const ContentsPage = () => {
   const newsData = loaderData?.newsData
 
   DataTable.use(DT)
-  const dataTable = newsData
+  const dataTable = newsData?.sort(
+    (a, b) => new Date(b.live_at).getTime() - new Date(a.live_at).getTime(),
+  )
   const dataColumns = [
     {
       title: 'No',
@@ -32,11 +34,11 @@ export const ContentsPage = () => {
       },
     },
     {
-      title: 'Tanggal Konten',
+      title: 'Tanggal Live',
       data: 'live_at',
     },
     {
-      title: 'Nama Penulis',
+      title: 'Penulis',
     },
     { title: 'Judul', data: 'title' },
     {

app/routes/_admin.lg-admin._dashboard.categories._index.tsx

@@ -11,5 +11,6 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
   })
   return { dataCategories }
 }
-const DashboardCategoriesLayout = () => <CategoriesPage />
-export default DashboardCategoriesLayout
+
+const DashboardCategoriesIndexLayout = () => <CategoriesPage />
+export default DashboardCategoriesIndexLayout

app/routes/_admin.lg-admin._dashboard.categories.create.tsx

@@ -0,0 +1,4 @@
+import { CreateCategoryPage } from '~/pages/dashboard-category-create'
+
+const DashboardCategoriesCreateLayout = () => <CreateCategoryPage />
+export default DashboardCategoriesCreateLayout

app/routes/_admin.lg-admin._dashboard.categories.update.$slug.tsx

@@ -0,0 +1,4 @@
+import { UpdateCategoryPage } from '~/pages/dashboard-category-update'
+
+const DashboardCategoriesUpdateLayout = () => <UpdateCategoryPage />
+export default DashboardCategoriesUpdateLayout

app/routes/_admin.lg-admin._dashboard.category.create.tsx

@@ -1,4 +0,0 @@
-import { CreateCategoryPage } from '~/pages/dashboard-category-create'
-
-const DashboardCategoryLayout = () => <CreateCategoryPage />
-export default DashboardCategoryLayout

app/routes/_admin.lg-admin._dashboard.category.update.$slug.tsx

@@ -1,4 +0,0 @@
-import { UpdateCategoryPage } from '~/pages/dashboard-category-update'
-
-const DashboardCategoryUpdateLayout = () => <UpdateCategoryPage />
-export default DashboardCategoryUpdateLayout

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