Added Pagination for Activities Page (#1688)

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>
  );
 };

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

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;
+ }
+ });

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
+ };
+};

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));

src/queries/types/rewards.ts

@@ -153,3 +153,8 @@ export type LeaderboardParams = {
  pageSize?: number;
  pageNumber?: number;
 };
+
+export type ActivitiesParams = {
+ pageSize?: number;
+ pageNumber?: number;
+};