new look / search list / restaurant view

src/components/CardRestaurant.js

@@ -1,10 +1,31 @@
 import React from "react";
 import Pictograms from "./Pictograms";
+import { fetchRestaurant } from "../actions";
+import { useDispatch } from "react-redux";
+
+function extractTags(tags) {
+  var results = [];
+  for (let [key, value] of Object.entries(tags)) {
+    if (value === true) {
+      results.push(key);
+    }
+  }
+  return results;
+}
 
 export default function CardRestaurant(props) {
+  const dispatch = useDispatch();
+  const img = props.imgUrl;
+
   return (
-    <div className="card-restaurant">
-      <div className="card-img"></div>
+    <div
+      onClick={() => dispatch(fetchRestaurant(props.id))}
+      className="card-restaurant"
+    >
+      <div
+        className="card-img"
+        style={{ backgroundImage: "url(" + img + ")" }}
+      ></div>
       <div className="card-info">
         <div className="title-info">
           <h1>{props.name}</h1>
@@ -13,26 +34,10 @@ export default function CardRestaurant(props) {
           <h3>Godziny otwarcia: {props.hours}</h3>
         </div>
         <div className="card-description">
-          <p>
-            Jakiś krótki opis restauracji. Coś tam że jest przytulnie i
-            elegancko.
-          </p>
+          <p>{props.description}</p>
         </div>
         <div className="card-pictograms">
-          <Pictograms
-            pictograms={[
-              "alcohol",
-              "card",
-              "delivery",
-              "glutenFree",
-              "vegan",
-              "vegetarian",
-              "eggs",
-              "gluten",
-              "lactose",
-              "lactoseFree",
-            ]}
-          />
+          <Pictograms pictograms={extractTags(props.tags)} />
         </div>
       </div>
     </div>

src/components/Pictograms.js

@@ -20,7 +20,7 @@ function getImage(name) {
   switch (name) {
     case "alcohol":
       return alcohol;
-    case "card":
+    case "cardPayments":
       return card;
     case "delivery":
       return delivery;
@@ -36,7 +36,7 @@ function getImage(name) {
       return lactoseFree;
     case "peanuts":
       return peanuts;
-    case "pets":
+    case "petFriendly":
       return pets;
     case "seaFood":
       return seaFood;
@@ -49,13 +49,18 @@ function getImage(name) {
     case "vegetarian":
       return vegetarian;
     default:
-      return false;
+      return card;
   }
 }
 
 export default function (props) {
-  const pictograms = props.pictograms.map((pictogram) => (
-    <img className="pictogram" src={getImage(pictogram)} alt={pictogram} />
+  const pictograms = props.pictograms.map((pictogram, index) => (
+    <img
+      key={index}
+      className="pictogram"
+      src={getImage(pictogram)}
+      alt={pictogram}
+    />
   ));
 
   return <div className="pictograms-container">{pictograms}</div>;

src/components/Restaurant.js

@@ -0,0 +1,32 @@
+import React from "react";
+import Pictograms from "./Pictograms";
+import { useSelector } from "react-redux";
+
+export default function Restaurant(props) {
+  const restaurant = useSelector((state) => state.restaurant);
+  function extractTags(tags) {
+    var results = [];
+    for (let [key, value] of Object.entries(tags)) {
+      if (value === true) {
+        results.push(key);
+      }
+    }
+    return results;
+  }
+
+  return (
+    <div className="restaurant-container">
+      <div
+        className="restaurant-hero"
+        style={{ backgroundImage: "url(" + restaurant.imgUrl + ")" }}
+      >
+        <div className="restaurant-pictograms">
+          <Pictograms pictograms={extractTags(restaurant.tags)} />
+        </div>
+      </div>
+      <h1>{restaurant.name}</h1>
+      <p>{restaurant.city}</p>
+      <hr />
+    </div>
+  );
+}

src/components/SearchResults.js

@@ -7,15 +7,16 @@ export default function SearchResults() {
   const array = Array.from(results);
   var count = results.length;
   const restaurants = array.map((restaurant) => (
-    <li key={restaurant._id}>
-      <CardRestaurant
-        name={restaurant.name}
-        city={restaurant.city}
-        imgUrl={restaurant.imgUrl}
-        hours={restaurant.workingHours}
-        tags={restaurant.tags}
-      />
-    </li>
+    <CardRestaurant
+      key={restaurant._id}
+      id={restaurant._id}
+      name={restaurant.name}
+      city={restaurant.city}
+      description={restaurant.description}
+      imgUrl={restaurant.imgUrl}
+      hours={restaurant.workingHours}
+      tags={restaurant.tags}
+    />
   ));
 
   return (
@@ -24,7 +25,7 @@ export default function SearchResults() {
         <p>Znaleziono: {count}</p>
         <hr />
       </div>
-      <ul>{restaurants}</ul>
+      {restaurants}
     </div>
   );
 }