diff --git a/src/hooks/useAssignments.tsx b/src/hooks/useAssignments.tsx index 65151062..572ddde1 100644 --- a/src/hooks/useAssignments.tsx +++ b/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([]); const [isLoading, setIsLoading] = useState(false); diff --git a/src/hooks/usePermissions.tsx b/src/hooks/usePermissions.tsx index 5fdf962e..77eb187a 100644 --- a/src/hooks/usePermissions.tsx +++ b/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([]); const [isLoading, setIsLoading] = useState(false); diff --git a/src/hooks/useSessions.tsx b/src/hooks/useSessions.tsx index 8d98ee0b..8b6e7b33 100644 --- a/src/hooks/useSessions.tsx +++ b/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) { diff --git a/src/hooks/useUsers.tsx b/src/hooks/useUsers.tsx index 6a0a5429..89416930 100644 --- a/src/hooks/useUsers.tsx +++ b/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([]); + const [total, setTotal] = useState(0); const [isLoading, setIsLoading] = useState(false); const [isError, setIsError] = useState(false); + const [latestID, setLatestID] = useState(); + const [firstID, setFirstID] = useState(); + 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(`/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}; } diff --git a/src/pages/(admin)/Lists/UserList.tsx b/src/pages/(admin)/Lists/UserList.tsx index bceacb83..e734a7aa 100644 --- a/src/pages/(admin)/Lists/UserList.tsx +++ b/src/pages/(admin)/Lists/UserList.tsx @@ -59,7 +59,7 @@ export default function UserList({ const [displayUsers, setDisplayUsers] = useState([]); const [selectedUser, setSelectedUser] = useState(); - 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)}
setSelectedUser(undefined)}> {selectedUser && renderUserCard(selectedUser)} @@ -614,6 +614,14 @@ export default function UserList({ Download List
+
+ + +
{table.getHeaderGroups().map((headerGroup) => ( diff --git a/src/pages/api/users/list.ts b/src/pages/api/users/list.ts index c33e5ecc..852ca429 100644 --- a/src/pages/api/users/list.ts +++ b/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}); } diff --git a/src/utils/users.be.ts b/src/utils/users.be.ts index f6451c23..535f250e 100644 --- a/src/utils/users.be.ts +++ b/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) {