Analytics added / NewRestaurant.js added

src/components/Input/SearchPanel.js

@@ -0,0 +1,58 @@
+import React 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: "#01c3a9",
+      },
+    },
+    "& .MuiInputBase-root": {
+      color: "#01c3a9",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#01c3a9",
+    },
+  },
+}));
+
+export default function SearchPanel() {
+  let options = useSelector((store) => store.autocomplete);
+  let searchQuery = useSelector((store) => store.searchQuery);
+  const dispatch = useDispatch();
+  const classes = useStyles();
+
+  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"
+            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>
+  );
+}