web client v0.2 (add restaurant OK, settings OK)

src/App.js

@@ -15,6 +15,9 @@ import NewRestaurant from "./components/Dialogs/NewRestaurant";
 import RegisterDialog from "./components/Dialogs/RegisterDialog";
 import ForgotPassword from "./components/Dialogs/ForgotPassword";
 import ResetPassword from "./components/Dialogs/ResetPassword";
+import Contact from "./components/Output/Contact";
+import Settings from "./components/Dialogs/Settings";
+import EditRestaurant from "./components/Dialogs/EditRestaurant";
 
 const theme = createMuiTheme({
   palette: {
@@ -62,11 +65,18 @@ function App(props) {
               <Route path="/register">
                 <RegisterDialog />
               </Route>
+              <Route path="/kontakt">
+                <Contact />
+              </Route>
               <PrivateRoute
                 path="/newRestaurant"
                 component={<NewRestaurant />}
               />
-              <PrivateRoute path="/newDish" component={<NewRestaurant />} />
+              <PrivateRoute path="/settings" component={<Settings />} />
+              <PrivateRoute
+                path="/editRestaurant:id"
+                component={<EditRestaurant />}
+              />
               <Route path="/forgotpassword">
                 <ForgotPassword />
               </Route>

src/Services.js

@@ -10,3 +10,26 @@ export function extractTags(tags) {
   }
   return results;
 }
+
+function findInArray(array, string) {
+  const result = array.indexOf(string) > -1;
+  return result;
+}
+
+export function prepareTags(tags) {
+  let outTags = {
+    cardPayments: findInArray(tags, "Płatność kartą"),
+    petFriendly: findInArray(tags, "Lubimy zwierzaki"),
+    glutenFree: findInArray(tags, "Bezglutenowe"),
+    vegan: findInArray(tags, "Wegańskie"),
+    vegetarian: findInArray(tags, "Wegetariańskie"),
+    alcohol: findInArray(tags, "Podajemy alkohol"),
+    delivery: findInArray(tags, "Dowozimy"),
+  };
+  return outTags;
+}
+
+export const openInNewTab = (url) => {
+  const newWindow = window.open(url, "_blank", "noopener,noreferrer");
+  if (newWindow) newWindow.opener = null;
+};

src/actions/index.js

@@ -115,15 +115,22 @@ export const tryLogin = (username, password) => {
         dispatch(
           toggles.setLoggedIn(
             response.data.firstname,
+            response.data.lastname,
             jwt,
             response.data.id,
-            response.data.email
+            response.data.email,
+            response.data.NIP,
+            response.data.adress,
+            response.data.companyName,
+            response.data.restaurants
           )
         );
         dispatch(push("/"));
       })
       .catch((err) => {
-        if (err.response.status === 404) {
+        if (!err.response) {
+          console.log(err);
+        } else if (err.response.status === 404) {
           dispatch(
             toggles.setLoginResult(
               "Użytkownik o podanym adresie email nie istnieje."

src/actions/toggles.js

@@ -10,10 +10,30 @@ export const hideDishes = () => {
   };
 };
 
-export const setLoggedIn = (username, jwt, id, email) => {
+export const setLoggedIn = (
+  firstname,
+  lastname,
+  jwt,
+  userId,
+  email,
+  NIP,
+  adress,
+  companyName,
+  restaurants
+) => {
   return {
     type: "SET_LOGGEDIN",
-    payload: { username: username, jwt: jwt, id: id, email: email },
+    payload: {
+      firstname: firstname,
+      lastname: lastname,
+      jwt: jwt,
+      userId: userId,
+      email: email,
+      NIP: NIP,
+      adress: adress,
+      companyName: companyName,
+      restaurants: restaurants,
+    },
   };
 };
 

src/components/Dialogs/EditRestaurant.js

@@ -0,0 +1,50 @@
+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 { useSelector } from "react-redux";
+
+export default function EditRestaurant(props) {
+  const restaurant = useSelector((state) => state.restaurant);
+  const showDishList = useSelector((state) => state.data.showDishList);
+
+  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>
+    </div>
+  );
+}

src/components/Dialogs/NewRestaurant.js

@@ -19,12 +19,15 @@ import validator from "validator";
 import { useHistory } from "react-router-dom";
 import InputGoogleMaps from "../Input/InputGoogleMaps";
 import InfoDialog from "../Output/InfoDialog";
+import { prepareTags } from "../../Services.js";
+import axios from "axios";
+import { useSelector } from "react-redux";
 // ICONS
 import FastfoodIcon from "@material-ui/icons/Fastfood";
 import LocationCityIcon from "@material-ui/icons/LocationCity";
 import PhoneIcon from "@material-ui/icons/Phone";
 import FacebookIcon from "@material-ui/icons/Facebook";
-import TwitterIcon from "@material-ui/icons/Twitter";
+import InstagramIcon from "@material-ui/icons/Instagram";
 import LanguageIcon from "@material-ui/icons/Language";
 import ButtonPrimary from "../Input/ButtonPrimary";
 
@@ -100,18 +103,19 @@ export default function NewRestaurant() {
     tags: [],
     phone: "",
     facebook: "",
-    twitter: "",
+    instagram: "",
     www: "",
     nameError: false,
     cityError: false,
     adressError: false,
     descriptionError: false,
     charLeft: 400,
-    open: true,
+    response: "Dodawanie lokalu, prosimy o chwilę cierpliwości...",
-    response: "",
   };
   const steps = ["Informacje", "Zdjęcie", "Lokalizacja"];
   const [state, setState] = useState(initialState);
+  const [open, setOpen] = useState(true);
+  const [loading, setLoading] = useState(true);
   const [activeStep, setActiveStep] = React.useState(0);
   const styles = useStyles();
   const availableTags = [
@@ -124,12 +128,12 @@ export default function NewRestaurant() {
     "Dowozimy",
   ];
   const history = useHistory();
+  const token = useSelector((state) => state.data.jwt);
 
   // HANDLERS
 
   const sendForm = () => {
-    // format tags
+    const formattedTags = prepareTags(state.tags);
-    const formattedTags;
     const data = {
       name: state.name,
       city: state.city,
@@ -140,10 +144,43 @@ export default function NewRestaurant() {
       workingHours: `${state.hoursFrom} - ${state.hoursTo}`,
       description: state.description,
       tags: formattedTags,
-        links: {},
+      facebook: state.facebook,
-        phone: request.phone,
+      instagram: state.instagram,
-        hidden: request.hidden,
+      www: state.www,
-    }
+      phone: state.phone,
+      hidden: false,
+    };
+    setOpen(false);
+    axios({
+      url: "http://localhost:4000/restaurant",
+      method: "POST",
+      data: data,
+      headers: {
+        "x-auth-token": token,
+      },
+    })
+      .then((response) => {
+        setLoading(false);
+        setState({
+          ...state,
+          response:
+            "Lokal został dodany, aktywuj subskrypcję, aby był widoczny w wynikach wyszukiwania.",
+        });
+        setTimeout(() => {
+          history.push("/");
+        }, 5000);
+      })
+      .catch((error) => {
+        setLoading(false);
+        setState({
+          ...state,
+          response:
+            "Wystąpił nieoczekiwany błąd, przepraszamy za utrudnienia. Spróbuj ponownie za chwilę.",
+        });
+        setTimeout(() => {
+          history.push("/");
+        }, 5000);
+      });
   };
 
   const setCoordinatesAndPlacesID = (coordinates, placesID) => {
@@ -167,7 +204,6 @@ export default function NewRestaurant() {
         }
         break;
       case 2:
-        setState({ ...state, open: false });
         sendForm();
         break;
       default:
@@ -219,16 +255,16 @@ export default function NewRestaurant() {
 
   return (
     <div>
-      {!state.open && (
+      {!open && (
         <InfoDialog
           title={"Dodawanie lokalu"}
-          text={"Dodawanie lokalu, prosimy o chwilę cierpliwości..."}
+          text={state.response}
-          loading={true}
+          loading={loading}
         />
       )}
       <Dialog
         className={styles.root}
-        open={state.open}
+        open={open}
         aria-labelledby="newRestaurant-title"
       >
         <DialogTitle id="newRestaurant-title">Dodaj Lokal</DialogTitle>
@@ -372,7 +408,7 @@ export default function NewRestaurant() {
                         className={styles.textInputFullWidth}
                         variant="outlined"
                         label="Tagi"
-                        placeholder="Dodaj tagi"
+                        placeholder="Wybierz tagi"
                       />
                     )}
                   />
@@ -412,16 +448,16 @@ export default function NewRestaurant() {
                 />
                 <TextField
                   className={styles.textInput}
-                  label="Twitter"
+                  label="Instagram"
                   variant="outlined"
-                  value={state.twitter}
+                  value={state.instagram}
                   onChange={(event) =>
-                    setState({ ...state, twitter: event.target.value })
+                    setState({ ...state, instagram: event.target.value })
                   }
                   InputProps={{
                     startAdornment: (
                       <InputAdornment position="start">
-                        <TwitterIcon color="primary" />
+                        <InstagramIcon color="primary" />
                       </InputAdornment>
                     ),
                   }}
@@ -456,6 +492,11 @@ export default function NewRestaurant() {
           )}
           {activeStep === 2 && (
             <Paper>
+              <p>
+                Kliknij w miejscu, w którym znajduje się Twoja restauracja, by
+                dodać marker. <br />
+                Jeżeli lokal znajduje się na mapie - kliknij jego ikonkę.
+              </p>
               <InputGoogleMaps
                 setCoordinates={(coordinates, placesID) =>
                   setCoordinatesAndPlacesID(coordinates, placesID)

src/components/Dialogs/Settings.js

@@ -0,0 +1,153 @@
+import React, { useState } from "react";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import Dialog from "@material-ui/core/Dialog";
+import Divider from "@material-ui/core/Divider";
+import { makeStyles } from "@material-ui/core/styles";
+import ButtonSecondary from "../Input/ButtonSecondary";
+import ButtonPrimary from "../Input/ButtonPrimary";
+import IconButton from "@material-ui/core/IconButton";
+import TextField from "@material-ui/core/TextField";
+import CloseIcon from "@material-ui/icons/Close";
+import { useSelector } from "react-redux";
+import { useHistory } from "react-router-dom";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    textAlign: "center",
+    "& .MuiPaper-root": {
+      minWidth: "30%",
+      backgroundColor: "#262626",
+      color: "#bbbbbb",
+    },
+  },
+  closeButton: {
+    color: "#bbbbbb",
+    position: "absolute",
+    right: theme.spacing(1),
+    top: theme.spacing(1),
+  },
+  textInput: {
+    margin: theme.spacing(2),
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+  },
+  textInputFullWidth: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+    "$ .MuiFormHelperText-root": {
+      color: "#bbbbbb",
+    },
+  },
+  timePicker: {
+    margin: theme.spacing(2),
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+  },
+  stepLabel: {
+    "& .MuiStepLabel-label": {
+      color: "#bbbbbb",
+    },
+    "& .MuiStepLabel-active": {
+      color: "#bbbbbb",
+    },
+  },
+}));
+
+export default function Settings() {
+  const history = useHistory();
+  const style = useStyles();
+  const data = useSelector((state) => state.data.userData);
+  const initialState = {
+    firstname: data.firstname,
+    lastname: data.lastname,
+    email: data.userEmail,
+    NIP: data.billing.NIP,
+    adress: data.billing.adress,
+    companyName: data.billing.companyName,
+  };
+  const [state, setState] = useState(initialState);
+  return (
+    <Dialog aria-labelledby="settings-title" className={style.root} open={true}>
+      <DialogTitle id="settings-title">Ustawienia konta</DialogTitle>
+      <IconButton
+        className={style.closeButton}
+        onClick={() => {}}
+        aria-label="close"
+      >
+        <CloseIcon />
+      </IconButton>
+      <Divider />
+      <DialogContent>
+        <TextField
+          className={style.textInput}
+          value={state.firstname}
+          onChange={(event) =>
+            setState({ ...state, firstname: event.target.value })
+          }
+          label="Imię"
+          variant="outlined"
+        />
+        <TextField
+          className={style.textInput}
+          value={state.lastname}
+          onChange={(event) =>
+            setState({ ...state, lastname: event.target.value })
+          }
+          label="Nazwisko"
+          variant="outlined"
+        />
+        <TextField
+          className={style.textInput}
+          value={state.email}
+          onChange={(event) =>
+            setState({ ...state, email: event.target.value })
+          }
+          label="Email"
+          variant="outlined"
+        />
+        <TextField
+          className={style.textInput}
+          value={state.companyName}
+          onChange={(event) =>
+            setState({ ...state, companyName: event.target.value })
+          }
+          label="Nazwa firmy"
+          variant="outlined"
+        />
+        <TextField
+          className={style.textInput}
+          value={state.NIP}
+          onChange={(event) => setState({ ...state, NIP: event.target.value })}
+          label="NIP"
+          variant="outlined"
+        />
+        <TextField
+          className={style.textInput}
+          value={state.adress}
+          onChange={(event) =>
+            setState({ ...state, adress: event.target.value })
+          }
+          label="Adres firmy"
+          variant="outlined"
+        />
+        <ButtonPrimary onClick={() => history.push("/")} text="Anuluj" />
+        <ButtonSecondary text="Zapisz" />
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/Input/ImageUpload.js

@@ -6,7 +6,7 @@ import axios from "axios";
 export default function ImageUpload(props) {
   const [imagePreviewURL, setPreviewURL] = useState(props.img);
   let showCircle = false;
-  const token = useSelector((state) => state.data.jwt);
+  const token = useSelector((state) => state.data.userData.jwt);
 
   const handleInputChange = (event) => {
     let data = new FormData();
@@ -33,7 +33,7 @@ export default function ImageUpload(props) {
 
   let imagePreview = (
     <div className="image-preview">
-      {showCircle ? <CircularProgress /> : "Proszę wybrać obraz."}
+      {showCircle ? <CircularProgress /> : "Proszę wybrać obraz. (max. 2MB)"}
     </div>
   );
   if (imagePreviewURL) {

src/components/Output/Contact.js

@@ -0,0 +1,58 @@
+import React from "react";
+import Paper from "@material-ui/core/Paper";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemText from "@material-ui/core/ListItemText";
+import Divider from "@material-ui/core/Divider";
+import { makeStyles } from "@material-ui/core/styles";
+import LogoMain from "./logoMain";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    textAlign: "center",
+  },
+  secondary: {
+    "& .MuiListItemText-secondary": {
+      color: "#7b7b7b",
+      fontSize: "13px",
+    },
+    textAlign: "center",
+  },
+}));
+
+export default function Contact() {
+  const style = useStyles();
+  return (
+    <Paper style={{ backgroundColor: "#262626", color: "#bbbbbb" }}>
+      <List className={style.root}>
+        <ListItem>
+          <LogoMain />
+        </ListItem>
+        <Divider />
+        <ListItem>
+          <ListItemText
+            className={style.secondary}
+            primary="Telefon"
+            secondary="(+48) 533 270 853"
+          />
+        </ListItem>
+        <Divider />
+        <ListItem>
+          <ListItemText
+            className={style.secondary}
+            primary="Biuro"
+            secondary="menui@menui.pl"
+          />
+        </ListItem>
+        <Divider />
+        <ListItem>
+          <ListItemText
+            className={style.secondary}
+            primary="Wsparcie techniczne"
+            secondary="support@menui.pl"
+          />
+        </ListItem>
+      </List>
+    </Paper>
+  );
+}

src/components/Output/InfoDialog.js

@@ -1,17 +1,12 @@
 import React from "react";
-import CloseIcon from "@material-ui/icons/Close";
 import { makeStyles } from "@material-ui/core/styles";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import DialogContent from "@material-ui/core/DialogContent";
 import Dialog from "@material-ui/core/Dialog";
 import Divider from "@material-ui/core/Divider";
-import ButtonSecondary from "../Input/ButtonSecondary";
-import IconButton from "@material-ui/core/IconButton";
 import CircularProgress from "@material-ui/core/CircularProgress";
-import { useHistory } from "react-router-dom";
 
 export default function InfoDialog(props) {
-  const history = useHistory();
   const loading = props.loading;
   const loginStyles = makeStyles((theme) => ({
     root: {
@@ -32,25 +27,12 @@ export default function InfoDialog(props) {
   const styles = loginStyles();
 
   return (
-    <Dialog
+    <Dialog className={styles.root} open={true} aria-labelledby="title">
-      className={styles.root}
-      onClose={() => history.push("/")}
-      open={true}
-      aria-labelledby="title"
-    >
       <DialogTitle id="title">{props.title}</DialogTitle>
-      <IconButton
-        className={styles.closeButton}
-        onClick={() => history.push("/")}
-        aria-label="close"
-      >
-        <CloseIcon />
-      </IconButton>
       <Divider />
       <DialogContent>
         <p>{props.text}</p>
         {loading && <CircularProgress />}
-        <ButtonSecondary onClick={history.push("/")} text="Ok" />
       </DialogContent>
     </Dialog>
   );

src/components/Output/ListItemRestaurant.js

@@ -0,0 +1,62 @@
+import React from "react";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+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";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    "& .MuiBadge-colorPrimary": {
+      backgroundColor: "#13ff00",
+    },
+    "& .MuiBadge-colorError": {
+      backgroundColor: "#ff0000",
+    },
+  },
+  secondary: {
+    "& .MuiListItemText-secondary": {
+      color: "#7b7b7b",
+      fontSize: "13px",
+    },
+  },
+}));
+
+export default function ListItemRestaurant(props) {
+  const styles = useStyles();
+  const badgeData = {
+    color: "",
+    secondaryText: "",
+  };
+  const badgeInit = () => {
+    if (!props.subscriptionActive || props.subscriptionActive === false) {
+      badgeData.color = "error";
+      badgeData.secondaryText = "Aktywuj sybskrypcję";
+    } else {
+      badgeData.color = "primary";
+      badgeData.secondaryText = "Subskrypcja aktywna";
+    }
+  };
+  badgeInit();
+
+  return (
+    <ListItem button>
+      <ListItemIcon>
+        <Badge
+          className={styles.root}
+          anchorOrigin={{ vertical: "top", horizontal: "left" }}
+          variant="dot"
+          color={badgeData.color}
+        >
+          <FastfoodIcon />
+        </Badge>
+      </ListItemIcon>
+      <ListItemText
+        className={styles.secondary}
+        primary={props.name}
+        secondary={badgeData.secondaryText}
+      />
+    </ListItem>
+  );
+}

src/components/Output/Social.js

@@ -3,17 +3,27 @@ import FacebookIcon from "@material-ui/icons/Facebook";
 import TwitterIcon from "@material-ui/icons/Twitter";
 import InstagramIcon from "@material-ui/icons/Instagram";
 import IconButton from "@material-ui/core/IconButton";
+import { openInNewTab } from "../../Services.js";
 
 export default function Social(props) {
   return (
     <div className="social-container">
-      <IconButton color="secondary">
+      <IconButton
+        onClick={() => openInNewTab("https://www.facebook.com")}
+        color="secondary"
+      >
         <FacebookIcon />
       </IconButton>
-      <IconButton color="secondary">
+      <IconButton
+        onClick={() => openInNewTab("https://twitter.com/menuifood")}
+        color="secondary"
+      >
         <TwitterIcon />
       </IconButton>
-      <IconButton color="secondary">
+      <IconButton
+        onClick={() => openInNewTab("https://www.instagram.com")}
+        color="secondary"
+      >
         <InstagramIcon />
       </IconButton>
     </div>

src/components/TopBar.js

@@ -13,12 +13,13 @@ import ListItemText from "@material-ui/core/ListItemText";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
 import HomeIcon from "@material-ui/icons/Home";
 import MailIcon from "@material-ui/icons/Mail";
-import PaymentIcon from "@material-ui/icons/Payment";
 import { logout } from "../actions";
+import { showRegulamin } from "../actions/toggles.js";
 import { makeStyles } from "@material-ui/core/styles";
 import ButtonSecondary from "./Input/ButtonSecondary";
 import ListSubheader from "@material-ui/core/ListSubheader";
 import { useHistory } from "react-router-dom";
+import GavelIcon from "@material-ui/icons/Gavel";
 
 const useStyles = makeStyles((theme) => ({
   paper: {
@@ -38,7 +39,7 @@ const useStyles = makeStyles((theme) => ({
 export default function TopBar() {
   const classes = useStyles();
   const loggedIn = useSelector((state) => state.data.loggedIn);
-  const username = useSelector((state) => state.data.username);
+  const username = useSelector((state) => state.data.userData.firstname);
   const history = useHistory();
   const dispatch = useDispatch();
   const handleClick = (button) => {
@@ -50,18 +51,18 @@ export default function TopBar() {
       case "logIn":
         history.push("/login");
         break;
+      case "kontakt":
+        history.push("/kontakt");
+        break;
+      case "regulamin":
+        dispatch(showRegulamin());
+        break;
       case "register":
         history.push("/register");
         break;
       case "logOut":
         dispatch(logout());
         break;
-      case "myRestaurant":
-        history.push("/restaurant");
-        break;
-      case "addDish":
-        history.push("/");
-        break;
       default:
         return true;
     }
@@ -128,17 +129,17 @@ export default function TopBar() {
             </ListItemIcon>
             <ListItemText primary="Menui" />
           </ListItem>
-          <ListItem button onClick={() => handleClick("contact")}>
+          <ListItem button onClick={() => handleClick("kontakt")}>
             <ListItemIcon>
               <MailIcon />
             </ListItemIcon>
             <ListItemText primary="Kontakt" />
           </ListItem>
-          <ListItem button onClick={() => handleClick("pricing")}>
+          <ListItem button onClick={() => handleClick("regulamin")}>
             <ListItemIcon>
-              <PaymentIcon />
+              <GavelIcon />
             </ListItemIcon>
-            <ListItemText primary="Cennik" />
+            <ListItemText primary="Regulamin" />
           </ListItem>
           <Divider />
           <ListItem>

src/components/UserMenu.js

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { useSelector } from "react-redux";
 import Collapse from "@material-ui/core/Collapse";
 import { makeStyles } from "@material-ui/core/styles";
 import List from "@material-ui/core/List";
@@ -12,6 +13,7 @@ import FastfoodIcon from "@material-ui/icons/Fastfood";
 import AddIcon from "@material-ui/icons/Add";
 import SettingsIcon from "@material-ui/icons/Settings";
 import { useHistory } from "react-router-dom";
+import ListItemRestaurant from "./Output/ListItemRestaurant";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -29,17 +31,22 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function UserMenu(props) {
-  const [open, setOpen] = useState(false);
+  const restaurants = useSelector((state) => state.data.userData.restaurants);
+  const [open, setOpen] = useState(true);
   const classes = useStyles();
   const handleClick = () => {
     setOpen(!open);
   };
-  const handleAddRestaurant = () => {
+  const handleButtonClick = (url) => {
     props.closeMenu();
-    history.push("/newRestaurant");
+    history.push(url);
   };
   const history = useHistory();
 
+  const viewRestaurants = restaurants.map((restaurant) => {
+    return <ListItemRestaurant name={restaurant.name} key={restaurant._id} />;
+  });
+
   return (
     <List
       className={classes.root}
@@ -49,27 +56,32 @@ export default function UserMenu(props) {
         </ListSubheader>
       }
     >
-      <ListItem button disableGutters>
+      <ListItem
+        button
+        onClick={() => handleButtonClick("/settings")}
+        disableGutters
+      >
         <ListItemIcon>
           <SettingsIcon />
         </ListItemIcon>
-        <ListItemText primary="Moje konto" />
+        <ListItemText primary="Ustawienia konta" />
       </ListItem>
       <ListItem button onClick={handleClick} disableGutters>
         <ListItemIcon>
           <FastfoodIcon />
         </ListItemIcon>
-        <ListItemText primary="Moje lokale" />
+        <ListItemText primary="Moje restauracje" />
         {open ? <ExpandLess /> : <ExpandMore />}
       </ListItem>
       <Collapse in={open} timeout="auto" unmountOnExit>
         <List component="div" disablePadding>
-          <ListItem button onClick={handleAddRestaurant}>
+          <ListItem button onClick={() => handleButtonClick("/newRestaurant")}>
             <ListItemIcon>
               <AddIcon />
             </ListItemIcon>
-            <ListItemText primary="Dodaj lokal" />
+            <ListItemText primary="Dodaj restaurację" />
           </ListItem>
+          {viewRestaurants}
         </List>
       </Collapse>
     </List>

src/reducers/data.js

@@ -5,6 +5,19 @@ const initialState = {
   username: "",
   userId: "",
   userEmail: "",
+  userData: {
+    jwt: "",
+    firstname: "",
+    lastname: "",
+    userId: "",
+    userEmail: "",
+    billing: {
+      NIP: "",
+      adress: "",
+      companyName: "",
+    },
+    restaurants: [],
+  },
   dialogs: {
     registerCircularProgress: false,
     registerForm: true,
@@ -29,19 +42,37 @@ const data = (state = initialState, action) => {
       return (state = {
         ...state,
         loggedIn: true,
-        username: action.payload.username,
+        userData: {
           jwt: action.payload.jwt,
+          firstname: action.payload.firstname,
+          lastname: action.payload.lastname,
+          userId: action.payload.userId,
           userEmail: action.payload.email,
-        userId: action.payload.id,
+          billing: {
+            NIP: action.payload.NIP,
+            adress: action.payload.adress,
+            companyName: action.payload.companyName,
+          },
+          restaurants: action.payload.restaurants,
+        },
       });
     case "SET_LOGGEDOUT":
       return (state = {
         ...state,
         loggedIn: false,
-        username: "",
+        userData: {
           jwt: "",
-        userEmail: "",
+          firstname: "",
+          lastname: "",
           userId: "",
+          userEmail: "",
+          billing: {
+            NIP: "",
+            adress: "",
+            companyName: "",
+          },
+          restaurants: [],
+        },
       });
     case "DIALOG_REGISTER_CIRCLE_SHOW":
       return (state = {

src/styles/NewRestaurant.scss

@@ -26,7 +26,7 @@
   align-items: center;
   justify-content: center;
   font-size: 0.8rem;
-  background-size: contain;
+  background-size: cover;
   background-position: center;
 }