[GSW-2407] user positions pagination (#790)

* feat: [GSW-2407] UserPositions pagination

* feat: [GSW-2407] Pagination

* feat:[GSW-2407] Pagination for portfolio page

* feat: [GSW-2407] Pagination KeepPreviousData

* fix: [GSW-2407] Pagination count

Author: tfrg

packages/web/src/common/values/breakpoint.constant.ts

@@ -3,7 +3,17 @@ interface PositionCardListBreakPoint {
   displayCount: number;
 }
 
-export const positionCardListBreakPoints: PositionCardListBreakPoint[] = [
+export const POSITION_CARD_LIST_BREAKPOINTS: PositionCardListBreakPoint[] = [
   { width: 1180, displayCount: 4 },
   { width: 920, displayCount: 3 },
 ];
+
+export const POSITION_CARD_BREAKPOINTS = {
+  TABLET_MIN: 768,
+  DESKTOP_MIN: 1180,
+} as const;
+
+export const POSITION_CARD_DISPLAY_COUNT = {
+  TABLET: 3,
+  DESKTOP: 4,
+} as const;

packages/web/src/components/common/my-position-card-list/MyPositionCardList.tsx

@@ -4,11 +4,13 @@ import LoadMoreButton from "@components/common/load-more-button/LoadMoreButton";
 import { pulseSkeletonStyle } from "@constants/skeleton.constant";
 import { PoolPositionModel } from "@models/position/pool-position-model";
 import { TokenPriceModel } from "@models/token/token-price-model";
+import { DEVICE_TYPE } from "@styles/media";
 
 import MyPositionCard from "./my-position-card/MyPositionCard";
 
 import { BlankPositionCard, CardListWrapper } from "./MyPositionCardList.styles";
 import { HorizontalScrollWrapper } from "../scroll-wrapper";
+import Pagination from "../pagination/Pagination";
 
 interface MyPositionCardListProps {
   address?: string | null;
@@ -18,15 +20,20 @@ interface MyPositionCardListProps {
   onClickLoadMore?: () => void;
   positions: PoolPositionModel[];
   currentIndex: number;
+  maxDisplayCount: number;
   movePoolDetail: (poolId: string, positionId: number) => void;
   mobile: boolean;
   divRef?: React.RefObject<HTMLDivElement>;
   onScroll?: () => void;
-  showPagination: boolean;
+  showPositionIndicator: boolean;
   showLoadMore: boolean;
   width: number;
   themeKey: "dark" | "light";
   tokenPrices: Record<string, TokenPriceModel>;
+  currentPage?: number;
+  totalPage?: number;
+  movePage: (page: number) => void;
+  limit?: number;
 }
 
 const MyPositionCardList: React.FC<MyPositionCardListProps> = ({
@@ -37,31 +44,36 @@ const MyPositionCardList: React.FC<MyPositionCardListProps> = ({
   onClickLoadMore,
   positions,
   currentIndex,
+  maxDisplayCount,
   movePoolDetail,
   mobile,
   divRef,
   onScroll,
-  showPagination,
+  showPositionIndicator,
   width,
   themeKey,
   showLoadMore,
   tokenPrices,
+  currentPage,
+  totalPage,
+  movePage,
+  limit,
 }) => {
+  const breakpoint = width >= 920 ? DEVICE_TYPE.WEB : DEVICE_TYPE.MOBILE;
+
   const hasPositions = positions.length > 0;
   const shouldShowSkeleton = isLoading || (!isFetched && !hasPositions);
   const shouldShowPositions = !isLoading && hasPositions;
-  const shouldShowBlankCards = isFetched && !isLoading && hasPositions && positions.length < 4;
   const shouldShowLoadMoreButton = !mobile && !isLoading && showLoadMore && !!onClickLoadMore;
-  const shouldShowPagination = showPagination && isFetched && hasPositions && !isLoading;
-
-  const maxDisplayCount = useMemo(() => {
-    return width <= 1180 && width >= 768 ? 3 : 4;
-  }, [width]);
+  const shouldShowPositionIndicator = showPositionIndicator && isFetched && hasPositions && !isLoading;
+  const shouldShowPagination = Boolean(totalPage && totalPage > 1 && !loadMore);
+  const targetCount = shouldShowPagination && limit ? limit : maxDisplayCount;
+  const shouldShowBlankCards = isFetched && !isLoading && hasPositions && positions.length < maxDisplayCount;
 
   const blankCardCount = useMemo(() => {
     if (!shouldShowBlankCards) return 0;
-    return maxDisplayCount - positions.length;
-  }, [shouldShowBlankCards, maxDisplayCount, positions.length]);
+    return targetCount - positions.length;
+  }, [shouldShowBlankCards, targetCount, positions.length]);
 
   return (
     <CardListWrapper $loading={isLoading}>
@@ -88,9 +100,19 @@ const MyPositionCardList: React.FC<MyPositionCardListProps> = ({
             <span key={idx} className="card-skeleton" css={pulseSkeletonStyle({ w: "100%", tone: "600" })} />
           ))}
       </HorizontalScrollWrapper>
-      {shouldShowLoadMoreButton && <LoadMoreButton show={loadMore} onClick={onClickLoadMore} />}
 
       {shouldShowPagination && (
+        <Pagination
+          currentPage={currentPage || 1}
+          totalPage={totalPage || 1}
+          onPageChange={movePage}
+          siblingCount={breakpoint !== DEVICE_TYPE.MOBILE ? 2 : 1}
+        />
+      )}
+
+      {shouldShowLoadMoreButton && <LoadMoreButton show={loadMore} onClick={onClickLoadMore} />}
+
+      {shouldShowPositionIndicator && (
         <div className="box-indicator">
           <span className="current-page">{currentIndex}</span>
           <span>/</span>

packages/web/src/hooks/pool/data/use-position-data.ts

@@ -10,6 +10,9 @@ export interface UsePositionDataOption {
   address?: string;
   isClosed?: boolean;
   poolPath?: string | null;
+  page?: number;
+  limit?: number;
+  withClosed?: boolean;
   queryOption?: UseQueryOptions<PositionModel[], Error, PositionModel[], QueryKey>;
 }
 
@@ -27,20 +30,27 @@ export const usePositionData = (options?: UsePositionDataOption) => {
     isError,
     isFetched: isFetchedPosition,
     isLoading: isLoadingPosition,
+    isFetching: isFetchingPosition,
+    isPreviousData,
   } = useGetPositionsByAddress({
     address: fetchedAddress as string,
     isClosed: options?.isClosed,
     poolPath: options?.poolPath,
+    page: options?.page,
+    limit: options?.limit,
+    withClosed: options?.withClosed,
   });
 
+  const { totalCount: totalPositionCount = 0, positions: rawPositions = [] } = data ?? {};
+
   const { isLoading: isCommonLoading } = useLoading();
 
   const {
     data: positions = [],
     isFetched: isFetchedPoolPositions,
     isLoading: isLoadingPoolPositions,
     refetch: refetchPooPositions,
-  } = useMakePoolPositions(data, pools, isFetchedPosition);
+  } = useMakePoolPositions(rawPositions, pools, isFetchedPosition);
 
   const availableStake = useMemo(() => {
     if (!isFetchedPoolPositions) {
@@ -79,17 +89,19 @@ export const usePositionData = (options?: UsePositionDataOption) => {
 
   useEffect(() => {
     refetchPooPositions();
-  }, [data, pools]);
+  }, [data, pools, refetchPooPositions]);
 
   return {
     availableStake,
     isError,
     positions,
+    totalPositionCount,
     refetch,
     checkStakedPool,
     getPositions,
     isFetchedPosition: isFetchedPosition && isFetchedPoolPositions,
     loading,
     isLoadingPool,
+    isPageChanging: isFetchingPosition && isPreviousData,
   };
 };

packages/web/src/layouts/earn/components/earn-my-positions/EarnMyPositions.tsx

@@ -30,7 +30,8 @@ export interface EarnMyPositionsProps {
   divRef: React.RefObject<HTMLDivElement>;
   onScroll: () => void;
   currentIndex: number;
-  showPagination: boolean;
+  maxDisplayCount: number;
+  showPositionIndicator: boolean;
   showLoadMore: boolean;
   width: number;
   loadMore: boolean;
@@ -42,6 +43,10 @@ export interface EarnMyPositionsProps {
   tokenPrices: Record<string, TokenPriceModel>;
   highestApr: number;
   onOpenVideoGuide: (type: "POSITION") => void;
+  currentPage?: number;
+  totalPage?: number;
+  movePage: (page: number) => void;
+  limit?: number;
 }
 
 const EarnMyPositions: React.FC<EarnMyPositionsProps> = ({
@@ -65,7 +70,8 @@ const EarnMyPositions: React.FC<EarnMyPositionsProps> = ({
   onScroll,
   divRef,
   currentIndex,
-  showPagination,
+  maxDisplayCount,
+  showPositionIndicator,
   showLoadMore,
   width,
   loadMore,
@@ -77,6 +83,10 @@ const EarnMyPositions: React.FC<EarnMyPositionsProps> = ({
   tokenPrices,
   highestApr,
   onOpenVideoGuide,
+  currentPage,
+  totalPage,
+  movePage,
+  limit,
 }) => (
   <EarnMyPositionswrapper>
     <EarnMyPositionsHeader
@@ -110,7 +120,8 @@ const EarnMyPositions: React.FC<EarnMyPositionsProps> = ({
       divRef={divRef}
       onScroll={onScroll}
       currentIndex={currentIndex}
-      showPagination={showPagination}
+      maxDisplayCount={maxDisplayCount}
+      showPositionIndicator={showPositionIndicator}
       showLoadMore={showLoadMore}
       width={width}
       loadMore={loadMore}
@@ -119,6 +130,10 @@ const EarnMyPositions: React.FC<EarnMyPositionsProps> = ({
       account={account}
       tokenPrices={tokenPrices}
       highestApr={highestApr}
+      currentPage={currentPage}
+      totalPage={totalPage}
+      movePage={movePage}
+      limit={limit}
     />
   </EarnMyPositionswrapper>
 );

packages/web/src/layouts/earn/components/earn-my-positions/earn-my-positions-content/EarnMyPositionsContent.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 
-import MyPositionCardList from "@components/common/my-position-card-list/MyPositionCardList";
 import { AccountModel } from "@models/account/account-model";
 import { PoolPositionModel } from "@models/position/pool-position-model";
 import { TokenPriceModel } from "@models/token/token-price-model";
 
 import EarnMyPositionNoLiquidity from "./earn-my-positions-no-liquidity/EarnMyPositionNoLiquidity";
 import EarnMyPositionsUnconnected from "./earn-my-positions-unconnected/EarnMyPositionsUnconnected";
 import OtherPositionNoLiquidity from "./other-positions-no-liquidity/OtherPositionNoLiquidity";
+import MyPositionCardList from "@components/common/my-position-card-list/MyPositionCardList";
 
 export interface EarnMyPositionContentProps {
   address?: string | null;
@@ -24,7 +24,8 @@ export interface EarnMyPositionContentProps {
   divRef: React.RefObject<HTMLDivElement>;
   onScroll: () => void;
   currentIndex: number;
-  showPagination: boolean;
+  maxDisplayCount: number;
+  showPositionIndicator: boolean;
   showLoadMore: boolean;
   width: number;
   loadMore: boolean;
@@ -33,6 +34,10 @@ export interface EarnMyPositionContentProps {
   account: AccountModel | null;
   tokenPrices: Record<string, TokenPriceModel>;
   highestApr: number;
+  currentPage?: number;
+  totalPage?: number;
+  movePage: (page: number) => void;
+  limit?: number;
 }
 
 const EarnMyPositionsContent: React.FC<EarnMyPositionContentProps> = ({
@@ -49,7 +54,8 @@ const EarnMyPositionsContent: React.FC<EarnMyPositionContentProps> = ({
   divRef,
   onScroll,
   currentIndex,
-  showPagination,
+  maxDisplayCount,
+  showPositionIndicator,
   showLoadMore,
   width,
   loadMore,
@@ -58,6 +64,10 @@ const EarnMyPositionsContent: React.FC<EarnMyPositionContentProps> = ({
   account,
   tokenPrices,
   highestApr,
+  currentPage,
+  totalPage,
+  movePage,
+  limit,
 }) => {
   if (isOtherPosition && positions.length === 0 && !loading) {
     return <OtherPositionNoLiquidity account={account} />;
@@ -77,17 +87,22 @@ const EarnMyPositionsContent: React.FC<EarnMyPositionContentProps> = ({
       isFetched={fetched}
       isLoading={loading}
       currentIndex={currentIndex}
+      maxDisplayCount={maxDisplayCount}
       movePoolDetail={movePoolDetail}
       mobile={mobile}
       divRef={divRef}
       onScroll={onScroll}
-      showPagination={showPagination}
+      showPositionIndicator={showPositionIndicator}
       showLoadMore={showLoadMore}
       width={width}
       loadMore={loadMore}
       onClickLoadMore={onClickLoadMore}
       themeKey={themeKey}
       tokenPrices={tokenPrices}
+      currentPage={currentPage}
+      totalPage={totalPage}
+      movePage={movePage}
+      limit={limit}
     />
   );
 };

packages/web/src/layouts/earn/components/earn-my-positions/earn-my-positions-header/EarnMyPositionsHeader.tsx

@@ -73,13 +73,13 @@ const EarnMyPositionsHeader: React.FC<EarnMyPositionsHeaderProps> = ({
             </span>
             <span>{`${t("Earn:positions.title", {
               context: "other",
-            })} (${positionLength})`}</span>
+            })} (${positionLength.toLocaleString()})`}</span>
           </>
         );
       }
 
       if (connected) {
-        return <span>{`${t("Earn:positions.title")} (${positionLength})`}</span>;
+        return <span>{`${t("Earn:positions.title")} (${positionLength.toLocaleString()})`}</span>;
       }
 
       return <span>{t("Earn:positions.title")}</span>;