HomeScreenSearchBar.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 Grid from '@material-ui/core/Grid';
import styled from 'styled-components'
import Menu from '@material-ui/core/Menu';
import { Store } from '../Store';
import { List, ListItem, ListItemIcon, ListItemText, MenuItem, Button, TextField } from '@material-ui/core'
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
import SearchIcon from '@material-ui/icons/Search';
/*import {Link} from 'react-router-dom'*/

export default function HomeScreenSearchBar() {
    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 options = [
        { text: "Recursos", value: "LearningObject", color: state.contrast === "" ? "#ff7f00" : "yellow" },
        { text: "Coleções", value: "Collection", color: state.contrast === "" ? "#673ab7" : "yellow" },
        { text: "Usuários", value: "User", color: state.contrast === "" ? "#00bcd4" : "yellow" },
    ]
    const [anchorEl, setAnchorEl] = React.useState(null);
    const [selectedIndex, setSelectedIndex] = React.useState(0);

    const handleClickListItem = (event) => {
        setAnchorEl(event.currentTarget);
    };

    const handleMenuItemClick = (event, index, value) => {
        console.log(value)
        setSelectedIndex(index);
        setSearchClass(value)
        setAnchorEl(null);
    };

    const handleClose = () => {
        setAnchorEl(null);
    };

    const WIDTH = window.innerWidth;

    return (

        <StyledGrid container contrast={state.contrast}>
            {goSearch && <Redirect to={`/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`} />}
            <Grid item md={7} xs={12} className="first white">
                <StyledTextField
                    id="standard-search"
                    placeholder="O que está buscando?"
                    type="search"
                    margin="normal"
                    value={query}
                    onChange={handleChange}
                    onKeyPress={handleKeyDown}
                    fullwidth
                />
            </Grid>
            <Grid item md={3} xs={12} className="second white">
                <List component="nav" aria-label="Recurso" className={`${state.contrast}BackColor`} >
                    <ListItem
                        button
                        aria-haspopup="true"
                        aria-controls="lock-menu"
                        aria-label="Recurso"
                        onClick={handleClickListItem}
                    >
                        <ListItemText
                            style={{ color: options[selectedIndex].color }}
                            primary={options[selectedIndex].text}
                        />
                        <ListItemIcon>
                            <ArrowDropDownIcon className={`${state.contrast}IconColor`} />
                        </ListItemIcon>
                    </ListItem>
                </List>
                <Menu
                    id="simple-menu"
                    anchorEl={anchorEl}
                    keepMounted
                    open={Boolean(anchorEl)}
                    onClose={handleClose}
                >
                    <div className={`${state.contrast}BackColor`}>
                        {options.map((option, index) => (
                            <MenuItem
                                key={option.value}
                                selected={index === selectedIndex}
                                onClick={(event) => handleMenuItemClick(event, index, option.value)}
                                style={{ color: option.color, textDecoration: state.contrast === "" ? "none" : "underline" }}
                            >
                                {option.text}
                            </MenuItem>
                        ))}
                    </div>
                </Menu>
            </Grid>
            <Grid item md={2} xs={12}>
                <div style={{ height: "100%" }}>
                    <Button onClick={handleKeyDown} className="custom-button" style={{ backgroundColor: options[selectedIndex].color, color: "#fff" }}>
                        {
                            WIDTH < 503 &&
                            <span>Buscar</span>
                        }
                        <SearchIcon fontSize="large" />
                    </Button>
                </div>
            </Grid>
        </StyledGrid>
    )
}

const StyledTextField = styled(TextField)`
    max-width: 100%;
    font-size : 15px;
    font-weight : lighter;
    color : inherit;
    width : 90% !important;
    margin-right : 10px !important;
    margin-left : 10px !important;
    .MuiInput-underline::after {
        border-bottom : none !important;
    }
`

const StyledGrid = styled(Grid)`
    padding-top : 20px;

    .MuiGrid-item {
        @media screen and (max-width : 502px) {
            border-radius : 5px;
            margin-bottom : 10px !important;
        }
    }

    .first {
        @media screen and (max-width : 502px) {
            margin-top : 10px;
        }
        @media screen and (min-width : 502px) {
            border-top-left-radius : 5px;
            border-bottom-left-radius : 5px;
        }
    }

    .white {
        background-color : #fff;
    }

    .MuiList-root {
        @media screen and (min-width : 502px) {
            border-left: 1px solid #ccc !important;
        }

    }
    .MuiPaper-root {
        width : 100% !important;
    }
    .MuiPopover-paper {
        max-width : none !important;
    }

    .custom-button {
        height: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        text-transform : none !important;
        align-items : center !important;

        @media screen and (max-width : 502px) {
            padding-top : 10px;
            border-radius : 5px;
        }

        @media screen and (min-width : 502px) {
            border-radius : 0 !important;
            border-top-right-radius : 5px !important;
            border-bottom-right-radius : 5px !important;
        }

        .MuiSvgIcon-root {
            vertical-align : middle !important;
        }

    }
`