Updated the pagination on the useUsers and migrading the grading

src/hooks/useUsers.tsx

@@ -5,29 +5,25 @@ import {setupCache} from "axios-cache-interceptor";
 const instance = Axios.create();
 const axios = setupCache(instance);
 
-export const userHashStudent = { type: "student" } as { type: Type };
+export const userHashStudent = {type: "student"} as {type: Type};
-export const userHashTeacher = { type: "teacher" } as { type: Type };
+export const userHashTeacher = {type: "teacher"} as {type: Type};
-export const userHashCorporate = { type: "corporate" } as { type: Type };
+export const userHashCorporate = {type: "corporate"} as {type: Type};
 
 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 (props[key as keyof typeof props] !== undefined) params.append(key, props[key as keyof typeof props]!.toString());
 			});
 
-		if (!!latestID) params.append("latestID", latestID);
+		console.log(params.toString());
-		if (!!firstID) params.append("firstID", firstID);
 
 		setIsLoading(true);
 		axios
@@ -39,20 +35,7 @@ export default function useUsers(props?: {type?: Type; page?: number; size?: num
 			.finally(() => setIsLoading(false));
 	};
 
-	const next = () => {
+	useEffect(getData, [props?.page, props?.size, props?.type]);
-		setLatestID(users[users.length - 1]?.id);
-		setFirstID(undefined);
-		setPage((prev) => prev + 1);
-	};
 
-	const previous = () => {
+	return {users, total, isLoading, isError, reload: getData};
-		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

@@ -58,13 +58,18 @@ export default function UserList({
 	const [sorter, setSorter] = useState<string>();
 	const [displayUsers, setDisplayUsers] = useState<User[]>([]);
 	const [selectedUser, setSelectedUser] = useState<User>();
+	const [page, setPage] = useState(0);
 
-	const userHash = useMemo(() => ({
+	const userHash = useMemo(
-		type,
+		() => ({
-		size: 25,
+			type,
-	}), [type])
+			size: 25,
+			page,
+		}),
+		[type, page],
+	);
 
-	const {users, page, total, reload, next, previous} = useUsers(userHash);
+	const {users, total, reload} = useUsers(userHash);
 	const {permissions} = usePermissions(user?.id || "");
 	const {balance} = useUserBalance();
 	const {groups} = useGroups({
@@ -620,10 +625,10 @@ export default function UserList({
 						</Button>
 					</div>
 					<div className="w-full flex gap-2 justify-between">
-						<Button className="w-full max-w-[200px]" disabled={page === 0} onClick={previous}>
+						<Button className="w-full max-w-[200px]" disabled={page === 0} onClick={() => setPage((prev) => prev - 1)}>
 							Previous Page
 						</Button>
-						<Button className="w-full max-w-[200px]" disabled={page * 25 >= total} onClick={next}>
+						<Button className="w-full max-w-[200px]" disabled={page * 25 >= total} onClick={() => setPage((prev) => prev + 1)}>
 							Next Page
 						</Button>
 					</div>

src/pages/api/grading/index.ts

@@ -14,10 +14,11 @@ import {getUserCorporate} from "@/utils/groups.be";
 import {Grading} from "@/interfaces";
 import {getGroupsForUser} from "@/utils/groups.be";
 import {uniq} from "lodash";
-import {getUser} from "@/utils/users.be";
+import {getSpecificUsers, getUser} from "@/utils/users.be";
 import {getGradingSystem} from "@/utils/grading.be";
+import client from "@/lib/mongodb";
 
-const db = getFirestore(app);
+const db = client.db(process.env.MONGODB_DB);
 
 export default withIronSessionApiRoute(handler, sessionOptions);
 
@@ -36,6 +37,14 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 	return res.status(200).json(gradingSystem);
 }
 
+async function updateGrading(id: string, body: Grading) {
+	if (await db.collection("grading").findOne({id})) {
+		await db.collection("grading").updateOne({id}, {$set: body});
+	} else {
+		await db.collection("grading").insertOne({id, ...body});
+	}
+}
+
 async function post(req: NextApiRequest, res: NextApiResponse) {
 	if (!req.session.user) {
 		res.status(401).json({ok: false});
@@ -49,16 +58,16 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 		});
 
 	const body = req.body as Grading;
-	await setDoc(doc(db, "grading", req.session.user.id), body);
+	await updateGrading(req.session.user.id, body);
 
 	if (req.session.user.type === "mastercorporate") {
 		const groups = await getGroupsForUser(req.session.user.id);
 		const participants = uniq(groups.flatMap((x) => x.participants));
 
-		const participantUsers = await Promise.all(participants.map(getUser));
+		const participantUsers = await getSpecificUsers(participants);
 		const corporateUsers = participantUsers.filter((x) => x?.type === "corporate") as CorporateUser[];
 
-		await Promise.all(corporateUsers.map(async (g) => await setDoc(doc(db, "grading", g.id), body)));
+		await Promise.all(corporateUsers.map(async (g) => await updateGrading(g.id, body)));
 	}
 
 	res.status(200).json({ok: true});

src/pages/api/users/list.ts

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

src/utils/users.be.ts

@@ -44,13 +44,18 @@ export async function getSpecificUsers(ids: string[]) {
 		.toArray();
 }
 
-export async function getLinkedUsers(userID?: string, userType?: Type, type?: Type, firstID?: string, lastID?: string, size?: number) {
+export async function getLinkedUsers(userID?: string, userType?: Type, type?: Type, page?: number, size?: number) {
 	const filters = {
 		...(!!type ? {type} : {}),
 	};
 
 	if (!userID || userType === "admin" || userType === "developer") {
-		const users = await db.collection("users").find<User>(filters).toArray();
+		const users = await db
+			.collection("users")
+			.find<User>(filters)
+			.skip(page && size ? page * size : 0)
+			.limit(size || 0)
+			.toArray();
 		const total = await db.collection("users").countDocuments(filters);
 		return {users, total};
 	}
@@ -71,6 +76,8 @@ export async function getLinkedUsers(userID?: string, userType?: Type, type?: Ty
 	const users = await db
 		.collection("users")
 		.find<User>({...filters, id: {$in: participants}})
+		.skip(page && size ? page * size : 0)
+		.limit(size || 0)
 		.toArray();
 	const total = await db.collection("users").countDocuments({...filters, id: {$in: participants}});