web client v1.0 (production)

src/components/Dialogs/Dish.js

@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from "react";
+import PictogramsSeparate from "../Output/PictogramsSeparate";
+import axios from "axios";
+import { useParams, useHistory } from "react-router-dom";
+import { extractTags } from "../../Services";
+import { backend } from "../../config.js";
+import IconButton from "@material-ui/core/IconButton";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import { makeStyles } from "@material-ui/core/styles";
+
+const loginStyles = makeStyles((theme) => ({
+  closeButton: {
+    color: "#868686",
+    position: "absolute",
+    right: theme.spacing(1),
+    top: theme.spacing(1),
+  },
+}));
+
+export default function Dish(props) {
+  const { id } = useParams();
+  const history = useHistory();
+  const initialState = {};
+  const [dish, setDish] = useState(initialState);
+  const styles = loginStyles();
+
+  useEffect(() => {
+    axios
+      .get(`${backend}dish?dishId=${id}`)
+      .then((response) => {
+        setDish(response.data);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, [id]);
+
+  if (typeof dish === "undefined") {
+    return null;
+  } else {
+    return (
+      <div className="dish-container">
+        <div className="dish-left">
+          <div
+            className="dish-hero"
+            style={{ backgroundImage: "url(" + dish.imgUrl + ")" }}
+          >
+            <div className="button-container">
+              <IconButton
+                className={styles.back}
+                onClick={() => history.goBack()}
+              >
+                <ArrowBackIcon />
+              </IconButton>
+            </div>
+          </div>
+        </div>
+        <div className="dish-content">
+          <div className="dish-info">
+            <h1>{dish.name}</h1>
+          </div>
+          <hr />
+          <div className="dish-row-column">
+            <h5>Składniki</h5>
+            <p>{dish.ingredients}</p>
+          </div>
+          <hr />
+          <div className="dish-row-column">
+            <h5>Alergeny</h5>
+            <div className="dish-pictograms">
+              <PictogramsSeparate pictograms={extractTags(dish.allergens)} />
+            </div>
+          </div>
+          <hr />
+          <div className="dish-row">
+            <h5>Cena</h5>
+            <p>{dish.price}zł</p>
+          </div>
+          <hr />
+          <div className="dish-row">
+            <h5>Porcja</h5>
+            <p>{dish.weight}</p>
+          </div>
+          <hr />
+          <div className="dish-row">
+            <h5>Wartość energrtyczna</h5>
+            <p>{dish.kCal}kcal</p>
+          </div>
+          <hr />
+          <div className="dish-row">
+            <h5>Indeks glikemiczny</h5>
+            <p>{dish.glicemicIndex}</p>
+          </div>
+          {dish.notes !== "" && <hr />}
+          {dish.notes !== "" && (
+            <div className="dish-row">
+              <h5>Uwagi</h5>
+              <p>{dish.notes}</p>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+}

src/components/Dialogs/EditDish.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { useParams, useHistory } from "react-router-dom";
 import Divider from "@material-ui/core/Divider";
@@ -88,6 +88,9 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function EditDish() {
+  useEffect(() => {
+    document.title = "Menui - Edytuj danie";
+  });
   const styles = useStyles();
   const token = useSelector((state) => state.data.userData.jwt);
   const { id } = useParams();

src/components/Dialogs/EditRestaurant.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { useParams, useHistory } from "react-router-dom";
 import { makeStyles } from "@material-ui/core/styles";
@@ -46,6 +46,9 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function EditRestaurant(props) {
+  useEffect(() => {
+    document.title = "Menui - Edytuj lokal";
+  });
   const dispatch = useDispatch();
   const classes = useStyles();
   const [tab, setTab] = useState(0);

src/components/Dialogs/ForgotPassword.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import DialogContent from "@material-ui/core/DialogContent";
@@ -17,6 +17,9 @@ import { remindPassword, notification } from "../../actions";
 import { useHistory } from "react-router-dom";
 
 export default function ForgotPassword(props) {
+  useEffect(() => {
+    document.title = "Menui - Odzyskiwanie hasła";
+  });
   const initialData = {
     email: "",
     emailError: false,

src/components/Dialogs/LoginDialog.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import DialogContent from "@material-ui/core/DialogContent";
@@ -18,6 +18,9 @@ import { tryLogin, notification } from "../../actions";
 import { useHistory } from "react-router-dom";
 
 export default function LoginDialog(props) {
+  useEffect(() => {
+    document.title = "Menui - Logowanie";
+  });
   const initialData = {
     email: "",
     password: "",

src/components/Dialogs/NewDish.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import DialogContent from "@material-ui/core/DialogContent";
@@ -94,6 +94,9 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function NewRestaurant() {
+  useEffect(() => {
+    document.title = "Menui - Dodaj danie";
+  });
   const dispatch = useDispatch();
   const { restaurantID } = useParams();
   const initialState = {

src/components/Dialogs/NewRestaurant.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import DialogContent from "@material-ui/core/DialogContent";
@@ -86,6 +86,9 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function NewRestaurant() {
+  useEffect(() => {
+    document.title = "Menui - Dodaj lokal";
+  });
   const dispatch = useDispatch();
   const initialState = {
     name: "",

src/components/Dialogs/RegisterDialog.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import DialogContent from "@material-ui/core/DialogContent";
@@ -42,6 +42,9 @@ export default function RegisterDialog(props) {
   const [formData, setFormData] = useState(initialFormData);
   const dispatch = useDispatch();
   const history = useHistory();
+  useEffect(() => {
+    document.title = "Menui - Rejestracja";
+  });
 
   // STYLES
 

src/components/Dialogs/ResetPassword.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import DialogContent from "@material-ui/core/DialogContent";
@@ -20,6 +20,9 @@ function useQuery() {
 }
 
 export default function ResetPassword(props) {
+  useEffect(() => {
+    document.title = "Menui - Resetowanie hasła";
+  });
   const initialData = {
     email: "",
     emailError: false,

src/components/Dialogs/Settings.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import DialogContent from "@material-ui/core/DialogContent";
 import Dialog from "@material-ui/core/Dialog";
@@ -69,6 +69,9 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function Settings() {
+  useEffect(() => {
+    document.title = "Menui - Moje konto";
+  });
   const history = useHistory();
   const style = useStyles();
   const data = useSelector((state) => state.data.userData);