possiblilty to change title of project, get share link, delete project for every project via button

src/actions/projectActions.js

@@ -71,24 +71,25 @@ export const getProjects = (type) => (dispatch) => {
     });
 };
 
-export const updateProject = () => (dispatch, getState) => {
+export const updateProject = (type, id) => (dispatch, getState) => {
   var workspace = getState().workspace;
   var body = {
     xml: workspace.code.xml,
     title: workspace.name
   }
   var project = getState().project;
-  var id = project.projects[0]._id._id ? project.projects[0]._id._id : project.projects[0]._id;
-  var type = project.type;
   if(type==='gallery'){
     body.description = project.description;
   }
   axios.put(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`, body)
     .then(res => {
       var project = res.data[type];
+      var projects = getState().project.projects;
+      var index = projects.findIndex(res => res._id === project._id);
+      projects[index] = project;
       dispatch({
-        type: GET_PROJECT,
+        type: GET_PROJECTS,
-        payload: project
+        payload: projects
       });
       if(type === 'project'){
         dispatch(returnSuccess(res.data.message, res.status, 'PROJECT_UPDATE_SUCCESS'));
@@ -103,13 +104,17 @@ export const updateProject = () => (dispatch, getState) => {
     });
 }
 
-export const deleteProject = () => (dispatch, getState) => {
+export const deleteProject = (type, id) => (dispatch, getState) => {
   var project = getState().project;
-  var id = project.projects[0]._id._id ? project.projects[0]._id._id : project.projects[0]._id;
-  var type = project.type;
   axios.delete(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`)
     .then(res => {
-      dispatch({type: GET_PROJECTS, payload: []});
+      var projects = getState().project.projects;
+      var index = projects.findIndex(res => res._id === id || res._id._id === id);
+      projects.splice(index, 1)
+      dispatch({
+        type: GET_PROJECTS,
+        payload: projects
+      });
       if(type === 'project'){
         dispatch(returnSuccess(res.data.message, res.status, 'PROJECT_DELETE_SUCCESS'));
       } else {
@@ -121,7 +126,41 @@ export const deleteProject = () => (dispatch, getState) => {
         dispatch(returnErrors(err.response.data.message, err.response.status, 'PROJECT_DELETE_FAIL'));
       }
     });
-}
+};
+
+
+export const shareProject = (title, type, id) => (dispatch, getState) => {
+  var body = {
+    title: title
+  };
+  if(type === 'project'){
+    body.projectId = id;
+  } else {
+    body.xml = getState().workspace.code.xml;
+  }
+  axios.post(`${process.env.REACT_APP_BLOCKLY_API}/share`, body)
+    .then(res => {
+      var shareContent = res.data.content;
+      if(body.projectId){
+        var projects = getState().project.projects;
+        var index = projects.findIndex(res => res._id === id);
+        projects[index]._id = {
+          _id: shareContent._id,
+          expiresAt: shareContent.expiresAt
+        };
+        dispatch({
+          type: GET_PROJECTS,
+          payload: projects
+        });
+      }
+      dispatch(returnSuccess(res.data.message, shareContent._id, 'SHARE_SUCCESS'));
+    })
+    .catch(err => {
+      if(err.response){
+        dispatch(returnErrors(err.response.data.message, err.response.status, 'SHARE_FAIL'));
+      }
+    });
+};
 
 
 export const resetProject = () => (dispatch) => {

src/components/Home.js

@@ -95,7 +95,9 @@ class Home extends Component {
           <div style={{ float: 'left', height: '40px', position: 'relative' }}><WorkspaceStats /></div>
           : null
         }
-        <div style={{ float: 'right', height: '40px', marginBottom: '20px' }}><WorkspaceFunc /></div>
+        <div style={{ float: 'right', height: '40px', marginBottom: '20px' }}>
+          <WorkspaceFunc project={this.props.project} projectType={this.props.projectType}/>
+        </div>
         <Grid container spacing={2}>
           <Grid item xs={12} md={this.state.codeOn ? 8 : 12} style={{ position: 'relative' }}>
             <Tooltip title={this.state.codeOn ? 'Code ausblenden' : 'Code anzeigen'} >
@@ -109,7 +111,7 @@ class Home extends Component {
             </Tooltip>
             <TrashcanButtons />
             {this.props.project ?
-              < BlocklyWindow blocklyCSS={{ height: '80vH' }} initialXml={this.props.project} />
+              < BlocklyWindow blocklyCSS={{ height: '80vH' }} initialXml={this.props.project.xml} />
             : < BlocklyWindow blocklyCSS={{ height: '80vH' }} />
             }
           </Grid>

src/components/Navbar.js

@@ -157,7 +157,7 @@ const mapStateToProps = state => ({
   tutorialIsLoading: state.tutorial.progress,
   projectIsLoading: state.project.progress,
   isAuthenticated: state.auth.isAuthenticated,
-  userRole: state.auth.user
+  user: state.auth.user
 });
 
 export default connect(mapStateToProps, { logout })(withStyles(styles, { withTheme: true })(withRouter(Navbar)));

src/components/Project/Project.js

@@ -75,7 +75,7 @@ class Project extends Component {
           {this.props.type !== 'share' ?
             <Breadcrumbs content={[{ link: `/${this.props.type}`, title: data },{ link: this.props.location.pathname, title: this.props.project.title }]} />
           : null}
-          <Home project={this.props.project.xml}/>
+          <Home project={this.props.project} projectType={this.props.type}/>
         </div> : null
     );
   };

src/components/Project/ProjectHome.js

@@ -10,6 +10,7 @@ import { Link, withRouter } from 'react-router-dom';
 import Breadcrumbs from '../Breadcrumbs';
 import BlocklyWindow from '../Blockly/BlocklyWindow';
 import Snackbar from '../Snackbar';
+import WorkspaceFunc from '../WorkspaceFunc';
 
 import { withStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
@@ -61,6 +62,14 @@ class ProjectHome extends Component {
       this.setState({snackbar: false});
       this.props.getProjects(this.props.location.pathname.replace('/',''));
     }
+    if(props.message !== this.props.message){
+      if(this.props.message.id === 'PROJECT_DELETE_SUCCESS'){
+        this.setState({ snackbar: true, key: Date.now(), message: `Dein Projekt wurde erfolgreich gelöscht.`, type: 'success' });
+      }
+      else if(this.props.message.id === 'GALLERY_DELETE_SUCCESS'){
+        this.setState({ snackbar: true, key: Date.now(), message: `Dein Galerie-Projekt wurde erfolgreich gelöscht.`, type: 'success' });
+      }
+    }
   }
 
   componentWillUnmount() {
@@ -86,8 +95,8 @@ class ProjectHome extends Component {
                 {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._id ? project._id._id : project._id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
+                      <Paper style={{ padding: '1rem', position: 'relative', overflow: 'hidden' }}>
-                        <Paper style={{ padding: '1rem', position: 'relative', overflow: 'hidden' }}>
+                        <Link to={`/${data === 'Projekte' ? 'project' : 'gallery'}/${project._id._id ? project._id._id : project._id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
                           <h3 style={{marginTop: 0}}>{project.title}</h3>
                           <Divider style={{marginTop: '1rem', marginBottom: '10px'}}/>
                           <BlocklyWindow
@@ -96,8 +105,20 @@ class ProjectHome extends Component {
                             initialXml={project.xml}
                           />
                           <Typography variant='body2' style={{fontStyle: 'italic', margin: 0, marginTop: '-30px'}}>{project.description}</Typography>
-                        </Paper>
+                        </Link>
-                      </Link>
+                        {this.props.user && this.props.user.email === project.creator ?
+                          <div>
+                            <Divider style={{marginTop: '10px', marginBottom: '10px'}}/>
+                            <div style={{float: 'right'}}>
+                              <WorkspaceFunc
+                                multiple
+                                project={project}
+                                projectType={this.props.location.pathname.replace('/','')}
+                              />
+                            </div>
+                          </div>
+                      : null}
+                      </Paper>
                     </Grid>
                   )
                 })}
@@ -128,12 +149,14 @@ ProjectHome.propTypes = {
   clearMessages: PropTypes.func.isRequired,
   projects: PropTypes.array.isRequired,
   progress: PropTypes.bool.isRequired,
+  user: PropTypes.object,
   message: PropTypes.object.isRequired
 };
 
 const mapStateToProps = state => ({
   projects: state.project.projects,
   progress: state.project.progress,
+  user: state.auth.user,
   message: state.message
 });
 

src/components/Route/PrivateRouteCreator.js

@@ -39,7 +39,7 @@ PrivateRoute.propTypes = {
 
 const mapStateToProps = state => ({
   isAuthenticated: state.auth.isAuthenticated,
-  userRole: state.auth.user
+  user: state.auth.user
 });
 
 export default connect(mapStateToProps, null)(withRouter(PrivateRoute));

src/components/Tutorial/Builder/Builder.js

@@ -6,6 +6,7 @@ import { getTutorials, resetTutorial} from '../../../actions/tutorialActions';
 import { clearMessages } from '../../../actions/messageActions';
 
 import axios from 'axios';
+import { withRouter } from 'react-router-dom';
 
 import { saveAs } from 'file-saver';
 import { detectWhitespacesAndReturnReadableResult } from '../../../helpers/whitespace';
@@ -378,4 +379,4 @@ const mapStateToProps = state => ({
   message: state.message
 });
 
-export default connect(mapStateToProps, { checkError, readJSON, jsonString, progress, tutorialId, resetTutorialBuilder, getTutorials, resetTutorial, clearMessages })(withStyles(styles, { withTheme: true })(Builder));
+export default connect(mapStateToProps, { checkError, readJSON, jsonString, progress, tutorialId, resetTutorialBuilder, getTutorials, resetTutorial, clearMessages })(withStyles(styles, { withTheme: true })(withRouter(Builder)));

src/components/WorkspaceFunc.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { clearStats, onChangeCode, workspaceName } from '../actions/workspaceActions';
-import { updateProject, deleteProject, setDescription } from '../actions/projectActions';
+import { updateProject, deleteProject, shareProject, setDescription } from '../actions/projectActions';
 
 import * as Blockly from 'blockly/core';
 
@@ -100,6 +100,9 @@ class WorkspaceFunc extends Component {
     if (props.name !== this.props.name) {
       this.setState({ name: this.props.name });
     }
+    if (props.description !== this.props.description) {
+      this.setState({ description: this.props.description });
+    }
     if(this.props.message !== props.message){
       if(this.props.message.id === 'PROJECT_UPDATE_SUCCESS'){
         this.setState({ snackbar: true, key: Date.now(), message: `Das Projekt wurde erfolgreich aktualisiert.`, type: 'success' });
@@ -116,6 +119,15 @@ class WorkspaceFunc extends Component {
       else if(this.props.message.id === 'PROJECT_DELETE_FAIL'){
         this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Löschen des Projektes. Versuche es noch einmal.`, type: 'error' });
       }
+      else if(this.props.message.id === 'SHARE_SUCCESS' && (!this.props.multiple ||
+              (this.props.message.status === this.props.project._id || this.props.message.status === this.props.project._id._id))){
+        this.setState({ share: true, open: true, title: 'Programm teilen', id: this.props.message.status });
+      }
+      else if(this.props.message.id === 'SHARE_FAIL' && (!this.props.multiple ||
+              (this.props.message.status === this.props.project._id || this.props.message.status === this.props.project._id._id))){
+        this.setState({ 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);
+      }
     }
   }
 
@@ -155,23 +167,7 @@ class WorkspaceFunc extends Component {
       this.setState({ share: true, open: true, title: 'Programm teilen', id: this.props.project._id._id });
     }
     else {
-      var body = {
+      this.props.shareProject(this.state.name || this.props.project.title, this.props.projectType, this.props.project ? this.props.project._id._id ? this.props.project._id._id : this.props.project._id : undefined);
-        title: this.state.name
-      };
-      if(this.props.projectType === 'project'){
-        body.projectId = this.props.project._id._id ? this.props.project._id._id : this.props.project._id
-      } else {
-        body.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 });
-        })
-        .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' });
-          window.scrollTo(0, 0);
-        });
     }
   }
 
@@ -274,11 +270,12 @@ class WorkspaceFunc extends Component {
   renameWorkspace = () => {
     this.props.workspaceName(this.state.name);
     this.toggleDialog();
+    console.log(this.props.projectType);
     if(this.props.projectType === 'project' || this.props.projectType === 'gallery'){
       if(this.props.projectType === 'gallery'){
         this.props.setDescription(this.state.description);
       }
-      this.props.updateProject();
+      this.props.updateProject(this.props.projectType, this.props.project._id._id ? this.props.project._id._id : this.props.project._id);
     } else {
       this.setState({ snackbar: true, type: 'success', key: Date.now(), message: `Das Projekt wurde erfolgreich in '${this.state.name}' umbenannt.` });
     }
@@ -307,7 +304,7 @@ class WorkspaceFunc extends Component {
       <div style={{ width: 'max-content', display: 'flex' }}>
         {!this.props.assessment ?
           <Tooltip title={`Titel des Projektes${this.props.name ? `: ${this.props.name}` : ''}`} arrow style={{ marginRight: '5px' }}>
-            <div className={this.props.classes.workspaceName} onClick={() => { this.setState({ file: true, open: true, saveFile: false, title: this.props.projectType === 'gallery' ? 'Projektdaten eintragen':'Projekt benennen', content: this.props.projectType === 'gallery' ? 'Bitte gib einen Titel und eine Beschreibung für das Galerie-Projekt ein und bestätige die Angaben mit einem Klick auf \'Eingabe\'.':'Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' }) }}>
+            <div className={this.props.classes.workspaceName} onClick={() => {if(this.props.multiple){this.props.workspaceName(this.props.project.title);if(this.props.projectType === 'gallery'){this.props.setDescription(this.props.project.description);}} this.setState({ file: true, open: true, saveFile: false, title: this.props.projectType === 'gallery' ? 'Projektdaten eintragen':'Projekt benennen', content: this.props.projectType === 'gallery' ? 'Bitte gib einen Titel und eine Beschreibung für das Galerie-Projekt ein und bestätige die Angaben mit einem Klick auf \'Eingabe\'.':'Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' }) }}>
               {this.props.name && !isWidthDown(this.props.projectType === 'project' || this.props.projectType === 'gallery' ? 'xl':'xs', this.props.width) ? <Typography style={{ margin: 'auto -3px auto 12px' }}>{this.props.name}</Typography> : null}
               <div style={{ width: '40px', display: 'flex' }}>
                 <FontAwesomeIcon icon={faPen} style={{ height: '18px', width: '18px', margin: 'auto' }} />
@@ -315,24 +312,28 @@ class WorkspaceFunc extends Component {
             </div>
           </Tooltip>
           : null}
-        {this.props.assessment ? <SolutionCheck /> : <Compile iconButton />}
+        {this.props.assessment ? <SolutionCheck /> : !this.props.multiple ? <Compile iconButton /> : null}
-        <Tooltip title={this.props.projectType === 'project'? 'Projekt aktualisieren':'Projekt speichern'} arrow style={{ marginRight: '5px' }}>
+        {this.props.user && !this.props.multiple?
-          <IconButton
+          <Tooltip title={this.props.projectType === 'project'? 'Projekt aktualisieren':'Projekt speichern'} arrow style={{ marginRight: '5px' }}>
-            className={this.props.classes.button}
+            <IconButton
-            onClick={this.props.projectType === 'project' ? () => this.props.updateProject() : () => this.saveProject()}
+              className={this.props.classes.button}
-          >
+              onClick={this.props.projectType === 'project' ? () => this.props.updateProject(this.props.projectType, this.props.project._id._id ? this.props.project._id._id : this.props.project._id) : () => this.saveProject()}
-            <FontAwesomeIcon icon={faSave} size="xs" />
+            >
-          </IconButton>
+              <FontAwesomeIcon icon={faSave} size="xs" />
-        </Tooltip>
+            </IconButton>
-        <Tooltip title='Projekt herunterladen' arrow style={{ marginRight: '5px' }}>
+          </Tooltip>
-          <IconButton
+        : null}
-            className={this.props.classes.button}
+        {!this.props.multiple ?
-            onClick={() => { this.createFileName('xml'); }}
+          <Tooltip title='Projekt herunterladen' arrow style={{ marginRight: '5px' }}>
-          >
+            <IconButton
-            <FontAwesomeIcon icon={faFileDownload} size="xs" />
+              className={this.props.classes.button}
-          </IconButton>
+              onClick={() => { this.createFileName('xml'); }}
-        </Tooltip>
+            >
-        {!this.props.assessment?
+              <FontAwesomeIcon icon={faFileDownload} size="xs" />
+            </IconButton>
+          </Tooltip>
+        : null}
+        {!this.props.assessment && !this.props.multiple?
           <div ref={this.inputRef} style={{ width: 'max-content', height: '40px', marginRight: '5px' }}>
             <input
               style={{ display: 'none' }}
@@ -354,7 +355,7 @@ class WorkspaceFunc extends Component {
             </label>
           </div>
         : null}
-        {!this.props.assessment?
+        {!this.props.assessment && !this.props.multiple?
           <Tooltip title='Screenshot erstellen' arrow style={{ marginRight: '5px' }}>
             <IconButton
               className={this.props.classes.button}
@@ -364,7 +365,7 @@ class WorkspaceFunc extends Component {
             </IconButton>
           </Tooltip>
         : null}
-        {!this.props.assessment?
+        {this.props.projectType !== 'gallery' && !this.props.assessment ?
           <Tooltip title='Projekt teilen' arrow style={{marginRight: '5px'}}>
             <IconButton
               className={this.props.classes.button}
@@ -374,19 +375,21 @@ class WorkspaceFunc extends Component {
             </IconButton>
           </Tooltip>
         :null}
-        <Tooltip title='Workspace zurücksetzen' arrow style={this.props.projectType === 'project' || this.props.projectType === 'gallery' ? { marginRight: '5px' }:null}>
+        {!this.props.multiple ?
-          <IconButton
+          <Tooltip title='Workspace zurücksetzen' arrow style={this.props.projectType === 'project' || this.props.projectType === 'gallery' ? { marginRight: '5px' }:null}>
-            className={this.props.classes.button}
+            <IconButton
-            onClick={() => this.resetWorkspace()}
+              className={this.props.classes.button}
-          >
+              onClick={() => this.resetWorkspace()}
-            <FontAwesomeIcon icon={faShare} size="xs" flip='horizontal' />
+            >
-          </IconButton>
+              <FontAwesomeIcon icon={faShare} size="xs" flip='horizontal' />
-        </Tooltip>
+            </IconButton>
+          </Tooltip>
+        : null}
         {!this.props.assessment && (this.props.projectType === 'project' || this.props.projectType === 'gallery') ?
           <Tooltip title='Projekt löschen' arrow>
             <IconButton
               className={this.props.classes.buttonTrash}
-              onClick={() => this.props.deleteProject()}
+              onClick={() => this.props.deleteProject(this.props.projectType, this.props.project._id._id ? this.props.project._id._id : this.props.project._id)}
             >
               <FontAwesomeIcon icon={faTrashAlt} size="xs" />
             </IconButton>
@@ -406,7 +409,7 @@ class WorkspaceFunc extends Component {
               {this.props.projectType === 'gallery' ?
                 <div>
                   <TextField autoFocus placeholder={this.state.saveXml ? 'Dateiname' : 'Projekttitel'} value={this.state.name} onChange={this.setFileName} style={{marginBottom: '10px'}}/>
-                  <TextField fullWidth placeholder={'Projektbeschreibung'} value={this.state.description} onChange={this.setDescription} style={{ marginBottom: '10px' }} />
+                  <TextField fullWidth multiline placeholder={'Projektbeschreibung'} value={this.state.description} onChange={this.setDescription} style={{ marginBottom: '10px' }} />
                 </div>
               : <TextField autoFocus placeholder={this.state.saveXml ? 'Dateiname' : 'Projekttitel'} value={this.state.name} onChange={this.setFileName} style={{ marginRight: '10px' }} />}
               <Button disabled={!this.state.name} variant='contained' color='primary' onClick={() => { this.state.saveFile ? this.state.file === 'xml' ? this.downloadXmlFile() : this.getSvg() : this.renameWorkspace(); this.toggleDialog(); }}>Eingabe</Button>
@@ -426,7 +429,7 @@ class WorkspaceFunc extends Component {
                 </IconButton>
               </Tooltip>
               {this.props.project && this.props.project._id._id ?
-                <Typography variant='body2' style={{marginTop: '20px'}}>{`Das Projekt wurde bereits geteilt. Der Link ist noch ${
+                <Typography variant='body2' style={{marginTop: '20px'}}>{`Das Projekt wurde bereits geteilt. Der Link ist noch mindestens ${
                   moment(this.props.project._id.expiresAt).diff(moment().utc(), 'days') === 0 ?
                     moment(this.props.project._id.expiresAt).diff(moment().utc(), 'hours') === 0 ?
                       `${moment(this.props.project._id.expiresAt).diff(moment().utc(), 'minutes')} Minuten`
@@ -454,15 +457,15 @@ WorkspaceFunc.propTypes = {
   onChangeCode: PropTypes.func.isRequired,
   workspaceName: PropTypes.func.isRequired,
   updateProject: PropTypes.func.isRequired,
+  shareProject: PropTypes.func.isRequired,
   deleteProject: PropTypes.func.isRequired,
   setDescription: PropTypes.func.isRequired,
   arduino: PropTypes.string.isRequired,
   xml: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
-  projectType: PropTypes.string.isRequired,
+  message: PropTypes.object.isRequired,
-  project: PropTypes.object.isRequired,
+  user: PropTypes.object
-  message: PropTypes.object.isRequired
 };
 
 const mapStateToProps = state => ({
@@ -470,9 +473,8 @@ const mapStateToProps = state => ({
   xml: state.workspace.code.xml,
   name: state.workspace.name,
   description: state.project.description,
-  projectType: state.project.type,
+  message: state.message,
-  project: state.project.projects[0],
+  user: state.auth.user
-  message: state.message
 });
 
-export default connect(mapStateToProps, { clearStats, onChangeCode, workspaceName, updateProject, deleteProject, setDescription })(withStyles(styles, { withTheme: true })(withWidth()(withRouter(WorkspaceFunc))));
+export default connect(mapStateToProps, { clearStats, onChangeCode, workspaceName, updateProject, shareProject, deleteProject, setDescription })(withStyles(styles, { withTheme: true })(withWidth()(withRouter(WorkspaceFunc))));