Analytics added / NewRestaurant.js added

src/components/Input/ButtonPrimary.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { withStyles } from "@material-ui/core/styles";
+import Button from "@material-ui/core/Button";
+
+const StyledButton = withStyles({
+  root: {
+    background: "none",
+    color: "white",
+    border: "solid 1px white",
+    margin: "16px 16px 16px 0px",
+    padding: "8px 12px 8px 12px",
+    "&:hover": {
+      color: "white",
+    },
+  },
+  label: {
+    textTransform: "none",
+  },
+})(Button);
+
+export default function ButtonPrimary(props) {
+  return <StyledButton>{props.text}</StyledButton>;
+}

src/components/Input/ButtonSecondary.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { withStyles } from "@material-ui/core/styles";
+import Button from "@material-ui/core/Button";
+
+const StylizedButton = withStyles({
+  root: {
+    background: "#d68000",
+    color: "#262626",
+    margin: "16px 16px 16px 16px",
+    padding: "8px 16px 8px 16px",
+    borderColor: "white",
+    "&:hover": {
+      backgroundColor: "#b46c00",
+    },
+  },
+  label: {
+    textTransform: "none",
+  },
+})(Button);
+
+export default function ButtonSecondary(props) {
+  return <StylizedButton onClick={props.onClick}>{props.text}</StylizedButton>;
+}

src/components/Input/CustomTextInput.js

@@ -0,0 +1,38 @@
+import React from "react";
+import TextField from "@material-ui/core/TextField";
+import { makeStyles } from "@material-ui/core/styles";
+import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
+
+const styles = makeStyles({
+  root: {
+    margin: "6px",
+    textDecorationColor: "#0e8496",
+  },
+  input: {
+    color: "#0e8496",
+  },
+});
+
+const theme = createMuiTheme({
+  palette: {
+    primary: {
+      main: "#0e8496",
+    },
+  },
+});
+
+export default function CustomTextInput(props) {
+  const classes = styles();
+  return (
+    <ThemeProvider theme={theme}>
+      <TextField
+        id={props.id}
+        className={classes.root}
+        label={props.label}
+        type="search"
+        variant="outlined"
+        InputProps={{ className: classes.input }}
+      ></TextField>
+    </ThemeProvider>
+  );
+}

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>
+  );
+}