feat: implement news fetching API and integrate with dashboard contents

app/apis/admin/get-news.ts

@@ -0,0 +1,48 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+const newsSchema = z.object({
+  data: z.array(
+    z.object({
+      id: z.string(),
+      title: z.string(),
+      content: z.string(),
+      categories: z.array(
+        z.object({
+          id: z.string(),
+          name: z.string(),
+          code: z.string(),
+          created_at: z.string(),
+          updated_at: z.string(),
+        }),
+      ),
+      tags: z.array(
+        z.object({
+          id: z.string(),
+          name: z.string(),
+          code: z.string(),
+          created_at: z.string(),
+          updated_at: z.string(),
+        }),
+      ),
+      is_premium: z.boolean(),
+      slug: z.string(),
+      featured_image: z.string(),
+      author_id: z.string(),
+      live_at: z.string(),
+      created_at: z.string(),
+      updated_at: z.string(),
+    }),
+  ),
+})
+
+export const getNews = async (parameters: THttpServer) => {
+  try {
+    const { data } = await HttpServer(parameters).get(`/api/news`)
+    return newsSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/pages/dashboard-contents/data.ts

@@ -1,4 +1,4 @@
-type TContens = {
+type TContents = {
   id: number
   createdAt: string
   author: string
@@ -8,7 +8,7 @@ type TContens = {
   status: string
 }
 
-export const CONTENTS: TContens[] = [
+export const CONTENTS: TContents[] = [
   {
     id: 1,
     createdAt: '24/10/2024',

app/pages/dashboard-contents/index.tsx

@@ -1,35 +1,39 @@
 import DT from 'datatables.net-dt'
 import DataTable from 'datatables.net-react'
-import { Link } from 'react-router'
+import { Link, useRouteLoaderData } from 'react-router'
 
 import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
-
+import type { loader } from '~/routes/_admin.lg-admin._dashboard.contents'
-import { CONTENTS } from './data'
 
 export const ContentsPage = () => {
+  const loaderData = useRouteLoaderData<typeof loader>(
+    'routes/_admin.lg-admin._dashboard.contents',
+  )
+  const newsData = loaderData?.newsData
+
   DataTable.use(DT)
-  const dataTable = CONTENTS
+  const dataTable = newsData
   const dataColumns = [
     { title: 'No', data: 'id' },
-    { title: 'Tanggal Kontent', data: 'createdAt' },
+    { title: 'Tanggal Konten', data: 'created_at' },
-    { title: 'Nama Penulis', data: 'author' },
+    { title: 'Nama Penulis', data: 'author_id' },
     { title: 'Judul', data: 'title' },
-    { title: 'Kategori', data: 'category' },
+    // { title: 'Kategori', data: 'category' },
     {
       title: 'Tags',
-      data: 'tags',
+      data: 'is_premium',
       render: (value: string) => {
-        return value === 'Normal'
+        return value
-          ? `<span class="bg-[#F5F5F5] text-[#4C5CA0] px-2 py-1 rounded-md">${value}</span>`
+          ? `<span class="bg-[#FFFCAF] px-2 py-1 rounded-md">Premium</span>`
-          : `<span class="bg-[#FFFCAF] px-2 py-1 rounded-md">${value}</span>`
+          : `<span class="bg-[#F5F5F5] text-[#4C5CA0] px-2 py-1 rounded-md">Normal</span>`
       },
     },
-    {
+    // {
-      title: 'Action',
+    //   title: 'Action',
-      data: 'id',
+    //   data: 'id',
-    },
+    // },
   ]
   const dataSlot = {
     6: (value: string | number) => {

app/routes/_admin.lg-admin._dashboard.contents.tsx

@@ -1,4 +1,16 @@
+import { getNews } from '~/apis/admin/get-news'
+import { handleCookie } from '~/libs/cookies'
 import { ContentsPage } from '~/pages/dashboard-contents'
 
+import type { Route } from './+types/_admin.lg-admin._dashboard.contents'
+
+export const loader = async ({ request }: Route.LoaderArgs) => {
+  const { staffToken } = await handleCookie(request)
+  const { data: newsData } = await getNews({
+    accessToken: staffToken,
+  })
+  return { newsData }
+}
+
 const DashboardContentsLayout = () => <ContentsPage />
 export default DashboardContentsLayout