From 2dfd146d1854b7853ef0f28ad8198e796fa7cf1d Mon Sep 17 00:00:00 2001 From: Delucse <46593742+Delucse@users.noreply.github.com> Date: Tue, 1 Dec 2020 18:01:52 +0100 Subject: [PATCH] display gallery content --- package.json | 1 - src/components/Blockly/BlocklySvg.js | 3 +- src/components/Gallery/GalleryHome.js | 148 ++++++++----------------- src/components/Home.js | 45 ++++---- src/components/Tutorial/Instruction.js | 2 +- src/components/WorkspaceFunc.js | 6 +- 6 files changed, 76 insertions(+), 129 deletions(-) diff --git a/package.json b/package.json index 2c51390..e3e4f1c 100644 --- a/package.json +++ b/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", diff --git a/src/components/Blockly/BlocklySvg.js b/src/components/Blockly/BlocklySvg.js index 84a4c00..739b052 100644 --- a/src/components/Blockly/BlocklySvg.js +++ b/src/components/Blockly/BlocklySvg.js @@ -53,7 +53,6 @@ class BlocklySvg extends Component { var css = ''; var bbox = document.getElementsByClassName("blocklyBlockCanvas")[0].getBBox(); var content = new XMLSerializer().serializeToString(canvas); - var xml = ` ${css}">${content}`; @@ -65,7 +64,7 @@ class BlocklySvg extends Component { render() { return (
); diff --git a/src/components/Gallery/GalleryHome.js b/src/components/Gallery/GalleryHome.js index 6e6772a..ea142e6 100644 --- a/src/components/Gallery/GalleryHome.js +++ b/src/components/Gallery/GalleryHome.js @@ -1,118 +1,62 @@ 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 { withStyles } from '@material-ui/core/styles'; +import Breadcrumbs from '../Breadcrumbs'; +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'; - - -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' - } -}); - - +import Typography from '@material-ui/core/Typography'; class GalleryHome extends Component { - state = { - gallery: [] - } + state = { + gallery: [] + } - componentDidMount() { - fetch(process.env.REACT_APP_BLOCKLY_API + this.props.location.pathname) - .then(res => res.json()) - .then((data) => { - this.setState({ gallery: data }) - }) - } + componentDidMount() { + axios.get(`${process.env.REACT_APP_BLOCKLY_API}/gallery`) + .then(res => { + this.setState({ gallery: res.data.galleries }); + }) + .catch(err => { + // TODO: + }); + } + render() { + return ( +
+ - render() { - return ( -
- - -

Gallery

- - {this.state.gallery.map((gallery, i) => { - return ( - - - -

{gallery.title}

- - - - - - -

{gallery.text}

- - -
-
- - - - ) - })} - -
- ); - }; +

Gallery

+ + {this.state.gallery.map((gallery, i) => { + return ( + + + +

{gallery.title}

+ + + {gallery.description} + + + + ) + })} + +
+ ); + }; } -GalleryHome.propTypes = { - 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)); +export default GalleryHome; diff --git a/src/components/Home.js b/src/components/Home.js index 09a5248..a28618e 100644 --- a/src/components/Home.js +++ b/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.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()); - } + this.getProject(); } - - componentDidUpdate() { + componentDidUpdate(props) { + 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(); diff --git a/src/components/Tutorial/Instruction.js b/src/components/Tutorial/Instruction.js index 0cb6aba..ade6dfb 100644 --- a/src/components/Tutorial/Instruction.js +++ b/src/components/Tutorial/Instruction.js @@ -39,7 +39,7 @@ class Instruction extends Component { : null} {step.xml ? - + { 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 { : null} - + this.resetWorkspace()}