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>
   );

src/components/Output/ListItemRestaurant.js

@@ -5,6 +5,7 @@ import ListItem from "@material-ui/core/ListItem";
 import FastfoodIcon from "@material-ui/icons/Fastfood";
 import Badge from "@material-ui/core/Badge";
 import { makeStyles } from "@material-ui/core/styles";
+import { useHistory } from "react-router-dom";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -24,6 +25,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function ListItemRestaurant(props) {
+  const history = useHistory();
   const styles = useStyles();
   const badgeData = {
     color: "",
@@ -41,7 +43,10 @@ export default function ListItemRestaurant(props) {
   badgeInit();
 
   return (
-    <ListItem button>
+    <ListItem
+      button
+      onClick={() => history.push(`/editRestaurant/${props.id}`)}
+    >
       <ListItemIcon>
         <Badge
           className={styles.root}

src/components/UserMenu.js

@@ -44,7 +44,14 @@ export default function UserMenu(props) {
   const history = useHistory();
 
   const viewRestaurants = restaurants.map((restaurant) => {
-    return <ListItemRestaurant name={restaurant.name} key={restaurant._id} />;
+    return (
+      <ListItemRestaurant
+        name={restaurant.name}
+        key={restaurant._id}
+        subscriptionActive={restaurant.subscriptionActive}
+        id={restaurant._id}
+      />
+    );
   });
 
   return (