fix pagination nft transaction

oraichain · Sep 12, 2023 · 1dc5a36 · 1dc5a36
1 parent 24e2d50
commit 1dc5a36
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 71 deletions.
diff --git a/src/components/Wallet/NFTToken/NFTTable/NFTTable.js b/src/components/Wallet/NFTToken/NFTTable/NFTTable.js
@@ -36,7 +36,7 @@ export const getHeaderRow = () => {
 		timeHeaderCell,
 	];
 	let headerCellStyles = [
-		{ width: "12%", minWidth: "120px" }, // TxHash
+		{ width: "14%", minWidth: "120px" }, // TxHash
 		{ width: "14%", minWidth: "120px" }, // Name
 		{ width: "8%", minWidth: "80px" }, // Type
 		{ width: "12%", minWidth: "120px" }, //Owner
@@ -46,7 +46,6 @@ export const getHeaderRow = () => {
 		// { width: "12%", minWidth: "120px" }, // Contract
 		{ width: "12%", minWidth: "120px" }, // Description
 		{ width: "8%", minWidth: "80px" }, // time
-
 	];
 
 	return {

diff --git a/src/components/Wallet/NFTToken/NFTToken.js b/src/components/Wallet/NFTToken/NFTToken.js
@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useState } from "react";
+import React, { memo, useState, useRef } from "react";
 import { useGet } from "restful-react";
 import { useTheme } from "@material-ui/core/styles";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
@@ -8,65 +8,28 @@ import NoResult from "src/components/common/NoResult";
 import NFTTable from "./NFTTable";
 import NFTTableSkeleton from "./NFTTable/NFTTableSkeleton";
 import NFTCardSkeleton from "./NFTCard/NFTCardSkeleton";
-import { getListNFTToken, getListOWContract } from "src/lib/api";
+import { getListNFTToken } from "src/lib/api";
 import NFTCard from "./NFTCard";
 import styles from "./NFTToken.module.scss";
+import consts from "src/constants/consts";
 
 const cx = classNames.bind(styles);
 
-const NFTToken = memo(({ account = "", address = "", isOw20 = false }) => {
+const NFTToken = memo(({ address = "" }) => {
 	const theme = useTheme();
 	const isLargeScreen = useMediaQuery(theme.breakpoints.up("lg"));
-
-	const [dataCw, setDataCw] = useState({
-		data: [],
-		page: {
-			limit: 10,
-			page_id: 1,
-		},
-	});
-	const { data, page } = dataCw;
-	const [path, setPath] = useState(() => {
-		if (!isOw20) {
-			return getListNFTToken(address, page);
-		}
-		return getListOWContract(address, page);
-	});
-
-	const { data: dataRes, loading, error } = useGet({
-		path,
-	});
+	const [pageId, setPageId] = useState(1);
+	const totalPagesRef = useRef(null);
 
-	useEffect(() => {
-		if (dataRes) {
-			setDataCw({
-				...dataCw,
-				data: dataRes?.data,
-				page: {
-					...dataCw.page,
-					...dataRes?.page,
-				},
-			});
-		}
-	}, [dataRes]);
-
-	let totalPages = page?.total_page ?? 0;
-	let currentPage = page?.page_id ?? 1;
-
-	const onPageChange = newPage => {
-		const pageObj = {
-			...page,
-			page_id: newPage,
-		};
-		if (!isOw20) {
-			return setPath(getListNFTToken(address, pageObj));
-		}
-		return setPath(getListOWContract(address, pageObj));
+	const onPageChange = page => {
+		setPageId(page);
 	};
 
-	// const tableSekeleton = () => {
-	// 	return isLargeScreen ? <NFTTableSkeleton /> : <NFTCardSkeleton />;
-	// };
+	const limit = 10;
+	const path = `${consts.API_BASE}${consts.API.NFT_TXS}/${address}?limit=${limit}&page_id=${pageId} `;
+	const { data, loading, error } = useGet({
+		path,
+	});
 
 	let tableSection;
 	let paginationSection;
@@ -75,35 +38,24 @@ const NFTToken = memo(({ account = "", address = "", isOw20 = false }) => {
 		tableSection = isLargeScreen ? <NFTTableSkeleton /> : <NFTCardSkeleton />;
 	} else {
 		if (error) {
-			currentPage = null; 
+			totalPagesRef.current = null;
 			tableSection = <NoResult />;
 		} else {
-			if (!isNaN(data?.page_id)) {
-				currentPage = data.page_id;
+			if (!isNaN(data?.page?.total_page)) {
+				totalPagesRef.current = data.page.total_page;
 			} else {
-				currentPage = null;
+				totalPagesRef.current = null;
 			}
 
-			if (Array.isArray(data) && data?.length > 0) {
-				tableSection = isLargeScreen ? (
-					<>
-					<NFTTable data={data} account={account} address={address}/>
-					</>
-
-				) : (
-					<>
-					<NFTCard data={data} account={account} address={address} />
-					</>
-				);
+			if (Array.isArray(data?.data) && data.data.length > 0) {
+				tableSection = isLargeScreen ? <NFTTable data={data.data} /> : <NFTCard data={data.data} />;
 			} else {
 				tableSection = <NoResult />;
 			}
 		}
 	}
-	if (totalPages > 0){
-		paginationSection = <Pagination pages={totalPages} page={currentPage} onChange={(e, page) => onPageChange(page)} />;
-	} 
 
+	paginationSection = totalPagesRef.current ? <Pagination pages={totalPagesRef.current} page={pageId} onChange={(e, page) => onPageChange(page)} /> : <></>;
 
 	return (
 		<div className={cx("nft")}>

diff --git a/src/lib/api.js b/src/lib/api.js
@@ -84,7 +84,7 @@ export const getListCwToken = (address, page) => {
 };
 
 export const getListNFTToken = (address, page) => {
-	return `${consts.API_BASE}${consts.API.NFT_TXS}/${address}?limit=${page?.limit || 1}&page_id=${page?.page_id || 1}`;
+	return `${consts.API_BASE}${consts.API.NFT_TXS}/${address}?limit=${page?.limit || 10}&page_id=${page?.page_id || 1}`;
 };
 
 export const getListOWContract = (address, page) => {