diff --git a/client/package-lock.json b/client/package-lock.json
index 4742f8c..0ee8241 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -4393,7 +4393,8 @@
},
"ansi-regex": {
"version": "2.1.1",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"aproba": {
"version": "1.2.0",
@@ -4758,7 +4759,8 @@
},
"safe-buffer": {
"version": "5.1.1",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -4806,6 +4808,7 @@
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
+ "optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -4844,11 +4847,13 @@
},
"wrappy": {
"version": "1.0.2",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"yallist": {
"version": "3.0.2",
- "bundled": true
+ "bundled": true,
+ "optional": true
}
}
},
diff --git a/client/src/components/App.js b/client/src/components/App.js
index 19f268f..e8081f2 100644
--- a/client/src/components/App.js
+++ b/client/src/components/App.js
@@ -4,12 +4,18 @@ import { BrowserRouter as Router, Route } from 'react-router-dom';
import CssBaseline from '@material-ui/core/CssBaseline';
import Loadable from 'react-loadable';
+import Protected from './Protected';
+import OnlyUnauth from './OnlyUnauth';
import './Container.css';
import './App.css';
function Loading(props) {
if (props.error) {
- return Error!
;
+ return (
+
+ Error!
+
+ );
} else if (props.pastDelay) {
return Loading...
;
} else {
@@ -17,29 +23,37 @@ function Loading(props) {
}
}
-const LoadableTodosView = Loadable({
- loader: () => import('./todolist/TodosView'),
- loading: () => Loading,
- delay: 1000,
-});
+const LoadableTodosView = Protected(
+ Loadable({
+ loader: () => import('./todolist/TodosView'),
+ loading: () => Loading,
+ delay: 1000,
+ }),
+);
-const LoadableLoginForm = Loadable({
- loader: () => import('./user/LoginForm'),
- loading: () => Loading,
- delay: 1000,
-});
+const LoadableLoginForm = OnlyUnauth(
+ Loadable({
+ loader: () => import('./user/LoginForm'),
+ loading: () => Loading,
+ delay: 1000,
+ }),
+);
-const LoadableSignupForm = Loadable({
- loader: () => import('./user/SignupForm'),
- loading: () => Loading,
- delay: 1000,
-});
+const LoadableSignupForm = OnlyUnauth(
+ Loadable({
+ loader: () => import('./user/SignupForm'),
+ loading: () => Loading,
+ delay: 1000,
+ }),
+);
-const LoadableEditView = Loadable({
- loader: () => import('./user/EditForm'),
- loading: () => Loading,
- delay: 1000,
-});
+const LoadableEditView = Protected(
+ Loadable({
+ loader: () => import('./user/EditForm'),
+ loading: () => Loading,
+ delay: 1000,
+ }),
+);
export default class App extends React.PureComponent {
componentDidMount() {
diff --git a/client/src/components/OnlyUnauth.js b/client/src/components/OnlyUnauth.js
new file mode 100644
index 0000000..2bcc39a
--- /dev/null
+++ b/client/src/components/OnlyUnauth.js
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Redirect } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+export default function OnlyUnauth(WrappedComponent) {
+ function Component({ loggedIn }) {
+ return loggedIn ? : ;
+ }
+
+ Component.propTypes = {
+ loggedIn: PropTypes.bool.isRequired,
+ };
+
+ function mapStateToProps(state) {
+ return {
+ loggedIn: state.user.user !== undefined && state.user.user !== null,
+ };
+ }
+
+ return connect(
+ mapStateToProps,
+ null,
+ )(Component);
+}
diff --git a/client/src/components/Protected.js b/client/src/components/Protected.js
new file mode 100644
index 0000000..cb4e564
--- /dev/null
+++ b/client/src/components/Protected.js
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Redirect } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+export default function Protected(WrappedComponent) {
+ function Component({ loggedIn }) {
+ return loggedIn ? : ;
+ }
+
+ Component.propTypes = {
+ loggedIn: PropTypes.bool.isRequired,
+ };
+
+ function mapStateToProps(state) {
+ return {
+ loggedIn: state.user.user !== undefined && state.user.user !== null,
+ };
+ }
+
+ return connect(
+ mapStateToProps,
+ null,
+ )(Component);
+}
diff --git a/client/src/components/todolist/TodosView.js b/client/src/components/todolist/TodosView.js
index f5fd08c..fea4a59 100644
--- a/client/src/components/todolist/TodosView.js
+++ b/client/src/components/todolist/TodosView.js
@@ -11,23 +11,6 @@ import Header from '../Header';
import Filters from '../filters/Filters';
class Todos extends React.PureComponent {
- componentDidMount() {
- this.checkLogin();
- }
- componentDidUpdate() {
- this.checkLogin();
- }
-
- checkLogin() {
- const { user, history } = this.props;
- //If user isn't logged in
- //and isn't in progress of logging in
- //show login page
- if (!user.user && !user.dirty) {
- history.replace('/login');
- }
- }
-
render() {
const { list } = this.props;
return (
diff --git a/client/src/components/user/EditForm.js b/client/src/components/user/EditForm.js
index 8da0383..bb46c66 100644
--- a/client/src/components/user/EditForm.js
+++ b/client/src/components/user/EditForm.js
@@ -28,9 +28,6 @@ function EditForm({
history,
reset,
}) {
- if (!user.user) {
- history.push('/');
- }
if (user.user && user.editSuccess) {
reset();
history.push('/');
diff --git a/client/src/components/user/LoginForm.js b/client/src/components/user/LoginForm.js
index 509a3bb..908e174 100644
--- a/client/src/components/user/LoginForm.js
+++ b/client/src/components/user/LoginForm.js
@@ -1,7 +1,6 @@
import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
import { ButtonBase, Button } from '@material-ui/core';
@@ -22,13 +21,6 @@ class LoginForm extends React.PureComponent {
}
}
- componentDidUpdate() {
- const { user, history } = this.props;
- if (user.user) {
- history.push('/');
- }
- }
-
render() {
const { resetUser, history, handleSubmit, user, onLogin } = this.props;
return (
@@ -123,10 +115,8 @@ export default reduxForm({
password: '',
},
})(
- withRouter(
- connect(
- mapStateToProps,
- mapDispatchToProps,
- )(LoginForm),
- ),
+ connect(
+ mapStateToProps,
+ mapDispatchToProps,
+ )(LoginForm),
);
diff --git a/client/src/components/user/SignupForm.js b/client/src/components/user/SignupForm.js
index d7df38f..d3440da 100644
--- a/client/src/components/user/SignupForm.js
+++ b/client/src/components/user/SignupForm.js
@@ -1,7 +1,6 @@
import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
import { ButtonBase, Button } from '@material-ui/core';
@@ -21,9 +20,6 @@ function validate(values) {
}
function SignupForm({ handleSubmit, onSignup, user, history, resetUser }) {
- if (user.user) {
- history.push('/');
- }
return (