feat(LOY-53): CurrentRewards - replace show more functionality with pagination

components/Blocks/DynamicContent/Rewards/CurrentLevel/Client.tsx

@@ -1,14 +1,11 @@
 "use client"
 
-import { trpc } from "@/lib/trpc/client"
-import { Reward } from "@/server/routers/contentstack/reward/output"
+import { useState } from "react"
 
 import Image from "@/components/Image"
-import LoadingSpinner from "@/components/LoadingSpinner"
+import Pagination from "@/components/MyPages/Pagination"
 import Grids from "@/components/TempDesignSystem/Grids"
-import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
 import Title from "@/components/TempDesignSystem/Text/Title"
-import useLang from "@/hooks/useLang"
 
 import Redeem from "./Redeem"
 
@@ -17,46 +14,21 @@ import styles from "./current.module.css"
 import type { CurrentRewardsClientProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default function ClientCurrentRewards({
-  initialCurrentRewards,
+  rewards,
+  pageSize,
   showRedeem,
 }: CurrentRewardsClientProps) {
-  const lang = useLang()
-  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
-    trpc.contentstack.rewards.current.useInfiniteQuery(
-      {
-        limit: 3,
-        lang,
-      },
-      {
-        getNextPageParam: (lastPage) => lastPage?.nextCursor,
-        initialData: {
-          pageParams: [undefined, 1],
-          pages: [initialCurrentRewards],
-        },
-      }
-    )
-  function loadMoreData() {
-    if (hasNextPage) {
-      fetchNextPage()
-    }
-  }
-  const filteredRewards = data?.pages.filter((page) => page?.rewards) ?? []
-  const rewards = filteredRewards
-    .flatMap((page) => page?.rewards)
-    .filter((reward): reward is Reward => !!reward)
+  const [currentPage, setCurrentPage] = useState(1)
 
-  if (isLoading) {
-    return <LoadingSpinner />
-  }
-
-  if (!rewards.length) {
-    return null
-  }
+  const totalPages = Math.ceil(rewards.length / pageSize)
+  const startIndex = (currentPage - 1) * pageSize
+  const endIndex = startIndex + pageSize
+  const currentRewards = rewards.slice(startIndex, endIndex)
 
   return (
-    <div>
+    <div className={styles.container}>
       <Grids.Stackable>
-        {rewards.map((reward, idx) => (
+        {currentRewards.map((reward, idx) => (
           <article className={styles.card} key={`${reward.reward_id}-${idx}`}>
             <div className={styles.content}>
               <Image
@@ -82,12 +54,11 @@ export default function ClientCurrentRewards({
           </article>
         ))}
       </Grids.Stackable>
-      {hasNextPage &&
-        (isFetching ? (
-          <LoadingSpinner />
-        ) : (
-          <ShowMoreButton loadMoreData={loadMoreData} />
-        ))}
+      <Pagination
+        pageCount={totalPages}
+        currentPage={currentPage}
+        handlePageChange={setCurrentPage}
+      />
     </div>
   )
 }

components/Blocks/DynamicContent/Rewards/CurrentLevel/current.module.css

@@ -123,3 +123,9 @@
   display: flex;
   align-items: center;
 }
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x4);
+}

components/Blocks/DynamicContent/Rewards/CurrentLevel/index.tsx

@@ -14,12 +14,9 @@ export default async function CurrentRewardsBlock({
   subtitle,
   link,
 }: AccountPageComponentProps) {
-  const initialCurrentRewards =
-    await serverClient().contentstack.rewards.current({
-      limit: 3,
-    })
+  const rewardsResponse = await serverClient().contentstack.rewards.current()
 
-  if (!initialCurrentRewards) {
+  if (!rewardsResponse?.rewards.length) {
     return null
   }
 
@@ -27,7 +24,8 @@ export default async function CurrentRewardsBlock({
     <SectionContainer>
       <SectionHeader title={title} link={link} preamble={subtitle} />
       <ClientCurrentRewards
-        initialCurrentRewards={initialCurrentRewards}
+        rewards={rewardsResponse.rewards}
+        pageSize={6}
         showRedeem={env.USE_NEW_REWARDS_ENDPOINT}
       />
       <SectionLink link={link} variant="mobile" />