feat: enhance news fetching with pagination and active status filters

app/apis/common/get-news.ts

@@ -33,15 +33,22 @@ export type TAuthorResponse = z.infer<typeof authorSchema>
 type TParameters = {
   categories?: string[]
   tags?: string[]
+  active?: boolean
+  limit?: number
+  page?: number
 } & THttpServer
 
 export const getNews = async (parameters?: TParameters) => {
-  const { categories, tags, ...restParameters } = parameters || {}
+  const { categories, tags, active, limit, page, ...restParameters } =
+    parameters || {}
   try {
     const { data } = await HttpServer(restParameters).get(`/api/news`, {
       params: {
         ...(categories && { categories: categories.join('+') }),
         ...(tags && { tags: tags.join('+') }),
+        ...(active && { active }),
+        ...(limit && { limit }),
+        ...(page && { page }),
       },
     })
     return dataResponseSchema.parse(data)

app/components/ui/category-section.tsx

@@ -1,23 +1,18 @@
-import { useRouteLoaderData } from 'react-router'
+import { Suspense } from 'react'
+import { Await, useRouteLoaderData } from 'react-router'
 import { stripHtml } from 'string-strip-html'
 import { twMerge } from 'tailwind-merge'
 
-import type { TNewsResponse } from '~/apis/common/get-news'
 import { CarouselNextIcon } from '~/components/icons/carousel-next'
 import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
 import { Button } from '~/components/ui/button'
 import { useNewsContext } from '~/contexts/news'
 import type { loader } from '~/routes/_news'
+import type { TNews } from '~/types/news'
 import { getPremiumAttribute } from '~/utils/render'
 
 import { Tags } from './tags'
 
-type TNews = {
-  title: string
-  description: string
-  items: TNewsResponse[]
-}
-
 export const CategorySection = (properties: TNews) => {
   const { setIsSuccessOpen } = useNewsContext()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
@@ -47,7 +42,10 @@ export const CategorySection = (properties: TNews) => {
       </div>
 
       <div className="grid sm:grid-cols-3 sm:gap-x-8">
-        {items.map(
+        <Suspense fallback={<div>Loading...</div>}>
+          <Await resolve={items}>
+            {(value) =>
+              value.data.map(
                 (
                   { featured_image, title, content, tags, slug, is_premium },
                   index,
@@ -63,7 +61,9 @@ export const CategorySection = (properties: TNews) => {
                       src={featured_image}
                       alt={title}
                     />
-              <div className={twMerge('flex flex-col justify-between gap-4')}>
+                    <div
+                      className={twMerge('flex flex-col justify-between gap-4')}
+                    >
                       <Tags
                         tags={tags}
                         is_premium={is_premium}
@@ -96,7 +96,10 @@ export const CategorySection = (properties: TNews) => {
                     </div>
                   </div>
                 ),
-        )}
+              )
+            }
+          </Await>
+        </Suspense>
       </div>
 
       <div className="my-5 mt-5 flex flex-row-reverse">

app/pages/news-categories/index.tsx

@@ -17,7 +17,7 @@ export const NewsCategoriesPage = () => {
         <CategorySection
           title={name || ''}
           description={description || ''}
-          items={newsData || []}
+          items={newsData || Promise.resolve({ data: [] })}
         />
       </Card>
     </div>

app/pages/news-detail/index.tsx

@@ -21,7 +21,7 @@ export const NewsDetailPage = () => {
   const berita: TNews = {
     title: loaderData?.beritaCategory?.name || '',
     description: loaderData?.beritaCategory?.description || '',
-    items: loaderData?.beritaNews || [],
+    items: loaderData?.beritaData || Promise.resolve({ data: [] }),
   }
   const currentUrl = globalThis.location
   const { title, content, featured_image, author, live_at, tags } =

app/routes/_news._index.tsx

@@ -27,12 +27,15 @@ export const loader = async ({}: Route.LoaderArgs) => {
 
   const spotlightData = getNews({
     categories: [spotlightCode],
+    active: true,
   })
   const beritaData = getNews({
     categories: [beritaCode],
+    active: true,
   })
   const kajianData = getNews({
     categories: [kajianCode],
+    active: true,
   })
   return {
     spotlightCategory,

app/routes/_news.category.$code.tsx

@@ -11,8 +11,7 @@ export const loader = async ({ params }: Route.LoaderArgs) => {
   const { data: categoriesData } = await getCategories()
   const { code } = params
   const categoryData = categoriesData.find((category) => category.code === code)
-  let { data: newsData } = await getNews({ categories: [code] })
+  const newsData = getNews({ categories: [code], active: true })
-  newsData = newsData.filter((news) => new Date(news.live_at) <= new Date())
   return { categoryData, newsData }
 }
 

app/routes/_news.detail.$slug.tsx

@@ -15,7 +15,8 @@ export const loader = async ({ request, params }: Route.LoaderArgs) => {
   const userAgent = request.headers.get('user-agent')
   const ipAddress =
     request.headers.get('cf-connecting-ip') ||
-    request.headers.get('x-forwarded-for')
+    request.headers.get('x-forwarded-for') ||
+    'localhost'
   const { userToken: accessToken } = await handleCookie(request)
   let userData
   if (accessToken) {
@@ -43,13 +44,12 @@ export const loader = async ({ request, params }: Route.LoaderArgs) => {
   const beritaCategory = categoriesData.find(
     (category) => category.code === beritaCode,
   )
-  let { data: beritaNews } = await getNews({ categories: [beritaCode] })
+  const beritaData = getNews({ categories: [beritaCode], active: true })
-  beritaNews = beritaNews.filter((news) => new Date(news.live_at) <= new Date())
 
   return {
     newsDetailData,
     beritaCategory,
-    beritaNews,
+    beritaData,
     shouldSubscribe,
   }
 }

app/routes/actions.log.ads.$id.ts

@@ -10,7 +10,8 @@ export const action = async ({ request, params }: Route.ActionArgs) => {
   const userAgent = request.headers.get('user-agent')
   const ipAddress =
     request.headers.get('cf-connecting-ip') ||
-    request.headers.get('x-forwarded-for')
+    request.headers.get('x-forwarded-for') ||
+    'localhost'
   const { userToken: accessToken } = await handleCookie(request)
   const { id } = params
   try {