Implemented basic working fuzzy search

toward #35
ringofkeys · Apr 5, 2022 · 5cba00e · 5cba00e
1 parent 0dee324
commit 5cba00e
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 42 deletions.
diff --git a/src/components/Directory/DirectorySearch.js b/src/components/Directory/DirectorySearch.js
@@ -1,32 +1,44 @@
 import { useState, useEffect } from "react"
 
-export default function DirectorySearch({ searcher, searchResults, setSearchResults }) {
-  const [searchTerm, setSearchTerm] = useState('')
+export default function DirectorySearch({
+  searcher,
+  searchResults,
+  setSearchResults,
+  resetSearchResults,
+}) {
+  function handleSearchChange(e) {
+    const searchTerm = e.target.value
 
-  useEffect(() => {
-    if (!searchTerm || searchTerm.length < 2) return
-    setSearchResults(searcher.search(searchTerm))
-  }, [searchTerm])
+    if (!searchTerm || searchTerm.length <= 2) {
+      resetSearchResults()
+    } else {
+      const results = searcher.search(searchTerm)
+      console.log({ searchTerm, results })
+      setSearchResults(results)
+    }
+  }
 
-    return (<>
-        <section className="section_search">
-            <div className="input__group text">
-            <label htmlFor="fuzzy">
-                Search any keywords here or use the advanced search feature to
-                narrow your results.
-            </label>
-            <input
-                type="text"
-                name="fuzzy"
-                onChange={e => setSearchTerm(e.target.value)}
-                placeholder="Keyword"
-            />
-            </div>
-            {/* <SearchButton /> */}
-            <span class="results">
-            <strong>{searchResults.length}</strong> artists
-            </span>
-            {/* <button
+
+  return (
+    <>
+      <section className="section_search">
+        <div className="input__group text">
+          <label htmlFor="fuzzy">
+            Search any keywords here or use the advanced search feature to
+            narrow your results.
+          </label>
+          <input
+            type="text"
+            name="fuzzy"
+            onChange={handleSearchChange}
+            placeholder="Keyword"
+          />
+        </div>
+        {/* <SearchButton /> */}
+        <span className="results">
+          <strong>{searchResults.length}</strong> artists
+        </span>
+        {/* <button
             onClick={() => setFilterVisibility(!filtersAreVisible)}
             className={"advanced-btn " + (activeFilters ? "active" : "")}
             style={{
@@ -44,8 +56,8 @@ export default function DirectorySearch({ searcher, searchResults, setSearchResu
                 <path d="M .5 2 l 1.5 -1.5 l 1.5 1.5"></path>
             </svg>
             </button> */}
-        </section>
-        {/* <section
+      </section>
+      {/* <section
             className={`section_filters ${filtersAreVisible ? "active" : ""}`}
         >
             <div className="filters">
@@ -69,5 +81,6 @@ export default function DirectorySearch({ searcher, searchResults, setSearchResu
             <SearchButton />
             </div>
         </section> */}
-    </>)
-}
+    </>
+  )
+}
diff --git a/src/components/PageContent/PageBlock/Shortcode/DirectorySection.js b/src/components/PageContent/PageBlock/Shortcode/DirectorySection.js
@@ -1,17 +1,28 @@
-import DirectoryGrid from "components/Directory/DirectoryGrid";
-import DirectorySearch from "components/Directory/DirectorySearch";
-import { getDirectorySearch, prepareMemberList } from "lib/directory";
-import { useState } from "react";
+import DirectoryGrid from "components/Directory/DirectoryGrid"
+import DirectorySearch from "components/Directory/DirectorySearch"
+import { getDirectorySearch, prepareMemberList } from "lib/directory"
+import { useEffect, useState } from "react"
 
 export default function DirectorySection(props) {
-    // Filter artists that are marked de-listed in DatoCMS
-    let fullMemberList = prepareMemberList(props.pageSpecificData)    
-    const [filtersAreVisible, setFilterVisibility] = useState(false)
-    const [searchResults, setSearchResults] = useState(fullMemberList)
-    const searcher = getDirectorySearch(fullMemberList, ['firstName', 'lastName'])
+  // Filter artists that are marked de-listed in DatoCMS
+  let fullMemberList = prepareMemberList(props.pageSpecificData)
+  const [filtersAreVisible, setFilterVisibility] = useState(false)
 
-    return <>
-        <DirectorySearch searcher={searcher} searchResults={searchResults} setSearchResults={setSearchResults} />
-        <DirectoryGrid artists={searchResults} />
+  const [searchResults, setSearchResults] = useState(fullMemberList)
+  const resetSearchResults = () => setSearchResults(fullMemberList)
+  const searcher = getDirectorySearch(fullMemberList, ["firstName", "lastName"])
+
+  useEffect(() => console.log({ searchResults }), [searchResults])
+
+  return (
+    <>
+      <DirectorySearch
+        searcher={searcher}
+        searchResults={searchResults}
+        setSearchResults={setSearchResults}
+        resetSearchResults={resetSearchResults}
+      />
+      <DirectoryGrid artists={searchResults} />
     </>
-}
+  )
+}
diff --git a/src/queries/keys.js b/src/queries/keys.js
@@ -21,6 +21,7 @@ query AllKeysQuery($limit: IntType!, $skip: IntType!) {
         vocalRange
         danceExperience
         affiliations
+        showInDirectory
     }
 }`