display gallery content

package.json

@@ -16,7 +16,6 @@
     "axios": "^0.21.0",
     "blockly": "^3.20200924.0",
     "file-saver": "^2.0.2",
-    "mnemonic-id": "^3.2.7",
     "moment": "^2.28.0",
     "prismjs": "^1.20.0",
     "react": "^16.13.1",

src/components/Blockly/BlocklySvg.js

@@ -53,7 +53,6 @@ class BlocklySvg extends Component {
       var css = '<defs><style type="text/css" xmlns="http://www.w3.org/1999/xhtml"><![CDATA[' + cssContent + ']]></style></defs>';
       var bbox = document.getElementsByClassName("blocklyBlockCanvas")[0].getBBox();
       var content = new XMLSerializer().serializeToString(canvas);
-
       var xml = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                   width="${bbox.width}" height="${bbox.height}" viewBox="${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}">
                   ${css}">${content}</svg>`;
@@ -65,7 +64,7 @@ class BlocklySvg extends Component {
   render() {
     return (
       <div
-        style={{display: 'flex', justifyContent: 'center', transform: 'scale(0.8) translate(0, calc(100% * -0.2 / 2))'}}
+        style={{display: 'inline-flex', justifyContent: 'center', transform: 'scale(0.8) translate(0, calc(100% * -0.2 / 2))'}}
         dangerouslySetInnerHTML={{ __html: this.state.svg }}
       />
     );

src/components/Gallery/GalleryHome.js

@@ -1,51 +1,15 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-import clsx from 'clsx';
-
-import Breadcrumbs from '../Breadcrumbs';
 
+import axios from 'axios';
 import { Link } from 'react-router-dom';
 
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import Breadcrumbs from '../Breadcrumbs';
-import { withStyles } from '@material-ui/core/styles';
+import BlocklyWindow from '../Blockly/BlocklyWindow';
+
 import Grid from '@material-ui/core/Grid';
 import Paper from '@material-ui/core/Paper';
-import BlocklyWindow from '../Blockly/BlocklyWindow';
 import Divider from '@material-ui/core/Divider';
-
+import Typography from '@material-ui/core/Typography';
-
-const styles = (theme) => ({
-    outerDiv: {
-        position: 'absolute',
-        right: '-30px',
-        bottom: '-30px',
-        width: '160px',
-        height: '160px',
-        color: fade(theme.palette.secondary.main, 0.6)
-    },
-    outerDivError: {
-        stroke: fade(theme.palette.error.dark, 0.6),
-        color: fade(theme.palette.error.dark, 0.6)
-    },
-    outerDivSuccess: {
-        stroke: fade(theme.palette.primary.main, 0.6),
-        color: fade(theme.palette.primary.main, 0.6)
-    },
-    outerDivOther: {
-        stroke: fade(theme.palette.secondary.main, 0.6)
-    },
-    innerDiv: {
-        width: 'inherit',
-        height: 'inherit',
-        display: 'table-cell',
-        verticalAlign: 'middle',
-        textAlign: 'center'
-    }
-});
-
-
 
 
 class GalleryHome extends Component {
@@ -55,14 +19,15 @@ class GalleryHome extends Component {
   }
 
   componentDidMount() {
-        fetch(process.env.REACT_APP_BLOCKLY_API + this.props.location.pathname)
+    axios.get(`${process.env.REACT_APP_BLOCKLY_API}/gallery`)
-            .then(res => res.json())
+      .then(res => {
-            .then((data) => {
+        this.setState({ gallery: res.data.galleries });
-                this.setState({ gallery: data })
       })
+      .catch(err => {
+        // TODO:
+      });
   }
 
-
   render() {
     return (
       <div>
@@ -72,28 +37,17 @@ class GalleryHome extends Component {
         <Grid container spacing={2}>
           {this.state.gallery.map((gallery, i) => {
             return (
-                            <Grid item xs={12} sm={6} md={4} xl={3} key={i} style={{}}>
+              <Grid item xs={12} sm={6} md={4} xl={3} key={i}>
-                                <Link to={`/gallery/${gallery.id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
+                <Link to={`/gallery/${gallery._id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
-                                    <Paper style={{ height: '400px', padding: '2rem', position: 'relative', overflow: 'hidden' }}>
+                  <Paper style={{ padding: '1rem', position: 'relative', overflow: 'hidden' }}>
-                                        <h3>{gallery.title}</h3>
+                    <h3 style={{marginTop: 0}}>{gallery.title}</h3>
-                                        <Divider />
+                    <Divider style={{marginTop: '1rem', marginBottom: '10px'}}/>
-                                        <Grid container spacing={10} style={{ marginBottom: '5px' }}>
-                                            <Grid item xs={12}>
                     <BlocklyWindow
-                                                    trashcan={false}
+                      svg
-                                                    zoomControls={false}
-
                       blockDisabled
-                                                    blocklyCSS={{ height: '18vH' }}
                       initialXml={gallery.xml}
                     />
-                                            </Grid>
+                    <Typography variant='body2' style={{fontStyle: 'italic', margin: 0, marginTop: '-30px'}}>{gallery.description}</Typography>
-                                        </Grid>
-                                        <p>{gallery.text}</p>
-                                        <Divider />
-
-                                        <div className={clsx(this.props.classes.outerDiv)} style={{ width: '160px', height: '160px', border: 0 }}>
-                                        </div>
                   </Paper>
                 </Link>
               </Grid>
@@ -105,14 +59,4 @@ class GalleryHome extends Component {
   };
 }
 
-GalleryHome.propTypes = {
+export default GalleryHome;
-    status: PropTypes.array.isRequired,
-    change: PropTypes.number.isRequired,
-};
-
-const mapStateToProps = state => ({
-    change: state.tutorial.change,
-    status: state.tutorial.status
-});
-
-export default connect(mapStateToProps, null)(withStyles(styles, { withTheme: true })(GalleryHome));

src/components/Home.js

@@ -60,31 +60,17 @@ class Home extends Component {
 
   componentDidMount() {
     this.setState({ stats: window.localStorage.getItem('stats') })
-    if(this.props.match.params.shareId || this.props.match.params.galleryId){
+    this.getProject();
-      this.setState({progress: true});
-      axios.get(`${process.env.REACT_APP_BLOCKLY_API}${this.props.location.pathname}`)
-        .then(res => {
-          var shareContent = res.data.content;
-          this.props.workspaceName(res.data.content.name);
-          this.setState({ projectToLoad: res.data.content, progress: false });
-        })
-        .catch(err => {
-          this.setState({ progress: false, snackbar: true, key: Date.now(), message: `Fehler beim Erstellen eines Links zum Teilen deines Programmes. Versuche es noch einmal.`, type: 'error' });
-          window.scrollTo(0, 0);
-        });
-    }
-    else {
-      this.props.workspaceName(createNameId());
-    }
   }
 
-
+  componentDidUpdate(props) {
-  componentDidUpdate() {
+    if(props.location.path !== this.props.location.path){
+      this.getProject();
+    }
     /* Resize and reposition all of the workspace chrome (toolbox, trash,
     scrollbars etc.) This should be called when something changes that requires
     recalculating dimensions and positions of the trash, zoom, toolbox, etc.
     (e.g. window resize). */
-
     const workspace = Blockly.getMainWorkspace();
     Blockly.svgResize(workspace);
   }
@@ -94,6 +80,27 @@ class Home extends Component {
     this.props.workspaceName(null);
   }
 
+  getProject = () => {
+    if(this.props.match.params.shareId || this.props.match.params.galleryId){
+      var param = this.props.match.params.shareId ? 'share' : 'gallery';
+      var id = this.props.match.params[`${param}Id`];
+      this.setState({progress: true});
+      axios.get(`${process.env.REACT_APP_BLOCKLY_API}/${param}/${id}`)
+        .then(res => {
+          this.props.workspaceName(res.data[param].name ? res.data[param].name : res.data[param].title);
+          this.setState({ projectToLoad: res.data[param], progress: false });
+        })
+        .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' });
+          window.scrollTo(0, 0);
+        });
+      }
+      else {
+        this.props.workspaceName(createNameId());
+      }
+  }
+
   onChange = () => {
     this.setState({ codeOn: !this.state.codeOn });
     const workspace = Blockly.getMainWorkspace();

src/components/Tutorial/Instruction.js

@@ -39,7 +39,7 @@ class Instruction extends Component {
           : null}
         {step.xml ?
           <Grid container spacing={2} style={{ marginBottom: '5px' }}>
-            <Grid item xs={12}>
+            <Grid item xs={12} style={{display: 'flex', justifyContent: 'center'}}>
               <BlocklyWindow
                 svg
                 blockDisabled

src/components/WorkspaceFunc.js

@@ -7,7 +7,6 @@ import * as Blockly from 'blockly/core';
 
 import axios from 'axios';
 import { saveAs } from 'file-saver';
-import { createId } from 'mnemonic-id';
 
 import { detectWhitespacesAndReturnReadableResult } from '../helpers/whitespace';
 import { initialXml } from './Blockly/initialXml.js';
@@ -114,14 +113,13 @@ class WorkspaceFunc extends Component {
 
   shareBlocks = () => {
     var body = {
-      _id: createId(10),
       name: this.state.name,
       xml: this.props.xml
     };
     axios.post(`${process.env.REACT_APP_BLOCKLY_API}/share`, body)
       .then(res => {
         var shareContent = res.data.content;
-        this.setState({ share: true, open: true, title: 'Programm teilen', id: shareContent._id });
+        this.setState({ share: true, open: true, title: 'Programm teilen', id: shareContent.link });
       })
       .catch(err => {
         this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Erstellen eines Links zum Teilen deines Programmes. Versuche es noch einmal.`, type: 'error' });
@@ -299,7 +297,7 @@ class WorkspaceFunc extends Component {
             </IconButton>
           </Tooltip>
         : null}
-        <Tooltip title='Workspace zurücksetzen' arrow style={{ marginRight: '5px' }}>
+        <Tooltip title='Workspace zurücksetzen' arrow style={this.props.assessment ? null : { marginRight: '5px' }}>
           <IconButton
             className={this.props.classes.button}
             onClick={() => this.resetWorkspace()}