Added paging to accounts table

src/ui/account/AccountsLoader.tsx

@@ -1,7 +1,8 @@
 import PrimaryButton from "@/components/button/PrimaryButton";
 import DangerMessage from "@/components/message/DangerMessage";
-import { useGetAccounts } from "@/hooks/AccountHooks";
-import { useState } from "react";
+import Pagination from "@/components/pagination/Pagination";
+import { useGetAccounts, useGetAccountsCount } from "@/hooks/AccountHooks";
+import { useEffect, useState } from "react";
 import AccountsList from "./AccountsList";
 import AccountsListSkeleton from "./AccountsListSkeleton";
 import AccountModal from "./modals/AccountModal";
@@ -9,8 +10,19 @@ import AccountModal from "./modals/AccountModal";
 
 export default function AccountsLoader(){
 	const [ displayCreateAccountModal, setDisplayCreateAccountModal ] = useState(false);
+	const [ page, setPage ] = useState(1);
+	const [ totalPages, setTotalPages ] = useState(1);
+	const pageSize = 10;
 
-	const accountsQuery = useGetAccounts(0, 20);
+	const accountsQuery = useGetAccounts(page - 1, pageSize);
+	const accountsCountQuery = useGetAccountsCount();
+
+
+	useEffect(() => {
+		if(accountsCountQuery.isSuccess){
+			setTotalPages(Math.ceil(accountsCountQuery.data / pageSize));
+		}
+	}, [ accountsCountQuery ]);
 
 
 	if(accountsQuery.isLoading){
@@ -38,7 +50,16 @@ export default function AccountsLoader(){
 				<AccountsList
 					accounts={accountsQuery.data ?? []}
 				/>
-				{/* TODO: Add Pagination */}
+				{/* Pagination */}
+				<div
+					className="my-12"
+				>
+					<Pagination
+						currentPage={page}
+						totalPages={totalPages}
+						onChange={setPage}
+					/>
+				</div>
 			</>
 		);
 	}