75 lines
2.1 KiB
JavaScript
75 lines
2.1 KiB
JavaScript
import React, { useEffect } from "react";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import IconButton from '@material-ui/core/IconButton';
|
|
import SearchIcon from '@material-ui/icons/Search';
|
|
import TextField from "@material-ui/core/TextField";
|
|
import Autocomplete from "@material-ui/lab/Autocomplete";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { fetchSearch } from "../../actions";
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
"& .MuiOutlinedInput-root":{
|
|
"& fieldset":{
|
|
borderWidth: "0px"
|
|
},
|
|
'&.Mui-focused fieldset': {
|
|
borderWidth: '2px',
|
|
},
|
|
},
|
|
"& .MuiInputBase-root": {
|
|
backgroundColor: "#202020",
|
|
color: "#bbbbbb",
|
|
borderRadius: "16px"
|
|
},
|
|
"& .MuiInputLabel-root": {
|
|
color: "#bbbbbb",
|
|
},
|
|
},
|
|
}));
|
|
|
|
export default function SearchPanel() {
|
|
let options = useSelector((store) => store.autocomplete);
|
|
let searchQuery = useSelector((store) => store.searchQuery);
|
|
const dispatch = useDispatch();
|
|
const classes = useStyles();
|
|
|
|
useEffect(() => {
|
|
document.title = "Menui - Food Guide";
|
|
});
|
|
|
|
const keyDown = (event) => {
|
|
if (event.keyCode === 13) {
|
|
dispatch(fetchSearch(searchQuery));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="searchPanel">
|
|
<Autocomplete
|
|
options={options}
|
|
style={{ width: 300 }}
|
|
noOptionsText="Brak podpowiedzi"
|
|
onChange={(event) => dispatch(setSearchQuery(event.target.textContent))}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
className={classes.root}
|
|
label="Szukaj"
|
|
variant="outlined"
|
|
onKeyDown={keyDown}
|
|
onChange={(event) => dispatch(setSearchQuery(event.target.value))}
|
|
onInput={(event) => dispatch(fetchAutocomplete(event.target.value))}
|
|
/>
|
|
)}
|
|
/>
|
|
|
|
<div className="btnContainer">
|
|
<IconButton color="primary" aria-label="search" onClick={() => dispatch(fetchSearch(searchQuery))}>
|
|
<SearchIcon/>
|
|
</IconButton>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|