From b2f44b66a384e2569ce99a4f520d3a96bd1bfa81 Mon Sep 17 00:00:00 2001
From: Harikrishnan Gopal <118685394+hk151109@users.noreply.github.com>
Date: Tue, 28 Jan 2025 01:12:25 +0530
Subject: [PATCH] search bar

---
 client/src/Pages/courseConsolidated.jsx | 38 +++++++++++++++++++++----
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/client/src/Pages/courseConsolidated.jsx b/client/src/Pages/courseConsolidated.jsx
index f363429..87d3673 100644
--- a/client/src/Pages/courseConsolidated.jsx
+++ b/client/src/Pages/courseConsolidated.jsx
@@ -6,6 +6,7 @@ import Navbar from "./Navbar";
 
 
 const CourseConsolidated = () => {
+  const [searchQuery, setSearchQuery] = useState(""); // State for the search input
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
@@ -34,17 +35,25 @@ const CourseConsolidated = () => {
   }
 
   // Extract unique courses by courseCode
-  const uniqueCourses = [...new Set(data.map((row) => row.courseCode))];
-
-  // Pagination
+  const filteredCourses = [...new Set(data.map((row) => row.courseCode))].filter(
+    (courseCode) => {
+      const courseName = data.find((row) => row.courseCode === courseCode)
+        ?.courseName;
+      return (
+        courseName &&
+        courseName.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    }
+  );
+  
+  const totalPages = Math.ceil(filteredCourses.length / tablesPerPage);
   const indexOfLastTable = currentPage * tablesPerPage;
   const indexOfFirstTable = indexOfLastTable - tablesPerPage;
-  const currentCourses = uniqueCourses.slice(
+  const currentCourses = filteredCourses.slice(
     indexOfFirstTable,
     indexOfLastTable
   );
-
-  const totalPages = Math.ceil(uniqueCourses.length / tablesPerPage);
+  
 
   const handleNextPage = () => {
     if (currentPage < totalPages) setCurrentPage((prevPage) => prevPage + 1);
@@ -199,6 +208,23 @@ const CourseConsolidated = () => {
         Course Tables with Download Options
       </h1>
 
+        <div style={{ padding: "10px", marginBottom: "20px" }}>
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search for a course..."
+            style={{
+              width: "100%",
+              padding: "10px",
+              borderRadius: "5px",
+              border: "1px solid #ccc",
+              fontSize: "16px",
+            }}
+          />
+        </div>
+
+
       <div
         style={{
           maxHeight: "70vh",