import React , { useState , useRef , useEffect } from 'react' ; import styled from 'styled-components' ; import { useTranslation } from 'react-i18next' ; import { Link , useHistory } from 'react-router-dom' ; import { sanitize } from '../util/text' ; import { sendQueryEvent } from '../util/analytics' ; import { mobile } from '../util/css' ; import Suggestion from './Suggestion' ; import { useDeferredState } from '../util/hooks' ; const Form = ( { initialValue = '' } ) => { const history = useHistory ( ) ; const [ inputValue , setInputValue ] = useState ( initialValue ) ; const [ suggestionQuery , setSuggestionQuery ] = useDeferredState ( 800 , '' ) ; const [ suggested , setSuggested ] = useState ( false ) ; const inputRef = useRef < HTMLInputElement > ( null ) ; const { t } = useTranslation ( ) ; function search ( query ) { sendQueryEvent ( sanitize ( query ) ) ; history . push ( `/s/${ query }` ) ; } function onInputChange ( e ) { setInputValue ( e . currentTarget . value ) ; } function onSuggestionCompleted ( name ) { setInputValue ( name ) ; search ( name ) ; setSuggested ( true ) ; } function onSubmitQuery ( e ) { e . preventDefault ( ) ; inputRef . current ! . blur ( ) ; if ( ! inputValue || inputValue === '' ) { return ; } search ( inputValue ) ; } useEffect ( ( ) => { const modifiedValue = sanitize ( inputValue ) ; setSuggestionQuery ( modifiedValue ) ; } , [ inputValue , setSuggestionQuery ] ) ; const queryGiven = suggestionQuery && suggestionQuery !== '' ; return ( < InputContainer > < InputHeader > < Logo to = "/" > < LogoImage src = "/logo.svg" / > < /Logo> < /InputHeader> < form onSubmit = { onSubmitQuery } action = "/s" role = "search" > < InputView onChange = { onInputChange } value = { inputValue } ref = { inputRef } placeholder = { t ( 'placeholder' ) } aria - label = "Search" / > < /form> { queryGiven && ! suggested ? ( < Suggestion onSubmit = { onSuggestionCompleted } query = { suggestionQuery } / > ) : null } < /InputContainer>); } ; export default Form ; const InputContainer = styled . div `
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  transform: translateY(40px);
  border-radius: 50px;
  box-shadow: 0 10px 50px 0 #858efb;
  background: #ffffff;

  ${ mobile } {
    padding: 20px;
    transform: translateY(20px);
    border-radius: 30px;
  }
` ; const InputHeader = styled . div `
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 12px 0 5px 0;
` ; const Logo = styled ( Link ) `
  cursor: pointer;

  ${ mobile } {
    font-size: 15px;
  }
` ; const LogoImage = styled . img `
  width: 140px;

  ${ mobile } {
    width: 90px;
  }
` ; const InputView = styled . input . attrs ( { type : 'search' , enterkeyhint : 'search' , autocomplete : 'off' , autocorrect : 'off' , autocapitalize : 'off' , spellcheck : 'false' , } ) `
  width: 100%;
  border: none;
  outline: none;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 6rem;
  appearance: none;

  ${ mobile } {
    font-size: 2rem;
  }

  ::placeholder {
    color: #c8cdda;
  }
` ;