Function SearchBox

client/src/components/ui/SearchBox/index.tsx:60–117

({ router, className, showButton, location, ...rest }: Props)

}

export default function SearchBox({ router, className, showButton, location, ...rest }: Props) {
  const view = useFragment(
    graphql`
      fragment SearchBox_view on View {
        queryInfo {
          phrases

          topics {
            displayName
            id
          }
        }
      }
    `,
    rest.view,
  )

  const pathname = location.pathname
  const [selectedScope, setSelectedScope] = useState('Everything')

  const handleReturn = useCallback(
    (event: KeyboardEvent<Element>, editorState: EditorState): DraftHandleValue => {
      const query = queryFromState(editorState).toString()
      const searchPathname = pathnameFor(pathname, selectedScope)

      if (query === '') {
        router.push({ pathname: searchPathname })
        return 'handled'
      }

      router.push({ pathname: searchPathname, query: { q: query } })
      return 'handled'
    }, [router, pathname, selectedScope],
  )

  const onSelectChange = useCallback((event: FormEvent<HTMLSelectElement>) => {
    const { value } = event.currentTarget
    setSelectedScope(value)
  }, [setSelectedScope])

  const actualClassName = classNames('searchBoxInnerSearchBox input-group px-3', className)

  return (
    <form className={actualClassName} onSubmit={onFormSubmit}>
      <TextInput
        handleReturn={handleReturn}
        queryInfo={view?.queryInfo}
      />
      <div className="input-group-button searchBoxInnerButtonContainer">
        <SelectScope
          pathname={pathname}
          selectedScope={selectedScope}
          onChange={onSelectChange}
        />
      </div>
    </form>
  )
}