Merge pull request #71 from Code-Hammers/alumni-styling

Updated some styling and added pagination functionality
Code-Hammers · Apr 18, 2024 · 47646cb · 47646cb
2 parents e524b9a + a65b9cf
commit 47646cb
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 43 deletions.
diff --git a/client/src/pages/DirectoryPage/DirectoryPage.tsx b/client/src/pages/DirectoryPage/DirectoryPage.tsx
@@ -14,50 +14,79 @@ const DirectoryPage = (): JSX.Element => {
     dispatch(fetchAlumni({ page, name: nameSearch, company: companySearch }));
   }, [dispatch, page, nameSearch, companySearch]);
 
+  const handlePreviousPage = () => {
+    if (page > 1) {
+      dispatch(
+        fetchAlumni({
+          page: page - 1,
+          name: nameSearch,
+          company: companySearch,
+        })
+      );
+    }
+  };
+
+  const handleNextPage = () => {
+    if (page < totalPages) {
+      dispatch(
+        fetchAlumni({
+          page: page + 1,
+          name: nameSearch,
+          company: companySearch,
+        })
+      );
+    }
+  };
+
   return (
-    <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-4">
-      <h1 className="text-4xl font-extrabold mb-4">Alumni Directory</h1>
-      <div className="flex justify-center space-x-4 mb-4">
-        <input
-          type="text"
-          value={nameSearch}
-          onChange={(e) => setNameSearch(e.target.value)}
-          placeholder="Search by name"
-          className="mb-4 p-2 text-gray-900"
-        />
-        <input
-          type="text"
-          value={companySearch}
-          onChange={(e) => setCompanySearch(e.target.value)}
-          placeholder="Search by company"
-          className="mb-4 p-2 text-gray-900"
-        />
+    <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-start pt-20 p-4">
+      <div className="sticky mt-20 z-10 bg-gray-900 w-full text-center py-4">
+        <h1 className="text-4xl font-extrabold mb-4">Alumni Directory</h1>
+        <div className="flex justify-center space-x-4 mb-4">
+          <input
+            type="text"
+            value={nameSearch}
+            onChange={(e) => setNameSearch(e.target.value)}
+            placeholder="Search by name"
+            className="mb-4 p-2 text-gray-900"
+          />
+          <input
+            type="text"
+            value={companySearch}
+            onChange={(e) => setCompanySearch(e.target.value)}
+            placeholder="Search by company"
+            className="mb-4 p-2 text-gray-900"
+          />
+        </div>
       </div>
-      {status === "loading" ? (
-        <p>Loading...</p>
-      ) : (
-        <div className="w-full max-w-3xl">
-          <div className="grid grid-cols-3 text-center mb-2">
-            <div>
-              <strong>Name</strong>
-            </div>
-            <div>
-              <strong>Company</strong>
-            </div>
-            <div>
-              <strong>Email</strong>
-            </div>
-          </div>
-          {alumni.map((alum) => (
-            <div key={alum._id} className="grid grid-cols-3 text-center py-2">
-              <div>{alum.name}</div>
-              <div>{alum.company}</div>
-              <div>{alum.email}</div>
-            </div>
-          ))}
+      <div className="w-full max-w-3xl">
+        <div className="grid grid-cols-3 text-center mb-2">
+          <strong>Name</strong>
+          <strong>Company</strong>
+          <strong>Email</strong>
         </div>
-      )}
-      {/* TODO Pagination controls! */}
+        <div className="overflow-auto" style={{ maxHeight: "60vh" }}>
+          {status === "loading" ? (
+            <p>Loading...</p>
+          ) : (
+            alumni.map((alum) => (
+              <div key={alum._id} className="grid grid-cols-3 text-center py-2">
+                <div>{alum.name}</div>
+                <div>{alum.company}</div>
+                <div>{alum.email}</div>
+              </div>
+            ))
+          )}
+        </div>
+        <div className="py-4 flex justify-between">
+          <button onClick={handlePreviousPage} disabled={page <= 1}>
+            Previous
+          </button>
+          <button onClick={handleNextPage} disabled={page >= totalPages}>
+            Next
+          </button>
+        </div>
+      </div>
     </div>
   );
 };

diff --git a/server/controllers/alumniControllers.ts b/server/controllers/alumniControllers.ts
@@ -8,7 +8,7 @@ const getAllAlumniData = async (
   next: NextFunction
 ) => {
   const page = parseInt(req.query.page as string) || 1;
-  const limit = parseInt(req.query.limit as string) || 20;
+  const limit = parseInt(req.query.limit as string) || 10;
   const nameSearch = (req.query.name as string) || "";
   const companySearch = (req.query.company as string) || "";
 
@@ -32,7 +32,6 @@ const getAllAlumniData = async (
       totalPages: Math.ceil(count / limit),
       currentPage: page,
     });
-
   } catch (error) {
     console.log("Awesome error handling");
   }