schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

project redux store

Browse Source
This commit is contained in:
Delucse
2020-12-02 14:02:03 +01:00
parent a8e36a4f06
commit a30747c608
7 changed files with 190 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Navbar.js
+7 -5
View File
@@ -53,7 +53,7 @@ class Navbar extends Component {
<div>
<AppBar
position="relative"
style={{ height: '50px', marginBottom: this.props.isLoading ? '0px' : '30px', boxShadow: this.props.isLoading ? 'none' : '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)' }}
style={{ height: '50px', marginBottom: this.props.tutorialIsLoading || this.props.projectIsLoading ? '0px' : '30px', boxShadow: this.props.tutorialIsLoading || this.props.projectIsLoading ? 'none' : '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)' }}
classes={{ root: this.props.classes.appBarColor }}
>
<Toolbar style={{ height: '50px', minHeight: '50px', padding: 0, color: 'white' }}>
@@ -102,7 +102,7 @@ class Navbar extends Component {
{[{ text: 'Tutorials', icon: faChalkboardTeacher, link: "/tutorial" },
{ text: 'Tutorial-Builder', icon: faTools, link: "/tutorial/builder" },
{ text: 'Galerie', icon: faLightbulb, link: "/gallery" },
{ text: 'Projekte', icon: faLayerGroup, link: "/project" },
{ text: 'Projekte', icon: faLayerGroup, link: "/project" },
{ text: 'Einstellungen', icon: faCog, link: "/settings" }].map((item, index) => (
<Link to={item.link} key={index} style={{ textDecoration: 'none', color: 'inherit' }}>
<ListItem button onClick={this.toggleDrawer}>
@@ -122,7 +122,7 @@ class Navbar extends Component {
))}
</List> */}
</Drawer>
{this.props.isLoading ?
{this.props.tutorialIsLoading || this.props.projectIsLoading ?
<LinearProgress style={{marginBottom: '30px', boxShadow: '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)'}}/>
: null}
</div>
@@ -131,11 +131,13 @@ class Navbar extends Component {
}
Navbar.propTypes = {
isLoading: PropTypes.bool.isRequired
tutorialIsLoading: PropTypes.bool.isRequired,
projectIsLoading: PropTypes.bool.isRequired
};
const mapStateToProps = state => ({
isLoading: state.tutorial.progress,
tutorialIsLoading: state.tutorial.progress,
projectIsLoading: state.project.progress
});
export default connect(mapStateToProps, null)(withStyles(styles, { withTheme: true })(withRouter(Navbar)));
src/components/Project/Project.js
+47 -37
View File
@@ -2,6 +2,8 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { workspaceName } from '../../actions/workspaceActions';
import { getProject, resetProject } from '../../actions/projectActions';
import { clearMessages } from '../../actions/messageActions';
import axios from 'axios';
import { createNameId } from 'mnemonic-id';
@@ -15,69 +17,77 @@ import CircularProgress from '@material-ui/core/CircularProgress';
class Project extends Component {
state = {
project: {},
progress: false,
type: ''
}
componentDidMount() {
this.getProject();
}
componentDidUpdate(props) {
if(props.location.path !== this.props.location.path){
if(props.location.path !== this.props.location.path ||
props.match.params[`${this.props.type}Id`] !== this.props.match.params[`${this.props.type}Id`]){
if(this.props.message.msg){
this.props.clearMessages();
}
this.getProject();
}
if(this.props.message !== props.message){
if(this.props.message.id === 'PROJECT_EMPTY' || this.props.message.id === 'GET_PROJECT_FAIL'){
this.props.workspaceName(createNameId());
this.props.history.push('/');
}
if(this.props.message.id === 'GET_PROJECT_SUCCESS'){
this.props.workspaceName(this.props.project.title);
}
}
}
componentWillUnmount() {
this.props.resetProject();
this.props.workspaceName(null);
if(this.props.message.msg){
this.props.clearMessages();
}
}
getProject = () => {
var param = this.props.match.params.shareId ? 'share' : this.props.match.params.galleryId ? 'gallery' : 'project';
this.setState({ type: param, progress: true });
var id = this.props.match.params[`${param}Id`];
axios.get(`${process.env.REACT_APP_BLOCKLY_API}/${param}/${id}`)
.then(res => {
var data = param === 'share' ? 'content' : param;
if(res.data[data]){
this.props.workspaceName(res.data[data].title);
this.setState({ project: res.data[data], progress: false });
}
else {
this.props.workspaceName(createNameId());
this.setState({ progress: false });
this.props.history.push('/');
}
})
.catch(err => {
// TODO:
this.setState({ progress: false, snackbar: true, key: Date.now(), message: `Fehler beim Aufrufen des angeforderten Programms. Versuche es noch einmal.`, type: 'error' });
this.props.workspaceName(createNameId());
this.props.history.push('/');
window.scrollTo(0, 0);
});
this.props.getProject(param, id);
}
render() {
var data = this.state.type === 'project' ? 'Projekte' : 'Galerie';
var data = this.props.type === 'project' ? 'Projekte' : 'Galerie';
return (
this.state.progress ?
this.props.progress ?
<Backdrop open invisible>
<CircularProgress color="primary" />
</Backdrop>
:
: this.props.project ?
<div>
{this.state.type !== 'share' ?
<Breadcrumbs content={[{ link: `/${this.state.type}`, title: data },{ link: this.props.location.path, title: this.state.project.title }]} />
{this.props.type !== 'share' ?
<Breadcrumbs content={[{ link: `/${this.props.type}`, title: data },{ link: this.props.location.path, title: this.props.project.title }]} />
: null}
<Home project={this.state.project.xml}/>
</div>
<Home project={this.props.project.xml}/>
</div> : null
);
};
}
Project.propTypes = {
workspaceName: PropTypes.func.isRequired
workspaceName: PropTypes.func.isRequired,
getProject: PropTypes.func.isRequired,
resetProject: PropTypes.func.isRequired,
clearMessages: PropTypes.func.isRequired,
project: PropTypes.object.isRequired,
type: PropTypes.string.isRequired,
message: PropTypes.object.isRequired,
progress: PropTypes.bool.isRequired
};
const mapStateToProps = state => ({
project: state.project.projects[0],
progress: state.project.progress,
type: state.project.type,
message: state.message
});
export default connect(null, { workspaceName })(Project);
export default connect(mapStateToProps, { workspaceName, getProject, resetProject, clearMessages })(Project);
src/components/Project/ProjectHome.js
+25 -19
View File
@@ -1,4 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { getProjects, resetProject } from '../../actions/projectActions';
import axios from 'axios';
import { Link } from 'react-router-dom';
@@ -14,32 +17,21 @@ import Typography from '@material-ui/core/Typography';
class ProjectHome extends Component {
state = {
projects: []
}
componentDidMount() {
this.getProjects();
this.props.getProjects(this.props.match.path.replace('/',''));
}
componentDidUpdate(props) {
if(props.match.path !== this.props.match.path){
this.setState({projects: []});
this.getProjects();
this.props.getProjects(this.props.match.path.replace('/',''));
}
}
getProjects = () => {
var data = this.props.match.path === '/project' ? 'projects' : 'galleries';
axios.get(`${process.env.REACT_APP_BLOCKLY_API}${this.props.match.path}`)
.then(res => {
this.setState({ projects: res.data[data] });
})
.catch(err => {
// TODO:
});
componentWillUnmount() {
this.props.resetProject();
}
render() {
var data = this.props.match.path === '/project' ? 'Projekte' : 'Galerie';
return (
@@ -47,8 +39,9 @@ class ProjectHome extends Component {
<Breadcrumbs content={[{ link: this.props.match.path, title: data }]} />
<h1>{data}</h1>
{this.props.progress ? null :
<Grid container spacing={2}>
{this.state.projects.map((project, i) => {
{this.props.projects.map((project, i) => {
return (
<Grid item xs={12} sm={6} md={4} xl={3} key={i}>
<Link to={`/${data === 'Projekte' ? 'project' : 'gallery'}/${project._id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
@@ -66,10 +59,23 @@ class ProjectHome extends Component {
</Grid>
)
})}
</Grid>
</Grid>}
</div>
);
};
}
export default ProjectHome;
ProjectHome.propTypes = {
getProjects: PropTypes.func.isRequired,
resetProject: PropTypes.func.isRequired,
projects: PropTypes.array.isRequired,
progress: PropTypes.bool.isRequired
};
const mapStateToProps = state => ({
projects: state.project.projects,
progress: state.project.progress
});
export default connect(mapStateToProps, { getProjects, resetProject })(ProjectHome);