+ autocomplete + thunk

src/components/ButtonPrimary.js

@@ -4,12 +4,13 @@ import Button from "@material-ui/core/Button";
 
 const StyledButton = withStyles({
   root: {
-    background: "none",
-    color: "white",
+    background: "white",
+    color: "#0e8496",
     margin: "16px 16px 16px 0px",
     padding: "8px 12px 8px 12px",
-    borderColor: "white",
-    border: "solid 1px",
+    "&:hover": {
+      color: "white",
+    },
   },
   label: {
     textTransform: "none",

src/components/SearchPanel.js

@@ -1,21 +1,33 @@
 import React from "react";
 import ButtonSecondary from "./ButtonSecondary";
-import CustomTextInput from "./CustomTextInput";
+import TextField from "@material-ui/core/TextField";
+import Autocomplete from "@material-ui/lab/Autocomplete";
+import { useSelector, useDispatch } from "react-redux";
+import { fetchAutocomplete } from "../actions";
 
-export default class SearchPanel extends React.Component {
-  render() {
-    return (
-      <div className="searchPanel">
-        <CustomTextInput
-          color="primary"
-          id="search"
-          label="Miasto, nazwa lokalu,..."
-          type="search"
-        />
-        <div className="btnContainer">
-          <ButtonSecondary text="Szukaj" />
-        </div>
+export default function SearchPanel() {
+  let options = useSelector((store) => store.autocomplete);
+  const dispatch = useDispatch();
+
+  return (
+    <div className="searchPanel">
+      <Autocomplete
+        options={options}
+        style={{ width: 300 }}
+        noOptionsText="Brak podpowiedzi"
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            label="Miasto, Nazwa lokalu, ..."
+            variant="outlined"
+            onInput={(event) => dispatch(fetchAutocomplete(event.target.value))}
+          />
+        )}
+      />
+
+      <div className="btnContainer">
+        <ButtonSecondary text="Szukaj" />
       </div>
-    );
-  }
+    </div>
+  );
 }

src/components/TopBar.js

@@ -1,14 +1,14 @@
 import React from "react";
-import ButtonSecondary from "./ButtonSecondary";
-import logo from "../public/logo_mint.svg";
+import ButtonPrimary from "./ButtonPrimary";
+import logo from "../public/logo_white.svg";
 
 export default function TopBar() {
   return (
     <div className="topBar">
       <img src={logo} className="topBarLogo" alt="Menui logo" />
       <div>
-        <ButtonSecondary text="Dodaj Lokal" />
-        <ButtonSecondary text="Logowanie" />
+        <ButtonPrimary text="Dodaj Lokal" />
+        <ButtonPrimary text="Logowanie" />
       </div>
     </div>
   );