From 4beb87b0203fe9eb393d911c9ab34df9fd781d41 Mon Sep 17 00:00:00 2001
From: Hau Nguyen Van <nguyenvanhauit1997@gmail.com>
Date: Fri, 22 Sep 2023 18:11:37 +0700
Subject: [PATCH] update screen txs

---
 .../common/Pagination/Pagination.js           |  68 +++--
 src/containers/TxList/TxList.js               | 263 ++++++++++--------
 src/containers/TxList/TxListOld.js            | 225 +++++++++++++++
 3 files changed, 423 insertions(+), 133 deletions(-)
 create mode 100644 src/containers/TxList/TxListOld.js

diff --git a/src/components/common/Pagination/Pagination.js b/src/components/common/Pagination/Pagination.js
index 5e18b6ba..a21966cc 100644
--- a/src/components/common/Pagination/Pagination.js
+++ b/src/components/common/Pagination/Pagination.js
@@ -1,22 +1,23 @@
-import React, {memo} from "react";
-import {usePagination} from "@material-ui/lab/Pagination";
+import React, { memo } from "react";
+import { usePagination } from "@material-ui/lab/Pagination";
 import classNames from "classnames/bind";
-import {noop} from "lodash";
-import {ReactComponent as FirstButtonIcon} from "src/assets/pagination/first_button_ic.svg";
-import {ReactComponent as LastButtonIcon} from "src/assets/pagination/last_button_ic.svg";
-import {ReactComponent as PrevButtonIcon} from "src/assets/pagination/prev_button_ic.svg";
-import {ReactComponent as NextButtonIcon} from "src/assets/pagination/next_button_ic.svg";
+import { noop } from "lodash";
+import { ReactComponent as FirstButtonIcon } from "src/assets/pagination/first_button_ic.svg";
+import { ReactComponent as LastButtonIcon } from "src/assets/pagination/last_button_ic.svg";
+import { ReactComponent as PrevButtonIcon } from "src/assets/pagination/prev_button_ic.svg";
+import { ReactComponent as NextButtonIcon } from "src/assets/pagination/next_button_ic.svg";
 import styles from "./Pagination.module.scss";
 
 const cx = classNames.bind(styles);
 
-const Pagination = memo(({pages, onChange = noop, page = 1, itemClassName}) => {
-	const {items} = usePagination({
+const Pagination = memo(({ disabled = false, pages, onChange = noop, page = 1, itemClassName, isCustomPaging = false }) => {
+	const { items } = usePagination({
 		count: pages,
 		page: page,
 		showFirstButton: true,
 		showLastButton: true,
 		onChange,
+		disabled,
 	});
 
 	const getButtonIcon = type => {
@@ -43,27 +44,48 @@ const Pagination = memo(({pages, onChange = noop, page = 1, itemClassName}) => {
 	return (
 		<nav className={cx("container")}>
 			<ul className={cx("pagination")}>
-				{items.map(({page, type, selected, ...item}, index) => {
+				{items.map(({ page, type, selected, ...item }, index) => {
 					let children = null;
-					switch (type) {
-						case "start-ellipsis":
-						case "end-ellipsis":
-							children = "...";
-							break;
-						case "page":
+					if (isCustomPaging) {
+						// if (["first", "last", "previous", "next"].includes(type)) {
+						if (["previous", "next"].includes(type)) {
 							children = (
-								<button type='button' className={cx("page-button", {active: selected})} {...item}>
-									{page}
+								<button type='button' {...item}>
+									{getButtonIcon(type)}
 								</button>
 							);
-							break;
-						default:
+						}
+						if (selected) {
 							children = (
-								<button type='button' {...item}>
-									{getButtonIcon(type)}
+								<button type='button' className={cx("page-button", { active: selected })} {...item}>
+									{page}
 								</button>
 							);
-							break;
+						}
+						if (!children) {
+							return null;
+						}
+					} else {
+						switch (type) {
+							case "start-ellipsis":
+							case "end-ellipsis":
+								children = "...";
+								break;
+							case "page":
+								children = (
+									<button type='button' className={cx("page-button", { active: selected })} {...item}>
+										{page}
+									</button>
+								);
+								break;
+							default:
+								children = (
+									<button type='button' {...item}>
+										{getButtonIcon(type)}
+									</button>
+								);
+								break;
+						}
 					}
 
 					return (
diff --git a/src/containers/TxList/TxList.js b/src/containers/TxList/TxList.js
index efbe161d..4e167e58 100644
--- a/src/containers/TxList/TxList.js
+++ b/src/containers/TxList/TxList.js
@@ -1,14 +1,14 @@
-import React, {useState, useEffect, useRef} from "react";
-import {useHistory} from "react-router-dom";
-import {useTheme} from "@material-ui/core/styles";
+import React, { useState, useEffect, useRef, useMemo } from "react";
+import { useHistory } 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 queryString from "query-string";
 import Container from "@material-ui/core/Container";
 import cn from "classnames/bind";
 import consts from "src/constants/consts";
-import {arraysEqual, calculateBefore, decodeTx, mergeArrays} from "src/helpers/helper";
-import {_} from "src/lib/scripts";
+import { arraysEqual, calculateBefore, decodeTx, mergeArrays } from "src/helpers/helper";
+import { _ } from "src/lib/scripts";
 import TogglePageBar from "src/components/common/TogglePageBar";
 import TitleWrapper from "src/components/common/TitleWrapper";
 import PageTitle from "src/components/common/PageTitle";
@@ -19,20 +19,24 @@ import TransactionTable from "src/components/TxList/TransactionTable";
 import TransactionTableSkeleton from "src/components/TxList/TransactionTable/TransactionTableSkeleton";
 import TransactionCardList from "src/components/TxList/TransactionCardList";
 import TransactionCardListSkeleton from "src/components/TxList/TransactionCardList/TransactionCardListSkeleton";
+import axios from "axios";
 import styles from "./TxList.module.scss";
 
 const cx = cn.bind(styles);
 
 const TxList = () => {
+	const [data, setData] = useState([]);
+	const [tableData, setTableData] = useState([]);
+	const [loading, setLoading] = useState(false);
+
 	const history = useHistory();
 	const theme = useTheme();
 	const prevPendingRef = useRef(null);
+	const prevOldPage = useRef(null);
 	const isLargeScreen = useMediaQuery(theme.breakpoints.up("lg"));
 	const queryStringParse = queryString.parse(history.location.search) || {};
-	const pendingBasePath = `https://rpc.orai.io/unconfirmed_txs?limit=${consts.REQUEST.LIMIT}`;
-	const restBasePath = `${consts.API.TXLIST}?limit=${consts.REQUEST.LIMIT}`;
 	const [firstLoadCompleted, setFirstLoadCompleted] = useState(false);
-	const [loadCompleted, setLoadCompleted] = useState(false);
+
 	const [pageId, setPageId] = useState(1);
 	const totalItemsRef = useRef(null);
 	const totalPagesRef = useRef(null);
@@ -40,17 +44,28 @@ const TxList = () => {
 	const prevDataRef = useRef([]);
 
 	let timerIdRef = useRef(null);
+	let timerTxsRef = useRef(null);
+
+	let titleSection;
+	let tableSection;
+	let paginationSection;
 
 	const cleanUp = () => {
 		if (timerIdRef) {
-			clearTimeout(timerIdRef.current);
+			clearInterval(timerIdRef.current);
+		}
+	};
+
+	const cleanUpTxs = () => {
+		if (timerTxsRef) {
+			clearInterval(timerTxsRef.current);
 		}
 	};
 
 	const onPageChange = page => {
 		cleanUp();
 		setFirstLoadCompleted(false);
-		setLoadCompleted(false);
+		prevOldPage.current = pageId;
 		setPageId(page);
 	};
 
@@ -58,60 +73,12 @@ const TxList = () => {
 		prevDataRef.current = null;
 	}
 
-	let path;
 	const pending = queryStringParse.type === "pending" ? true : false;
 
 	if (_.isNil(prevPendingRef.current)) {
 		prevPendingRef.current = pending;
 	}
 
-	if (prevPendingRef.current != pending) {
-		cleanUp();
-		setFirstLoadCompleted(false);
-		setLoadCompleted(false);
-		setPageId(1);
-		prevPendingRef.current = pending;
-	}
-
-	if (pending) {
-		path = pendingBasePath;
-	} else {
-		path = restBasePath;
-		if (totalItemsRef.current) {
-			path += "&before=" + calculateBefore(totalItemsRef.current, consts.REQUEST.LIMIT, pageId);
-		}
-	}
-
-	const {data, loading, error, refetch} = useGet({
-		path: path,
-		resolve: data => {
-			if (!firstLoadCompleted) {
-				setFirstLoadCompleted(true);
-			}
-			setLoadCompleted(true);
-			return data;
-		},
-	});
-
-	useEffect(() => {
-		if (loadCompleted) {
-			timerIdRef.current = setTimeout(() => {
-				if (canRefetchRef.current) {
-					refetch();
-				}
-
-				setLoadCompleted(false);
-			}, consts.REQUEST.TIMEOUT);
-			return () => {
-				cleanUp();
-			};
-		}
-	}, [loadCompleted]);
-
-	let titleSection;
-	let tableSection;
-	let paginationSection;
-
 	titleSection = isLargeScreen ? (
 		<Container fixed>
 			<TitleWrapper>
@@ -123,9 +90,18 @@ const TxList = () => {
 		<TogglePageBar type='transactions' />
 	);
 
-	let tableData;
-	if (pending && Array.isArray(data?.result?.txs)) {
-		tableData = data.result.txs.map(tx => {
+	const fetchTxs = async path => {
+		try {
+			const res = await axios.get(path);
+			return res.data ?? res;
+		} catch (error) {
+			console.log({ errFetchTxs: error });
+		}
+	};
+
+	const queryListPending = async () => {
+		const result = await fetchTxs(`https://rpc.orai.io/unconfirmed_txs?limit=${consts.REQUEST.LIMIT}`);
+		const tableData = result.result.txs?.map(tx => {
 			const decodedTx = decodeTx(tx);
 			return {
 				tx_hash: decodedTx.hash,
@@ -139,9 +115,18 @@ const TxList = () => {
 				],
 			};
 		});
-	} else {
-		tableData = data?.data ?? [];
-	}
+		setTableData(tableData);
+	};
+
+	const queryList = async ({ before = null, type = "" }) => {
+		let path = `${consts.API_BASE}${consts.API.TXLIST}?limit=${consts.REQUEST.LIMIT}`;
+		if (before && type) {
+			path += `&before=${before}&type=${type}`;
+		}
+		const result = await fetchTxs(path);
+		setTableData(result.data ?? []);
+		setData(result);
+	};
 
 	if (loading) {
 		if (firstLoadCompleted) {
@@ -154,58 +139,116 @@ const TxList = () => {
 			tableSection = isLargeScreen ? <TransactionTableSkeleton /> : <TransactionCardListSkeleton />;
 		}
 	} else {
-		if (error) {
-			totalItemsRef.current = null;
-			totalPagesRef.current = null;
-			tableSection = <NoResult />;
-		} else {
-			if (!isNaN(data?.paging?.total)) {
-				if (totalItemsRef.current != data.paging.total) {
-					totalItemsRef.current = data.paging.total;
-					totalPagesRef.current = Math.ceil(data.paging.total / consts.REQUEST.LIMIT);
-					canRefetchRef.current = false;
-				} else {
-					canRefetchRef.current = true;
-				}
+		if (!isNaN(data?.paging?.total)) {
+			if (totalItemsRef.current != data.paging.total) {
+				totalItemsRef.current = data.paging.total;
+				totalPagesRef.current = Math.ceil(data.paging.total / consts.REQUEST.LIMIT);
+				canRefetchRef.current = false;
 			} else {
-				totalItemsRef.current = null;
-				totalPagesRef.current = null;
+				canRefetchRef.current = true;
 			}
+		} else {
+			totalItemsRef.current = null;
+			totalPagesRef.current = null;
+		}
 
-			if (Array.isArray(tableData) && tableData.length > 0) {
-				if (firstLoadCompleted && prevDataRef.current !== null && !arraysEqual(prevDataRef.current, tableData)) {
-					const key = "height";
-					const mergedData = mergeArrays(tableData, prevDataRef.current, key);
-					const rowMotions = mergedData.map((mergedItem, index) => {
-						if (prevDataRef.current.find(prevItem => mergedItem[key] == prevItem[key]) && !tableData.find(item => mergedItem[key] == item[key])) {
-							return -1;
-						}
-
-						if (!prevDataRef.current.find(prevItem => mergedItem[key] == prevItem[key]) && tableData.find(item => mergedItem[key] == item[key])) {
-							return 1;
-						}
-
-						return 0;
-					});
-					tableSection = isLargeScreen ? (
-						<TransactionTable txHashClick={pending} data={mergedData} rowMotions={rowMotions} />
-					) : (
-						<TransactionCardList txHashClick={pending} data={tableData} />
-					);
-				} else {
-					tableSection = isLargeScreen ? (
-						<TransactionTable txHashClick={pending} data={tableData} />
-					) : (
-						<TransactionCardList txHashClick={pending} data={tableData} />
-					);
-				}
-				prevDataRef.current = [...tableData];
+		if (Array.isArray(tableData) && tableData.length > 0) {
+			if (firstLoadCompleted && prevDataRef.current !== null && !arraysEqual(prevDataRef.current, tableData)) {
+				const key = "height";
+				const mergedData = mergeArrays(tableData, prevDataRef.current, key);
+				const rowMotions = mergedData.map((mergedItem, index) => {
+					if (prevDataRef.current.find(prevItem => mergedItem[key] == prevItem[key]) && !tableData.find(item => mergedItem[key] == item[key])) {
+						return -1;
+					}
+					if (!prevDataRef.current.find(prevItem => mergedItem[key] == prevItem[key]) && tableData.find(item => mergedItem[key] == item[key])) {
+						return 1;
+					}
+					return 0;
+				});
+				tableSection = isLargeScreen ? (
+					<TransactionTable txHashClick={pending} data={mergedData} rowMotions={rowMotions} />
+				) : (
+					<TransactionCardList txHashClick={pending} data={tableData} />
+				);
 			} else {
-				tableSection = <NoResult />;
+				tableSection = isLargeScreen ? (
+					<TransactionTable txHashClick={pending} data={tableData} />
+				) : (
+					<TransactionCardList txHashClick={pending} data={tableData} />
+				);
 			}
+			prevDataRef.current = [...tableData];
+		} else {
+			tableSection = <NoResult />;
 		}
 	}
-	paginationSection = totalPagesRef.current ? <Pagination pages={totalPagesRef.current} page={pageId} onChange={(e, page) => onPageChange(page)} /> : <></>;
+
+	const getListTxs = async (isInterval = false) => {
+		try {
+			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";
+			}
+			await queryList({ before, type });
+		} finally {
+			setTimeout(() => {
+				setLoading(false);
+			}, 800);
+		}
+	};
+
+	useEffect(() => {
+		getListTxs();
+	}, []);
+
+	useEffect(() => {
+		getListTxs();
+		if (pageId == 1) {
+			timerIdRef.current = null;
+			timerTxsRef.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]);
+
+	paginationSection = totalPagesRef.current ? (
+		!pending && <Pagination disabled={loading} isCustomPaging pages={totalPagesRef.current} page={pageId} onChange={(e, page) => onPageChange(page)} />
+	) : (
+		<></>
+	);
 
 	return (
 		<>
diff --git a/src/containers/TxList/TxListOld.js b/src/containers/TxList/TxListOld.js
new file mode 100644
index 00000000..9977f6f7
--- /dev/null
+++ b/src/containers/TxList/TxListOld.js
@@ -0,0 +1,225 @@
+import React, { useState, useEffect, useRef } from "react";
+import { useHistory } from "react-router-dom";
+import { useTheme } from "@material-ui/core/styles";
+import useMediaQuery from "@material-ui/core/useMediaQuery";
+import { useGet } from "restful-react";
+import queryString from "query-string";
+import Container from "@material-ui/core/Container";
+import cn from "classnames/bind";
+import consts from "src/constants/consts";
+import { arraysEqual, calculateBefore, decodeTx, mergeArrays } from "src/helpers/helper";
+import { _ } from "src/lib/scripts";
+import TogglePageBar from "src/components/common/TogglePageBar";
+import TitleWrapper from "src/components/common/TitleWrapper";
+import PageTitle from "src/components/common/PageTitle";
+import StatusBox from "src/components/common/StatusBox";
+import Pagination from "src/components/common/Pagination";
+import NoResult from "src/components/common/NoResult";
+import TransactionTable from "src/components/TxList/TransactionTable";
+import TransactionTableSkeleton from "src/components/TxList/TransactionTable/TransactionTableSkeleton";
+import TransactionCardList from "src/components/TxList/TransactionCardList";
+import TransactionCardListSkeleton from "src/components/TxList/TransactionCardList/TransactionCardListSkeleton";
+import styles from "./TxList.module.scss";
+
+const cx = cn.bind(styles);
+
+const TxList = () => {
+	const history = useHistory();
+	const theme = useTheme();
+	const prevPendingRef = useRef(null);
+	const isLargeScreen = useMediaQuery(theme.breakpoints.up("lg"));
+	const queryStringParse = queryString.parse(history.location.search) || {};
+	const pendingBasePath = `https://rpc.orai.io/unconfirmed_txs?limit=${consts.REQUEST.LIMIT}`;
+	const restBasePath = `${consts.API.TXLIST}?limit=${consts.REQUEST.LIMIT}`;
+	const [firstLoadCompleted, setFirstLoadCompleted] = useState(false);
+	const [loadCompleted, setLoadCompleted] = useState(false);
+	const [pageId, setPageId] = useState(1);
+	const totalItemsRef = useRef(null);
+	const totalPagesRef = useRef(null);
+	const canRefetchRef = useRef(true);
+	const prevDataRef = useRef([]);
+
+	let timerIdRef = useRef(null);
+
+	const cleanUp = () => {
+		if (timerIdRef) {
+			clearTimeout(timerIdRef.current);
+		}
+	};
+
+	const onPageChange = page => {
+		cleanUp();
+		setFirstLoadCompleted(false);
+		setLoadCompleted(false);
+		setPageId(page);
+	};
+
+	if (!firstLoadCompleted) {
+		prevDataRef.current = null;
+	}
+
+	let path;
+	const pending = queryStringParse.type === "pending" ? true : false;
+
+	if (_.isNil(prevPendingRef.current)) {
+		prevPendingRef.current = pending;
+	}
+
+	if (prevPendingRef.current != pending) {
+		cleanUp();
+		setFirstLoadCompleted(false);
+		setLoadCompleted(false);
+		setPageId(1);
+		prevPendingRef.current = pending;
+	}
+
+	if (pending) {
+		path = pendingBasePath;
+	} else {
+		path = restBasePath;
+		if (totalItemsRef.current) {
+			path += "&before=" + calculateBefore(totalItemsRef.current, consts.REQUEST.LIMIT, pageId);
+		}
+	}
+
+	const { data, loading, error, refetch } = useGet({
+		path: path,
+		resolve: data => {
+			if (!firstLoadCompleted) {
+				setFirstLoadCompleted(true);
+			}
+			setLoadCompleted(true);
+			return data;
+		},
+	});
+
+	useEffect(() => {
+		if (loadCompleted) {
+			timerIdRef.current = setTimeout(() => {
+				if (canRefetchRef.current) {
+					refetch();
+				}
+
+				setLoadCompleted(false);
+			}, consts.REQUEST.TIMEOUT);
+			return () => {
+				cleanUp();
+			};
+		}
+	}, [loadCompleted]);
+
+	let titleSection;
+	let tableSection;
+	let paginationSection;
+
+	titleSection = isLargeScreen ? (
+		<Container fixed>
+			<TitleWrapper>
+				<PageTitle title={"Transactions"} />
+				<StatusBox />
+			</TitleWrapper>
+		</Container>
+	) : (
+		<TogglePageBar type='transactions' />
+	);
+
+	let tableData;
+	if (pending && Array.isArray(data?.result?.txs)) {
+		tableData = data.result.txs.map(tx => {
+			const decodedTx = decodeTx(tx);
+			return {
+				tx_hash: decodedTx.hash,
+				result: "pending",
+				fee: decodedTx.fee,
+				messages: [
+					{
+						type: decodedTx.messageType,
+						value: decodedTx.messageValue,
+					},
+				],
+			};
+		});
+	} else {
+		tableData = data?.data ?? [];
+	}
+
+	if (loading) {
+		if (firstLoadCompleted) {
+			tableSection = isLargeScreen ? (
+				<TransactionTable txHashClick={pending} data={tableData} />
+			) : (
+				<TransactionCardList txHashClick={pending} data={tableData} />
+			);
+		} else {
+			tableSection = isLargeScreen ? <TransactionTableSkeleton /> : <TransactionCardListSkeleton />;
+		}
+	} else {
+		if (error) {
+			totalItemsRef.current = null;
+			totalPagesRef.current = null;
+			tableSection = <NoResult />;
+		} else {
+			if (!isNaN(data?.paging?.total)) {
+				if (totalItemsRef.current != data.paging.total) {
+					totalItemsRef.current = data.paging.total;
+					totalPagesRef.current = Math.ceil(data.paging.total / consts.REQUEST.LIMIT);
+					canRefetchRef.current = false;
+				} else {
+					canRefetchRef.current = true;
+				}
+			} else {
+				totalItemsRef.current = null;
+				totalPagesRef.current = null;
+			}
+
+			if (Array.isArray(tableData) && tableData.length > 0) {
+				if (firstLoadCompleted && prevDataRef.current !== null && !arraysEqual(prevDataRef.current, tableData)) {
+					const key = "height";
+					const mergedData = mergeArrays(tableData, prevDataRef.current, key);
+					const rowMotions = mergedData.map((mergedItem, index) => {
+						if (prevDataRef.current.find(prevItem => mergedItem[key] == prevItem[key]) && !tableData.find(item => mergedItem[key] == item[key])) {
+							return -1;
+						}
+
+						if (!prevDataRef.current.find(prevItem => mergedItem[key] == prevItem[key]) && tableData.find(item => mergedItem[key] == item[key])) {
+							return 1;
+						}
+
+						return 0;
+					});
+					tableSection = isLargeScreen ? (
+						<TransactionTable txHashClick={pending} data={mergedData} rowMotions={rowMotions} />
+					) : (
+						<TransactionCardList txHashClick={pending} data={tableData} />
+					);
+				} else {
+					tableSection = isLargeScreen ? (
+						<TransactionTable txHashClick={pending} data={tableData} />
+					) : (
+						<TransactionCardList txHashClick={pending} data={tableData} />
+					);
+				}
+				prevDataRef.current = [...tableData];
+			} else {
+				tableSection = <NoResult />;
+			}
+		}
+	}
+	paginationSection = totalPagesRef.current ? <Pagination pages={totalPagesRef.current} page={pageId} onChange={(e, page) => onPageChange(page)} /> : <></>;
+
+	return (
+		<>
+			{titleSection}
+			<Container fixed className={cx("tx-list")}>
+				{tableSection}
+				{paginationSection}
+			</Container>
+		</>
+	);
+};
+
+TxList.propTypes = {};
+
+TxList.defaultProps = {};
+
+export default TxList;