web client v0.9 (restaurant view)

src/components/Output/EditDishList.js

@@ -10,7 +10,7 @@ import Switch from "@material-ui/core/Switch";
 import axios from "axios";
 import { backend } from "../../config";
 import YesNo from "../Dialogs/YesNo";
-import { notification, fetchAllDishes } from "../../actions";
+import { notification, fetchAllDishes, refreshUserData } from "../../actions";
 import Tooltip from "@material-ui/core/Tooltip";
 import FastfoodIcon from "@material-ui/icons/Fastfood";
 import AddToSet from "../Dialogs/AddToSet";
@@ -110,6 +110,7 @@ export default function EditDishList(props) {
       .then((response) => {
         dispatch(hideBackdrop());
         dispatch(notification("Dodano do zestawu.", "success"));
+        dispatch(refreshUserData(token));
       })
       .catch((error) => {
         dispatch(hideBackdrop());

src/components/Output/GoogleMapStatic.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { GoogleMap, LoadScript, Marker } from "@react-google-maps/api";
+
+function GoogleMapStatic(props) {
+  const containerStyle = {
+    width: "50%",
+    height: "500px",
+  };
+
+  const center = {
+    lat: props.coordinates[0],
+    lng: props.coordinates[1],
+  };
+
+  return (
+    <LoadScript googleMapsApiKey="AIzaSyDAlZSiBanP52qpZ1kaH06XkuA2zndLUd8">
+      <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={7}>
+        <Marker position={center} visible={true} />
+      </GoogleMap>
+    </LoadScript>
+  );
+}
+
+export default React.memo(GoogleMapStatic);

src/components/Output/LunchSetDishList.js

@@ -0,0 +1,115 @@
+import React, { useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import IconButton from "@material-ui/core/IconButton";
+import DeleteIcon from "@material-ui/icons/Delete";
+import axios from "axios";
+import { backend } from "../../config";
+import YesNo from "../Dialogs/YesNo";
+import { notification, refreshUserData } from "../../actions";
+import Tooltip from "@material-ui/core/Tooltip";
+import { hideBackdrop, showBackdrop } from "../../actions/toggles";
+
+export default function EditDishList(props) {
+  const [open, setOpen] = useState(false);
+  const [selectedDish, setDish] = useState("");
+  const dispatch = useDispatch();
+  const token = useSelector((state) => state.data.userData.jwt);
+
+  const filterDishes = (dishes, setDishes) => {
+    let result = [];
+    dishes.map((dish) => {
+      if (setDishes.includes(dish._id)) {
+        result.push(dish);
+      }
+      return true;
+    });
+    return result;
+  };
+
+  const selectDish = (dishId) => {
+    setDish(dishId);
+    setOpen(true);
+  };
+  const onCancel = () => {
+    setOpen(false);
+  };
+  const onAccept = () => {
+    setOpen(false);
+    removeFromSet();
+  };
+
+  const removeFromSet = () => {
+    const data = {
+      setName: props.lunchSet.lunchSetName,
+      restaurantId: props.restaurantId,
+      dishId: selectedDish,
+      action: "delete",
+    };
+    dispatch(showBackdrop());
+    axios({
+      method: "POST",
+      url: backend + "/restaurant/lunch",
+      data: data,
+      headers: {
+        "x-auth-token": token,
+      },
+    })
+      .then((response) => {
+        dispatch(hideBackdrop());
+        dispatch(notification("Zmodyfikowano zestaw.", "success"));
+        dispatch(refreshUserData(token));
+      })
+      .catch((error) => {
+        dispatch(hideBackdrop());
+        dispatch(notification("Wystąpił błąd.", "error"));
+      });
+  };
+
+  const allDishes = useSelector((state) => state.dishes);
+  const thisSetDishes = filterDishes(allDishes, props.lunchSet.lunchSetDishes);
+  const Dishes = thisSetDishes.map((dish) => {
+    return (
+      <ListItem key={dish._id}>
+        <div className="editRestaurant-dish">
+          <div className="editRestaurant-dishLeft">
+            <div
+              className="editRestaurant-dishImg"
+              style={
+                dish.imgUrl !== "empty"
+                  ? { backgroundImage: `url(${dish.imgUrl})` }
+                  : { backgroundColor: "#7e7e7e" }
+              }
+            ></div>
+            <h3>{dish.name}</h3>
+          </div>
+          <div className="editRestaurant-dishRight">
+            <Tooltip title="Usuń">
+              <IconButton
+                color="primary"
+                component="span"
+                onClick={() => selectDish(dish._id)}
+              >
+                <DeleteIcon />
+              </IconButton>
+            </Tooltip>
+          </div>
+        </div>
+      </ListItem>
+    );
+  });
+
+  return (
+    <List>
+      <YesNo open={open} cancel={onCancel} accept={onAccept} />
+      {thisSetDishes.length === 0 ? (
+        <ListItem style={{ marginLeft: "14px", fontSize: "12px" }}>
+          Zestaw jest pusty.
+        </ListItem>
+      ) : (
+        Dishes
+      )}
+    </List>
+  );
+}

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} />
+)} */