little added to EditRestaurant

src/components/Dialogs/EditRestaurant.js

@@ -1,18 +1,64 @@
 import React, { useState } from "react";
 import { useSelector } from "react-redux";
 import { useParams, useHistory } from "react-router-dom";
+import { makeStyles } from "@material-ui/core/styles";
 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";
+import DescriptionIcon from "@material-ui/icons/Description";
+import PhotoIcon from "@material-ui/icons/Photo";
+import RoomIcon from "@material-ui/icons/Room";
+import RestaurantMenuIcon from "@material-ui/icons/RestaurantMenu";
+import FastfoodIcon from "@material-ui/icons/Fastfood";
+import AddIcon from "@material-ui/icons/Add";
+import Badge from "@material-ui/core/Badge";
+
+const useStyles = makeStyles((theme) => ({
+  main: {
+    "& .MuiListItemIcon-root": {
+      color: "#d68000",
+    },
+  },
+  root: {
+    "& .MuiBadge-colorPrimary": {
+      backgroundColor: "#13ff00",
+    },
+    "& .MuiBadge-colorError": {
+      backgroundColor: "#ff0000",
+    },
+  },
+  secondary: {
+    "& .MuiListItemText-secondary": {
+      color: "#7b7b7b",
+      fontSize: "13px",
+    },
+  },
+}));
 
 export default function EditRestaurant(props) {
+  const classes = useStyles();
   const [tab, setTab] = useState(0);
   const history = useHistory();
   let { id } = useParams();
   const restaurants = useSelector((state) => state.data.userData.restaurants);
+  const badgeData = {
+    color: "",
+    secondaryText: "",
+  };
+  const badgeInit = () => {
+    if (
+      !restaurant.subscriptionActive ||
+      restaurant.subscriptionActive === false
+    ) {
+      badgeData.color = "error";
+      badgeData.secondaryText = "Nieaktywna";
+    } else {
+      badgeData.color = "primary";
+      badgeData.secondaryText = `Aktywna do: ${restaurant.subscriptionDue}`;
+    }
+  };
 
   const handleListItemClick = (event, index) => {
     setTab(index);
@@ -23,18 +69,21 @@ export default function EditRestaurant(props) {
   }
   const restaurant = restaurants.find(matchId);
   if (restaurant === undefined) history.push("/");
+  badgeInit();
 
   return (
     <div className="editRestaurant-container">
       <div className="editRestaurant-menu">
-        <List component="nav">
+        <h3 className="editRestaurant-title">{restaurant.name}</h3>
+        <Divider />
+        <List className={classes.main} component="nav">
           <ListItem
             button
             selected={tab === 0}
             onClick={(event) => handleListItemClick(event, 0)}
           >
             <ListItemIcon>
-              <InboxIcon color="primary" />
+              <DescriptionIcon color="primary" />
             </ListItemIcon>
             <ListItemText primary="Informacje" />
           </ListItem>
@@ -44,9 +93,19 @@ export default function EditRestaurant(props) {
             onClick={(event) => handleListItemClick(event, 1)}
           >
             <ListItemIcon>
-              <InboxIcon color="primary" />
+              <Badge
+                className={classes.root}
+                anchorOrigin={{ vertical: "top", horizontal: "left" }}
+                variant="dot"
+                color={badgeData.color}
+              >
+                <DescriptionIcon color="primary" />
+              </Badge>
             </ListItemIcon>
-            <ListItemText primary="Zdjęcie" />
+            <ListItemText
+              primary="Subskrypcja"
+              secondary={badgeData.secondaryText}
+            />
           </ListItem>
           <ListItem
             button
@@ -54,9 +113,9 @@ export default function EditRestaurant(props) {
             onClick={(event) => handleListItemClick(event, 2)}
           >
             <ListItemIcon>
-              <InboxIcon color="primary" />
+              <PhotoIcon color="primary" />
             </ListItemIcon>
-            <ListItemText primary="Lokalizacja" />
+            <ListItemText primary="Zdjęcie" />
           </ListItem>
           <ListItem
             button
@@ -64,9 +123,9 @@ export default function EditRestaurant(props) {
             onClick={(event) => handleListItemClick(event, 3)}
           >
             <ListItemIcon>
-              <InboxIcon color="primary" />
+              <RoomIcon color="primary" />
             </ListItemIcon>
-            <ListItemText primary="Menu" />
+            <ListItemText primary="Lokalizacja" />
           </ListItem>
           <ListItem
             button
@@ -74,13 +133,59 @@ export default function EditRestaurant(props) {
             onClick={(event) => handleListItemClick(event, 4)}
           >
             <ListItemIcon>
-              <InboxIcon color="primary" />
+              <RestaurantMenuIcon color="primary" />
             </ListItemIcon>
-            <ListItemText primary="Menu obiadowe" />
+            <ListItemText primary="Menu" />
+          </ListItem>
+          <ListItem
+            button
+            selected={tab === 5}
+            onClick={(event) => handleListItemClick(event, 5)}
+          >
+            <ListItemIcon>
+              <FastfoodIcon color="primary" />
+            </ListItemIcon>
+            <ListItemText primary="Lunch menu" />
+          </ListItem>
+          <ListItem button>
+            <ListItemIcon>
+              <AddIcon color="primary" />
+            </ListItemIcon>
+            <ListItemText primary="Dodaj danie" />
           </ListItem>
         </List>
         <Divider />
       </div>
+      {tab === 0 && (
+        <div className="editRestaurant-tab">
+          <p>Informacje</p>
+        </div>
+      )}
+      {tab === 1 && (
+        <div className="editRestaurant-tab">
+          <p>Subskrypcja</p>
+        </div>
+      )}
+      {tab === 2 && (
+        <div className="editRestaurant-tab">
+          <p>Zdjęcie</p>
+        </div>
+      )}
+      {tab === 3 && (
+        <div className="editRestaurant-tab">
+          <p>Lokalizacja</p>
+        </div>
+      )}
+      {tab === 4 && (
+        <div className="editRestaurant-tab">
+          <p>Menu</p>
+        </div>
+      )}
+      {tab === 5 && (
+        <div className="editRestaurant-tab">
+          <p>Lunch menu</p>
+        </div>
+      )}
     </div>
   );
 }

src/styles/EditRestaurant.scss

@@ -10,6 +10,18 @@
 
 .editRestaurant-menu {
   width: 100%;
+  border-radius: 15px 0px 0px 15px;
+  background-color: #323232;
   max-width: 280px;
   color: #c0c0c0;
 }
+
+.editRestaurant-title {
+  font-weight: 300;
+}
+
+.editRestaurant-tab {
+  display: flex;
+  flex-flow: column;
+  width: 100%;
+}