web client v0.9 (restaurant view)

src/components/Output/Restaurant.js

@@ -1,33 +1,45 @@
-import React from "react";
+import React, { useEffect } from "react";
 import PictogramsSeparate from "./PictogramsSeparate";
 import DishList from "./DishList";
 import CircularProgress from "@material-ui/core/CircularProgress";
+import { useParams } from "react-router-dom";
 import { extractTags } from "../../Services";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
+import { fetchRestaurant } from "../../actions";
+import GoogleMapStatic from "./GoogleMapStatic";
 
 export default function Restaurant(props) {
   const restaurant = useSelector((state) => state.restaurant);
+  const { id } = useParams();
+  const dispatch = useDispatch();
   const showDishList = useSelector((state) => state.data.showDishList);
 
+  useEffect(() => {
+    if (restaurant._id !== id) {
+      dispatch(fetchRestaurant(id));
+    } else {
+      document.title = restaurant.name;
+    }
+  });
+
   return (
     <div className="restaurant-container">
-      <div className="restaurant-content">
+      <div className="restaurant-left">
+        <div
+          className="restaurant-hero"
+          style={{ backgroundImage: "url(" + restaurant.imgUrl + ")" }}
+        ></div>
         <div className="restaurant-info">
-          <div
-            className="restaurant-hero"
-            style={{ backgroundImage: "url(" + restaurant.imgUrl + ")" }}
-          ></div>
           <h1>{restaurant.name}</h1>
           <p>{restaurant.description}</p>
           <hr />
           <p>
-            Miejscowość:{" "}
-            <span className="restaurant-span">{restaurant.city}</span>
-          </p>
-          <p>
-            Godziny pracy:{" "}
-            <span className="restaurant-span">{restaurant.workingHours}</span>
+            Adres:{" "}
+            <span className="restaurant-span">
+              {restaurant.city}, {restaurant.adress}
+            </span>
           </p>
+          <p>Godziny pracy: </p>
           {restaurant.phone && (
             <p>
               Kontakt:{" "}
@@ -39,6 +51,8 @@ export default function Restaurant(props) {
             <PictogramsSeparate pictograms={extractTags(restaurant.tags)} />
           </div>
         </div>
+      </div>
+      <div className="restaurant-content">
         <div className="restaurant-dishes">
           <h3>Menu</h3>
           {showDishList === false && <CircularProgress />}
@@ -48,3 +62,9 @@ export default function Restaurant(props) {
     </div>
   );
 }
+
+//
+
+/* {restaurant.location !== undefined && (
+  <GoogleMapStatic coordinates={restaurant.location.coordinates} />
+)} */