private routes and redirecting

src/App.js

@@ -12,7 +12,7 @@ import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 
 import Navbar from './components/Navbar';
 import Footer from './components/Footer';
-import Routes from './components/Routes';
+import Routes from './components/Route/Routes';
 import Cookies from './components/Cookies';
 
 const theme = createMuiTheme({

src/actions/authActions.js

@@ -57,11 +57,11 @@ export const login = ({ email, password }) => (dispatch) => {
       timeToLogout
     );
     logoutTimerId = logoutTimer();
-    dispatch(returnSuccess(res.data.message, res.status, 'LOGIN_SUCCESS'));
     dispatch({
       type: LOGIN_SUCCESS,
       payload: res.data
     });
+    dispatch(returnSuccess(res.data.message, res.status, 'LOGIN_SUCCESS'));
   })
   .catch(err => {
     console.log('hier');

src/components/Project/Project.js

@@ -6,6 +6,7 @@ import { getProject, resetProject } from '../../actions/projectActions';
 import { clearMessages, returnErrors } from '../../actions/messageActions';
 
 import axios from 'axios';
+import { withRouter } from 'react-router-dom';
 import { createNameId } from 'mnemonic-id';
 
 import Home from '../Home';
@@ -23,7 +24,8 @@ class Project extends Component {
   }
 
   componentDidUpdate(props) {
-    if(props.location.path !== this.props.location.path ||
+    console.log(this.props);
+    if(props.location.pathname !== this.props.location.pathname ||
        props.match.params[`${this.props.type}Id`] !== this.props.match.params[`${this.props.type}Id`]){
       if(this.props.message.msg){
         this.props.clearMessages();
@@ -55,8 +57,10 @@ class Project extends Component {
   }
 
   getProject = () => {
-    var param = this.props.match.params.shareId ? 'share' : this.props.match.params.galleryId ? 'gallery' : 'project';
-    var id = this.props.match.params[`${param}Id`];
+    var id = this.props.location.pathname.replace(/\/[a-z]{1,}\//,'');
+    var param = this.props.location.pathname.replace(`/${id}`,'').replace('/','');
+    console.log('param', param);
+    console.log(id);
     this.props.getProject(param, id);
   }
 
@@ -70,7 +74,7 @@ class Project extends Component {
       : this.props.project ?
         <div>
           {this.props.type !== 'share' ?
-            <Breadcrumbs content={[{ link: `/${this.props.type}`, title: data },{ link: this.props.location.path, title: this.props.project.title }]} />
+            <Breadcrumbs content={[{ link: `/${this.props.type}`, title: data },{ link: this.props.location.pathname, title: this.props.project.title }]} />
           : null}
           <Home project={this.props.project.xml}/>
         </div> : null
@@ -97,4 +101,4 @@ const mapStateToProps = state => ({
   message: state.message
 });
 
-export default connect(mapStateToProps, { workspaceName, getProject, resetProject, clearMessages, returnErrors })(Project);
+export default connect(mapStateToProps, { workspaceName, getProject, resetProject, clearMessages, returnErrors })(withRouter(Project));

src/components/Project/ProjectHome.js

@@ -5,7 +5,7 @@ import { getProjects, resetProject } from '../../actions/projectActions';
 import { clearMessages } from '../../actions/messageActions';
 
 import axios from 'axios';
-import { Link } from 'react-router-dom';
+import { Link, withRouter } from 'react-router-dom';
 
 import Breadcrumbs from '../Breadcrumbs';
 import BlocklyWindow from '../Blockly/BlocklyWindow';
@@ -41,7 +41,7 @@ class ProjectHome extends Component {
   }
 
   componentDidMount() {
-    var type = this.props.match.path.replace('/','');
+    var type = this.props.location.pathname.replace('/','');
     this.props.getProjects(type);
     if(this.props.message){
       if(this.props.message.id === 'PROJECT_DELETE_SUCCESS'){
@@ -57,9 +57,9 @@ class ProjectHome extends Component {
   }
 
   componentDidUpdate(props) {
-    if(props.match.path !== this.props.match.path){
+    if(props.location.pathname !== this.props.location.pathname){
       this.setState({snackbar: false});
-      this.props.getProjects(this.props.match.path.replace('/',''));
+      this.props.getProjects(this.props.location.pathname.replace('/',''));
     }
   }
 
@@ -69,10 +69,10 @@ class ProjectHome extends Component {
   }
 
   render() {
-    var data = this.props.match.path === '/project' ? 'Projekte' : 'Galerie';
+    var data = this.props.location.pathname === '/project' ? 'Projekte' : 'Galerie';
     return (
       <div>
-        <Breadcrumbs content={[{ link: this.props.match.path, title: data }]} />
+        <Breadcrumbs content={[{ link: this.props.location.pathname, title: data }]} />
 
         <h1>{data}</h1>
         {this.props.progress ?
@@ -104,7 +104,7 @@ class ProjectHome extends Component {
               </Grid>
             : <div>
                 <Typography style={{marginBottom: '10px'}}>Es sind aktuell keine Projekte vorhanden.</Typography>
-                {this.props.match.path.replace('/','') === 'project' ?
+                {this.props.location.pathname.replace('/','') === 'project' ?
                   <Typography>Erstelle jetzt dein <Link to={'/'} className={this.props.classes.link}>eigenes Projekt</Link> oder lasse dich von Projektbeispielen in der <Link to={'/gallery'} className={this.props.classes.link}>Galerie</Link> inspirieren.</Typography>
                 : null}
               </div>
@@ -138,4 +138,4 @@ const mapStateToProps = state => ({
 });
 
 
-export default connect(mapStateToProps, { getProjects, resetProject, clearMessages })(withStyles(styles, { withTheme: true })(ProjectHome));
+export default connect(mapStateToProps, { getProjects, resetProject, clearMessages })(withStyles(styles, { withTheme: true })(withRouter(ProjectHome)));

src/components/Route/PrivateRoute.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { Route, Redirect, withRouter } from 'react-router-dom';
+
+
+class PrivateRoute extends Component {
+
+  render() {
+    return (
+      <Route
+        {...this.props.exact}
+        render={({ location }) =>
+          this.props.isAuthenticated ? (
+            this.props.children
+          ) : (()=>{
+            return (
+              <Redirect
+                to={{
+                  pathname: "/user/login",
+                  state: { from: location }
+                }}
+              />
+            )
+          })()
+        }
+      />
+    );
+  }
+}
+
+PrivateRoute.propTypes = {
+  isAuthenticated: PropTypes.bool
+};
+
+const mapStateToProps = state => ({
+  isAuthenticated: state.auth.isAuthenticated
+});
+
+export default connect(mapStateToProps, null)(withRouter(PrivateRoute));

src/components/Route/Routes.js

@@ -1,21 +1,22 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { visitPage } from '../actions/generalActions';
+import { visitPage } from '../../actions/generalActions';
 
 import { Route, Switch, withRouter } from 'react-router-dom';
 
-import Home from './Home';
-import Tutorial from './Tutorial/Tutorial';
-import TutorialHome from './Tutorial/TutorialHome';
-import Builder from './Tutorial/Builder/Builder';
-import NotFound from './NotFound';
-import ProjectHome from './Project/ProjectHome';
-import Project from './Project/Project';
-import Settings from './Settings/Settings';
-import Impressum from './Impressum';
-import Privacy from './Privacy';
-import Login from './User/Login';
+import PrivateRoute from './PrivateRoute';
+import Home from '../Home';
+import Tutorial from '../Tutorial/Tutorial';
+import TutorialHome from '../Tutorial/TutorialHome';
+import Builder from '../Tutorial/Builder/Builder';
+import NotFound from '../NotFound';
+import ProjectHome from '../Project/ProjectHome';
+import Project from '../Project/Project';
+import Settings from '../Settings/Settings';
+import Impressum from '../Impressum';
+import Privacy from '../Privacy';
+import Login from '../User/Login';
 
 
 class Routes extends Component {
@@ -31,7 +32,9 @@ class Routes extends Component {
           <Route path="/" exact component={Home} />
           // Tutorials
           <Route path="/tutorial" exact component={TutorialHome} />
-          <Route path="/tutorial/builder" exact component={Builder} />
+          <PrivateRoute path="/tutorial/builder" exact>
+            <Builder/>
+          </PrivateRoute>
           <Route path="/tutorial/:tutorialId" exact component={Tutorial} />
           // Sharing
           <Route path="/share/:shareId" exact component={Project} />
@@ -39,8 +42,12 @@ class Routes extends Component {
           <Route path="/gallery" exact component={ProjectHome} />
           <Route path="/gallery/:galleryId" exact component={Project} />
           // User-Projects
-          <Route path="/project" exact component={ProjectHome} />
-          <Route path="/project/:projectId" exact component={Project} />
+          <PrivateRoute path="/project" exact>
+            <ProjectHome/>
+          </PrivateRoute>
+          <PrivateRoute path="/project/:projectId" exact>
+            <Project/>
+          </PrivateRoute>
           // User
           <Route path="/user/login" exact component={Login} />
           // settings

src/components/User/Login.js

@@ -25,6 +25,7 @@ export class Login extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      redirect: props.location.state ? props.location.state.from.pathname : null,
       email: '',
       password: '',
       snackbar: false,
@@ -36,10 +37,16 @@ export class Login extends Component {
   }
 
   componentDidUpdate(props){
+    console.log(this.state.redirect);
     const { message } = this.props;
     if (message !== props.message) {
       if(message.id === 'LOGIN_SUCCESS'){
-        this.props.history.goBack();
+        if(this.state.redirect){
+          this.props.history.push(this.state.redirect);
+        }
+        else{
+          this.props.history.goBack();
+        }
       }
       // Check for login error
       else if(message.id === 'LOGIN_FAIL'){