project redux store

src/components/Project/Project.js

@@ -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

@@ -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);