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,56 +42,64 @@ export const CategorySection = (properties: TNews) => {
       </div>
 
       <div className="grid sm:grid-cols-3 sm:gap-x-8">
-        {items.map(
-          (
-            { featured_image, title, content, tags, slug, is_premium },
-            index,
-          ) => (
-            <div
-              key={index}
-              className={twMerge('grid gap-3 sm:gap-x-8')}
-            >
-              <img
-                className={twMerge(
-                  'aspect-[174/100] w-full rounded-md object-cover sm:aspect-[5/4]',
-                )}
-                src={featured_image}
-                alt={title}
-              />
-              <div className={twMerge('flex flex-col justify-between gap-4')}>
-                <Tags
-                  tags={tags}
-                  is_premium={is_premium}
-                />
-
-                <div>
-                  <h3
-                    className={twMerge(
-                      'mt-2 w-full text-xl font-bold sm:mt-0 sm:text-2xl',
-                    )}
+        <Suspense fallback={<div>Loading...</div>}>
+          <Await resolve={items}>
+            {(value) =>
+              value.data.map(
+                (
+                  { featured_image, title, content, tags, slug, is_premium },
+                  index,
+                ) => (
+                  <div
+                    key={index}
+                    className={twMerge('grid gap-3 sm:gap-x-8')}
                   >
-                    {title}
-                  </h3>
-                  <p className="text-md mt-5 line-clamp-3 text-[#777777] sm:text-xl">
-                    {stripHtml(content).result}
-                  </p>
-                </div>
-                <Button
-                  size="block"
-                  {...getPremiumAttribute({
-                    isPremium: is_premium,
-                    slug,
-                    onClick: () => setIsSuccessOpen('warning'),
-                    userData,
-                  })}
-                  className="mb-5"
-                >
-                  View More
-                </Button>
-              </div>
-            </div>
-          ),
-        )}
+                    <img
+                      className={twMerge(
+                        'aspect-[174/100] w-full rounded-md object-cover sm:aspect-[5/4]',
+                      )}
+                      src={featured_image}
+                      alt={title}
+                    />
+                    <div
+                      className={twMerge('flex flex-col justify-between gap-4')}
+                    >
+                      <Tags
+                        tags={tags}
+                        is_premium={is_premium}
+                      />
+
+                      <div>
+                        <h3
+                          className={twMerge(
+                            'mt-2 w-full text-xl font-bold sm:mt-0 sm:text-2xl',
+                          )}
+                        >
+                          {title}
+                        </h3>
+                        <p className="text-md mt-5 line-clamp-3 text-[#777777] sm:text-xl">
+                          {stripHtml(content).result}
+                        </p>
+                      </div>
+                      <Button
+                        size="block"
+                        {...getPremiumAttribute({
+                          isPremium: is_premium,
+                          slug,
+                          onClick: () => setIsSuccessOpen('warning'),
+                          userData,
+                        })}
+                        className="mb-5"
+                      >
+                        View More
+                      </Button>
+                    </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] })
-  newsData = newsData.filter((news) => new Date(news.live_at) <= new Date())
+  const newsData = getNews({ categories: [code], active: true })
   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] })
-  beritaNews = beritaNews.filter((news) => new Date(news.live_at) <= new Date())
+  const beritaData = getNews({ categories: [beritaCode], active: true })
 
   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 {