71 lines
1.9 KiB
JavaScript
71 lines
1.9 KiB
JavaScript
import React, { useEffect } from "react";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import ButtonSecondary from "./ButtonSecondary";
|
|
import TextField from "@material-ui/core/TextField";
|
|
import Autocomplete from "@material-ui/lab/Autocomplete";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { fetchAutocomplete, setSearchQuery, fetchSearch } from "../../actions";
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
"& .MuiOutlinedInput-root": {
|
|
"& fieldset": {
|
|
borderColor: "#bbbbbb",
|
|
},
|
|
},
|
|
"& .MuiInputBase-root": {
|
|
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="Miasto, Nazwa lokalu, ..."
|
|
variant="outlined"
|
|
onKeyDown={keyDown}
|
|
onChange={(event) => dispatch(setSearchQuery(event.target.value))}
|
|
onInput={(event) => dispatch(fetchAutocomplete(event.target.value))}
|
|
/>
|
|
)}
|
|
/>
|
|
|
|
<div className="btnContainer">
|
|
<ButtonSecondary
|
|
onClick={() => dispatch(fetchSearch(searchQuery))}
|
|
text="Szukaj"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|