web client v0.3

+ restaurant view
+ restaurants list

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">

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

src/components/Dialogs/EditRestaurant.js

@@ -1,49 +1,85 @@
-import React from "react";
+import React, { useState } from "react";
-import PictogramsSeparate from "../Output/PictogramsSeparate";
-import DishList from "../Output/DishList";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import { extractTags } from "../../Services";
 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 [tab, setTab] = useState(0);
-  const showDishList = useSelector((state) => state.data.showDishList);
+  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="editRestaurant-container">
-      <div className="restaurant-content">
+      <div className="editRestaurant-menu">
-        <div className="restaurant-info">
+        <List component="nav">
-          <div
+          <ListItem
-            className="restaurant-hero"
+            button
-            style={{ backgroundImage: "url(" + restaurant.imgUrl + ")" }}
+            selected={tab === 0}
-          ></div>
+            onClick={(event) => handleListItemClick(event, 0)}
-          <h1>{restaurant.name}</h1>
+          >
-          <p>{restaurant.description}</p>
+            <ListItemIcon>
-          <hr />
+              <InboxIcon color="primary" />
-          <p>
+            </ListItemIcon>
-            Miejscowość:{" "}
+            <ListItemText primary="Informacje" />
-            <span className="restaurant-span">{restaurant.city}</span>
+          </ListItem>
-          </p>
+          <ListItem
-          <p>
+            button
-            Godziny pracy:{" "}
+            selected={tab === 1}
-            <span className="restaurant-span">{restaurant.workingHours}</span>
+            onClick={(event) => handleListItemClick(event, 1)}
-          </p>
+          >
-          {restaurant.phone && (
+            <ListItemIcon>
-            <p>
+              <InboxIcon color="primary" />
-              Kontakt:{" "}
+            </ListItemIcon>
-              <span className="restaurant-span">{restaurant.phone}</span>
+            <ListItemText primary="Zdjęcie" />
-            </p>
+          </ListItem>
-          )}
+          <ListItem
-          <hr />
+            button
-          <div className="restaurant-pictograms">
+            selected={tab === 2}
-            <PictogramsSeparate pictograms={extractTags(restaurant.tags)} />
+            onClick={(event) => handleListItemClick(event, 2)}
-          </div>
+          >
-        </div>
+            <ListItemIcon>
-        <div className="restaurant-dishes">
+              <InboxIcon color="primary" />
-          <h3>Menu</h3>
+            </ListItemIcon>
-          {showDishList === false && <CircularProgress />}
+            <ListItemText primary="Lokalizacja" />
-          {showDishList === true && <DishList />}
+          </ListItem>
-        </div>
+          <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 (

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;
+}