feat: Implemented the search shape functionality

Author: atapas

components/core/App.js

@@ -14,8 +14,11 @@ import Loader from "react-loader-spinner";
 import { ShapeList, Header } from '..';
 
 const App = (props) => {
-  const [data, setData] = useState([]);
-  const [loading, setLoading] = useState(true);
+  const [data, setData] = useState([]); // shapes
+  const [loading, setLoading] = useState(true); // shapes loading
+
+  const [searchTerm, setSearchTerm] = useState(""); // search
+  
   const { user } = props;
 
   useEffect(async () => {
@@ -85,11 +88,11 @@ const App = (props) => {
     setLoading(false);
   }, [user]);
 
-  
-
   return (
     <>
-      <Header {...props} />
+      <Header {...props} 
+        searchTerm={searchTerm}
+        setSearchTerm={setSearchTerm}/>
       {loading ? (
         <Loader
           style={{margin: '20% auto auto 42%'}}
@@ -99,7 +102,7 @@ const App = (props) => {
           width={300}
         />
       ) : (
-        <ShapeList {...props} data={ data } />
+        <ShapeList {...props} data={ data } searchTerm={searchTerm} />
       )}
     </>
   );

components/utils/Header.js

@@ -126,7 +126,13 @@ const LoginBar = styled.div`
 
 
 
-const Header = ({ setOpen, user, setUser }) => {
+const Header = ({ 
+  setOpen, 
+  user, 
+  setUser, 
+  searchTerm,
+  setSearchTerm
+}) => {
 
   const [searchterm, setSearchterm] = useState('');
   // sign out function
@@ -143,18 +149,6 @@ const Header = ({ setOpen, user, setUser }) => {
       });
   };
 
-  const handleSearchTerm = event => {
-    if (event.key === 'Enter') {
-      search();
-    } else {
-      setSearchterm(event.target.value);
-    }
-  }
-
-  const search = event => {
-    console.log('Performing Search using', searchterm);
-  }
-
   return (
     <AppHeader>
       <Link href="/">
@@ -170,6 +164,8 @@ const Header = ({ setOpen, user, setUser }) => {
             placeholder="Search a shape"
             aria-label="Search a shape"
             aria-describedby="basic-addon1"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
           />
           <CloseIcon color='#ffffff' size='24px' />
         </NavbarSearchInput>

components/utils/ShapeList.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 
 // Bootstrap
 import Container from 'react-bootstrap/Container'
@@ -191,12 +191,27 @@ const LikeFilledIcon = styled(BsFillHeartFill)`
   cursor: pointer;
 `;
 
-const ShapeList = ({ setOpen, user, data }) => {
+const ShapeList = ({ setOpen, user, data, searchTerm }) => {
+
+  const filterShape = (shapes, searchTerm) => {
+    if (!searchTerm) {
+      return shapes;
+    }
+    return shapes.filter((shape) => {
+      const shapeName = shape.name.toLowerCase();
+      return shapeName.includes(searchTerm.toLowerCase());
+    })
+  }
 
   const [shapes, setShapes] = useState(data);
+  const [filteredShape, setFilteredShape] = useState(shapes);
   const [showExportModal, setShowExportModal] = useState(false);
   const [shapeToExport, setShapeToExport] = useState();
 
+  useEffect(() =>{
+    setFilteredShape(filterShape(shapes, searchTerm));
+  }, [searchTerm, shapes]);
+
   const handleSwicth = (shapeName) => {
 
     let modifiedShapes = shapes.map((shape, index) => {
@@ -312,6 +327,7 @@ const ShapeList = ({ setOpen, user, data }) => {
         return shape;
       });
       setShapes(...[modifiedShapes]);
+      //setData(...[modifiedShapes]);
     }
   };
 
@@ -324,7 +340,7 @@ const ShapeList = ({ setOpen, user, data }) => {
           setShow={ setShowExportModal }
           shape = { shapeToExport } /> }
 
-        {shapes.map((shape, index) => (
+        {filteredShape.map((shape, index) => (
           <React.Fragment key={index}>
             <ShapeCard>
               <ShapeCardBody>

pages/_app.js

@@ -33,7 +33,10 @@ export default function App({ Component, pageProps }) {
     }
   });
 
+  console.log('pageProps', pageProps);
+
   return (
+    
     <>
       <Toaster position="top-right" reverseOrder={false} />
       <Component {...pageProps} {...props} />