Continued improving this

src/hooks/useAssignments.tsx

@@ -1,7 +1,11 @@
 import {Assignment} from "@/interfaces/results";
-import axios from "axios";
+import Axios from "axios";
+import {setupCache} from "axios-cache-interceptor";
 import {useEffect, useState} from "react";
 
+const instance = Axios.create();
+const axios = setupCache(instance);
+
 export default function useAssignments({assigner, assignees, corporate}: {assigner?: string; assignees?: string; corporate?: string}) {
 	const [assignments, setAssignments] = useState<Assignment[]>([]);
 	const [isLoading, setIsLoading] = useState(false);

src/hooks/usePermissions.tsx

@@ -1,9 +1,13 @@
 import {Exam} from "@/interfaces/exam";
 import {Permission, PermissionType} from "@/interfaces/permissions";
 import {ExamState} from "@/stores/examStore";
-import axios from "axios";
+import Axios from "axios";
+import {setupCache} from "axios-cache-interceptor";
 import {useEffect, useState} from "react";
 
+const instance = Axios.create();
+const axios = setupCache(instance);
+
 export default function usePermissions(user: string) {
 	const [permissions, setPermissions] = useState<PermissionType[]>([]);
 	const [isLoading, setIsLoading] = useState(false);

src/hooks/useSessions.tsx

@@ -1,8 +1,12 @@
 import {Exam} from "@/interfaces/exam";
 import {ExamState} from "@/stores/examStore";
-import axios from "axios";
+import Axios from "axios";
+import {setupCache} from "axios-cache-interceptor";
 import {useEffect, useState} from "react";
 
+const instance = Axios.create();
+const axios = setupCache(instance);
+
 export type Session = ExamState & {user: string; id: string; date: string};
 
 export default function useSessions(user?: string) {

src/hooks/useUsers.tsx

@@ -8,24 +8,48 @@ const axios = setupCache(instance);
 
 export default function useUsers(props?: {type?: Type; page?: number; size?: number}) {
 	const [users, setUsers] = useState<User[]>([]);
+	const [total, setTotal] = useState(0);
 	const [isLoading, setIsLoading] = useState(false);
 	const [isError, setIsError] = useState(false);
+	const [latestID, setLatestID] = useState<string>();
+	const [firstID, setFirstID] = useState<string>();
+	const [page, setPage] = useState(0);
 
 	const getData = () => {
 		const params = new URLSearchParams();
+
 		if (!!props)
 			Object.keys(props).forEach((key) => {
 				if (!!props[key as keyof typeof props]) params.append(key, props[key as keyof typeof props]!.toString());
 			});
 
+		if (!!latestID) params.append("latestID", latestID);
+		if (!!firstID) params.append("firstID", firstID);
+
 		setIsLoading(true);
 		axios
-			.get<User[]>(`/api/users/list?${params.toString()}`, {headers: {page: "register"}})
-			.then((response) => setUsers(response.data))
+			.get<{users: User[]; total: number}>(`/api/users/list?${params.toString()}`, {headers: {page: "register"}})
+			.then((response) => {
+				setUsers(response.data.users);
+				setTotal(response.data.total);
+			})
 			.finally(() => setIsLoading(false));
 	};
 
-	useEffect(getData, [props]);
+	const next = () => {
+		setLatestID(users[users.length - 1]?.id);
+		setFirstID(undefined);
+		setPage((prev) => prev + 1);
+	};
 
-	return {users, isLoading, isError, reload: getData};
+	const previous = () => {
+		setLatestID(undefined);
+		setFirstID(page > 1 ? users[0]?.id : undefined);
+		setPage((prev) => prev - 1);
+	};
+
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	useEffect(getData, [props, latestID, firstID]);
+
+	return {users, total, page, isLoading, isError, reload: getData, next, previous};
 }

src/pages/(admin)/Lists/UserList.tsx

@@ -59,7 +59,7 @@ export default function UserList({
 	const [displayUsers, setDisplayUsers] = useState<User[]>([]);
 	const [selectedUser, setSelectedUser] = useState<User>();
 
-	const {users, reload} = useUsers({type});
+	const {users, page, total, reload, next, previous} = useUsers({type, size: 25});
 	const {permissions} = usePermissions(user?.id || "");
 	const {balance} = useUserBalance();
 	const {groups} = useGroups({
@@ -602,7 +602,7 @@ export default function UserList({
 
 	return (
 		<>
-			{renderHeader && renderHeader(displayUsers.length)}
+			{renderHeader && renderHeader(total)}
 			<div className="w-full">
 				<Modal isOpen={!!selectedUser} onClose={() => setSelectedUser(undefined)}>
 					{selectedUser && renderUserCard(selectedUser)}
@@ -614,6 +614,14 @@ export default function UserList({
 							Download List
 						</Button>
 					</div>
+					<div className="w-full flex gap-2 justify-between">
+						<Button className="w-full max-w-[200px]" disabled={page === 0} onClick={previous}>
+							Previous Page
+						</Button>
+						<Button className="w-full max-w-[200px]" disabled={page * 25 >= total} onClick={next}>
+							Next Page
+						</Button>
+					</div>
 					<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
 						<thead>
 							{table.getHeaderGroups().map((headerGroup) => (

src/pages/api/users/list.ts

@@ -13,14 +13,16 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 		return;
 	}
 
-	const {page, size, type} = req.query as {page?: string; size?: string; type?: Type};
-	const users = await getLinkedUsers(
+	const {size, type, latestID, firstID} = req.query as {size?: string; type?: Type; latestID?: string; firstID?: string};
+
+	const {users, total} = await getLinkedUsers(
 		req.session.user?.id,
 		req.session.user?.type,
 		type,
-		page !== undefined ? parseInt(page) : undefined,
+		firstID,
+		latestID,
 		size !== undefined ? parseInt(size) : undefined,
 	);
 
-	res.status(200).json(users);
+	res.status(200).json({users, total});
 }

src/utils/users.be.ts

@@ -5,6 +5,8 @@ import {
 	doc,
 	documentId,
 	endAt,
+	endBefore,
+	getCountFromServer,
 	getDoc,
 	getDocs,
 	getFirestore,
@@ -17,7 +19,7 @@ import {
 } from "firebase/firestore";
 import {CorporateUser, Group, Type, User} from "@/interfaces/user";
 import {getGroupsForUser} from "./groups.be";
-import {uniq, uniqBy} from "lodash";
+import {last, uniq, uniqBy} from "lodash";
 import {getUserCodes} from "./codes.be";
 import moment from "moment";
 const db = getFirestore(app);
@@ -52,14 +54,17 @@ export async function getSpecificUsers(ids: string[]) {
 	return groups;
 }
 
-export async function getLinkedUsers(userID?: string, userType?: Type, type?: Type, page?: number, size?: number) {
+export async function getLinkedUsers(userID?: string, userType?: Type, type?: Type, firstID?: string, lastID?: string, size?: number) {
 	const q = [
 		...(!!type ? [where("type", "==", type)] : []),
 		orderBy(documentId()),
-		...(page !== undefined && !!size ? [startAt(page * size)] : []),
-		...(page !== undefined && !!size ? [limit(page + 1 * size)] : []),
+		...(!!firstID && !lastID ? [endBefore(firstID)] : []),
+		...(!!lastID && !firstID ? [startAfter(lastID)] : []),
+		...(!!size ? [limit(size)] : []),
 	];
 
+	const totalQ = [...(!!type ? [where("type", "==", type)] : []), orderBy(documentId())];
+
 	if (!userID || userType === "admin" || userType === "developer") {
 		const snapshot = await getDocs(query(collection(db, "users"), ...q));
 		const users = snapshot.docs.map((doc) => ({
@@ -67,7 +72,8 @@ export async function getLinkedUsers(userID?: string, userType?: Type, type?: Ty
 			...doc.data(),
 		})) as User[];
 
-		return users;
+		const total = await getCountFromServer(query(collection(db, "users"), ...totalQ));
+		return {users, total: total.data().count};
 	}
 
 	const adminGroups = await getGroupsForUser(userID);
@@ -86,7 +92,12 @@ export async function getLinkedUsers(userID?: string, userType?: Type, type?: Ty
 		...doc.data(),
 	})) as User[];
 
-	return users;
+	const total = await getCountFromServer(query(collection(db, "users"), ...[where(documentId(), "in", participants), ...totalQ]));
+
+	return {
+		users,
+		total: total.data().count,
+	};
 }
 
 export async function getUserBalance(user: User) {