fixed search bar to filter projects and prevent tagify mounting warnings

cnohilly · Oct 13, 2022 · d09bc1a · d09bc1a
1 parent 7e69b6f
commit d09bc1a
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 40 deletions.
diff --git a/client/src/components/ProjectForm/index.js b/client/src/components/ProjectForm/index.js
@@ -39,6 +39,9 @@ const ProjectForm = () => {
     },
   });
 
+  let tagify = useRef();
+  tagify.current = null;
+
   useEffect(() => {
     const tagifyWhitelist = ["HTML", "CSS", "JavaScript", "Node", "Handlebars", "Express", "MongoDB", "MySQL", "GraphQL", "React", "MERN"];
     const tagifySettings = {
@@ -58,10 +61,13 @@ const ProjectForm = () => {
         keepInvalid: false
       }
     }
-    new Tagify(document.querySelector('input[name="tagify-tags"]'), tagifySettings);
-  }, [displayProjectForm]);
+    const inputEl = document.querySelector('input[name="tagify-tags"]');
 
+    if (!tagify.current && inputEl) {
+      tagify.current = new Tagify(inputEl, tagifySettings);
+    }
 
+  }, [displayProjectForm]);
 
   // submit form
   const handleFormSubmit = async (event) => {

diff --git a/client/src/components/SearchBar/index.js b/client/src/components/SearchBar/index.js
@@ -1,18 +1,18 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Card, Form, Button, InputGroup } from 'react-bootstrap';
+import React, { useRef } from 'react';
+import { Card, Form, InputGroup } from 'react-bootstrap';
 
 const SearchBar = (props) => {
   const {
-    searchOptions
+    searchOptions,
+    updateSearch
   } = props;
 
   const searchType = useRef();
-  // const [searchVal, setSearchVal] = useState('');
   const searchVal = useRef();
 
-  useEffect(() => {
-    console.log(searchType.current.value, searchVal);
-  }, [searchVal])
+  const onSearchChange = () => {
+    updateSearch(searchType.current.value, searchVal.current.value);
+  }
 
   return (
     // search bar card
@@ -25,9 +25,11 @@ const SearchBar = (props) => {
               aria-label="Select"
               className="bg-dark text-light w-100"
               ref={searchType}
+              onChange={onSearchChange}
             >
               {searchOptions.map(option => {
-                return (<option value={option.toLowerCase().split(' ').join('-')}>{option}</option>)
+                const val = option.toLowerCase().split(' ').join('-');
+                return (<option key={val} value={val}>{option}</option>)
               })};
               {/* <option value="title">Title</option> */}
               {/* <option value="tag">Tag</option> */}
@@ -39,15 +41,9 @@ const SearchBar = (props) => {
               className="bg-dark text-light"
               // value={searchVal}
               ref={searchVal}
-              maxlength="100"
+              onChange={onSearchChange}
+              maxLength="100"
             />
-            <Button
-              variant="success"
-              id="button-addon2"
-              type="submit"
-            >
-              <i className="bi bi-search"></i>
-            </Button>
           </InputGroup>
         </Form>
       </Card.Body>

diff --git a/client/src/pages/Home.js b/client/src/pages/Home.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { Container } from 'react-bootstrap';
 import ProjectForm from '../components/ProjectForm';
 import ProjectList from '../components/ProjectList';
@@ -10,32 +10,36 @@ import { useQuery } from '@apollo/client';
 const Home = () => {
 
   const { loading, data } = useQuery(QUERY_PROJECTS);
-  const projects = data?.projects || [];
-  let filteredProjects = [];
 
-  const searchOptions = ['Title', 'Tag'];
+  const projects = useMemo(() => data?.projects || [], [data]);
 
-  const [searchState, setSearchState] = useState({ type: 'title', value: '' });
+  const [displayedProjects, setDisplayedProjects] = useState(projects);
 
-  const updateSearch = (type, val) => {
-    setSearchState = setSearchState({ type: type, value: val });
-  }
+  const searchOptions = ['Title', 'Tag'];
 
-  useEffect(() => {
+  const updateSearch = (type, val) => {
+    console.log(type, val);
     if (!loading) {
-      if (!searchState.value) {
-        filteredProjects = [];
-      } else if (searchState.type === 'title') {
-        filteredProjects = projects.filter(project => {
-          return project.projectTitle.contains(searchState.value);
-        });
-      } else if (searchState.type === 'tag'){
-        filteredProjects = projects.filter(project => {
-          return project.projectTags.includes(searchState.value);
-        })
+      if (!val) {
+        setDisplayedProjects(projects);
+      } else if (type === 'title') {
+        setDisplayedProjects(projects.filter(project => {
+          return project.projectTitle.toLowerCase().includes(val.toLowerCase());
+        }));
+      } else if (type === 'tag') {
+        setDisplayedProjects(projects.filter(project => {
+          return project.projectTags.filter(tag => {
+            return tag.toLowerCase().includes(val.toLowerCase());
+          }).length > 0;
+        }));
       }
     }
-  }, [searchState])
+  }
+
+  useEffect(() => {
+    setDisplayedProjects(projects);
+  }, [projects])
+
 
   return (
     // section for Homepage
@@ -68,15 +72,15 @@ const Home = () => {
       <Container id="home-project-list" className="py-4">
 
         {/* Search Bar */}
-        <SearchBar searchOptions={searchOptions} />
+        <SearchBar searchOptions={searchOptions} updateSearch={updateSearch} />
 
         {/* Project Form */}
         <ProjectForm />
 
         {/* Project List */}
         {loading
           ? <h2 className="text-white text-center">Loading Projects...</h2>
-          : <ProjectList projects={filteredProjects ? filteredProjects : projects} />
+          : <ProjectList projects={displayedProjects} />
         }
 
       </Container>