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"
import {useStyles} from './ReportUserForm.js'

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: ${props => props.contrast === "" ? "#16b8dd" : "white"};
`

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

    .MuiOutlinedInput-root {
        &.Mui-focused fieldset {
            border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
        }
        fieldset {
            border-color: ${props => props.contrast === "" ? "#666" : "white"};
        }
    }

    label{
        color: ${props => props.contrast === "" ? "#666" : "white"};
    }

    label.Mui-focused {
        color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
    }

    label.Mui-focused.Mui-error {
        color : red;
    }
`

const FormLearnObjControlLabelStyled = styled(FormControlLabel)`
    *{
        text-transform: uppercase;
        color: ${props => props.contrast === "" ? "#ff8a17 !important" : "yellow !important"};
        text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
        font-weight: bolder;
    }
`

const FormCollectionControlLabelStyled = styled(FormControlLabel)`
    *{
        text-transform: uppercase;
        color: ${props => props.contrast === "" ? "#673ab7 !important" : "yellow !important"};
        text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
        font-weight: bolder;
    }
`

const FormUserControlLabelStyled = styled(FormControlLabel)`
    *{
        text-transform: uppercase;
        color: ${props => props.contrast === "" ? "#00bcd4  !important" : "yellow !important"};
        text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
        font-weight: bolder;
    }
`

const RadioLearnObjStyled = styled(Radio)`
	color: #ff8a17;
`
const RadioCollectionStyled = styled(Radio)`
	color: #673ab7;
`
const RadioUserStyled = styled(Radio)`
	color: #00bcd4;
`

const SelectStyled = styled(Select)`
    margin-right: 2vw;
    *{
        text-transform: uppercase;
        color: ${props => props.contrast === "" ? "#ff8a17 !important" : "yellow !important"};
        text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
        font-weight: bolder;
    }
`
const MenuItemStyled = styled(MenuItem)`
    text-transform: uppercase;
    font-weight: bolder;
`

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

    const classes = useStyles();

    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 style={state.contrast === "" ? { paddingTop: "1em" } : { backgroundColor: "black", paddingTop: "1em" }}>
            <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
                    contrast={state.contrast}
                    id="standard-search"
                    label="O que você está buscando?"
                    type="search"
                    margin="normal"
                    variant="outlined"
                    value={query}
                    InputProps={state.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
                    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 contrast={state.contrast} /></ButtonStyled>
                            </Link>
                        </Grid>
                        <Grid container item justify="center" alignItems="center" xs={12} sm={3} md={3} lg={3} xl={3}>
                            <span style={state.contrast === "" ? {} : { color: "white" }}>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"
                            >
                                <FormLearnObjControlLabelStyled contrast={state.contrast} value="LearningObject" control={<RadioLearnObjStyled contrast={state.contrast} />} label="Recursos" />
                                <FormCollectionControlLabelStyled contrast={state.contrast} value="Collection" control={<RadioCollectionStyled contrast={state.contrast} />} label="Coleções" />
                                <FormUserControlLabelStyled contrast={state.contrast} value="User" control={<RadioUserStyled contrast={state.contrast} />} 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
                                    contrast={state.contrast}
                                    value={searchClass}
                                    onChange={(event) => setSearchClass(event.target.value)}
                                >
                                    <MenuItemStyled style={state.contrast === "" ? { color: "#ff7f00" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled>
                                    <MenuItemStyled style={state.contrast === "" ? { color: "#673ab7" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} value="Collection" aria-label="Coleções">Coleções</MenuItemStyled>
                                    <MenuItemStyled style={state.contrast === "" ? { color: "#00bcd4" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} 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 contrast={state.contrast} /></ButtonStyled>
                            </Link>
                        </Grid>
                    </React.Fragment>
                }
            </Grid>
        </Grid >
    )
}