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, Link } from '@material-ui/core'
import styled from 'styled-components'
import { Store } from '../Store';
import { v4 as uuidv4 } from 'uuid'
import Grid from "@material-ui/core/Grid"


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

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;
    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(props) {
  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)
    }
  }

  const linkTarget = {
    pathname: `/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`,
    key: uuidv4(), // we could use Math.random, but that's not guaranteed unique.
    state: {
      applied: true
    }
  };

  return (
    <Grid container>
      <Grid container item xs={12} sm={6} md={6} lg={6} xl={6}>
        {goSearch && <Redirect to={`/busca?page=0&results_per_page=12&order=review_average&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}
        />
      </Grid>
      <Grid container item justify="center" alignItems="center" xs={12} sm={6} md={6} lg={6} xl={6}>
      {state.windowSize.width >= 960 ?
        <React.Fragment>
          <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}>
            <Link
              to={linkTarget}
            >
              <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled /></ButtonStyled>
            </Link>
          </Grid>
          <Grid container item justify="center" alignItems="center" xs={12} sm={3} md={3} lg={3} xl={3}>
            <span>Pressione "Enter" ou click na lupa</span>
          </Grid>
          <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}>
            <DividerVertical />
          </Grid>
          <Grid container item justify="center" alignItems="center" xs={12} sm={7} md={7} lg={7} xl={7}>
            <RadioGroup row={true}
              aria-label="Tipo"
              name="types" value={searchClass}
              onChange={
                (event) => setSearchClass(event.target.value)
              }
              justify="center" alignItems="center"
            >
              <FormControlLabelStyled value="LearningObject" control={<RadioStyled />} label="Recursos" />
              <FormControlLabelStyled value="Collection" control={<RadioStyled />} label="Coleções" />
              <FormControlLabelStyled value="User" control={<RadioStyled />} label="Usuários" />
            </RadioGroup>
          </Grid>
        </React.Fragment>
      :
        <React.Fragment>
          <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}>
            <FormControl>
              <SelectStyled
                value={searchClass}
                onChange={(event) => setSearchClass(event.target.value)}
              >
                <MenuItemStyled style={{color : "#ff7f00"}} value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled>
                <MenuItemStyled style={{color : "#673ab7"}} value="Collection" aria-label="Coleções">Coleções</MenuItemStyled>
                <MenuItemStyled style={{color : "#00bcd4"}} value="User" aria-label="Usuários">Usuários</MenuItemStyled>
              </SelectStyled>
            </FormControl>
          </Grid>
          <Grid container item justify="center" alignItems="center" xs={2} sm={2} md={2} lg={2} xl={2}>
            <DividerVertical />
          </Grid>
          <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}>
            <Link
              to={linkTarget}
            >
              <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled /></ButtonStyled>
            </Link>
          </Grid>
        </React.Fragment>
      }
      </Grid>
    </Grid>
  )
}