From 80fd1126587a09488292395bbc0693a3f9c4bed4 Mon Sep 17 00:00:00 2001 From: Delucse <46593742+Delucse@users.noreply.github.com> Date: Thu, 3 Dec 2020 12:09:01 +0100 Subject: [PATCH] private routes and redirecting --- src/App.js | 2 +- src/actions/authActions.js | 2 +- src/components/Project/Project.js | 14 +++++---- src/components/Project/ProjectHome.js | 16 +++++------ src/components/Route/PrivateRoute.js | 41 +++++++++++++++++++++++++++ src/components/{ => Route}/Routes.js | 37 ++++++++++++++---------- src/components/User/Login.js | 9 +++++- 7 files changed, 90 insertions(+), 31 deletions(-) create mode 100644 src/components/Route/PrivateRoute.js rename src/components/{ => Route}/Routes.js (61%) diff --git a/src/App.js b/src/App.js index cf38679..6f21ed6 100644 --- a/src/App.js +++ b/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({ diff --git a/src/actions/authActions.js b/src/actions/authActions.js index cce0e43..5b142af 100644 --- a/src/actions/authActions.js +++ b/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'); diff --git a/src/components/Project/Project.js b/src/components/Project/Project.js index 6d467a8..14ba164 100644 --- a/src/components/Project/Project.js +++ b/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 ?
{this.props.type !== 'share' ? - + : null}
: 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)); diff --git a/src/components/Project/ProjectHome.js b/src/components/Project/ProjectHome.js index c04b219..668d5d9 100644 --- a/src/components/Project/ProjectHome.js +++ b/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 (
- +

{data}

{this.props.progress ? @@ -104,7 +104,7 @@ class ProjectHome extends Component { :
Es sind aktuell keine Projekte vorhanden. - {this.props.match.path.replace('/','') === 'project' ? + {this.props.location.pathname.replace('/','') === 'project' ? Erstelle jetzt dein eigenes Projekt oder lasse dich von Projektbeispielen in der Galerie inspirieren. : null}
@@ -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))); diff --git a/src/components/Route/PrivateRoute.js b/src/components/Route/PrivateRoute.js new file mode 100644 index 0000000..4de5bc5 --- /dev/null +++ b/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 ( + + this.props.isAuthenticated ? ( + this.props.children + ) : (()=>{ + return ( + + ) + })() + } + /> + ); + } +} + +PrivateRoute.propTypes = { + isAuthenticated: PropTypes.bool +}; + +const mapStateToProps = state => ({ + isAuthenticated: state.auth.isAuthenticated +}); + +export default connect(mapStateToProps, null)(withRouter(PrivateRoute)); diff --git a/src/components/Routes.js b/src/components/Route/Routes.js similarity index 61% rename from src/components/Routes.js rename to src/components/Route/Routes.js index 70bee87..79d1e01 100644 --- a/src/components/Routes.js +++ b/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 { // Tutorials - + + + // Sharing @@ -39,8 +42,12 @@ class Routes extends Component { // User-Projects - - + + + + + + // User // settings diff --git a/src/components/User/Login.js b/src/components/User/Login.js index 81e8963..d8dfc32 100644 --- a/src/components/User/Login.js +++ b/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'){