added search functionality

webmarker/src/App.js

@@ -6,11 +6,20 @@ import AddModal from './componets/AddModal';
 function App() {
   const [data, setData] = useState([]);
   const [isAdding, setIsAdding] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
 
   function exitAdding() {
     setIsAdding(!isAdding)
   }
 
+  function search(e) {
+    setSearchQuery(e.target.value);
+  }
+  
+  const filteredData = data.filter((e) => {
+    return (e.name.toLowerCase().includes(searchQuery.toLowerCase()) || e.title.toLowerCase().includes(searchQuery.toLowerCase()) || e.tag.toLowerCase().includes(searchQuery.toLowerCase()))
+  });
+
   useEffect(() => {
     async function fetchData() {
       const res = await fetch('/get');
@@ -25,12 +34,11 @@ function App() {
   return (
     <div className="App">
       <div className="head">
-        <input className="search" type="search" placeholder="Search bookmarks"/>
+        <input className="search" type="search" placeholder="Search for name/title/tag" onChange={search}/>
-        <button className="search-btn"><span className="material-icons-outlined md-36">search</span></button>
         <button className="add-btn"><span className="material-icons-outlined md-36" onClick={() => setIsAdding(true)}>add</span></button>
         <button className="settings-btn"><span className="material-icons-outlined md-36">settings</span></button>
       </div>
-      <List data={data} />
+      <List data={filteredData} />
       {isAdding ? <AddModal onExit={exitAdding} /> : null}
     </div>
   );

webmarker/src/styles/App.css

@@ -10,8 +10,7 @@
 }
 
 .search {
-  border-top-left-radius: 10px;
+  border-radius: 10px;
-  border-bottom-left-radius: 10px;
   font-size: 1.5rem;
   padding-left: 10px;
   width: 40%;