From e19b767c1243244d41e116ea23e55fe89a584a8a Mon Sep 17 00:00:00 2001
From: Jonasz Bigda <jonasz@bankai.pl>
Date: Wed, 23 Sep 2020 18:42:15 +0200
Subject: [PATCH] web client v0.3

+ restaurant view
+ restaurants list
---
 src/App.js                                  |   2 +-
 src/App.scss                                |   1 +
 src/components/Dialogs/EditRestaurant.js    | 118 +++++++++++++-------
 src/components/Output/ListItemRestaurant.js |   7 +-
 src/components/UserMenu.js                  |   9 +-
 src/styles/EditRestaurant.scss              |  15 +++
 6 files changed, 108 insertions(+), 44 deletions(-)
 create mode 100644 src/styles/EditRestaurant.scss

diff --git a/src/App.js b/src/App.js
index 1c063e9..dff6965 100644
--- a/src/App.js
+++ b/src/App.js
@@ -74,7 +74,7 @@ function App(props) {
               />
               <PrivateRoute path="/settings" component={<Settings />} />
               <PrivateRoute
-                path="/editRestaurant:id"
+                path="/editRestaurant/:id"
                 component={<EditRestaurant />}
               />
               <Route path="/forgotpassword">
diff --git a/src/App.scss b/src/App.scss
index a23da1e..5d95ba1 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -8,6 +8,7 @@
 @import "./styles/DishList.scss";
 @import "./styles/Dialogs.scss";
 @import "./styles/NewRestaurant.scss";
+@import "./styles/EditRestaurant.scss";
 
 .App {
   background-image: url("./public/bg_tile.jpg");
diff --git a/src/components/Dialogs/EditRestaurant.js b/src/components/Dialogs/EditRestaurant.js
index e3b84e0..15bc317 100644
--- a/src/components/Dialogs/EditRestaurant.js
+++ b/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>
   );
diff --git a/src/components/Output/ListItemRestaurant.js b/src/components/Output/ListItemRestaurant.js
index 419f1a9..c98ff47 100644
--- a/src/components/Output/ListItemRestaurant.js
+++ b/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}
diff --git a/src/components/UserMenu.js b/src/components/UserMenu.js
index b1401bc..ee0db78 100644
--- a/src/components/UserMenu.js
+++ b/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 (
diff --git a/src/styles/EditRestaurant.scss b/src/styles/EditRestaurant.scss
new file mode 100644
index 0000000..4169f0e
--- /dev/null
+++ b/src/styles/EditRestaurant.scss
@@ -0,0 +1,15 @@
+.editRestaurant-container {
+  min-width: 70%;
+  min-height: 600px;
+  max-width: 100%;
+  background-color: $dark-gray;
+  border-radius: 15px;
+  display: flex;
+  flex-direction: row;
+}
+
+.editRestaurant-menu {
+  width: 100%;
+  max-width: 280px;
+  color: #c0c0c0;
+}