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 { - - - - - - - - -