web client v0.3

+ restaurant view
+ restaurants list

src/components/Dialogs/EditRestaurant.js

@@ -1,49 +1,85 @@
-import React from "react";
-import PictogramsSeparate from "../Output/PictogramsSeparate";
-import DishList from "../Output/DishList";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import { extractTags } from "../../Services";
+import React, { useState } from "react";
 import { useSelector } from "react-redux";
+import { useParams, useHistory } from "react-router-dom";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import Divider from "@material-ui/core/Divider";
+import InboxIcon from "@material-ui/icons/Inbox";
 
 export default function EditRestaurant(props) {
-  const restaurant = useSelector((state) => state.restaurant);
-  const showDishList = useSelector((state) => state.data.showDishList);
+  const [tab, setTab] = useState(0);
+  const history = useHistory();
+  let { id } = useParams();
+  const restaurants = useSelector((state) => state.data.userData.restaurants);
+
+  const handleListItemClick = (event, index) => {
+    setTab(index);
+  };
+
+  function matchId(element) {
+    return element._id === id;
+  }
+  const restaurant = restaurants.find(matchId);
+  if (restaurant === undefined) history.push("/");
 
   return (
-    <div className="restaurant-container">
-      <div className="restaurant-content">
-        <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>
-          </p>
-          {restaurant.phone && (
-            <p>
-              Kontakt:{" "}
-              <span className="restaurant-span">{restaurant.phone}</span>
-            </p>
-          )}
-          <hr />
-          <div className="restaurant-pictograms">
-            <PictogramsSeparate pictograms={extractTags(restaurant.tags)} />
-          </div>
-        </div>
-        <div className="restaurant-dishes">
-          <h3>Menu</h3>
-          {showDishList === false && <CircularProgress />}
-          {showDishList === true && <DishList />}
-        </div>
+    <div className="editRestaurant-container">
+      <div className="editRestaurant-menu">
+        <List component="nav">
+          <ListItem
+            button
+            selected={tab === 0}
+            onClick={(event) => handleListItemClick(event, 0)}
+          >
+            <ListItemIcon>
+              <InboxIcon color="primary" />
+            </ListItemIcon>
+            <ListItemText primary="Informacje" />
+          </ListItem>
+          <ListItem
+            button
+            selected={tab === 1}
+            onClick={(event) => handleListItemClick(event, 1)}
+          >
+            <ListItemIcon>
+              <InboxIcon color="primary" />
+            </ListItemIcon>
+            <ListItemText primary="Zdjęcie" />
+          </ListItem>
+          <ListItem
+            button
+            selected={tab === 2}
+            onClick={(event) => handleListItemClick(event, 2)}
+          >
+            <ListItemIcon>
+              <InboxIcon color="primary" />
+            </ListItemIcon>
+            <ListItemText primary="Lokalizacja" />
+          </ListItem>
+          <ListItem
+            button
+            selected={tab === 3}
+            onClick={(event) => handleListItemClick(event, 3)}
+          >
+            <ListItemIcon>
+              <InboxIcon color="primary" />
+            </ListItemIcon>
+            <ListItemText primary="Menu" />
+          </ListItem>
+          <ListItem
+            button
+            selected={tab === 4}
+            onClick={(event) => handleListItemClick(event, 4)}
+          >
+            <ListItemIcon>
+              <InboxIcon color="primary" />
+            </ListItemIcon>
+            <ListItemText primary="Menu obiadowe" />
+          </ListItem>
+        </List>
+        <Divider />
       </div>
     </div>
   );