Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect } from 'react'

import { useForm } from 'react-hook-form'
import { useLocation, useHistory } from 'react-router-dom'

const SearchBar = () => {
  const { register, handleSubmit, getValues, setValue } = useForm()
  const location = useLocation()
  const history = useHistory()

  useEffect(() => {
    const keyword = new URLSearchParams(location.search).get('keyword')
    setValue('keyword', keyword)
  }, [])

  const onSubmitHandler = (data, event) => {
    history.push({
      pathname: location.pathname,
      search: `?keyword=${getValues('keyword')}`
    })
  }

  return (
    <div className="search-sec">
      <div className="container">
        <div className="search-box border-gray border-radius">
          <form
            name="form-listing-search"
            id="form-listing-search"
            onSubmit={handleSubmit(onSubmitHandler)}
          >
            <input
              type="text"
              name="keyword"
              id="keyword"
              placeholder="¿Que desea encontrar?"
              ref={register}
            />
            <button type="submit">Buscar</button>
          </form>
        </div>
      </div>
    </div>
  )
}

export default SearchBar