web client v 0.1

2020-09-17 19:01:01 +02:00
parent 2b378fab25
commit 1c9d9e2021
20 changed files with 794 additions and 208 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -4010,6 +4010,14 @@
      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg=="
    },
+    "connected-react-router": {
+      "version": "6.8.0",
+      "resolved": "https://registry.npmjs.org/connected-react-router/-/connected-react-router-6.8.0.tgz",
+      "integrity": "sha512-E64/6krdJM3Ag3MMmh2nKPtMbH15s3JQDuaYJvOVXzu6MbHbDyIvuwLOyhQIuP4Om9zqEfZYiVyflROibSsONg==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
    "console-browserify": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
@@ -6676,6 +6684,19 @@
      "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
    },
+    "history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
+      }
+    },
    "hmac-drbg": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -8804,6 +8825,15 @@
      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
    },
+    "mini-create-react-context": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz",
+      "integrity": "sha512-b0TytUgFSbgFJGzJqXPKCFCBWigAjpjo+Fl7Vf7ZbKRDptszpppKxXH6DRXEABZ/gcEQczeb0iZ7JvL8e8jjCA==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "tiny-warning": "^1.0.3"
+      }
+    },
    "mini-css-extract-plugin": {
      "version": "0.9.0",
      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
@@ -11357,6 +11387,52 @@
        "react-is": "^16.9.0"
      }
    },
+    "react-router": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
+      "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "mini-create-react-context": "^0.4.0",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "path-to-regexp": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+          "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
+    "react-router-dom": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
+      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.2.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
    "react-scripts": {
      "version": "3.4.3",
      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.3.tgz",
@@ -11752,6 +11828,11 @@
      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
      "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
    },
+    "resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
    "resolve-url": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -13275,6 +13356,11 @@
      "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
      "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
    },
+    "tiny-invariant": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+    },
    "tiny-warning": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
@@ -13669,6 +13755,11 @@
      "resolved": "https://registry.npmjs.org/validator/-/validator-13.1.1.tgz",
      "integrity": "sha512-8GfPiwzzRoWTg7OV1zva1KvrSemuMkv07MA9TTl91hfhe+wKrsrgVN4H2QSFd/U/FhiU3iWPYVgvbsOGwhyFWw=="
    },
+    "value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
    "vary": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
--- a/package.json
+++ b/package.json
@@ -11,11 +11,13 @@
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
+    "connected-react-router": "^6.8.0",
    "node-sass": "^4.14.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-ga": "^3.1.2",
    "react-redux": "^7.2.0",
+    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.3",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,5 @@
 import React from "react";
+import { Router, Switch, Route } from "react-router-dom";
 import "./App.scss";
 import TopBar from "./components/TopBar";
 import LogoMain from "./components/Output/logoMain";
@@ -8,7 +9,11 @@ import SearchResults from "./components/Output/SearchResults";
 import Restaurant from "./components/Output/Restaurant";
 import Dialogs from "./components/Dialogs";
 import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
-import { useSelector } from "react-redux";
+import LoginDialog from "./components/Dialogs/LoginDialog";
+import NewRestaurant from "./components/Dialogs/NewRestaurant";
+import RegisterDialog from "./components/Dialogs/RegisterDialog";
+import ForgotPassword from "./components/Dialogs/ForgotPassword";
+import ResetPassword from "./components/Dialogs/ResetPassword";

 const theme = createMuiTheme({
  palette: {
@@ -24,30 +29,54 @@ const theme = createMuiTheme({
  },
 });

-function App() {
-  const appMode = useSelector((store) => store.appMode);
-
+function App(props) {
  return (
-    <ThemeProvider theme={theme}>
-      <div className="App">
-        <TopBar />
-        <div className="main-container">
-          <LogoMain />
-          {(appMode === "init" || appMode === "search results") && (
-            <SearchPanel />
-          )}
-          {appMode === "init" && (
-            <p className="darkParagraph">
-              Sprawdź co serwuje Twoja ulubiona restauracja.
-            </p>
-          )}
-          {appMode === "search results" && <SearchResults />}
-          {appMode === "restaurant" && <Restaurant />}
+    <Router history={props.history}>
+      <ThemeProvider theme={theme}>
+        <div className="App">
+          <TopBar />
+          <div className="main-container">
+            <Switch>
+              <Route exact path="/">
+                <LogoMain />
+                <SearchPanel />
+                <p className="darkParagraph">
+                  Sprawdź co serwuje Twoja ulubiona restauracja.
+                </p>
+              </Route>
+              <Route path="/results">
+                <LogoMain />
+                <SearchPanel />
+                <SearchResults />
+              </Route>
+              <Route path="/restaurant">
+                <Restaurant />
+              </Route>
+              <Route path="/dish">
+                <LogoMain />
+              </Route>
+              <Route path="/login">
+                <LoginDialog />
+              </Route>
+              <Route path="/register">
+                <RegisterDialog />
+              </Route>
+              <Route path="/newRestaurant">
+                <NewRestaurant />
+              </Route>
+              <Route path="/forgotpassword">
+                <ForgotPassword />
+              </Route>
+              <Route path="/resetpassword">
+                <ResetPassword />
+              </Route>
+            </Switch>
+          </div>
+          <Dialogs />
+          <Footer />
        </div>
-        <Dialogs />
-        <Footer />
-      </div>
-    </ThemeProvider>
+      </ThemeProvider>
+    </Router>
  );
 }

--- a/src/App.test.js
+++ b/src/App.test.js
@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -1,5 +1,7 @@
 import axios from "axios";
 import * as toggles from "./toggles";
+import { push } from "connected-react-router";
+
 const backend = "http://localhost:4000/";

 const autocomplete = (input) => {
@@ -23,7 +25,6 @@ export const fetchAutocomplete = (input) => {
        const cities = Array.from(response.data.cities);
        const restaurants = Array.from(response.data.restaurants);
        const options = cities.concat(restaurants);
-
        dispatch(autocomplete(options));
      })
      .catch((err) => {
@@ -40,7 +41,7 @@ export const fetchSearch = (input) => {
        const data = response.data;
        if (Object.keys(data).length > 0) {
          dispatch(setSearchResults(data));
-          dispatch(setAppMode("APP_SEARCH_RESULTS"));
+          dispatch(push("/results"));
        }
      })
      .catch((err) => {
@@ -63,12 +64,6 @@ export const setSearchQuery = (input) => {
  };
 };

-export const setAppMode = (mode) => {
-  return {
-    type: mode,
-  };
-};
-
 export const setRestaurant = (restaurant) => {
  return {
    type: "SET_RESTAURANT",
@@ -83,7 +78,7 @@ export const fetchRestaurant = (id) => {
      .then((response) => {
        dispatch(setRestaurant(response.data));
        dispatch(toggles.hideDishes());
-        dispatch(setAppMode("APP_RESTAURANT"));
+        dispatch(push("/restaurant"));
        dispatch(fetchAllDishes(id));
      })
      .catch((err) => console.log(err));
@@ -112,11 +107,11 @@ export const tryLogin = (username, password) => {
  const data = { email: username, password: password };

  return function (dispatch) {
+    dispatch(toggles.setLoginResult(""));
    axios
      .post(backend + "user/login", data)
      .then((response) => {
        const jwt = response.headers["x-auth-token"];
-        console.log(response.headers);
        dispatch(
          toggles.setLoggedIn(
            response.data.firstname,
@@ -125,7 +120,7 @@ export const tryLogin = (username, password) => {
            response.data.email
          )
        );
-        dispatch(toggles.hideLoginDialog());
+        dispatch(push("/"));
      })
      .catch((err) => {
        if (err.response.status === 404) {
@@ -143,6 +138,46 @@ export const tryLogin = (username, password) => {
  };
 };

+export const remindPassword = (email) => {
+  return function (dispatch) {
+    const data = { email: email };
+    dispatch(toggles.setReminderResult(""));
+    dispatch(toggles.showReminderCircle());
+    axios
+      .post(backend + "user/forgotpassword", data)
+      .then((response) => {
+        dispatch(toggles.hideReminderCircle());
+        dispatch(toggles.setReminderResult(response.data));
+      })
+      .catch((e) => {
+        dispatch(toggles.hideReminderCircle());
+        dispatch(toggles.setReminderResult(e.response.data));
+      });
+  };
+};
+
+export const changePassword = (email, password, token) => {
+  return function (dispatch) {
+    const data = {
+      token: token,
+      email: email,
+      newPass: password,
+    };
+    dispatch(toggles.setResetResult(""));
+    dispatch(toggles.showResetCircle());
+    axios
+      .post(backend + "user/resetpass", data)
+      .then((response) => {
+        dispatch(toggles.hideResetCircle());
+        dispatch(toggles.setResetResult(response.data));
+      })
+      .catch((e) => {
+        dispatch(toggles.hideResetCircle());
+        dispatch(toggles.setResetResult(e.response.data));
+      });
+  };
+};
+
 export const logout = () => {
  return function (dispatch) {
    dispatch(toggles.setLoggedOut());
@@ -151,6 +186,7 @@ export const logout = () => {

 export const tryRegister = (data) => {
  return function (dispatch) {
+    dispatch(toggles.setRegisterResult(""));
    dispatch(toggles.showRegisterCircle());
    axios
      .post(backend + "user/register", data)
--- a/src/actions/toggles.js
+++ b/src/actions/toggles.js
@@ -10,18 +10,6 @@ export const hideDishes = () => {
  };
 };

-export const showLoginDialog = () => {
-  return {
-    type: "DIALOG_LOGIN_VISIBLE",
-  };
-};
-
-export const hideLoginDialog = () => {
-  return {
-    type: "DIALOG_LOGIN_HIDDEN",
-  };
-};
-
 export const setLoggedIn = (username, jwt, id, email) => {
  return {
    type: "SET_LOGGEDIN",
@@ -35,30 +23,6 @@ export const setLoggedOut = () => {
  };
 };

-export const showRegisterDialog = () => {
-  return {
-    type: "DIALOG_REGISTER_VISIBLE",
-  };
-};
-
-export const hideRegisterDialog = () => {
-  return {
-    type: "DIALOG_REGISTER_HIDDEN",
-  };
-};
-
-export const showRegulaminDialog = () => {
-  return {
-    type: "DIALOG_REGULAMIN_VISIBLE",
-  };
-};
-
-export const hideRegulaminDialog = () => {
-  return {
-    type: "DIALOG_REGULAMIN_HIDDEN",
-  };
-};
-
 export const showRegisterCircle = () => {
  return {
    type: "DIALOG_REGISTER_CIRCLE_SHOW",
@@ -91,14 +55,52 @@ export const setLoginResult = (text) => {
  };
 };

-export const hideNewRestaurantDialog = () => {
+export const setReminderResult = (text) => {
  return {
-    type: "DIALOG_NEWRESTAURANT_HIDE",
+    type: "DIALOG_REMINDER_SET_RESULT",
+    payload: text,
  };
 };

-export const showNewRestaurantDialog = () => {
+export const setResetResult = (text) => {
  return {
-    type: "DIALOG_NEWRESTAURANT_SHOW",
+    type: "DIALOG_RESET_SET_RESULT",
+    payload: text,
+  };
+};
+
+export const hideRegulamin = () => {
+  return {
+    type: "DIALOG_REGULAMIN_HIDE",
+  };
+};
+
+export const showRegulamin = () => {
+  return {
+    type: "DIALOG_REGULAMIN_SHOW",
+  };
+};
+
+export const showReminderCircle = () => {
+  return {
+    type: "DIALOG_REMINDER_CIRCLE_SHOW",
+  };
+};
+
+export const hideReminderCircle = () => {
+  return {
+    type: "DIALOG_REMINDER_CIRCLE_HIDE",
+  };
+};
+
+export const showResetCircle = () => {
+  return {
+    type: "DIALOG_RESET_CIRCLE_SHOW",
+  };
+};
+
+export const hideResetCircle = () => {
+  return {
+    type: "DIALOG_RESET_CIRCLE_HIDE",
  };
 };
--- a/src/components/Dialogs.js
+++ b/src/components/Dialogs.js
@@ -1,16 +1,10 @@
 import React from "react";
-import LoginDialog from "./Dialogs/LoginDialog";
-import RegisterDialog from "./Dialogs/RegisterDialog";
 import RegulaminDialog from "./Dialogs/RegulaminDialog";
-import NewRestaurant from "./Dialogs/NewRestaurant";

 export default function (props) {
  return (
    <div>
-      <LoginDialog />
-      <RegisterDialog />
      <RegulaminDialog />
-      <NewRestaurant />
    </div>
  );
 }
--- a/src/components/Dialogs/ForgotPassword.js
+++ b/src/components/Dialogs/ForgotPassword.js
@@ -0,0 +1,154 @@
+import React, { useState } from "react";
+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 TextField from "@material-ui/core/TextField";
+import CloseIcon from "@material-ui/icons/Close";
+import { useSelector, useDispatch } from "react-redux";
+import Link from "@material-ui/core/Link";
+import validator from "validator";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import AccountCircle from "@material-ui/icons/AccountCircle";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import { remindPassword } from "../../actions";
+import { useHistory } from "react-router-dom";
+import { setReminderResult } from "../../actions/toggles";
+
+export default function ForgotPassword(props) {
+  const initialData = {
+    email: "",
+    emailError: false,
+  };
+  const [data, setData] = useState(initialData);
+  const reminderResult = useSelector(
+    (state) => state.data.dialogs.reminderResult
+  );
+  const reminderCircle = useSelector(
+    (state) => state.data.dialogs.reminderCircularProgress
+  );
+  const dispatch = useDispatch();
+  const history = useHistory();
+
+  const loginStyles = makeStyles((theme) => ({
+    root: {
+      textAlign: "center",
+      "& .MuiPaper-root": {
+        backgroundColor: "#262626",
+        color: "#bbbbbb",
+      },
+    },
+    closeButton: {
+      color: "#bbbbbb",
+      position: "absolute",
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+    },
+    textInput: {
+      marginTop: "20px",
+      marginBottom: "10px",
+      width: "90%",
+      "& .MuiInputBase-root": {
+        color: "#01c3a9",
+      },
+      "& .MuiInputLabel-root": {
+        color: "#bbbbbb",
+      },
+    },
+    link: {
+      fontSize: "0.9rem",
+    },
+  }));
+
+  const loginClass = loginStyles();
+
+  const validateLogin = () => {
+    var valid;
+    var validation = {
+      email: validator.isEmail(data.email),
+    };
+    setData({
+      ...data,
+      emailError: !validation.email,
+    });
+    valid = validation.email;
+    return valid;
+  };
+
+  const handleRemind = () => {
+    if (validateLogin()) {
+      dispatch(remindPassword(data.email));
+    } else {
+      dispatch(setReminderResult("Podaj poprawne dane."));
+    }
+  };
+
+  // CODE
+
+  return (
+    <div>
+      <Dialog
+        className={loginClass.root}
+        onClose={() => history.push("/")}
+        open={true}
+        aria-labelledby="login-title"
+      >
+        <DialogTitle id="login-title">Odzyskiwanie hasła</DialogTitle>
+        <IconButton
+          className={loginClass.closeButton}
+          onClick={() => history.push("/")}
+          aria-label="close"
+        >
+          <CloseIcon />
+        </IconButton>
+        <Divider />
+        <DialogContent>
+          <p>
+            Podaj adres email do swojego konta. Link do zmiany hasła powinien
+            dotrzeć do Ciebie w ciągu maksymalnie 15 minut (sprawdź również
+            folder SPAM). Jeśli nie pamiętasz również adresu email, skontaktuj
+            się z obsługą klienta.
+          </p>
+          <TextField
+            className={loginClass.textInput}
+            required
+            id="email"
+            label="Email"
+            type="email"
+            variant="outlined"
+            error={data.emailError}
+            onChange={(event) => (data.email = event.target.value)}
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <AccountCircle color="primary" />
+                </InputAdornment>
+              ),
+            }}
+          />
+          <p>
+            {reminderResult}
+            <span>{reminderCircle && <CircularProgress />}</span>
+          </p>
+          <div className="login-dialog-buttons">
+            <ButtonSecondary
+              onClick={() => handleRemind()}
+              text="Wyślij email"
+            />
+          </div>
+          <p>
+            Nie masz konta?{" "}
+            <span>
+              <Link href="#" onClick={() => history.push("/register")}>
+                Zarejestruj się.
+              </Link>
+            </span>
+          </p>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
--- a/src/components/Dialogs/LoginDialog.js
+++ b/src/components/Dialogs/LoginDialog.js
@@ -9,17 +9,14 @@ import IconButton from "@material-ui/core/IconButton";
 import TextField from "@material-ui/core/TextField";
 import CloseIcon from "@material-ui/icons/Close";
 import { useSelector, useDispatch } from "react-redux";
-import {
-  hideLoginDialog,
-  showRegisterDialog,
-  setLoginResult,
-} from "../../actions/toggles";
+import { setLoginResult } from "../../actions/toggles";
 import Link from "@material-ui/core/Link";
 import LockIcon from "@material-ui/icons/Lock";
 import validator from "validator";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import AccountCircle from "@material-ui/icons/AccountCircle";
 import { tryLogin } from "../../actions";
+import { useHistory } from "react-router-dom";

 export default function LoginDialog(props) {
  const initialData = {
@@ -29,9 +26,9 @@ export default function LoginDialog(props) {
    passwordError: false,
  };
  const [loginData, setLoginData] = useState(initialData);
-  const loginDialog = useSelector((state) => state.data.dialogs.logIn);
  const loginResult = useSelector((state) => state.data.dialogs.loginResult);
  const dispatch = useDispatch();
+  const history = useHistory();

  const loginStyles = makeStyles((theme) => ({
    root: {
@@ -63,11 +60,6 @@ export default function LoginDialog(props) {
    },
  }));

-  const handleRegisterClick = () => {
-    dispatch(hideLoginDialog());
-    dispatch(showRegisterDialog());
-  };
-
  const loginClass = loginStyles();

  const validateLogin = () => {
@@ -100,14 +92,14 @@ export default function LoginDialog(props) {
    <div>
      <Dialog
        className={loginClass.root}
-        onClose={() => dispatch(hideLoginDialog())}
-        open={loginDialog}
+        onClose={() => history.push("/")}
+        open={true}
        aria-labelledby="login-title"
      >
        <DialogTitle id="login-title">Logowanie</DialogTitle>
        <IconButton
          className={loginClass.closeButton}
-          onClick={() => dispatch(hideLoginDialog())}
+          onClick={() => history.push("/")}
          aria-label="close"
        >
          <CloseIcon />
@@ -155,14 +147,14 @@ export default function LoginDialog(props) {
          <Link
            className={loginClass.link}
            href="#"
-            onClick={() => handleRegisterClick()}
+            onClick={() => history.push("/forgotpassword")}
          >
            Nie pamiętam hasła.
          </Link>
          <p>
            Nie masz konta?{" "}
            <span>
-              <Link href="#" onClick={() => handleRegisterClick()}>
+              <Link href="#" onClick={() => history.push("/register")}>
                Zarejestruj się.
              </Link>
            </span>
--- a/src/components/Dialogs/NewRestaurant.js
+++ b/src/components/Dialogs/NewRestaurant.js
@@ -8,8 +8,6 @@ import ButtonSecondary from "../Input/ButtonSecondary";
 import IconButton from "@material-ui/core/IconButton";
 import TextField from "@material-ui/core/TextField";
 import CloseIcon from "@material-ui/icons/Close";
-import { useSelector, useDispatch } from "react-redux";
-import { hideNewRestaurantDialog } from "../../actions/toggles";
 import Stepper from "@material-ui/core/Stepper";
 import Step from "@material-ui/core/Step";
 import StepLabel from "@material-ui/core/StepLabel";
@@ -18,6 +16,7 @@ import Autocomplete from "@material-ui/lab/Autocomplete";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import ImageUpload from "../Input/ImageUpload";
 import validator from "validator";
+import { useHistory } from "react-router-dom";
 // ICONS
 import FastfoodIcon from "@material-ui/icons/Fastfood";
 import LocationCityIcon from "@material-ui/icons/LocationCity";
@@ -62,6 +61,9 @@ const useStyles = makeStyles((theme) => ({
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
    },
+    "$ .MuiFormHelperText-root": {
+      color: "#bbbbbb",
+    },
  },
  timePicker: {
    margin: theme.spacing(2),
@@ -98,13 +100,13 @@ export default function NewRestaurant() {
    nameError: false,
    cityError: false,
    adressError: false,
+    descriptionError: false,
+    charLeft: 400,
  };
  const steps = ["Informacje", "Zdjęcie", "Lokalizacja"];
  const [state, setState] = useState(initialState);
  const [activeStep, setActiveStep] = React.useState(0);
  const styles = useStyles();
-  const dialogOpen = useSelector((state) => state.data.dialogs.newRestaurant);
-  const dispatch = useDispatch();
  const availableTags = [
    "Płatność kartą",
    "Lubimy zwierzaki",
@@ -114,6 +116,7 @@ export default function NewRestaurant() {
    "Podajemy alkohol",
    "Dowozimy",
  ];
+  const history = useHistory();

  // HANDLERS

@@ -125,9 +128,14 @@ export default function NewRestaurant() {
    }
  };

+  const handleDescriptionChange = (event) => {
+    let stringLength = event.target.value.length;
+    let charleft = 400 - stringLength;
+    setState({ ...state, description: event.target.value, charLeft: charleft });
+  };
+
  const handlePreviousButton = () => {
    setActiveStep(activeStep - 1);
-    console.log(activeStep);
  };

  const validateForm = () => {
@@ -135,16 +143,24 @@ export default function NewRestaurant() {
      nameValid: validator.isLength(state.name, { min: 1, max: 40 }),
      cityValid: validator.isLength(state.city, { min: 1, max: 40 }),
      adressValid: validator.isLength(state.name, { min: 1, max: 40 }),
+      descriptionValid: validator.isLength(state.description, {
+        min: 1,
+        max: 400,
+      }),
    };
    setState({
      ...state,
      nameError: !validation.nameValid,
      cityError: !validation.cityValid,
      adressError: !validation.adressValid,
+      descriptionError: !validation.descriptionValid,
    });

    return (
-      validation.nameValid && validation.cityValid && validation.adressValid
+      validation.nameValid &&
+      validation.cityValid &&
+      validation.adressValid &&
+      validation.descriptionValid
    );
  };

@@ -154,13 +170,13 @@ export default function NewRestaurant() {
    <div>
      <Dialog
        className={styles.root}
-        open={dialogOpen}
+        open={true}
        aria-labelledby="newRestaurant-title"
      >
        <DialogTitle id="newRestaurant-title">Dodaj Lokal</DialogTitle>
        <IconButton
          className={styles.closeButton}
-          onClick={() => dispatch(hideNewRestaurantDialog())}
+          onClick={() => history.goBack()}
          aria-label="close"
        >
          <CloseIcon />
@@ -273,12 +289,17 @@ export default function NewRestaurant() {
                    fullWidth
                    label="Opis"
                    value={state.description}
-                    onChange={(event) =>
-                      setState({ ...state, description: event.target.value })
-                    }
+                    onChange={(event) => handleDescriptionChange(event)}
                    multiline
+                    error={state.descriptionError}
                    rows={3}
+                    rowsMax={8}
                    variant="outlined"
+                    helperText={"Pozostałe znaki: " + state.charLeft}
+                    FormHelperTextProps={{
+                      style: { color: "#bbbbbb" },
+                    }}
+                    required
                  />
                  <Autocomplete
                    multiple
--- a/src/components/Dialogs/RegisterDialog.js
+++ b/src/components/Dialogs/RegisterDialog.js
@@ -9,20 +9,17 @@ import IconButton from "@material-ui/core/IconButton";
 import TextField from "@material-ui/core/TextField";
 import CloseIcon from "@material-ui/icons/Close";
 import { useSelector, useDispatch } from "react-redux";
-import {
-  hideRegisterDialog,
-  showRegulaminDialog,
-  setRegisterResult,
-  showLoginDialog,
-} from "../../actions/toggles";
+import { setRegisterResult, showRegulamin } from "../../actions/toggles";
 import { tryRegister } from "../../actions";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import AccountCircle from "@material-ui/icons/AccountCircle";
+import BusinessIcon from "@material-ui/icons/Business";
 import EmailIcon from "@material-ui/icons/Email";
 import LockIcon from "@material-ui/icons/Lock";
 import Link from "@material-ui/core/Link";
 import validator from "validator";
 import CircularProgress from "@material-ui/core/CircularProgress";
+import { useHistory } from "react-router-dom";

 export default function RegisterDialog(props) {
  // SETUP
@@ -30,17 +27,22 @@ export default function RegisterDialog(props) {
  const initialFormData = {
    firstname: "",
    lastname: "",
+    companyName: "",
+    adress: "",
+    NIP: "",
    email: "",
    password: "",
    repeatPassword: "",
    firstnameError: false,
    lastnameError: false,
+    companyNameError: false,
+    adressError: false,
+    NIPError: false,
    emailError: false,
    passwordError: false,
    repeatPasswordError: false,
  };
  const [formData, setFormData] = useState(initialFormData);
-  var registerDialog = useSelector((state) => state.data.dialogs.register);
  var circularProgress = useSelector(
    (state) => state.data.dialogs.registerCircularProgress
  );
@@ -49,6 +51,7 @@ export default function RegisterDialog(props) {
    (state) => state.data.dialogs.registerResult
  );
  const dispatch = useDispatch();
+  const history = useHistory();

  // STYLES

@@ -88,7 +91,7 @@ export default function RegisterDialog(props) {

  const handleRegulaminClick = (event) => {
    event.preventDefault();
-    dispatch(showRegulaminDialog());
+    dispatch(showRegulamin());
  };

  const validateForm = () => {
@@ -96,6 +99,9 @@ export default function RegisterDialog(props) {
    const validations = {
      firstname: !validator.isEmpty(formData.firstname),
      lastname: !validator.isEmpty(formData.lastname),
+      companyName: !validator.isEmpty(formData.companyName),
+      adress: !validator.isEmpty(formData.adress),
+      NIP: !validator.isEmpty(formData.NIP),
      email: validator.isEmail(formData.email),
      password: validator.isLength(formData.password, {
        min: 8,
@@ -108,6 +114,9 @@ export default function RegisterDialog(props) {
      ...formData,
      firstnameError: !validations.firstname,
      lastnameError: !validations.lastname,
+      companyNameError: !validations.companyName,
+      adressError: !validations.adress,
+      NIPError: !validations.NIP,
      emailError: !validations.email,
      passwordError: !validations.password,
      repeatPasswordError: !validations.repeatPassword,
@@ -117,7 +126,10 @@ export default function RegisterDialog(props) {
      validations.lastname &&
      validations.email &&
      validations.password &&
-      validations.repeatPassword;
+      validations.repeatPassword &&
+      validations.companyName &&
+      validations.adress &&
+      validations.NIP;

    return valid;
  };
@@ -126,29 +138,24 @@ export default function RegisterDialog(props) {
    if (validateForm()) {
      dispatch(tryRegister(form));
    } else {
-      dispatch(setRegisterResult("Proszę poprawić poprawić formularz."));
+      dispatch(setRegisterResult("Proszę poprawić formularz."));
    }
  };

-  const openLogin = () => {
-    dispatch(hideRegisterDialog());
-    dispatch(showLoginDialog());
-  };
-
  // CODE

  return (
    <div>
      <Dialog
        className={loginClass.root}
-        onClose={() => dispatch(hideRegisterDialog())}
-        open={registerDialog}
+        onClose={() => history.goBack()}
+        open={true}
        aria-labelledby="login-title"
      >
        <DialogTitle id="login-title">Rejestracja</DialogTitle>
        <IconButton
          className={loginClass.closeButton}
-          onClick={() => dispatch(hideRegisterDialog())}
+          onClick={() => history.goBack()}
          aria-label="close"
        >
          <CloseIcon />
@@ -191,6 +198,59 @@ export default function RegisterDialog(props) {
                error={formData.lastnameError}
                onChange={(event) => (formData.lastname = event.target.value)}
              />
+              <TextField
+                className={loginClass.textInput}
+                required
+                id="companyName"
+                label="Nazwa firmy"
+                type="name"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <BusinessIcon color="primary" />
+                    </InputAdornment>
+                  ),
+                }}
+                error={formData.companyNameError}
+                onChange={(event) =>
+                  (formData.companyName = event.target.value)
+                }
+              />
+              <TextField
+                className={loginClass.textInput}
+                required
+                id="adress"
+                label="Adres firmy"
+                type="name"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <BusinessIcon color="primary" />
+                    </InputAdornment>
+                  ),
+                }}
+                error={formData.adressError}
+                onChange={(event) => (formData.adress = event.target.value)}
+              />
+              <TextField
+                className={loginClass.textInput}
+                required
+                id="NIP"
+                label="NIP"
+                type="name"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <BusinessIcon color="primary" />
+                    </InputAdornment>
+                  ),
+                }}
+                error={formData.NIPError}
+                onChange={(event) => (formData.NIP = event.target.value)}
+              />
              <TextField
                className={loginClass.textInput}
                required
@@ -270,7 +330,10 @@ export default function RegisterDialog(props) {
                  text="Zarejestruj"
                />
              ) : (
-                <ButtonSecondary onClick={() => openLogin()} text="Logowanie" />
+                <ButtonSecondary
+                  onClick={() => history.push("/login")}
+                  text="Logowanie"
+                />
              )}
            </div>
          </div>
--- a/src/components/Dialogs/RegulaminDialog.js
+++ b/src/components/Dialogs/RegulaminDialog.js
@@ -7,13 +7,13 @@ import Divider from "@material-ui/core/Divider";
 import IconButton from "@material-ui/core/IconButton";
 import CloseIcon from "@material-ui/icons/Close";
 import Paper from "@material-ui/core/Paper";
-import { useSelector, useDispatch } from "react-redux";
-import { hideRegulaminDialog } from "../../actions/toggles";
 import Regulamin from "./Regulamin";
+import { useSelector, useDispatch } from "react-redux";
+import { hideRegulamin } from "../../actions/toggles";

 export default function RegulaminDialog(props) {
-  var regulaminDialog = useSelector((state) => state.data.dialogs.regulamin);
  const dispatch = useDispatch();
+  const open = useSelector((state) => state.data.dialogs.regulamin);

  const loginStyles = makeStyles((theme) => ({
    root: {
@@ -47,14 +47,14 @@ export default function RegulaminDialog(props) {
    <div>
      <Dialog
        className={styles.root}
-        open={regulaminDialog}
-        onClose={() => dispatch(hideRegulaminDialog())}
+        open={open}
+        onClose={() => dispatch(hideRegulamin())}
        aria-labelledby="regulamin-title"
      >
        <DialogTitle id="regulamin-title">Regulamin</DialogTitle>
        <IconButton
          className={styles.closeButton}
-          onClick={() => dispatch(hideRegulaminDialog())}
+          onClick={() => dispatch(hideRegulamin())}
          aria-label="close"
        >
          <CloseIcon />
--- a/src/components/Dialogs/ResetPassword.js
+++ b/src/components/Dialogs/ResetPassword.js
@@ -0,0 +1,184 @@
+import React, { useState } from "react";
+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 TextField from "@material-ui/core/TextField";
+import CloseIcon from "@material-ui/icons/Close";
+import { useSelector, useDispatch } from "react-redux";
+import validator from "validator";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import AccountCircle from "@material-ui/icons/AccountCircle";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import { useHistory, useLocation } from "react-router-dom";
+import { changePassword } from "../../actions/index";
+import { setResetResult } from "../../actions/toggles";
+
+function useQuery() {
+  return new URLSearchParams(useLocation().search);
+}
+
+export default function ResetPassword(props) {
+  const initialData = {
+    email: "",
+    emailError: false,
+    password: "",
+    passwordError: false,
+    passwordRepeat: "",
+    passwordRepeatError: false,
+  };
+  const [data, setData] = useState(initialData);
+  const resetResult = useSelector((state) => state.data.dialogs.resetResult);
+  const resetCircle = useSelector(
+    (state) => state.data.dialogs.resetCircularProgress
+  );
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const query = useQuery();
+  const token = query.get("token");
+
+  const loginStyles = makeStyles((theme) => ({
+    root: {
+      textAlign: "center",
+      "& .MuiPaper-root": {
+        backgroundColor: "#262626",
+        color: "#bbbbbb",
+      },
+    },
+    closeButton: {
+      color: "#bbbbbb",
+      position: "absolute",
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+    },
+    textInput: {
+      marginTop: "20px",
+      marginBottom: "10px",
+      width: "90%",
+      "& .MuiInputBase-root": {
+        color: "#01c3a9",
+      },
+      "& .MuiInputLabel-root": {
+        color: "#bbbbbb",
+      },
+    },
+    link: {
+      fontSize: "0.9rem",
+    },
+  }));
+
+  const loginClass = loginStyles();
+
+  const validateLogin = () => {
+    var valid;
+    var validation = {
+      email: validator.isEmail(data.email),
+      password: validator.isLength(data.password, { min: 6 }),
+      passwordRepeat: data.passwordRepeat === data.password,
+    };
+    setData({
+      ...data,
+      emailError: !validation.email,
+      passwordError: !validation.password,
+      passwordRepeatError: !validation.passwordRepeat,
+    });
+    valid =
+      validation.password && validation.passwordRepeat && validation.email;
+    return valid;
+  };
+
+  const handleReset = () => {
+    if (validateLogin()) {
+      dispatch(changePassword(data.email, data.password, token));
+    } else {
+      dispatch(setResetResult("Popraw dane."));
+    }
+  };
+
+  // CODE
+
+  return (
+    <div>
+      <Dialog
+        className={loginClass.root}
+        onClose={() => history.push("/")}
+        open={true}
+        aria-labelledby="login-title"
+      >
+        <DialogTitle id="login-title">Ustaw nowe hasło</DialogTitle>
+        <IconButton
+          className={loginClass.closeButton}
+          onClick={() => history.push("/")}
+          aria-label="close"
+        >
+          <CloseIcon />
+        </IconButton>
+        <Divider />
+        <DialogContent>
+          <p>Podaj nowe bezpieczne hasło do konta.</p>
+          <TextField
+            className={loginClass.textInput}
+            required
+            id="email"
+            label="Email"
+            type="email"
+            variant="outlined"
+            error={data.emailError}
+            onChange={(event) => (data.email = event.target.value)}
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <AccountCircle color="primary" />
+                </InputAdornment>
+              ),
+            }}
+          />
+          <TextField
+            className={loginClass.textInput}
+            required
+            id="password"
+            label="Nowe hasło"
+            type="password"
+            variant="outlined"
+            error={data.passwordError}
+            onChange={(event) => (data.password = event.target.value)}
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <AccountCircle color="primary" />
+                </InputAdornment>
+              ),
+            }}
+          />
+          <TextField
+            className={loginClass.textInput}
+            required
+            id="passwordRepeat"
+            label="Powtórz nowe hasło"
+            type="password"
+            variant="outlined"
+            error={data.passwordRepeatError}
+            onChange={(event) => (data.passwordRepeat = event.target.value)}
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <AccountCircle color="primary" />
+                </InputAdornment>
+              ),
+            }}
+          />
+          <div>
+            {resetCircle && <CircularProgress />}
+            <p>{resetResult}</p>
+          </div>
+          <div className="login-dialog-buttons">
+            <ButtonSecondary onClick={() => handleReset()} text="Zmień hasło" />
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
--- a/src/components/Input/ImageUpload.js
+++ b/src/components/Input/ImageUpload.js
@@ -1,8 +1,10 @@
 import React, { useState } from "react";
+import CircularProgress from "@material-ui/core/CircularProgress";
 import axios from "axios";

 export default function ImageUpload() {
  const [imagePreviewURL, setPreviewURL] = useState("");
+  let showCircle = false;

  const handleInputChange = (event) => {
    let data = new FormData();
@@ -31,7 +33,11 @@ export default function ImageUpload() {
    reader.readAsDataURL(event.target.files[0]);
  };

-  let imagePreview = <div className="image-preview">Proszę wybrać obraz.</div>;
+  let imagePreview = (
+    <div className="image-preview">
+      {showCircle ? <CircularProgress /> : "Proszę wybrać obraz."}
+    </div>
+  );
  if (imagePreviewURL) {
    imagePreview = (
      <div
--- a/src/components/Output/CardRestaurant.js
+++ b/src/components/Output/CardRestaurant.js
@@ -5,6 +5,7 @@ import { useDispatch } from "react-redux";

 function extractTags(tags) {
  var results = [];
+  if (!tags) return results;
  for (let [key, value] of Object.entries(tags)) {
    if (value === true) {
      results.push(key);
--- a/src/components/TopBar.js
+++ b/src/components/TopBar.js
@@ -5,7 +5,6 @@ import logo from "../public/logo_white.svg";
 import IconButton from "@material-ui/core/IconButton";
 import MenuIcon from "@material-ui/icons/Menu";
 import { useDispatch, useSelector } from "react-redux";
-import { setAppMode } from "../actions";
 import Drawer from "@material-ui/core/Drawer";
 import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
@@ -15,11 +14,11 @@ 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 { showLoginDialog, showRegisterDialog } from "../actions/toggles";
 import { logout } from "../actions";
 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";

 const useStyles = makeStyles((theme) => ({
  paper: {
@@ -40,30 +39,28 @@ export default function TopBar() {
  const classes = useStyles();
  const loggedIn = useSelector((state) => state.data.loggedIn);
  const username = useSelector((state) => state.data.username);
+  const history = useHistory();
  const dispatch = useDispatch();
-  const imgClick = () => {
-    dispatch(setAppMode("APP_INIT"));
-  };
  const handleClick = (button) => {
    setState((state.menuOpen = false));
    switch (button) {
      case "menui":
-        dispatch(setAppMode("APP_INIT"));
+        history.push("/");
        break;
      case "logIn":
-        dispatch(showLoginDialog());
+        history.push("/login");
        break;
      case "register":
-        dispatch(showRegisterDialog());
+        history.push("/register");
        break;
      case "logOut":
        dispatch(logout());
        break;
      case "myRestaurant":
-        dispatch(setAppMode("APP_RESTAURANT"));
+        history.push("/restaurant");
        break;
      case "addDish":
-        dispatch(setAppMode("APP_ADD_DISH"));
+        history.push("/");
        break;
      default:
        return true;
@@ -73,6 +70,9 @@ export default function TopBar() {
    menuOpen: false,
  });

+  const closeDrawer = () => {
+    setState({ menuOpen: false });
+  };
  const toggleDrawer = (open) => (event) => {
    if (
      event.type === "keydown" &&
@@ -91,7 +91,7 @@ export default function TopBar() {
          src={logo}
          className="topBarLogo"
          alt="Menui logo"
-          onClick={() => imgClick()}
+          onClick={() => history.push("/")}
        />
        <div className="vertical-divider"></div>
        <h5>Food guide</h5>
@@ -141,7 +141,9 @@ export default function TopBar() {
            <ListItemText primary="Cennik" />
          </ListItem>
          <Divider />
-          <ListItem>{loggedIn && <UserMenu />}</ListItem>
+          <ListItem>
+            {loggedIn && <UserMenu closeMenu={closeDrawer} />}
+          </ListItem>
        </List>
        <div className="drawer-bottom">
          <div className="drawer-buttons">
--- a/src/components/UserMenu.js
+++ b/src/components/UserMenu.js
@@ -11,6 +11,7 @@ import ExpandMore from "@material-ui/icons/ExpandMore";
 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";

 const useStyles = makeStyles((theme) => ({
  root: {
@@ -33,6 +34,11 @@ export default function UserMenu(props) {
  const handleClick = () => {
    setOpen(!open);
  };
+  const handleAddRestaurant = () => {
+    props.closeMenu();
+    history.push("/newRestaurant");
+  };
+  const history = useHistory();

  return (
    <List
@@ -58,7 +64,7 @@ export default function UserMenu(props) {
      </ListItem>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <List component="div" disablePadding>
-          <ListItem>
+          <ListItem button onClick={handleAddRestaurant}>
            <ListItemIcon>
              <AddIcon />
            </ListItemIcon>
--- a/src/index.js
+++ b/src/index.js
@@ -5,23 +5,30 @@ import { Provider } from "react-redux";
 import "./index.scss";
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
-import rootReducer from "./reducers";
 import thunk from "redux-thunk";
+import { createBrowserHistory } from "history";
 import { createStore, applyMiddleware, compose } from "redux";
+import { routerMiddleware, ConnectedRouter } from "connected-react-router";
+import rootReducer from "./reducers";
+
+const history = createBrowserHistory();

 ReactGA.initialize("G-SHB9LXPWWM");
 ReactGA.pageview("/");
+
 const store = createStore(
-  rootReducer,
+  rootReducer(history),
  compose(
-    applyMiddleware(thunk),
+    applyMiddleware(routerMiddleware(history), thunk),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
 );

 ReactDOM.render(
  <Provider store={store}>
-    <App />
+    <ConnectedRouter history={history}>
+      <App history={history} />
+    </ConnectedRouter>
  </Provider>,
  document.getElementById("root")
 );
--- a/src/reducers/data.js
+++ b/src/reducers/data.js
@@ -6,16 +6,15 @@ const initialState = {
  userId: "",
  userEmail: "",
  dialogs: {
-    logIn: false,
-    register: false,
-    newRestaurant: true,
-    contact: false,
-    pricing: false,
-    regulamin: false,
    registerCircularProgress: false,
    registerForm: true,
    registerResult: "",
    loginResult: "",
+    regulamin: false,
+    reminderResult: "",
+    reminderCircularProgress: false,
+    resetResult: "",
+    resetCircularProgress: false,
  },
  tempData: {},
 };
@@ -26,8 +25,6 @@ const data = (state = initialState, action) => {
      return (state = { ...state, showDishList: true });
    case "SET_DISHLIST_HIDDEN":
      return (state = { ...state, showDishList: false });
-    case "DIALOG_LOGIN_VISIBLE":
-      return (state = { ...state, dialogs: { ...state.dialogs, logIn: true } });
    case "SET_LOGGEDIN":
      return (state = {
        ...state,
@@ -46,36 +43,21 @@ const data = (state = initialState, action) => {
        userEmail: "",
        userId: "",
      });
-    case "DIALOG_LOGIN_HIDDEN":
-      return (state = {
-        ...state,
-        dialogs: { ...state.dialogs, logIn: false },
-      });
-    case "DIALOG_REGISTER_VISIBLE":
-      return (state = {
-        ...state,
-        dialogs: { ...state.dialogs, register: true },
-      });
-    case "DIALOG_REGISTER_HIDDEN":
-      return (state = {
-        ...state,
-        dialogs: { ...state.dialogs, register: false },
-      });
-    case "DIALOG_REGULAMIN_VISIBLE":
-      return (state = {
-        ...state,
-        dialogs: { ...state.dialogs, regulamin: true },
-      });
-    case "DIALOG_REGULAMIN_HIDDEN":
-      return (state = {
-        ...state,
-        dialogs: { ...state.dialogs, regulamin: false },
-      });
    case "DIALOG_REGISTER_CIRCLE_SHOW":
      return (state = {
        ...state,
        dialogs: { ...state.dialogs, registerCircularProgress: true },
      });
+    case "DIALOG_REGULAMIN_SHOW":
+      return (state = {
+        ...state,
+        dialogs: { ...state.dialogs, regulamin: true },
+      });
+    case "DIALOG_REGULAMIN_HIDE":
+      return (state = {
+        ...state,
+        dialogs: { ...state.dialogs, regulamin: false },
+      });
    case "DIALOG_REGISTER_CIRCLE_HIDE":
      return (state = {
        ...state,
@@ -91,20 +73,40 @@ const data = (state = initialState, action) => {
        ...state,
        dialogs: { ...state.dialogs, registerResult: action.payload },
      });
+    case "DIALOG_REMINDER_SET_RESULT":
+      return (state = {
+        ...state,
+        dialogs: { ...state.dialogs, reminderResult: action.payload },
+      });
+    case "DIALOG_REMINDER_CIRCLE_SHOW":
+      return (state = {
+        ...state,
+        dialogs: { ...state.dialogs, reminderCircularProgress: true },
+      });
+    case "DIALOG_REMINDER_CIRCLE_HIDE":
+      return (state = {
+        ...state,
+        dialogs: { ...state.dialogs, reminderCircularProgress: false },
+      });
+    case "DIALOG_RESET_CIRCLE_SHOW":
+      return (state = {
+        ...state,
+        dialogs: { ...state.dialogs, resetCircularProgress: true },
+      });
+    case "DIALOG_RESET_CIRCLE_HIDE":
+      return (state = {
+        ...state,
+        dialogs: { ...state.dialogs, resetCircularProgress: false },
+      });
    case "DIALOG_LOGIN_SET_RESULT":
      return (state = {
        ...state,
        dialogs: { ...state.dialogs, loginResult: action.payload },
      });
-    case "DIALOG_NEWRESTAURANT_HIDE":
+    case "DIALOG_RESET_SET_RESULT":
      return (state = {
        ...state,
-        dialogs: { ...state.dialogs, newRestaurant: false },
-      });
-    case "DIALOG_NEWRESTAURANT_SHOW":
-      return (state = {
-        ...state,
-        dialogs: { ...state.dialogs, newRestaurant: true },
+        dialogs: { ...state.dialogs, resetResult: action.payload },
      });
    case "SET_TEMP_DATA":
      return (state = { ...state, tempData: action.payload });
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,4 +1,5 @@
 import { combineReducers } from "redux";
+import { connectRouter } from "connected-react-router";
 import autoCompleteReducer from "./autoComplete";
 import searchResults from "./searchResults";
 import appMode from "./appMode";
@@ -7,14 +8,16 @@ import restaurant from "./restaurant";
 import dishes from "./dishes";
 import data from "./data";

-const rootReducer = combineReducers({
-  autocomplete: autoCompleteReducer,
-  appMode: appMode,
-  searchResults: searchResults,
-  searchQuery: searchQuery,
-  restaurant: restaurant,
-  dishes: dishes,
-  data: data,
-});
+const rootReducer = (history) =>
+  combineReducers({
+    router: connectRouter(history),
+    autocomplete: autoCompleteReducer,
+    appMode: appMode,
+    searchResults: searchResults,
+    searchQuery: searchQuery,
+    restaurant: restaurant,
+    dishes: dishes,
+    data: data,
+  });

 export default rootReducer;