[Feature] Implemented search bar to dashboard content + refactor

Author: chrisdedman

frontend/src/components/pages/CourseDashboard.js

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
 import Notiflix from 'notiflix';
-import {Modal} from '../Modal.js';
+import { Modal } from '../Modal.js';
+import SearchBar from '../search-bar.js'
 
 export function CourseDashboard() {
     const [courseInfo, setCourseInfo] = useState(null);
@@ -10,17 +11,23 @@ export function CourseDashboard() {
         title: "",
         description: "",
     });
-    const [error, setError]           = useState(null);
+    const [searchQuery, setSearchQuery]     = useState("");
+    const [error, setError]                 = useState(null);
+    const [isModalActive, setIsModalActive] = useState(false);
 
     const handleChange = (e) => {
         const { name, value } = e.target;
         setNewCourse({ ...newCourse, [name]: value });
     };
 
-    const handleCreateCourse = async (e) =>{
-        if (newCourse.title === "" || newCourse.description === ""){
-            return
-        } 
+    const handleSearchChange = (e) => {
+        setSearchQuery(e.target.value);
+    };
+
+    const handleCreateCourse = async () => {
+        if (newCourse.title === "" || newCourse.description === "") {
+            return;
+        }
 
         const userId = Cookies.get('userId');
         try {
@@ -31,7 +38,7 @@ export function CourseDashboard() {
                 },
                 body: JSON.stringify({
                     title: newCourse.title,
-                    description: newCourse.description
+                    description: newCourse.description,
                 }),
             });
 
@@ -59,26 +66,26 @@ export function CourseDashboard() {
 
         async function fetchCourses() {
             await fetch(`http://localhost:4000/courses/${userId}`)
-            .then((response) => {
-                if (!response.ok) {
-                    throw new Error('Network response was not ok');
-                }
-                return response.json();
-            })
-            .then((data) => setCourseInfo(data.courses))
-            .catch((error) => setError(error.message));
+                .then((response) => {
+                    if (!response.ok) {
+                        throw new Error('Network response was not ok');
+                    }
+                    return response.json();
+                })
+                .then((data) => setCourseInfo(data.courses))
+                .catch((error) => setError(error.message));
         }
 
         async function fetchUser() {
             await fetch(`http://localhost:4000/user/${userId}`)
-            .then((response) => {
-                if (!response.ok) {
-                    throw new Error('Network response was not ok');
-                }
-                return response.json();
-            })
-            .then((data) => setUserInfo(data.user))
-            .catch((error) => setError(error.message));
+                .then((response) => {
+                    if (!response.ok) {
+                        throw new Error('Network response was not ok');
+                    }
+                    return response.json();
+                })
+                .then((data) => setUserInfo(data.user))
+                .catch((error) => setError(error.message));
         }
 
         fetchCourses();
@@ -89,41 +96,53 @@ export function CourseDashboard() {
     if (!courseInfo || !userInfo) return <p>Loading...</p>;
 
     let createButton = null;
-    if (userInfo.role === "educator"){
-        createButton = <Modal
-            title={"Create New Course"}
-            trigger={
-                <div className="bg-blue-500 p-2 rounded shadow hover:bg-blue-700 m-auto text-center text-sm text-white font-semibold hover:cursor-pointer" > 
-                    <div>+ New Course</div> 
-                </div>
-            }
-            inputFields={{
-                title : "Course Name",
-                description : "Course Description"
-            }}
-            changeHandler={handleChange}
-            confirmHandler={handleCreateCourse}
-        />
+    if (userInfo.role === "educator") {
+        createButton = (
+            <Modal
+                title={"Create New Course"}
+                trigger={
+                    <div className="bg-blue-500 p-3 rounded shadow hover:bg-blue-700 m-auto text-center text-sm text-white font-semibold hover:cursor-pointer">
+                        <div>+ New Course</div>
+                    </div>
+                }
+                inputFields={{
+                    title: "Course Name",
+                    description: "Course Description",
+                }}
+                changeHandler={handleChange}
+                confirmHandler={async () => {
+                    await handleCreateCourse();
+                    setIsModalActive(false);
+                }}
+                onToggle={setIsModalActive}
+            />
+
+        );
     }
 
-    var courseList = [];
-    //Push all courses into courseList
-    courseInfo.forEach(course => {
-        courseList.push(
-            <a href={`/courses/${course.ID}`}>
-                <div className="bg-gray-100 p-4 rounded shadow hover:bg-gray-300" >
-                    <h3 className="text-xl font-semibold truncate overflow-hidden" >{course.title}</h3>
-                    <p className="mt-2">{course.description}</p>
-                </div>
-            </a>
-        )
-    });
-    
+    const filteredCourses = courseInfo.filter((course) =>
+        course.title.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    const courseList = filteredCourses.map((course) => (
+        <a href={`/courses/${course.ID}`} key={course.ID}>
+            <div className="bg-gray-100 p-4 rounded shadow hover:bg-gray-300">
+                <h3 className="text-xl font-semibold truncate overflow-hidden">{course.title}</h3>
+                <p className="mt-2">{course.description}</p>
+            </div>
+        </a>
+    ));
+
     return (
         <div className="p-6">
-            <div className="flex justify-between flex-wrap  mb-5">
+            <div className="mb-5">
                 <h1 className="text-2xl font-bold">Courses</h1>
-                {createButton}
+            </div>
+            <div className="mb-5">
+                <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
+                    {createButton}
+                    <SearchBar onChange={handleSearchChange} disabled={isModalActive} />
+                </div>
             </div>
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                 {courseList}