From b97ce364ce1f752ebcd35afac2adc672db712769 Mon Sep 17 00:00:00 2001 From: fab-scm Date: Fri, 22 Jul 2022 13:27:42 +0200 Subject: [PATCH 1/6] createShortlink function --- package.json | 1 + src/components/Workspace/ShareProject.js | 40 ++++++++++++++++++++++++ 2 files changed, 41 insertions(+) diff --git a/package.json b/package.json index 4e58354..758019f 100644 --- a/package.json +++ b/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", diff --git a/src/components/Workspace/ShareProject.js b/src/components/Workspace/ShareProject.js index e86d817..2e35a27 100644 --- a/src/components/Workspace/ShareProject.js +++ b/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 (
@@ -168,6 +205,9 @@ class WorkspaceFunc extends Component { +
+ +
{this.props.project && this.props.project.shared && this.props.message.id !== "SHARE_SUCCESS" ? ( From c71a150f38ecf5694f89d28a69b55ee17a30a7cd Mon Sep 17 00:00:00 2001 From: fab-scm Date: Mon, 25 Jul 2022 16:42:45 +0200 Subject: [PATCH 2/6] fetch shortlink --- src/components/Workspace/ShareProject.js | 52 +++++++----------------- 1 file changed, 15 insertions(+), 37 deletions(-) diff --git a/src/components/Workspace/ShareProject.js b/src/components/Workspace/ShareProject.js index 2e35a27..f2114c1 100644 --- a/src/components/Workspace/ShareProject.js +++ b/src/components/Workspace/ShareProject.js @@ -57,6 +57,7 @@ class WorkspaceFunc extends Component { content: "", open: false, id: "", + shortLink: "", }; } @@ -67,6 +68,7 @@ class WorkspaceFunc extends Component { (!this.props.multiple || this.props.message.status === this.props.project._id) ) { + this.createShortlink(this.props.message.status); this.setState({ share: true, open: true, @@ -105,48 +107,24 @@ 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); - }); + createShortlink(id) { + const requestOptions = { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ "slug": `blockly-${id}`, "url": `${window.location.origin}/share/${id}` }) + }; + fetch('https://www.snsbx.de/api/shorty', requestOptions) + .then(response => response.json()) + .then(data => this.setState({ shortLink: data[0].link })); } render() { @@ -180,10 +158,10 @@ class WorkspaceFunc extends Component { Über den folgenden Link kannst du dein Programm teilen: this.toggleDialog()} className={this.props.classes.link} - >{`${window.location.origin}/share/${this.state.id}`} + >{this.state.shortLink} { navigator.clipboard.writeText( - `${window.location.origin}/share/${this.state.id}` + this.state.shortLink ); this.setState({ snackbar: true, @@ -206,7 +184,7 @@ class WorkspaceFunc extends Component {
- +
{this.props.project && this.props.project.shared && From 69de659c11dd7ebffce5ebf92a4ca4fb708d2ecb Mon Sep 17 00:00:00 2001 From: fab-scm Date: Tue, 26 Jul 2022 13:33:12 +0200 Subject: [PATCH 3/6] loading spinner for shorty fetch and qr-code --- package.json | 2 + src/components/Workspace/ShareProject.js | 157 +++++++++++++---------- 2 files changed, 89 insertions(+), 70 deletions(-) diff --git a/package.json b/package.json index 758019f..03f2450 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,8 @@ "react-redux": "^7.2.4", "react-router-dom": "^5.2.0", "react-scripts": "^5.0.0", + "react-share": "^4.4.0", + "react-spinners": "^0.13.3", "reactour": "^1.18.7", "redux": "^4.0.5", "redux-thunk": "^2.3.0", diff --git a/src/components/Workspace/ShareProject.js b/src/components/Workspace/ShareProject.js index f2114c1..d03cd25 100644 --- a/src/components/Workspace/ShareProject.js +++ b/src/components/Workspace/ShareProject.js @@ -4,15 +4,16 @@ 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 axios from 'axios'; import moment from "moment"; import Dialog from "../Dialog"; import Snackbar from "../Snackbar"; -import { Link } from "react-router-dom"; +// import { Link } from "react-router-dom"; +import GridLoader from "react-spinners/GridLoader"; import { withStyles } from "@material-ui/core/styles"; import IconButton from "@material-ui/core/IconButton"; import Tooltip from "@material-ui/core/Tooltip"; @@ -58,6 +59,8 @@ class WorkspaceFunc extends Component { open: false, id: "", shortLink: "", + isFetching: false, + loading: false, }; } @@ -117,6 +120,7 @@ class WorkspaceFunc extends Component { }; createShortlink(id) { + this.setState({ isFetching: true, loading: true }) const requestOptions = { method: 'POST', headers: { 'Content-Type': 'application/json' }, @@ -124,7 +128,7 @@ class WorkspaceFunc extends Component { }; fetch('https://www.snsbx.de/api/shorty', requestOptions) .then(response => response.json()) - .then(data => this.setState({ shortLink: data[0].link })); + .then(data => this.setState({ shortLink: data[0].link, isFetching: false, loading: false })); } render() { @@ -152,75 +156,88 @@ class WorkspaceFunc extends Component { onClose={this.toggleDialog} onClick={this.toggleDialog} button={Blockly.Msg.button_close} - > -
- - Über den folgenden Link kannst du dein Programm teilen: - - this.toggleDialog()} - className={this.props.classes.link} - >{this.state.shortLink} - - { - navigator.clipboard.writeText( - this.state.shortLink - ); - this.setState({ - snackbar: true, - key: Date.now(), - message: Blockly.Msg.messages_copylink_success, - type: "success", - }); - }} - > - - - -
- + > + { this.state.isFetching ? ( +
+
- {this.props.project && - this.props.project.shared && - this.props.message.id !== "SHARE_SUCCESS" ? ( - {`Das Projekt wurde bereits geteilt. Der Link ist noch mindestens ${ - moment(this.props.project.shared).diff( - moment().utc(), - "days" - ) === 0 - ? moment(this.props.project.shared).diff( - moment().utc(), - "hours" - ) === 0 - ? `${moment(this.props.project.shared).diff( - moment().utc(), - "minutes" - )} Minuten` - : `${moment(this.props.project.shared).diff( - moment().utc(), - "hours" - )} Stunden` - : `${moment(this.props.project.shared).diff( - moment().utc(), - "days" - )} Tage` - } gültig.`} ) : ( - {`Der Link ist nun ${process.env.REACT_APP_SHARE_LINK_EXPIRES} Tage gültig.`} - )} -
+
+ + Über den folgenden Link kannst du dein Programm teilen: + + this.toggleDialog()} + className={this.props.classes.link} + target="_blank" + >{this.state.shortLink} + + { + navigator.clipboard.writeText( + this.state.shortLink + ); + this.setState({ + snackbar: true, + key: Date.now(), + message: Blockly.Msg.messages_copylink_success, + type: "success", + }); + }} + > + + + +
+ +
+ { this.props.project && + this.props.project.shared && + this.props.message.id !== "SHARE_SUCCESS" ? ( + + {`Das Projekt wurde bereits geteilt. Der Link ist noch mindestens ${ + moment(this.props.project.shared).diff( + moment().utc(), + "days" + ) === 0 + ? moment(this.props.project.shared).diff( + moment().utc(), + "hours" + ) === 0 + ? `${moment(this.props.project.shared).diff( + moment().utc(), + "minutes" + )} Minuten` + : `${moment(this.props.project.shared).diff( + moment().utc(), + "hours" + )} Stunden` + : `${moment(this.props.project.shared).diff( + moment().utc(), + "days" + )} Tage` + } gültig.`} + + ) : ( + + {`Der Link ist nun ${process.env.REACT_APP_SHARE_LINK_EXPIRES} Tage gültig.`} + + ) + } +
+ ) + }
); From e5e0066635154bbe33dae796812f498440cb6cfc Mon Sep 17 00:00:00 2001 From: fab-scm Date: Wed, 27 Jul 2022 13:24:36 +0200 Subject: [PATCH 4/6] social share buttons added --- src/components/Workspace/ShareProject.js | 27 +++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/src/components/Workspace/ShareProject.js b/src/components/Workspace/ShareProject.js index d03cd25..d3f0697 100644 --- a/src/components/Workspace/ShareProject.js +++ b/src/components/Workspace/ShareProject.js @@ -14,6 +14,8 @@ import Snackbar from "../Snackbar"; // import { Link } from "react-router-dom"; import GridLoader from "react-spinners/GridLoader"; +import { EmailShareButton, FacebookShareButton, LinkedinShareButton, RedditShareButton, TelegramShareButton, TwitterShareButton, WhatsappShareButton} from "react-share"; +import { EmailIcon, FacebookIcon, LinkedinIcon, RedditIcon, TelegramIcon, TwitterIcon, WhatsappIcon} from "react-share"; import { withStyles } from "@material-ui/core/styles"; import IconButton from "@material-ui/core/IconButton"; import Tooltip from "@material-ui/core/Tooltip"; @@ -134,7 +136,7 @@ class WorkspaceFunc extends Component { render() { return (
- + this.shareBlocks()} @@ -196,6 +198,29 @@ class WorkspaceFunc extends Component {
+
+ + + + + + + + + + + + + + + + + + + + + +
{ this.props.project && this.props.project.shared && this.props.message.id !== "SHARE_SUCCESS" ? ( From 89a5c838bf486525c043a012fb6f03efa862b17f Mon Sep 17 00:00:00 2001 From: fab-scm Date: Tue, 9 Aug 2022 20:55:09 +0200 Subject: [PATCH 5/6] Download QR Code --- package.json | 2 +- src/components/Workspace/ShareProject.js | 66 +++++++++++++++++------- 2 files changed, 49 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 03f2450..55f3f5b 100644 --- a/package.json +++ b/package.json @@ -27,13 +27,13 @@ "mnemonic-id": "^3.2.7", "moment": "^2.28.0", "prismjs": "^1.27.0", + "qrcode.react": "^3.1.0", "react": "^17.0.2", "react-cookie-consent": "^7.2.1", "react-dom": "^17.0.2", "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", diff --git a/src/components/Workspace/ShareProject.js b/src/components/Workspace/ShareProject.js index d3f0697..a13edde 100644 --- a/src/components/Workspace/ShareProject.js +++ b/src/components/Workspace/ShareProject.js @@ -3,8 +3,7 @@ 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 QRCode from 'qrcode.react'; import moment from "moment"; @@ -14,20 +13,21 @@ import Snackbar from "../Snackbar"; // import { Link } from "react-router-dom"; import GridLoader from "react-spinners/GridLoader"; -import { EmailShareButton, FacebookShareButton, LinkedinShareButton, RedditShareButton, TelegramShareButton, TwitterShareButton, WhatsappShareButton} from "react-share"; -import { EmailIcon, FacebookIcon, LinkedinIcon, RedditIcon, TelegramIcon, TwitterIcon, WhatsappIcon} from "react-share"; +import { EmailShareButton, FacebookShareButton, TwitterShareButton, WhatsappShareButton} from "react-share"; +import { EmailIcon, FacebookIcon, TwitterIcon, WhatsappIcon} from "react-share"; import { withStyles } from "@material-ui/core/styles"; import IconButton from "@material-ui/core/IconButton"; +import Button from '@material-ui/core/Button'; import Tooltip from "@material-ui/core/Tooltip"; import Typography from "@material-ui/core/Typography"; -import { faShareAlt, faCopy } from "@fortawesome/free-solid-svg-icons"; +import { faShareAlt, faCopy, faDownload } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import * as Blockly from "blockly/core"; const styles = (theme) => ({ - button: { + iconButton: { backgroundColor: theme.palette.primary.main, color: theme.palette.primary.contrastText, width: "40px", @@ -37,6 +37,15 @@ const styles = (theme) => ({ color: theme.palette.primary.contrastText, }, }, + button: { + backgroundColor: theme.palette.primary.main, + color: theme.palette.primary.contrastText, + "&:hover": { + backgroundColor: theme.palette.primary.main, + color: theme.palette.primary.contrastText, + }, + borderRadius: 20, + }, link: { color: theme.palette.primary.main, textDecoration: "none", @@ -133,12 +142,26 @@ class WorkspaceFunc extends Component { .then(data => this.setState({ shortLink: data[0].link, isFetching: false, loading: false })); } + downloadQRCode = () => { + // Generate download with use canvas and stream + const canvas = document.getElementById("qr-gen"); + const pngUrl = canvas + .toDataURL("image/png") + .replace("image/png", "image/octet-stream"); + let downloadLink = document.createElement("a"); + downloadLink.href = pngUrl; + downloadLink.download = `${this.state.shortLink}.png`; + document.body.appendChild(downloadLink); + downloadLink.click(); + document.body.removeChild(downloadLink); + }; + render() { return (
- + this.shareBlocks()} > @@ -196,7 +219,23 @@ class WorkspaceFunc extends Component {
- + +
+
+ {/* + this.downloadQRCode()} className={`download QR Code ${this.props.classes.button}`}> + + + */} +
@@ -208,15 +247,6 @@ class WorkspaceFunc extends Component { - - - - - - - - - From 57142dc8a1a4269aa807811db0de9e61257e1f86 Mon Sep 17 00:00:00 2001 From: fab-scm Date: Fri, 12 Aug 2022 10:28:10 +0200 Subject: [PATCH 6/6] link id to 5 digits --- src/components/Workspace/ShareProject.js | 61 ++++++++++++------------ 1 file changed, 30 insertions(+), 31 deletions(-) diff --git a/src/components/Workspace/ShareProject.js b/src/components/Workspace/ShareProject.js index a13edde..d13c194 100644 --- a/src/components/Workspace/ShareProject.js +++ b/src/components/Workspace/ShareProject.js @@ -4,6 +4,7 @@ import { connect } from "react-redux"; import { shareProject } from "../../actions/projectActions"; import { clearMessages } from "../../actions/messageActions"; import QRCode from 'qrcode.react'; +import { createId } from "mnemonic-id"; import moment from "moment"; @@ -135,7 +136,7 @@ class WorkspaceFunc extends Component { const requestOptions = { method: 'POST', headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ "slug": `blockly-${id}`, "url": `${window.location.origin}/share/${id}` }) + body: JSON.stringify({ "slug": `blockly-${createId(5)}`, "url": `${window.location.origin}/share/${id}` }) }; fetch('https://www.snsbx.de/api/shorty', requestOptions) .then(response => response.json()) @@ -191,34 +192,37 @@ class WorkspaceFunc extends Component { Über den folgenden Link kannst du dein Programm teilen: - this.toggleDialog()} - className={this.props.classes.link} - target="_blank" - >{this.state.shortLink} - + this.toggleDialog()} + className={this.props.classes.link} + target="_blank" + rel="noreferrer" + >{this.state.shortLink} + - { - navigator.clipboard.writeText( - this.state.shortLink - ); - this.setState({ - snackbar: true, - key: Date.now(), - message: Blockly.Msg.messages_copylink_success, - type: "success", - }); - }} > - - - -
+ { + navigator.clipboard.writeText( + this.state.shortLink + ); + this.setState({ + snackbar: true, + key: Date.now(), + message: Blockly.Msg.messages_copylink_success, + type: "success", + }); + }} + > + + + +
+
-
- {/* - this.downloadQRCode()} className={`download QR Code ${this.props.classes.button}`}> - - - */} +