SearchBar.js

/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana

This file is part of Plataforma Integrada MEC.

Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/

import React, { useState, useEffect, useContext } from 'react'
import { Redirect } from 'react-router-dom'

import IconSearch from '@material-ui/icons/Search'

import { RadioGroup, Radio, FormControl, Select, MenuItem, Button, FormControlLabel, TextField } from '@material-ui/core'
import styled from 'styled-components'

import { Store } from '../Store';


const dividerStyled = {
	background: '#e0e0e0',
  width: '1px',
  content: "",
  display: 'block',
  top: '0',
  bottom: '0',
  right: '0',
	minHeight: '70px',
	margin: '0 30px'
}

const DividerVertical = () => <em style={dividerStyled}></em>

const ButtonStyled = styled(Button)`
    text-transform: capitalize !important;
`
const IconSearchStyled = styled(IconSearch)`
  color: #16b8dd;
`

const TextFieldStyled = styled(TextField) `
		flex-grow: 2;
		margin: 0 2vw !important;
`

const RadioGroupStyled = styled(RadioGroup) `
		display: flex;
		flex-direction: row;
		flex-grow: 1;
`

const FormControlLabelStyled = styled(FormControlLabel)`
  *{
    text-transform: uppercase;
    color: #ff8a17 !important;
    fontWeight: bolder;
  }
`

const RadioStyled = styled(Radio)`
		color: #ff8a17;
`

const SelectStyled = styled(Select)`
  margin-right: 2vw;
  *{
    text-transform: uppercase;
    color: #ff8a17 !important;
    fontWeight: bolder;
  }
`
const MenuItemStyled = styled(MenuItem)`
    text-transform: uppercase;
    color: #ff8a17 !important;
    fontWeight: bolder;
`

const Bar = styled.div `
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px rgba(0,0,0,.1) solid;
`
const Flex = styled.span `
  display: flex;
  align-items: center;
  color: #787380;
`

export default function SearchBar() {
  const [ query, setQuery ] = useState('')
  const [ searchClass, setSearchClass ] = useState('LearningObject')

  const { state, dispatch } = useContext(Store)

  const [ goSearch, setGoSearch ] = useState(false) 

  useEffect(()=>{
    if(window.location.pathname.includes('busca')){
        const urlParams = new URLSearchParams(window.location.search)
        const urlQuery = urlParams.get('query')
        const urlSearchClass = urlParams.get('search_class')
        if( searchClass !== urlSearchClass || query !== urlQuery){
          setQuery(urlQuery)
          setSearchClass(urlSearchClass)
        }
      }
  },[])

  useEffect(()=>setGoSearch(false),[goSearch])

	const handleChange = ( event ) => {
    setQuery(event.target.value)
  }
  
  const handleKeyDown = (event) => {
    if(event.key === 'Enter' || event.type === 'click'){
      dispatch({
        type: 'SAVE_SEARCH',
        newSearch: {
          query: query!==''?query:'*',
          class: searchClass
        }
      })
      setGoSearch(true)
    } 
  }

  return (
    <Bar>
      {goSearch && <Redirect to={`/busca?query=${state.search.query}&search_class=${state.search.class}`} />}
      <TextFieldStyled
        id="standard-search"
        label="O que você está buscando"
        type="search"
        margin="normal"
        value={query}
        onChange={handleChange}
        onKeyPress={handleKeyDown}
      />
      <Flex>
        <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled /></ButtonStyled>
        <Flex style={{"justifyContent": 'middle', 'flexDirection':'column'}}>
          <div>Pressione "Enter"</div>
          <div>ou click na lupa</div>
        </Flex>
        <DividerVertical />
        { state.windowSize.width >=900?
          <RadioGroupStyled row={true} 
                      aria-label="Tipo" 
                      name="types" value={searchClass} 
                      onChange={
                        (event)=> setSearchClass(event.target.value)
                      }
          >
            <FormControlLabelStyled value="LearningObject" control={<RadioStyled />} label="Recursos"/>
            <FormControlLabelStyled value="Collection" control={<RadioStyled />} label="Coleções"/>
            <FormControlLabelStyled value="User" control={<RadioStyled />} label="Usuários" />
          </RadioGroupStyled>
        :
          <FormControl>
            <SelectStyled
              value={searchClass}
              onChange={(event)=> setSearchClass(event.target.value)}
            >
              <MenuItemStyled value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled>
              <MenuItemStyled value="Collection" aria-label="Coleções">Coleções</MenuItemStyled>
              <MenuItemStyled value="User" aria-label="Usuários">Usuários</MenuItemStyled>
            </SelectStyled>
          </FormControl>
        }
      </Flex>
    </Bar>
  )
}