github.com/quickfeed/quickfeed@v0.0.0-20240507093252-ed8ca812a09c/public/src/components/Search.tsx (about)

     1  import React, { useEffect } from "react"
     2  import { useActions } from "../overmind"
     3  
     4  
     5  /** Search is used to update the query in state when the user types in the search bar.
     6   *  If setQuery is passed, it will modify the local state of a component instead of the global state. */
     7  const Search = ({ placeholder, setQuery, className, children }: { placeholder?: string, setQuery?: (e: unknown) => void, className?: string, children?: React.ReactNode }): JSX.Element => {
     8      const actions = useActions()
     9  
    10      useEffect(() => {
    11          // Reset query in state when component unmounts
    12          return () => { actions.setQuery("") }
    13      }, [])
    14  
    15      return (
    16          <div className={`input-group ${className}`}>
    17              <input
    18                  type={"text"}
    19                  className="form-control"
    20                  placeholder={placeholder ? placeholder : "Search"}
    21                  onKeyUp={(e) => setQuery ? setQuery(e.currentTarget.value.toLowerCase()) : actions.setQuery(e.currentTarget.value.toLowerCase())} 
    22              />
    23              {children}
    24          </div>
    25      )
    26  }
    27  
    28  export default Search