From 22918b8bdb4742a98522f782db2758798cc9a1ea Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Tue, 18 Mar 2025 17:11:30 +0800
Subject: [PATCH 1/6] refactor: add 'clicked' field to ad response schema and
 update dashboard display

---
 app/apis/common/get-ads.ts                   | 1 +
 app/pages/dashboard-advertisements/index.tsx | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/apis/common/get-ads.ts b/app/apis/common/get-ads.ts
index 743594a..ddb7026 100644
--- a/app/apis/common/get-ads.ts
+++ b/app/apis/common/get-ads.ts
@@ -8,6 +8,7 @@ const adResponseSchema = z.object({
   url: z.string(),
   start_date: z.string(),
   end_date: z.string(),
+  clicked: z.number(),
 })
 const adsResponseSchema = z.object({
   data: z.array(adResponseSchema),
diff --git a/app/pages/dashboard-advertisements/index.tsx b/app/pages/dashboard-advertisements/index.tsx
index 8cb5973..ce748a9 100644
--- a/app/pages/dashboard-advertisements/index.tsx
+++ b/app/pages/dashboard-advertisements/index.tsx
@@ -51,6 +51,10 @@ export const AdvertisementsPage = () => {
         return formatDate(data)
       },
     },
+    {
+      title: 'Diklik',
+      data: 'clicked',
+    },
     {
       title: 'Action',
       data: 'id',
@@ -66,7 +70,7 @@ export const AdvertisementsPage = () => {
         />
       )
     },
-    5: (value: string, _type: unknown, data: TAdResponse) => (
+    6: (value: string, _type: unknown, data: TAdResponse) => (
       <div className="flex space-x-2">
         <Button
           as="a"

From 1585830184803615a3e81186692c10351a63275a Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Tue, 18 Mar 2025 17:26:38 +0800
Subject: [PATCH 2/6] refactor: update ad table column title from 'Diklik' to
 'Jumlah Klik' for clarity

---
 app/pages/dashboard-advertisements/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/dashboard-advertisements/index.tsx b/app/pages/dashboard-advertisements/index.tsx
index ce748a9..161fbde 100644
--- a/app/pages/dashboard-advertisements/index.tsx
+++ b/app/pages/dashboard-advertisements/index.tsx
@@ -52,7 +52,7 @@ export const AdvertisementsPage = () => {
       },
     },
     {
-      title: 'Diklik',
+      title: 'Jumlah Klik',
       data: 'clicked',
     },
     {

From 4ca2d8cf848df7ed0923b43b7fa459bd0a570014 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Wed, 19 Mar 2025 17:21:17 +0800
Subject: [PATCH 3/6] fix: correct spelling of 'Rquest Topic' to 'Request
 Topic' in footer menu

---
 app/layouts/news/menu.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/layouts/news/menu.ts b/app/layouts/news/menu.ts
index 636b898..46db8cd 100644
--- a/app/layouts/news/menu.ts
+++ b/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',
       },
     ],

From ba4e380023f6e4ed50b5601a12d6e5ece8428f2f Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Wed, 19 Mar 2025 17:46:26 +0800
Subject: [PATCH 4/6] feat: implement clientLoader for news data fetching and
 update serverLoader structure

---
 app/pages/news/index.tsx    |  6 +++--
 app/routes/_news._index.tsx | 46 +++++++++++++++++++++++++++++--------
 2 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/app/pages/news/index.tsx b/app/pages/news/index.tsx
index 2625511..bb31758 100644
--- a/app/pages/news/index.tsx
+++ b/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 || '',
diff --git a/app/routes/_news._index.tsx b/app/routes/_news._index.tsx
index 7fff202..47558e1 100644
--- a/app/routes/_news._index.tsx
+++ b/app/routes/_news._index.tsx
@@ -13,35 +13,61 @@ 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 <div>Loading...</div>
+}
+
 export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
   let message = 'Oops!'
   let details = 'An unexpected error occurred.'

From abf7e829ba793a1247cf3ba85a85b035ad2ed63f Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Wed, 19 Mar 2025 17:53:27 +0800
Subject: [PATCH 5/6] feat: enhance loading state with spinner and card
 component in HydrateFallback

---
 app/routes/_news._index.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/routes/_news._index.tsx b/app/routes/_news._index.tsx
index 47558e1..2fb4424 100644
--- a/app/routes/_news._index.tsx
+++ b/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'
@@ -65,7 +67,14 @@ export const clientLoader = async ({
 clientLoader.hydrate = true as const
 
 export const HydrateFallback = () => {
-  return <div>Loading...</div>
+  return (
+    <Card>
+      <div className="flex h-96 items-center justify-center">
+        <ArrowPathIcon className="size-5 animate-spin" />{' '}
+        <span>Loading...</span>
+      </div>
+    </Card>
+  )
 }
 
 export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {

From deeefda8bcabcefada51b90c428afc2e93565f94 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Wed, 19 Mar 2025 18:00:29 +0800
Subject: [PATCH 6/6] refactor: update loading and error boundary components to
 use Card for consistency

---
 app/routes/_news._index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/routes/_news._index.tsx b/app/routes/_news._index.tsx
index 2fb4424..2189320 100644
--- a/app/routes/_news._index.tsx
+++ b/app/routes/_news._index.tsx
@@ -69,7 +69,7 @@ clientLoader.hydrate = true as const
 export const HydrateFallback = () => {
   return (
     <Card>
-      <div className="flex h-96 items-center justify-center">
+      <div className="flex h-96 items-center justify-center gap-1">
         <ArrowPathIcon className="size-5 animate-spin" />{' '}
         <span>Loading...</span>
       </div>
@@ -94,7 +94,7 @@ export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
   }
 
   return (
-    <div className="container mx-auto p-4">
+    <Card>
       <h1>{message}</h1>
       <p>{details}</p>
       {stack && (
@@ -102,7 +102,7 @@ export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
           <code>{stack}</code>
         </pre>
       )}
-    </div>
+    </Card>
   )
 }