Merge pull request #21 from Dev-Goel/main

Updated SearchBar Component

Author: killbotXD

frontend/family_tree/src/App.css

@@ -4,7 +4,6 @@
   display: flex;
   align-items: center;
   flex-direction: column;
-  /* background-image: linear-gradient(90deg, #8820dd, orange); */
 }
 
 .help {
@@ -47,4 +46,4 @@
   margin-right: 10px;
   width: 150px;
   height: 170px;
-}
+}

frontend/family_tree/src/App.js

@@ -7,7 +7,7 @@ import StudentData from "./Data.json";
 function App() {
   return (
     <div className="App">
-      <SearchBar placeholder="Enter the Name or Roll Number..." data={StudentData} />
+      <SearchBar placeholder="Enter the Name or Roll Number..." studentData={StudentData} />
       <div className="help">
         <Help />
       </div>

frontend/family_tree/src/Components/SearchBar.js

@@ -1,27 +1,26 @@
 import React, { useState } from "react";
-import "./SearchBar.css";
+import "../Styles/SearchBar.css";
 import SearchIcon from "@material-ui/icons/Search";
 import CloseIcon from "@material-ui/icons/Close"
 
-function SearchBar({ placeholder, data }) {
+function SearchBar({ placeholder, studentData }) {
   const [filteredData, setFilteredData] = useState([]);
   const [wordEntered, setWordEntered] = useState("");
 
   const handleFilter = (event) => {
     const searchWord = event.target.value;
     setWordEntered(searchWord);
-    const newFilter = data.filter((value) => {
-      return value.title.toLowerCase().includes(searchWord.toLowerCase());
-    });
-
     if (searchWord.length < 3) {
       setFilteredData([]);
     } else {
-      setFilteredData(newFilter);
+      const filteredResults = studentData.filter((query) => {
+        return query.student.name.toLowerCase().includes(searchWord.toLowerCase()) + query.student.id.toLowerCase().includes(searchWord.toLowerCase());
+      });
+      setFilteredData(filteredResults);
     }
   };
 
-  const clearInput = () => {
+  const clearState = () => {
     setFilteredData([]);
     setWordEntered("");
   };
@@ -36,20 +35,18 @@ function SearchBar({ placeholder, data }) {
           onChange={handleFilter}
         />
         <div className="searchIcon">
-          {filteredData.length === 0 ? (
+          {wordEntered.length === 0 ? (
             <SearchIcon />
           ) : (
-            <CloseIcon id="clearBtn" onClick={clearInput} />
+            <CloseIcon id="clearBtn" onClick={clearState} />
           )}
         </div>
       </div>
-      {filteredData.length != 0 && (
+      {filteredData.length !== 0 && (
         <div className="dataResult">
-          {filteredData.slice(0, 5).map((value, key) => {
+          {filteredData.slice(0, 5).map((value) => {
             return (
-              <a className="dataItem" href={value.link} target="_blank">
-                <p>{value.title} </p>
-              </a>
+              <p className="dataItem">{`${value.student.name} (${value.student.id})`} </p>
             );
           })}
         </div>