Search query / results cards

src/components/ButtonSecondary.js

@@ -19,5 +19,5 @@ const StylizedButton = withStyles({
 })(Button);
 
 export default function ButtonSecondary(props) {
-  return <StylizedButton>{props.text}</StylizedButton>;
+  return <StylizedButton onClick={props.onClick}>{props.text}</StylizedButton>;
 }

src/components/CardRestaurant.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+export default function CardRestaurant(props) {
+  return (
+    <div className="card-restaurant">
+      <div className="card-img"></div>
+      <div className="card-info">
+        <h1>{props.name}</h1>
+        <hr />
+        <h3>Miasto: {props.city}</h3>
+        <h3>Godziny otwarcia: {props.hours}</h3>
+        <p>
+          Jakiś krótki opis restauracji. Coś tam że jest przytulnie i elegancko.
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/SearchPanel.js

@@ -3,10 +3,11 @@ 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 } from "../actions";
+import { fetchAutocomplete, setSearchQuery, fetchSearch } from "../actions";
 
 export default function SearchPanel() {
   let options = useSelector((store) => store.autocomplete);
+  let searchQuery = useSelector((store) => store.searchQuery);
   const dispatch = useDispatch();
 
   return (
@@ -15,18 +16,23 @@ export default function SearchPanel() {
         options={options}
         style={{ width: 300 }}
         noOptionsText="Brak podpowiedzi"
+        onChange={(event) => dispatch(setSearchQuery(event.target.textContent))}
         renderInput={(params) => (
           <TextField
             {...params}
             label="Miasto, Nazwa lokalu, ..."
             variant="outlined"
+            onChange={(event) => dispatch(setSearchQuery(event.target.value))}
             onInput={(event) => dispatch(fetchAutocomplete(event.target.value))}
           />
         )}
       />
 
       <div className="btnContainer">
-        <ButtonSecondary text="Szukaj" />
+        <ButtonSecondary
+          onClick={() => dispatch(fetchSearch(searchQuery))}
+          text="Szukaj"
+        />
       </div>
     </div>
   );

src/components/SearchResults.js

@@ -0,0 +1,28 @@
+import React from "react";
+import CardRestaurant from "./CardRestaurant";
+import { useSelector } from "react-redux";
+
+export default function SearchResults() {
+  var results = useSelector((store) => store.searchResults);
+
+  return (
+    <div className="search-results">
+      <CardRestaurant
+        name="Kuchnie Świata"
+        city="Mikołajki"
+        hours="7:00 - 23:00"
+      />
+      <CardRestaurant
+        name="Grzmiące Patyki"
+        city="Ciechanów"
+        hours="7:00 - 23:00"
+      />
+      <CardRestaurant name="Naruto Sushi" city="Tokio" hours="7:00 - 23:00" />
+      <CardRestaurant
+        name="Gówno"
+        city="Dąbrowa górnicza"
+        hours="7:00 - 23:00"
+      />
+    </div>
+  );
+}

src/components/logoMain.js

@@ -0,0 +1,13 @@
+import logo from "../public/logo_mint.svg";
+import React from "react";
+import { useSelector } from "react-redux";
+
+export default function LogoMain() {
+  let appMode = useSelector((store) => store.appMode);
+
+  if (appMode === "init") {
+    return <img src={logo} alt="Menui logo" className="logo" />;
+  } else {
+    return "";
+  }
+}