private routes and redirecting

This commit is contained in:
Delucse
2020-12-03 12:09:01 +01:00
parent 5d9bfa97af
commit 80fd112658
7 changed files with 90 additions and 31 deletions
+9 -5
View File
@@ -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));
+8 -8
View File
@@ -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)));