Search refactoring

src/components/header.js

@@ -8,7 +8,7 @@ import { MiscContext } from "../state/misc"
 import BaseButton from "./baseButton"
 import ButtonCart from "./buttonCart"
 import IconBars from "./iconBars"
-import Search from "./search"
+import Search from "./search/search"
 import * as Routes from "./sidepanel/routes"
 
 const Header = ({

src/components/search.js → src/components/search/search.js

@@ -1,17 +1,16 @@
 import React, { useContext, useEffect, useState } from "react"
 import { graphql, useStaticQuery } from "gatsby"
 import { useFlexSearch } from "react-use-flexsearch"
-import { Location, navigate } from "@reach/router"
+import { useLocation, navigate } from "@reach/router"
 import queryString from "query-string"
 
 import SearchBoxBase from "./searchBoxBase"
 import SearchBox from "./searchBox"
 import SearchBoxMobile from "./searchBoxMobile"
-import { MiscContext } from "../state/misc"
+import { MiscContext } from "../../state/misc"
 
 const Search = (props) => {
   //console.log("Search")
-
   const data = useStaticQuery(graphql`
     query {
       localSearchProducts {
@@ -22,46 +21,27 @@ const Search = (props) => {
   `)
   const { index, store } = data.localSearchProducts
   const [state, dispatch] = useContext(MiscContext)
-  const querystring = props?.search?.p ?? ""
-  const [query, setQuery] = useState(querystring)
-  useEffect(() => {
-    //console.log("useEffect")
-    setQuery(querystring)
-  }, [querystring])
+  const location = useLocation()
+  const searchQueryParam = queryString.parse(location.search).p ?? ""
+  const [query, setQuery] = useState(searchQueryParam)
 
-  if (
-    props.location.pathname === "/buscar/" &&
-    props.search &&
-    props.search.p &&
-    !state.query
-  ) {
-    // console.log("dispatch")
-    dispatch({
-      type: "SET_QUERY",
-      query: query,
-    })
-  }
+  useEffect(() => {
+    setQuery(searchQueryParam)
+  }, [searchQueryParam])
 
   const results = useFlexSearch(query, index, store)
 
-  // const mql = window.matchMedia("(min-width: 570px)")
-  // console.log("mql:")
-  // console.log(mql.matches)
-
   const normalizeResults = results.map(({ title, slug }) => {
     return { title, slug }
   })
 
   const handleSearch = (query) => {
     //console.log('handleSearch')
-    //console.log(query)
     dispatch({
       type: "SET_MOBILE_SEARCH_OPEN",
       isMobileSearchOpen: false,
     })
-    navigate(`/buscar/?p=${query}`, {
-      state: { query },
-    })
+    navigate(`/buscar/?p=${query}`)
   }
 
   const searchBoxProps = {
@@ -82,19 +62,4 @@ const Search = (props) => {
   )
 }
 
-// export default InputSearchMain
-export default (props) => (
-  <Location>
-    {(locationProps) => (
-      <Search
-        location={locationProps.location}
-        search={
-          locationProps.location.search
-            ? queryString.parse(locationProps.location.search)
-            : null
-        }
-        {...props}
-      />
-    )}
-  </Location>
-)
+export default Search

src/components/searchBox.js → src/components/search/searchBox.js

@@ -1,15 +1,10 @@
 import React  from "react"
 import Autosuggest from "react-autosuggest"
 
-// const SearchBox = props => {
-// https://github.com/reactjs/reactjs.org/issues/2120#issuecomment-589207766
-const SearchBox = React.forwardRef((props, ref) => {
-  //console.log("SearchBox")
-
+const SearchBox = props => {
   return (
     <div className="searchBox">
-      {/*<Autosuggest {...props} />*/}
-      <Autosuggest {...props} ref={ref} />
+      <Autosuggest {...props} ref={props.inputEl} />
       <style jsx global>{`
         .react-autosuggest__container {
           position: relative;
@@ -80,7 +75,6 @@ const SearchBox = React.forwardRef((props, ref) => {
       `}</style>
     </div>
   )
-// }
-})
+}
 
 export default SearchBox

src/components/searchBoxBase.js → src/components/search/searchBoxBase.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useState, useRef } from "react"
 import Highlighter from "react-highlight-words"
 
 const getSuggestionValue = (suggestion) => suggestion.title
@@ -19,7 +19,7 @@ const renderSuggestion = ({ title }, asd) => (
 const SearchBoxBase = (props) => {
   const { view: View, query, setQuery, handleSearch, dispatch } = props
   let { results: suggestions } = props
-  const [inputRef, setInputRef] = useState()
+  const inputEl = useRef(null)
   const [value, setValue] = useState(query)
 
   //console.log("SearchBoxBase")
@@ -29,14 +29,6 @@ const SearchBoxBase = (props) => {
     setValue(query)
   }, [query])
 
-  const setInputRef2 = (autosuggest) => {
-    //console.log("setInputRef2:")
-    if (autosuggest !== null) {
-      setInputRef(autosuggest.input)
-      //console.log(inputRef)
-    }
-  }
-
   const clearInput = () => {
     //console.log('clearInput')
     setValue("")
@@ -49,8 +41,9 @@ const SearchBoxBase = (props) => {
 
   const onKeyDown = (event) => {
     //console.log('onKeyDown')
+    // console.log(inputEl.current)
     if (event.key === "Enter" && value !== "") {
-      inputRef.blur()
+      inputEl.current.input.blur()
       handleSearch(value)
     }
   }
@@ -67,7 +60,7 @@ const SearchBoxBase = (props) => {
 
   const onSuggestionSelected = (e, asd) => {
     //console.log('onSuggestionSelected')
-    inputRef.blur()
+    inputEl.current.input.blur()
     setQuery(asd.suggestionValue)
     handleSearch(asd.suggestionValue)
   }
@@ -89,9 +82,8 @@ const SearchBoxBase = (props) => {
     inputProps,
     dispatch,
     clearInput,
-    inputRef,
     focusInputOnSuggestionClick: false,
-    ref: setInputRef2,
+    inputEl,
   }
 
   return <View {...autosuggestProps} />

src/components/searchBoxMobile.js → src/components/search/searchBoxMobile.js

@@ -1,36 +1,14 @@
 import React, { useEffect } from "react"
 import Autosuggest from "react-autosuggest"
-// import { TiArrowLeft } from "react-icons/ti"
 import { IoIosArrowBack } from "react-icons/io"
-import { MdClose/*, MdClear , MdChevronLeft, MdArrowBack */ } from "react-icons/md"
+import { MdClose } from "react-icons/md"
 
-import BaseButton from "../components/baseButton"
+import BaseButton from "../baseButton"
 
-// const SearchBoxMobile = props => {
-// https://github.com/reactjs/reactjs.org/issues/2120#issuecomment-589207766
-const SearchBoxMobile = React.forwardRef((props, ref) => {
-
-  // console.log('SearchBoxMobile!')
-  // console.log('inputRef:')
-  // console.log(props.inputRef)
-
-  // const icons = [
-  //   TiArrowLeft,
-  //   IoIosArrowBack,
-  //   MdClear,
-  //   MdClose,
-  //   MdChevronLeft,
-  //   MdArrowBack,
-  // ]
-
-  useEffect(
-    () => {
-      // console.log('--useEffect!')
-      if (props.inputRef !== undefined) {
-        props.inputRef.focus()
-      }
-    },
-  )
+const SearchBoxMobile = (props) => {
+  useEffect(() => {
+    props.inputEl.current.input.focus()
+  })
 
   return (
     <div className="searchBoxMobile">
@@ -46,8 +24,7 @@ const SearchBoxMobile = React.forwardRef((props, ref) => {
       >
         <IoIosArrowBack />
       </BaseButton>
-      {/*<Autosuggest {...props} />*/}
-      <Autosuggest {...props} ref={ref} id="mobile" />
+      <Autosuggest {...props} ref={props.inputEl} id="mobile" />
       {props.inputProps.value && (
         <BaseButton
           onClick={props.clearInput}
@@ -123,7 +100,7 @@ const SearchBoxMobile = React.forwardRef((props, ref) => {
 
         .searchBoxMobile .react-autosuggest__suggestion {
           border-bottom: none;
-          padding: .75rem 1.14285714rem;
+          padding: 0.75rem 1.14285714rem;
         }
         .searchBoxMobile .react-autosuggest__suggestion:first-child {
           padding-top: 1.3rem;
@@ -142,30 +119,39 @@ const SearchBoxMobile = React.forwardRef((props, ref) => {
           padding-left: 0.2rem;
         }
 
-        .searchBoxMobile .react-autosuggest__container > input::-webkit-input-placeholder {
+        .searchBoxMobile
+          .react-autosuggest__container
+          > input::-webkit-input-placeholder {
           /* Chrome/Opera/Safari */
           color: #888;
         }
-        .searchBoxMobile .react-autosuggest__container > input:focus::-webkit-input-placeholder {
+        .searchBoxMobile
+          .react-autosuggest__container
+          > input:focus::-webkit-input-placeholder {
           /* Chrome/Opera/Safari */
           color: #888;
         }
-        .searchBoxMobile .react-autosuggest__container > input::-moz-placeholder {
+        .searchBoxMobile
+          .react-autosuggest__container
+          > input::-moz-placeholder {
           /* Firefox 19+ */
           color: #888;
         }
-        .searchBoxMobile .react-autosuggest__container > input:-ms-input-placeholder {
+        .searchBoxMobile
+          .react-autosuggest__container
+          > input:-ms-input-placeholder {
           /* IE 10+ */
           color: #888;
         }
-        .searchBoxMobile .react-autosuggest__container > input:-moz-placeholder {
+        .searchBoxMobile
+          .react-autosuggest__container
+          > input:-moz-placeholder {
           /* Firefox 18- */
           color: #888;
         }
       `}</style>
     </div>
   )
-// }
-})
+}
 
-export default SearchBoxMobile
+export default SearchBoxMobile

src/components/useSearch.js → src/components/search/useSearch.js

@@ -2,9 +2,6 @@ import { graphql, useStaticQuery } from "gatsby"
 import { useFlexSearch } from "react-use-flexsearch"
 
 const useSearch = (query) => {
-  console.log("useSearch")
-  console.log(query)
-
   const data = useStaticQuery(graphql`
     query {
       localSearchProducts {

src/pages/buscar.js

@@ -1,21 +1,15 @@
-import React, { useContext } from "react"
+import React from "react"
+import queryString from "query-string"
 
 import SEO from "../components/seo"
 import ProductGrid from "../components/product/productGrid"
-import { MiscContext } from "../state/misc"
-import useSearch from "../components/useSearch"
+import useSearch from "../components/search/useSearch"
 
-const Buscar = (props) => {
-  console.log("buscar!")
-  const [state,/*  dispatch */] = useContext(MiscContext)
-  let query = ""
-
-  try {
-    // console.log('1')
-    query = props.location.state.query
-  } catch {
-    // console.log('2')
-    query = state.query
+const Buscar = ({ location }) => {
+  // console.log("buscar!")
+  let query
+  if (typeof window !== `undefined`) {
+    query = queryString.parse(location.search).p
   }
 
   const products = useSearch(query)
@@ -25,8 +19,6 @@ const Buscar = (props) => {
     return { node: value }
   })
 
-  console.log(normalizedProducts)
-
   return (
     <>
       <SEO title="Buscar" keywords={[`gatsby`, `application`, `react`]} />

src/state/misc.js

@@ -1,14 +1,12 @@
 import React, { useReducer } from "react"
 
-export const MiscContext = React.createContext()
+export const MiscContext = React.createContext(null)
 
 export const MiscProvider = (props) => {
   return (
     <MiscContext.Provider
       value={useReducer(miscReducer, {
         isMobileSearchOpen: false,
-        query: null,
-        // lastRoutes: []
       })}
     >
       {props.children}
@@ -21,12 +19,6 @@ const miscReducer = (state, action) => {
   switch (action.type) {
     case "SET_MOBILE_SEARCH_OPEN":
       return { ...state, isMobileSearchOpen: action.isMobileSearchOpen }
-    case "SET_QUERY":
-      return { ...state, query: action.query }
-    case "SET_MY_ACCOUNT_ROUTE":
-      return { ...state, myAccountRoute: action.myAccountRoute }
-    case "SET_CART_ROUTE":
-      return { ...state, cartRoute: action.cartRoute }
     default:
       return state
   }