Merge pull request #77 from GTBitsOfGood/madeline/73-user-pagination

moved user pagination to backend
GTBitsOfGood · Nov 18, 2023 · 8befc4a · 8befc4a
2 parents f6a2b45 + 5ce22ac
commit 8befc4a
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 26 deletions.
diff --git a/src/pages/api/get_users.js b/src/pages/api/get_users.js
@@ -31,27 +31,50 @@ async function handler(req, res) {
       },
     },
     {
-      $project: {
-        id: "$_id",
-        _id: 0,
-        firstName: "$firstName",
-        lastName: "$lastName",
-        email: "$email",
-        phoneNumber: "$phoneNumber",
-        access: "$access",
-        preference: "$preference",
-        tenures: {
-          $arrayToObject: {
-            $map: {
-              input: "$tenures",
-              in: { k: req.query.semester + " " + req.query.year, v: "$$this" },
+      $facet: {
+        results: [
+          {
+            $project: {
+              id: "$_id",
+              _id: 0,
+              firstName: "$firstName",
+              lastName: "$lastName",
+              email: "$email",
+              phoneNumber: "$phoneNumber",
+              access: "$access",
+              preference: "$preference",
+              tenures: {
+                $arrayToObject: {
+                  $map: {
+                    input: "$tenures",
+                    in: { k: req.query.semester + " " + req.query.year, v: "$$this" },
+                  },
+                },
+              },
             },
           },
-        },
+          {
+            $skip: Number(req.query.page) * Number(req.query.rowsPerPage),
+          },
+          {
+            $limit: Number(req.query.rowsPerPage),
+          },
+        ],
+        totalCount: [
+          {
+            $count: "count",
+          },
+        ],
       },
     },
   ]);
-  res.status(200).json({ users });
+
+  let count = 0;
+  if (users[0].totalCount.length != 0) {
+    count = users[0].totalCount[0].count;
+  }
+
+  res.status(200).json({ users: users[0].results, total: count });
 }
 
 export default requestWrapper(handler, "GET");
diff --git a/src/screens/AdminDashboard/UserTable/PaginationTable/PaginationTable.tsx b/src/screens/AdminDashboard/UserTable/PaginationTable/PaginationTable.tsx
@@ -15,17 +15,15 @@ const columns: TColumn[] = [
   { id: "notes", label: "Notes", width: "8%" },
 ];
 
-function PaginationTable({ rows, currentSemester }: TableProps) {
-  const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(10);
+function PaginationTable({ rows, currentSemester, setRowsPerPage, rowsPerPage, setPage, page, userListLength }: TableProps) {
   const [selectedRow, setSelectedRow] = useState(null);
   const { isAddUser, setIsAddUser } = useContext(DashboardContext);
   const tableRef = useRef(null);
 
   useEffect(() => {
     setPage(0);
     tableRef.current.scrollTop = 0;
-  }, [currentSemester]);
+  }, [currentSemester, setPage]);
 
   const handleChangePage = (event: unknown, newPage: number) => {
     setPage(newPage);
@@ -89,7 +87,7 @@ function PaginationTable({ rows, currentSemester }: TableProps) {
               </TableRow>
             </TableHead>
             <TableBody>
-              {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => {
+              {rows.map((row) => {
                 return (
                   <Row currentSemester={currentSemester} row={row} key={row.id} columns={columns} onClick={() => showModalHandler(row)} />
                 );
@@ -100,7 +98,7 @@ function PaginationTable({ rows, currentSemester }: TableProps) {
         <TablePagination
           rowsPerPageOptions={[10, 25, 100]}
           component="div"
-          count={rows.length}
+          count={userListLength}
           rowsPerPage={rowsPerPage}
           page={page}
           onPageChange={handleChangePage}

diff --git a/src/screens/AdminDashboard/UserTable/UserTable.tsx b/src/screens/AdminDashboard/UserTable/UserTable.tsx
@@ -10,18 +10,22 @@ function UserTable({ currentSemester, newMembers, roleFilter, departmentFilter,
     currentSemester = "All All";
   }
   const [userList, setUserList] = useState<User[]>([]);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const [page, setPage] = useState(0);
+  const [userListLength, setUserListLength] = useState(0);
 
   useEffect(() => {
     (async () => {
       const response = await sendRequest(
         `/api/get_users?query=${filter}&department=${departmentFilter}&role=${roleFilter}` +
-          `&semester=${currentSemester.split(" ")[0]}&year=${currentSemester.split(" ")[1]}`,
+          `&semester=${currentSemester.split(" ")[0]}&year=${currentSemester.split(" ")[1]}&rowsPerPage=${rowsPerPage}&page=${page}`,
         "GET",
       );
-      const { users } = response;
+      const { users, total } = response;
       setUserList(users);
+      setUserListLength(total);
     })();
-  }, [roleFilter, currentSemester, newMembers, departmentFilter, filter]);
+  }, [roleFilter, currentSemester, newMembers, departmentFilter, filter, rowsPerPage, page]);
 
   if (!userList) {
     return (
@@ -33,7 +37,15 @@ function UserTable({ currentSemester, newMembers, roleFilter, departmentFilter,
 
   return (
     <TableContext.Provider value={{ userList, setUserList }}>
-      <PaginationTable rows={userList} currentSemester={currentSemester} />
+      <PaginationTable
+        rows={userList}
+        currentSemester={currentSemester}
+        setRowsPerPage={setRowsPerPage}
+        rowsPerPage={rowsPerPage || 10}
+        setPage={setPage}
+        page={page || 0}
+        userListLength={userListLength || 0}
+      />
     </TableContext.Provider>
   );
 }

diff --git a/src/screens/AdminDashboard/types.ts b/src/screens/AdminDashboard/types.ts
@@ -43,6 +43,11 @@ export interface TColumn {
 export interface TableProps {
   rows: User[];
   currentSemester: string;
+  setRowsPerPage: Function;
+  rowsPerPage: Number;
+  setPage: Function;
+  page: Number;
+  userListLength: Number;
 }
 
 export interface RowProps {