From b3544e4002303e870da530f6533931749cb551a1 Mon Sep 17 00:00:00 2001
From: Hau Nguyen Van <nguyenvanhauit1997@gmail.com>
Date: Mon, 25 Sep 2023 14:18:45 +0700
Subject: [PATCH] fix tab transaction

---
 .../TransactionsCard/TransactionsCard.js      | 20 ++++---
 src/containers/TxList/TxList.js               | 59 ++++---------------
 2 files changed, 24 insertions(+), 55 deletions(-)

diff --git a/src/components/Dashboard/TransactionsCard/TransactionsCard.js b/src/components/Dashboard/TransactionsCard/TransactionsCard.js
index 884e7145..1e91dcfc 100644
--- a/src/components/Dashboard/TransactionsCard/TransactionsCard.js
+++ b/src/components/Dashboard/TransactionsCard/TransactionsCard.js
@@ -1,12 +1,12 @@
-import React, {useState, useEffect, useRef} from "react";
-import {NavLink} from "react-router-dom";
-import {useTheme} from "@material-ui/core/styles";
+import React, { useState, useEffect, useRef } from "react";
+import { NavLink } from "react-router-dom";
+import { useTheme } from "@material-ui/core/styles";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
-import {useGet} from "restful-react";
+import { useGet } from "restful-react";
 import cn from "classnames/bind";
 import consts from "src/constants/consts";
-import {arraysEqual, calculateBefore, mergeArrays} from "src/helpers/helper";
-import {_} from "src/lib/scripts";
+import { arraysEqual, calculateBefore, mergeArrays } from "src/helpers/helper";
+import { _ } from "src/lib/scripts";
 import Pagination from "src/components/common/Pagination";
 import NoResult from "src/components/common/NoResult";
 import TransactionTable from "src/components/Dashboard/TransactionTable";
@@ -53,7 +53,7 @@ const TransactionsCard = props => {
 		path += "&before=" + calculateBefore(totalItemsRef.current, consts.REQUEST.LIMIT, pageId);
 	}
 
-	const {data, loading, error, refetch} = useGet({
+	const { data, loading, error, refetch } = useGet({
 		path: path,
 		resolve: data => {
 			if (!firstLoadCompleted) {
@@ -131,7 +131,11 @@ const TransactionsCard = props => {
 			}
 		}
 	}
-	paginationSection = totalPagesRef.current ? <Pagination pages={totalPagesRef.current} page={pageId} onChange={(e, page) => onPageChange(page)} /> : <></>;
+	paginationSection = totalPagesRef.current ? (
+		<Pagination isCustomPaging={true} pages={totalPagesRef.current} page={pageId} onChange={(e, page) => onPageChange(page)} />
+	) : (
+		<></>
+	);
 
 	return (
 		<div className={cx("transactions-card")}>
diff --git a/src/containers/TxList/TxList.js b/src/containers/TxList/TxList.js
index 4e167e58..22faa57f 100644
--- a/src/containers/TxList/TxList.js
+++ b/src/containers/TxList/TxList.js
@@ -44,7 +44,6 @@ const TxList = () => {
 	const prevDataRef = useRef([]);
 
 	let timerIdRef = useRef(null);
-	let timerTxsRef = useRef(null);
 
 	let titleSection;
 	let tableSection;
@@ -56,12 +55,6 @@ const TxList = () => {
 		}
 	};
 
-	const cleanUpTxs = () => {
-		if (timerTxsRef) {
-			clearInterval(timerTxsRef.current);
-		}
-	};
-
 	const onPageChange = page => {
 		cleanUp();
 		setFirstLoadCompleted(false);
@@ -188,61 +181,33 @@ const TxList = () => {
 			setLoading(true);
 			if (pending) {
 				await queryListPending();
-				return;
-			}
-			let before = null,
-				type = "";
-			if (data?.paging?.total && !isInterval) {
-				before = prevOldPage.current < pageId ? data.paging.before : data.paging.after;
-				type = prevOldPage.current < pageId ? "next" : "previous";
+			} else {
+				let before = null,
+					type = "";
+				if (data?.paging?.total && !isInterval) {
+					before = prevOldPage.current < pageId ? data.paging.before : data.paging.after;
+					type = prevOldPage.current < pageId ? "next" : "previous";
+				}
+				await queryList({ before, type });
 			}
-			await queryList({ before, type });
 		} finally {
-			setTimeout(() => {
-				setLoading(false);
-			}, 800);
+			setLoading(false);
 		}
 	};
 
 	useEffect(() => {
 		getListTxs();
-	}, []);
-
-	useEffect(() => {
-		getListTxs();
-		if (pageId == 1) {
-			timerIdRef.current = null;
-			timerTxsRef.current = setInterval(() => {
+		if (pageId == 1 || pending) {
+			timerIdRef.current = setInterval(() => {
 				getListTxs(true);
 			}, consts.REQUEST.TIMEOUT);
 		} else {
-			cleanUpTxs();
-		}
-		return () => {
-			cleanUpTxs();
-		};
-	}, [pageId]);
-
-	useEffect(() => {
-		if (!pending) {
-			getListTxs(true);
 			cleanUp();
-			timerIdRef.current = null;
-			timerTxsRef.current = setInterval(() => {
-				getListTxs(true);
-			}, consts.REQUEST.TIMEOUT);
-			return;
 		}
-		setTableData([]);
-		clearInterval(timerTxsRef.current);
-		timerTxsRef.current = null;
-		timerIdRef.current = setInterval(() => {
-			getListTxs();
-		}, consts.REQUEST.TIMEOUT);
 		return () => {
 			cleanUp();
 		};
-	}, [pending]);
+	}, [pageId, pending]);
 
 	paginationSection = totalPagesRef.current ? (
 		!pending && <Pagination disabled={loading} isCustomPaging pages={totalPagesRef.current} page={pageId} onChange={(e, page) => onPageChange(page)} />