Merge pull request #20 from oslabs-beta/denton/link

Denton/link

Author: liamroh

app/src/components/marketplace/MarketplaceCardContainer.tsx

@@ -1,32 +1,12 @@
 import { Container, Grid } from '@mui/material';
 
 import MarketplaceCard from './MarketplaceCard';
-import React, {useEffect, useState} from 'react';
-import axios from 'axios';
+import React from 'react';
 
-const MarketplaceCardContainer = () => {
 
-  const [marketplaceProjects, setMarketplaceProjects] = useState([]);
-  useEffect(() => {
-    async function marketplaceFetch() {
-      try {
-        const response = await axios.get('/getMarketplaceProjects', {
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          withCredentials: true,
-        });
+const MarketplaceCardContainer = ({displayProjects}) => {
+
 
-        setMarketplaceProjects(response.data);
-    
-      } catch (error) {
-        console.error('Error fetching MP data:', error);
-      }
-    }
-    marketplaceFetch();
-    
-  }, []);
-  
   return (
     <>
       <Container>
@@ -36,7 +16,7 @@ const MarketplaceCardContainer = () => {
           spacing={{ xs: 2, md: 3 }}
           columns={{ xs: 4, sm: 8, md: 12 }}
         >
-          {marketplaceProjects.map((proj, i) => (
+          {displayProjects.map((proj, i) => (
 
             <Grid item xs={4} sm={4} md={4} key={i}>
               <MarketplaceCard proj={proj}/>

app/src/components/marketplace/Searchbar.tsx

@@ -1,14 +1,56 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import TextField from '@mui/material/TextField';
 
-const SearchBar = () => {
+const SearchBar = ({marketplaceProjects, updateDisplayProjects }):JSX.Element => {
+  //passing down all marketplaceProjects
+  const [searchText, setSearchText] = useState('');
+
+
+  const handleChange = (e) => {
+    const newText = e.target.value
+    setSearchText(newText)
+    
+  }
+
+  
+  useEffect(()=>{
+           
+    if(searchText === ''){
+
+      updateDisplayProjects(marketplaceProjects)
+
+    }else{
+
+      const patternString = '(?:^|[^a-zA-Z])' + searchText.toLowerCase() + '(?:$|[^a-zA-Z])';
+      //(?: [non-capturing group] means to ignore the items inside the parens in terms of looking for that string order in the target 
+      //^ refers to the literal beginning of a start of a line or string
+      //| pipe operator is an OR statement
+      //[^a-zA-Z] [] is grouping characters, the ^ at the beginning means to look for things that are not letters (lowercase or uppercase)
+      //a-zA-Z letters (lowercase and uppercase) and underscore symbol
+      //All together: match either the start/end of a line/string or any character that is not a letter.
+      //Looks for anything that has the searchText in between non-letter characters
+      const searchResults = marketplaceProjects.reduce((results, curr) => {
+        if(curr.name.match(patternString) || curr.username.match(patternString))
+          results.push(curr)
+        return results;
+      }, [])
+      updateDisplayProjects(searchResults)
+    }
+
+ }, [searchText])
+
+
   return (
+
     <TextField
       label="Search"
       variant="outlined"
       fullWidth
       style={{ maxWidth: 450, height: '10px' }}
+      value= {searchText}
+      onChange={handleChange}
     />
+
   );
 };
 

app/src/containers/MarketplaceContainer.tsx

@@ -1,22 +1,55 @@
 import MarketplaceCardContainer from '../components/marketplace/MarketplaceCardContainer';
 import SearchBar from '../components/marketplace/Searchbar';
-import React from 'react';
+import React, {useEffect, useState} from 'react';
+import axios from 'axios';
 
 const MarketplaceContainer = () => {
 
+  const [marketplaceProjects, setMarketplaceProjects] = useState([]);
+  const [displayProjects, setDisplayProjects] = useState([]);
+  useEffect(() => {
+    async function marketplaceFetch() {
+      try {
+        const response = await axios.get('/getMarketplaceProjects', {
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          withCredentials: true,
+        });
+
+        setMarketplaceProjects(response.data);
+        setDisplayProjects(response.data);
+    
+      } catch (error) {
+        console.error('Error fetching MP data:', error);
+      }
+    }
+    marketplaceFetch();
+    
+  }, []);
+
+  const updateDisplayProjects = (searchResults) => {
+
+    setDisplayProjects(searchResults);//have to pass this down as a prop so that the setting is done outside of Rendering otherwise callstack issues
+
+  };
 
 
   return (
     <div style={containerStyles}>
       <div style={contentStyles}>
         <h1 style={headingStyles}>Discover components built with ReacType</h1>
         <p style={subheadingStyles}>
-          Browse, save, and customize the latest components built by the
-          community
+            Browse, save, and customize the latest components built by the
+            community
         </p>
-        <SearchBar />
+        <SearchBar marketplaceProjects = {marketplaceProjects} updateDisplayProjects = {updateDisplayProjects}/>
       </div>
-      <MarketplaceCardContainer />
+        {displayProjects.length ? <MarketplaceCardContainer displayProjects = {displayProjects} /> : 
+          <h2 style={{textAlign: 'center'}}>
+              No Results Found!
+          </h2> 
+        }
     </div>
   );
 };
@@ -28,6 +61,7 @@ const containerStyles: React.CSSProperties = {
   color: 'white',
   paddingBottom: '15vh',
   overflow: 'auto',
+
 };
 
 const contentStyles: React.CSSProperties = {