display of the sharing link validity

.env

@@ -1,3 +1,6 @@
 REACT_APP_COMPILER_URL=https://compiler.sensebox.de
 REACT_APP_BOARD=sensebox-mcu
 REACT_APP_BLOCKLY_API=https://api.blockly.sensebox.de
+
+# in days
+REACT_APP_SHARE_LINK_EXPIRES=30

src/actions/projectActions.js

@@ -78,7 +78,7 @@ export const updateProject = () => (dispatch, getState) => {
     title: workspace.name
   }
   var project = getState().project;
-  var id = project.projects[0]._id;
+  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;
@@ -105,7 +105,7 @@ export const updateProject = () => (dispatch, getState) => {
 
 export const deleteProject = () => (dispatch, getState) => {
   var project = getState().project;
-  var id = project.projects[0]._id;
+  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 => {

src/components/Project/Project.js

@@ -24,7 +24,6 @@ class Project extends Component {
   }
 
   componentDidUpdate(props) {
-    console.log(this.props);
     if(props.location.pathname !== this.props.location.pathname ||
        props.match.params[`${this.props.type}Id`] !== this.props.match.params[`${this.props.type}Id`]){
       if(this.props.message.msg){

src/components/Project/ProjectHome.js

@@ -86,7 +86,7 @@ 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}`} style={{ textDecoration: 'none', color: 'inherit' }}>
+                      <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' }}>
                           <h3 style={{marginTop: 0}}>{project.title}</h3>
                           <Divider style={{marginTop: '1rem', marginBottom: '10px'}}/>

src/components/WorkspaceFunc.js

@@ -8,6 +8,7 @@ import * as Blockly from 'blockly/core';
 
 import { withRouter } from 'react-router-dom';
 import axios from 'axios';
+import moment from 'moment';
 import { saveAs } from 'file-saver';
 
 import { detectWhitespacesAndReturnReadableResult } from '../helpers/whitespace';
@@ -149,20 +150,30 @@ class WorkspaceFunc extends Component {
   }
 
   shareBlocks = () => {
+    if(this.props.projectType === 'project' && this.props.project._id._id){
+      // project is already shared
+      this.setState({ share: true, open: true, title: 'Programm teilen', id: this.props.project._id._id });
+    }
+    else {
       var body = {
-      name: this.state.name,
+        title: this.state.name
-      xml: this.props.xml
       };
+      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.link });
+          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);
         });
     }
+  }
 
   getSvg = () => {
     const workspace = Blockly.getMainWorkspace();
@@ -414,6 +425,14 @@ class WorkspaceFunc extends Component {
                   <FontAwesomeIcon icon={faCopy} size="xs" />
                 </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 ${
+                  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`
+                    : `${moment(this.props.project._id.expiresAt).diff(moment().utc(), 'hours')} Stunden`
+                  : `${moment(this.props.project._id.expiresAt).diff(moment().utc(), 'days')} Tage`} gültig.`}</Typography>
+              : <Typography variant='body2' style={{marginTop: '20px'}}>{`Der Link ist nun ${process.env.REACT_APP_SHARE_LINK_EXPIRES} Tage gültig.`}</Typography>}
             </div>
           : null}
         </Dialog>
@@ -442,6 +461,7 @@ WorkspaceFunc.propTypes = {
   name: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
   projectType: PropTypes.string.isRequired,
+  project: PropTypes.object.isRequired,
   message: PropTypes.object.isRequired
 };
 
@@ -451,6 +471,7 @@ const mapStateToProps = state => ({
   name: state.workspace.name,
   description: state.project.description,
   projectType: state.project.type,
+  project: state.project.projects[0],
   message: state.message
 });