add search function

Author: devsdenepal

src/App.jsx

@@ -1,14 +1,15 @@
 import React, { useEffect, useState } from 'react';
 // import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 import './App.css';
+import './index.css';
 import {
   BrowserRouter as Router,
   Routes,
   Route,
   Navigate,
   useLocation
 } from 'react-router-dom';
-
+import SearchResults from './components/search';
 import Login from './components/login';
 import SignUp from './components/register';
 import Home from './components/home';
@@ -31,17 +32,17 @@ function App() {
 
     return () => unsubscribe(); // Clean up on unmount
   }, []);
-// Handle redirects from GitHub Pages 404 fallback
-// function RedirectWithState() {
-//   const location = useLocation();
-//   useEffect(() => {
-//     const redirectPath = new URLSearchParams(location.search).get('redirect');
-//     if (redirectPath) {
-//       window.history.replaceState({}, '', redirectPath);
-//     }
-//   }, [location]);
-//   return null;
-// }
+  // Handle redirects from GitHub Pages 404 fallback
+  // function RedirectWithState() {
+  //   const location = useLocation();
+  //   useEffect(() => {
+  //     const redirectPath = new URLSearchParams(location.search).get('redirect');
+  //     if (redirectPath) {
+  //       window.history.replaceState({}, '', redirectPath);
+  //     }
+  //   }, [location]);
+  //   return null;
+  // }
 
   return (
     <Router basename={import.meta.env.BASE_URL}>
@@ -66,6 +67,8 @@ function App() {
               />
               <Route path="/courses/:courseName" element={<CourseDetail />} />
               <Route path="/" element={<Dashboard courses={courses} />} />
+              <Route path="/search" element={<SearchResults />} />
+
             </Routes>
             <ToastContainer />
           </div>

src/components/Navbar.jsx

@@ -1,7 +1,26 @@
+import React, { useState } from 'react';
 import logo from '../assets/images/logo.png';
-import { Link } from 'react-router-dom'; // Import Link from react-router-dom
+import { Link, useNavigate } from 'react-router-dom'; // Import Link and useNavigate from react-router-dom
 
 function Navbar({ loggedin }) {
+  const [searchTerm, setSearchTerm] = useState(''); // State for search term
+  const navigate = useNavigate(); // useNavigate for navigation
+
+  // Handle search input change
+  const handleSearchChange = (event) => {
+    setSearchTerm(event.target.value);
+  };
+
+  // Handle search submission
+  const handleSearchSubmit = (event) => {
+    event.preventDefault(); // Prevent page refresh
+    if (searchTerm) {
+      // Redirect to the search results page with the search term
+      navigate(`/search?query=${encodeURIComponent(searchTerm)}`);
+      setSearchTerm(''); // Clear the input after submission
+    }
+  };
+
   return (
     <nav className="navbar navbar-expand-lg">
       <div className="container-fluid">
@@ -16,12 +35,11 @@ function Navbar({ loggedin }) {
               <li className="nav-item">
                 <Link className="nav-link active" aria-current="page" to="/home">Home</Link>
               </li>
-              ) : (
-                <li className="nav-item">
+            ) : (
+              <li className="nav-item">
                 <Link className="nav-link active" aria-current="page" to="/">Home</Link>
               </li>
             )}
-
             <li className="nav-item">
               <Link className="nav-link" aria-current="page" to="/events">Events</Link>
             </li>
@@ -36,8 +54,14 @@ function Navbar({ loggedin }) {
             </li>
           </ul>
           <div className="d-flex align-items-center flex-column flex-lg-row">
-            <form className="me-2 mb-2 mb-lg-0">
-              <input type="text" className="form-control form-control-sm" placeholder="Search" />
+            <form className="me-2 mb-2 mb-lg-0" onSubmit={handleSearchSubmit}>
+              <input 
+                type="text" 
+                className="form-control form-control-sm" 
+                placeholder="Search" 
+                value={searchTerm} 
+                onChange={handleSearchChange} 
+              />
             </form>
             {loggedin === 'true' ? (
               <Link className="btn btn-primary clk" to="/profile">Profile </Link>

src/components/search.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import courses from './courseData'; // Ensure the path is correct
+import { Link } from 'react-router-dom';
+const useQuery = () => {
+  return new URLSearchParams(useLocation().search);
+};
+
+function SearchResults() {
+  const query = useQuery();
+  const searchTerm = query.get('query')?.toLowerCase() || '';
+  
+  // Filter courses based on the search term
+  const filteredCourses = Object.values(courses).filter(course =>
+    course.title.toLowerCase().includes(searchTerm) ||
+    course.description.toLowerCase().includes(searchTerm)
+  );
+
+  return (
+    <div className="container mt-5">
+      <h2>Search Results for "{searchTerm}"</h2>
+      {filteredCourses.length > 0 ? (
+        <div className="row row-cols-1 row-cols-md-3 g-3">
+          {filteredCourses.map((course, index) => (
+            <div className="col" key={index}>
+              <div className="card h-100">
+                <Link to={`/courses/${course.title.replace(/\s+/g, '-').toLowerCase()}`} className='lnk'>
+                  <img src={course.image} className="card-img-top" alt={course.title} />
+                  <div className="card-body">
+                    <h5 className="card-title">{course.title}</h5>
+                    <p className="card-text">{course.description}</p>
+                  </div>
+                </Link>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <h4 className="text-center">No results found</h4>
+      )}
+    </div>
+  );
+}
+
+export default SearchResults;