create and display projects

src/components/Project/Project.js

@@ -0,0 +1,83 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { workspaceName } from '../../actions/workspaceActions';
+
+import axios from 'axios';
+import { createNameId } from 'mnemonic-id';
+
+import Home from '../Home';
+import Breadcrumbs from '../Breadcrumbs';
+
+import Backdrop from '@material-ui/core/Backdrop';
+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){
+      this.getProject();
+    }
+  }
+
+  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);
+      });
+  }
+
+  render() {
+    var data = this.state.type === 'project' ? 'Projekte' : 'Galerie';
+    return (
+      this.state.progress ?
+        <Backdrop open invisible>
+          <CircularProgress color="primary" />
+        </Backdrop>
+      :
+        <div>
+          {this.state.type !== 'share' ?
+            <Breadcrumbs content={[{ link: `/${this.state.type}`, title: data },{ link: this.props.location.path, title: this.state.project.title }]} />
+          : null}
+          <Home project={this.state.project.xml}/>
+        </div>
+    );
+  };
+}
+
+Project.propTypes = {
+  workspaceName: PropTypes.func.isRequired
+};
+
+
+export default connect(null, { workspaceName })(Project);

src/components/Project/ProjectHome.js

@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+
+import axios from 'axios';
+import { Link } from 'react-router-dom';
+
+import Breadcrumbs from '../Breadcrumbs';
+import BlocklyWindow from '../Blockly/BlocklyWindow';
+
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Divider from '@material-ui/core/Divider';
+import Typography from '@material-ui/core/Typography';
+
+
+class ProjectHome extends Component {
+
+  state = {
+    projects: []
+  }
+
+  componentDidMount() {
+    this.getProjects();
+  }
+
+  componentDidUpdate(props) {
+    if(props.match.path !== this.props.match.path){
+      this.setState({projects: []});
+      this.getProjects();
+    }
+  }
+
+  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:
+      });
+  }
+
+  render() {
+    var data = this.props.match.path === '/project' ? 'Projekte' : 'Galerie';
+    return (
+      <div>
+        <Breadcrumbs content={[{ link: this.props.match.path, title: data }]} />
+
+        <h1>{data}</h1>
+        <Grid container spacing={2}>
+          {this.state.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' }}>
+                  <Paper style={{ padding: '1rem', position: 'relative', overflow: 'hidden' }}>
+                    <h3 style={{marginTop: 0}}>{project.title}</h3>
+                    <Divider style={{marginTop: '1rem', marginBottom: '10px'}}/>
+                    <BlocklyWindow
+                      svg
+                      blockDisabled
+                      initialXml={project.xml}
+                    />
+                    <Typography variant='body2' style={{fontStyle: 'italic', margin: 0, marginTop: '-30px'}}>{project.description}</Typography>
+                  </Paper>
+                </Link>
+              </Grid>
+            )
+          })}
+        </Grid>
+      </div>
+    );
+  };
+}
+
+export default ProjectHome;