Merge commit '9c9d127dfb1a8e3633f803f527c27bbfc6346b4d'

* commit '9c9d127dfb1a8e3633f803f527c27bbfc6346b4d':
  feat: add delete functionality for news articles with confirmation dialog

app/apis/admin/delete-contents.ts

@@ -0,0 +1,28 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TContentSchema } from '~/pages/form-contents'
+
+const deleteContentsResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameters = {
+  id: TContentSchema['id']
+} & THttpServer
+
+export const deleteContentsRequest = async (parameters: TParameters) => {
+  const { id, ...restParameters } = parameters
+  try {
+    const { data } = await HttpServer(restParameters).delete(
+      `/api/news/${id}/delete`,
+    )
+
+    return deleteContentsResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/layouts/news/menu.ts

@@ -39,7 +39,7 @@ export const FOOTER_MENU: TFooterMenu[] = [
         url: '/support',
       },
       {
-        title: 'Rquest Topic',
+        title: 'Request Topic',
         url: '/request-topic',
       },
     ],

app/pages/dashboard-contents/index.tsx

@@ -1,10 +1,17 @@
+import {
+  PencilSquareIcon,
+  PlusIcon,
+  TrashIcon,
+} from '@heroicons/react/24/solid'
 import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
 import DataTable, { type DataTableSlots } from 'datatables.net-react'
+import { useState } from 'react'
 import { Link, useRouteLoaderData } from 'react-router'
 
 import type { TCategoryResponse } from '~/apis/common/get-categories'
-import type { TAuthorResponse } from '~/apis/common/get-news'
+import type { TAuthorResponse, TNewsResponse } from '~/apis/common/get-news'
 import type { TTagResponse } from '~/apis/common/get-tags'
+import { DialogDelete } from '~/components/dialog/delete'
 import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
@@ -15,7 +22,7 @@ export const ContentsPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_admin.lg-admin._dashboard.contents._index',
   )
-
+  const [selectedContent, setSelectedContent] = useState<TNewsResponse>()
   DataTable.use(DT)
   const dataTable =
     loaderData?.newsData?.sort(
@@ -81,15 +88,26 @@ export const ContentsPage = () => {
           Normal
         </div>
       ),
-    7: (value: string) => (
-      <Button
-        as="a"
-        href={`/lg-admin/contents/update/${encodeURIComponent(value)}`}
-        className="text-md rounded-md"
-        size="sm"
-      >
-        Update Artikel
-      </Button>
+    7: (value: string, _type: unknown, data: TNewsResponse) => (
+      <div className="flex space-x-2">
+        <Button
+          as="a"
+          href={`/lg-admin/contents/update/${encodeURIComponent(value)}`}
+          size="icon"
+          title="Update Artikel"
+        >
+          <PencilSquareIcon className="size-4" />
+        </Button>
+        <Button
+          type="button"
+          size="icon"
+          variant="danger"
+          onClick={() => setSelectedContent(data)}
+          title="Hapus Artikel"
+        >
+          <TrashIcon className="size-4" />
+        </Button>
+      </div>
     ),
   }
   const dataOptions: Config = {
@@ -110,7 +128,7 @@ export const ContentsPage = () => {
           size="lg"
           className="text-md h-[42px] px-4"
         >
-          Buat Artikel
+          <PlusIcon className="size-8" /> Buat Artikel
         </Button>
       </div>
 
@@ -121,6 +139,15 @@ export const ContentsPage = () => {
         options={dataOptions}
         title="Daftar Artikel"
       />
+
+      <DialogDelete
+        selectedId={selectedContent?.id}
+        close={() => setSelectedContent(undefined)}
+        title="Artikel"
+        fetcherAction={`/actions/admin/contents/delete/${selectedContent?.id}`}
+      >
+        <p>{selectedContent?.title}</p>
+      </DialogDelete>
     </div>
   )
 }

app/pages/news/index.tsx

@@ -4,11 +4,13 @@ import { Card } from '~/components/ui/card'
 import { CarouselHero } from '~/components/ui/carousel-hero'
 import { CarouselSection } from '~/components/ui/carousel-section'
 import { Newsletter } from '~/components/ui/newsletter'
-import type { loader } from '~/routes/_news._index'
+import { type clientLoader } from '~/routes/_news._index'
 import type { TNews } from '~/types/news'
 
 export const NewsPage = () => {
-  const loaderData = useRouteLoaderData<typeof loader>('routes/_news._index')
+  const loaderData = useRouteLoaderData<typeof clientLoader>(
+    'routes/_news._index',
+  )
   const spotlight: TNews = {
     title: loaderData?.spotlightCategory?.name || '',
     description: loaderData?.spotlightCategory?.description || '',

app/routes/_news._index.tsx

@@ -1,7 +1,9 @@
+import { ArrowPathIcon } from '@heroicons/react/24/solid'
 import { isRouteErrorResponse } from 'react-router'
 
 import { getCategories } from '~/apis/common/get-categories'
 import { getNews } from '~/apis/common/get-news'
+import { Card } from '~/components/ui/card'
 import { NewsPage } from '~/pages/news'
 
 import type { Route } from './+types/_news._index'
@@ -13,35 +15,75 @@ export const loader = async ({}: Route.LoaderArgs) => {
   const spotlightCategory = categoriesData.find(
     (category) => category.code === spotlightCode,
   )
-  let { data: spotlightNews } = await getNews({ categories: [spotlightCode] })
-  spotlightNews = spotlightNews.filter(
-    (news) => new Date(news.live_at) <= new Date(),
-  )
 
   const beritaCode = 'berita'
   const beritaCategory = categoriesData.find(
     (category) => category.code === beritaCode,
   )
-  let { data: beritaNews } = await getNews({ categories: [beritaCode] })
-  beritaNews = beritaNews.filter((news) => new Date(news.live_at) <= new Date())
 
   const kajianCode = 'kajian'
   const kajianCategory = categoriesData.find(
     (category) => category.code === kajianCode,
   )
-  let { data: kajianNews } = await getNews({ categories: [kajianCode] })
-  kajianNews = kajianNews.filter((news) => new Date(news.live_at) <= new Date())
 
   return {
     spotlightCategory,
-    spotlightNews,
+    spotlightCode,
     beritaCategory,
-    beritaNews,
+    beritaCode,
     kajianCategory,
+    kajianCode,
+  }
+}
+
+export const clientLoader = async ({
+  serverLoader,
+}: Route.ClientLoaderArgs) => {
+  const serverData = await serverLoader()
+
+  let { data: spotlightNews } = await getNews({
+    categories: [serverData.spotlightCode],
+  })
+  spotlightNews = spotlightNews.filter(
+    (news) => new Date(news.live_at) <= new Date(),
+  )
+  let { data: beritaNews } = await getNews({
+    categories: [serverData.beritaCode],
+  })
+  beritaNews = beritaNews.filter((news) => new Date(news.live_at) <= new Date())
+  let { data: kajianNews } = await getNews({
+    categories: [serverData.kajianCode],
+  })
+  kajianNews = kajianNews.filter((news) => new Date(news.live_at) <= new Date())
+
+  return {
+    ...serverData,
+    spotlightNews,
+    beritaNews,
     kajianNews,
   }
 }
 
+clientLoader.hydrate = true as const
+
+export const HydrateFallback = () => {
+  return (
+    <Card>
+      <div className="mt-3 mb-3 grid items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
+        <h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
+          Loading...
+        </h2>
+        <p className="text-xl font-light text-[#777777] italic sm:text-2xl">
+          Please wait while we load the content.
+        </p>
+      </div>
+      <div className="flex items-center justify-center p-10">
+        <ArrowPathIcon className="size-10 animate-spin" />
+      </div>
+    </Card>
+  )
+}
+
 export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
   let message = 'Oops!'
   let details = 'An unexpected error occurred.'
@@ -59,15 +101,21 @@ export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
   }
 
   return (
-    <div className="container mx-auto p-4">
-      <h1>{message}</h1>
-      <p>{details}</p>
+    <Card>
+      <div className="mt-3 mb-3 grid items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
+        <h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
+          {message}
+        </h2>
+        <p className="text-xl font-light text-[#777777] italic sm:text-2xl">
+          {details}
+        </p>
+      </div>
       {stack && (
-        <pre className="w-full p-4 whitespace-pre-wrap">
+        <pre className="w-full whitespace-pre-wrap">
           <code>{stack}</code>
         </pre>
       )}
-    </div>
+    </Card>
   )
 }
 

app/routes/actions.admin.contents.delete.$id.ts

@@ -0,0 +1,48 @@
+import { data } from 'react-router'
+import { XiorError } from 'xior'
+
+import { deleteContentsRequest } from '~/apis/admin/delete-contents'
+import { handleCookie } from '~/libs/cookies'
+
+import type { Route } from './+types/actions.admin.contents.delete.$id'
+
+export const action = async ({ request, params }: Route.ActionArgs) => {
+  const { staffToken: accessToken } = await handleCookie(request)
+  const { id } = params
+  try {
+    const { data: newsData } = await deleteContentsRequest({
+      accessToken,
+      id,
+    })
+
+    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 },
+    )
+  }
+}