createShortlink function

package.json

@@ -33,6 +33,7 @@
     "react-markdown": "^8.0.0",
     "react-markdown-editor-lite": "^1.3.2",
     "react-mde": "^11.5.0",
+    "react-qr-code": "^2.0.7",
     "react-rating-stars-component": "^2.2.0",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",

src/components/Workspace/ShareProject.js

@@ -3,6 +3,8 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { shareProject } from "../../actions/projectActions";
 import { clearMessages } from "../../actions/messageActions";
+import QRCode from "react-qr-code";
+import axios from 'axios';
 
 import moment from "moment";
 
@@ -103,15 +105,50 @@ class WorkspaceFunc extends Component {
         title: Blockly.Msg.messages_SHARE_SUCCESS,
         id: this.props.project._id,
       });
+      this.createShortlink();
     } else {
       this.props.shareProject(
         this.props.name || this.props.project.title,
         this.props.projectType,
         this.props.project ? this.props.project._id : undefined
       );
+      this.createShortlink();
     }
   };
 
+  async createShortlink() {
+      // const requestOptions = {
+      //   method: 'POST',
+      //   headers: { 'Content-Type': 'application/json' },
+      //   body: JSON.stringify({ "slug": "fabscm", "url": "https://www.google.de" })
+      // };
+      // const response = await fetch('https://snsbx.de/api/shorty', requestOptions);
+      // const data = await response.json();
+      // console.log(data);
+
+      var data = JSON.stringify({
+        "slug": "testest",
+        "url": "https://www.google.de"
+      });
+
+      var config = {
+        method: 'post',
+        url: 'https://snsbx.de/api/shorty',
+        headers: { 
+          'Content-Type': 'application/json'
+        },
+        data : data
+      };
+
+      axios(config)
+      .then(function (response) {
+        console.log(JSON.stringify(response.data));
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
+  }
+
   render() {
     return (
       <div style={this.props.style}>
@@ -168,6 +205,9 @@ class WorkspaceFunc extends Component {
                 <FontAwesomeIcon icon={faCopy} size="xs" />
               </IconButton>
             </Tooltip>
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+              <QRCode value={`${window.location.origin}/share/${this.state.id}`} />
+            </div>
             {this.props.project &&
             this.props.project.shared &&
             this.props.message.id !== "SHARE_SUCCESS" ? (