From aee92e6c13e0233196e6ee971b2c6d40ed3a58ec Mon Sep 17 00:00:00 2001
From: Abhishek <77395788+abhishek-01k@users.noreply.github.com>
Date: Wed, 3 Jul 2024 12:20:08 +0530
Subject: [PATCH] Added Pagination for Activities Page (#1688)

---
 .../components/RewardsActivitiesList.tsx      | 55 +++++++++++++++----
 .../components/RewardsActivitiesListItem.tsx  |  1 +
 .../hooks/rewards/useGetRewardsActivities.ts  | 20 ++++++-
 .../getRewardsActivitiesModelCreator.ts       | 10 +++-
 .../services/rewards/getRewardsActivities.ts  |  8 ++-
 src/queries/types/rewards.ts                  |  5 ++
 6 files changed, 81 insertions(+), 18 deletions(-)

diff --git a/src/modules/rewards/components/RewardsActivitiesList.tsx b/src/modules/rewards/components/RewardsActivitiesList.tsx
index 070cf5b9fc..89514db2da 100644
--- a/src/modules/rewards/components/RewardsActivitiesList.tsx
+++ b/src/modules/rewards/components/RewardsActivitiesList.tsx
@@ -1,24 +1,34 @@
 // React and other libraries
 import { FC } from 'react';
+import InfiniteScroll from 'react-infinite-scroller';
 
 //Hooks
 import { Activity } from 'queries';
-import { useGetRewardsActivities, useGetUserRewardsDetails } from 'queries/hooks/rewards';
 import { useAccount } from 'hooks';
+import { useGetRewardsActivities, useGetUserRewardsDetails } from 'queries/hooks/rewards';
+
+//Components
+import { RewardsActivitiesListItem } from './RewardsActivitiesListItem';
+import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner';
 
 //Helpers
 import { walletToCAIP10 } from 'helpers/w2w';
 
 //Components
 import { Box } from 'blocks';
-import { RewardsActivitiesListItem } from './RewardsActivitiesListItem';
 
 export type RewardActivitiesProps = {};
 
 const RewardsActivitiesList: FC<RewardActivitiesProps> = () => {
   const { account } = useAccount();
 
-  const { data: rewardActivitiesResponse, isLoading: isLoadingActivities } = useGetRewardsActivities();
+  const {
+    data: rewardActivitiesResponse,
+    isLoading: isLoadingActivities,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage
+  } = useGetRewardsActivities({ pageSize: 5 });
 
   // Getting user Id by wallet address
   const caip10WalletAddress = walletToCAIP10({ account });
@@ -29,21 +39,42 @@ const RewardsActivitiesList: FC<RewardActivitiesProps> = () => {
   const isLoading = isLoadingUserDetails || isLoadingActivities;
 
   // If there are activities then render them else render 5 skeletons
-  const activityList = isLoading ? Array(3).fill(0) : rewardActivitiesResponse?.activities || [];
+  const activityList = isLoading ? Array(3).fill(0) : rewardActivitiesResponse?.pages.flatMap((page) => page.activities) || [];
+
+  const hasMoreData = !isFetchingNextPage && hasNextPage;
 
   return (
     <Box
       display="flex"
       flexDirection="column"
-      gap={{ ml: 's4', initial: 's2' }}
+      overflow="auto"
     >
-      {activityList.map((activity: Activity) => (
-        <RewardsActivitiesListItem
-          userId={userDetails?.userId || ''}
-          activity={activity}
-          isLoadingItem={isLoading}
-        />
-      ))}
+      <InfiniteScroll
+        pageStart={0}
+        loadMore={() => fetchNextPage()}
+        hasMore={hasMoreData}
+        loader={
+          <Box
+            margin="s3"
+            key="loader-spinner"
+          >
+            <LoaderSpinner
+              spinnerSize={24}
+              type={LOADER_TYPE.SEAMLESS}
+            />
+          </Box>
+        }
+        useWindow={false}
+        threshold={150}
+      >
+        {activityList.map((activity: Activity) => (
+          <RewardsActivitiesListItem
+            userId={userDetails?.userId || ''}
+            activity={activity}
+            isLoadingItem={isLoading}
+          />
+        ))}
+      </InfiniteScroll>
     </Box>
   );
 };
diff --git a/src/modules/rewards/components/RewardsActivitiesListItem.tsx b/src/modules/rewards/components/RewardsActivitiesListItem.tsx
index 8e3c9eb4f3..057b460eed 100644
--- a/src/modules/rewards/components/RewardsActivitiesListItem.tsx
+++ b/src/modules/rewards/components/RewardsActivitiesListItem.tsx
@@ -44,6 +44,7 @@ const RewardsActivitiesListItem: FC<RewardActivitiesListItemProps> = ({ userId,
         display="flex"
         flexDirection="column"
         borderRadius="r4"
+        margin={{ ml: 's4 s0', initial: 's2 s0' }}
         backgroundColor={{ light: 'gray-100', dark: 'gray-1000' }}
       >
         <Box
diff --git a/src/queries/hooks/rewards/useGetRewardsActivities.ts b/src/queries/hooks/rewards/useGetRewardsActivities.ts
index 0df5d6c25d..8186e383b3 100644
--- a/src/queries/hooks/rewards/useGetRewardsActivities.ts
+++ b/src/queries/hooks/rewards/useGetRewardsActivities.ts
@@ -1,5 +1,21 @@
-import { useQuery } from '@tanstack/react-query';
+import { useInfiniteQuery } from '@tanstack/react-query';
 import { allActivities } from 'queries/queryKeys';
 import { getRewardsActivities } from 'queries/services/rewards';
+import { ActivitiesParams } from 'queries/types';
 
-export const useGetRewardsActivities = () => useQuery({ queryKey: [allActivities], queryFn: getRewardsActivities });
+export const useGetRewardsActivities = ({ pageSize }: ActivitiesParams) =>
+  useInfiniteQuery({
+    queryKey: [allActivities],
+    initialPageParam: 1,
+    queryFn: ({ pageParam }) =>
+      getRewardsActivities({
+        pageSize,
+        pageNumber: pageParam as number
+      }),
+    getNextPageParam: ({ page, total, size }) => {
+      if (size * page >= total) {
+        return null;
+      }
+      return page + 1;
+    }
+  });
diff --git a/src/queries/models/rewards/getRewardsActivitiesModelCreator.ts b/src/queries/models/rewards/getRewardsActivitiesModelCreator.ts
index e465ddbd43..75abdfaea9 100644
--- a/src/queries/models/rewards/getRewardsActivitiesModelCreator.ts
+++ b/src/queries/models/rewards/getRewardsActivitiesModelCreator.ts
@@ -1,4 +1,10 @@
 import { RewardsAcitivitesResponse } from 'queries/types';
 
-export const getRewardsActivitiesModelCreator = (response: RewardsAcitivitesResponse): RewardsAcitivitesResponse =>
-  response;
+export const getRewardsActivitiesModelCreator = (response: RewardsAcitivitesResponse): RewardsAcitivitesResponse => {
+  return {
+    activities: response.activities,
+    page: response.page,
+    size: response.size,
+    total: response.total
+  };
+};
diff --git a/src/queries/services/rewards/getRewardsActivities.ts b/src/queries/services/rewards/getRewardsActivities.ts
index 83fada627c..56be7b4a88 100644
--- a/src/queries/services/rewards/getRewardsActivities.ts
+++ b/src/queries/services/rewards/getRewardsActivities.ts
@@ -1,10 +1,14 @@
 import axios from 'axios';
 import { getRewardsActivitiesModelCreator } from '../../models/rewards';
 import { getRewardsBaseURL } from '../../baseURL';
+import { ActivitiesParams } from 'queries/types';
 
-export const getRewardsActivities = () =>
+export const getRewardsActivities = ({ pageSize, pageNumber }: ActivitiesParams) =>
   axios({
     method: 'GET',
-
     url: `${`${getRewardsBaseURL()}`}/activities/all`,
+    params: {
+      pageSize: pageSize || 1,
+      pageNumber: pageNumber || 1
+    }
   }).then((response) => getRewardsActivitiesModelCreator(response.data));
diff --git a/src/queries/types/rewards.ts b/src/queries/types/rewards.ts
index a50f018a60..fccbb6cf08 100644
--- a/src/queries/types/rewards.ts
+++ b/src/queries/types/rewards.ts
@@ -153,3 +153,8 @@ export type LeaderboardParams = {
   pageSize?: number;
   pageNumber?: number;
 };
+
+export type ActivitiesParams = {
+  pageSize?: number;
+  pageNumber?: number;
+};