Merge pull request #2343 from paulkaplan/implement-copy-link

Implement the copy link functionality

package.json

@@ -25,6 +25,7 @@
   "homepage": "https://github.com/llk/scratch-www#readme",
   "dependencies": {
     "bunyan": "1.7.1",
+    "clipboard-copy": "2.0.1",
     "compression": "1.6.1",
     "express": "4.16.1",
     "express-http-proxy": "1.1.0",

src/views/preview/presentation.jsx

@@ -69,6 +69,7 @@ const PreviewPresentation = ({
     onAddComment,
     onAddToStudioClicked,
     onAddToStudioClosed,
+    onCopyProjectLink,
     onDeleteComment,
     onFavoriteClicked,
     onLoadMore,
@@ -236,6 +237,7 @@ const PreviewPresentation = ({
                                         shareDate={shareDate}
                                         onAddToStudioClicked={onAddToStudioClicked}
                                         onAddToStudioClosed={onAddToStudioClosed}
+                                        onCopyProjectLink={onCopyProjectLink}
                                         onReportClicked={onReportClicked}
                                         onReportClose={onReportClose}
                                         onReportSubmit={onReportSubmit}
@@ -366,6 +368,7 @@ const PreviewPresentation = ({
                                     shareDate={shareDate}
                                     onAddToStudioClicked={onAddToStudioClicked}
                                     onAddToStudioClosed={onAddToStudioClosed}
+                                    onCopyProjectLink={onCopyProjectLink}
                                     onReportClicked={onReportClicked}
                                     onReportClose={onReportClose}
                                     onReportSubmit={onReportSubmit}
@@ -513,6 +516,7 @@ PreviewPresentation.propTypes = {
     onAddComment: PropTypes.func,
     onAddToStudioClicked: PropTypes.func,
     onAddToStudioClosed: PropTypes.func,
+    onCopyProjectLink: PropTypes.func,
     onDeleteComment: PropTypes.func,
     onFavoriteClicked: PropTypes.func,
     onLoadMore: PropTypes.func,

src/views/preview/project-view.jsx

@@ -7,6 +7,8 @@ const PropTypes = require('prop-types');
 const connect = require('react-redux').connect;
 const injectIntl = require('react-intl').injectIntl;
 const parser = require('scratch-parser');
+const copy = require('clipboard-copy');
+
 const Page = require('../../components/page/www/page.jsx');
 const storage = require('../../lib/storage.js').default;
 const log = require('../../lib/log');
@@ -37,6 +39,7 @@ class Preview extends React.Component {
             'addEventListeners',
             'fetchCommunityData',
             'handleAddComment',
+            'handleCopyProjectLink',
             'handleDeleteComment',
             'handleToggleStudio',
             'handleFavoriteToggle',
@@ -387,6 +390,11 @@ class Preview extends React.Component {
             this.props.user.token
         );
     }
+    handleCopyProjectLink () {
+        // Use the pathname so we do not have to update this if path changes
+        // Also do not include hash or query params
+        copy(`${window.location.origin}${window.location.pathname}`);
+    }
     initCounts (favorites, loves) {
         this.setState({
             favoriteCount: favorites,
@@ -462,6 +470,7 @@ class Preview extends React.Component {
                         onAddComment={this.handleAddComment}
                         onAddToStudioClicked={this.handleAddToStudioClick}
                         onAddToStudioClosed={this.handleAddToStudioClose}
+                        onCopyProjectLink={this.handleCopyProjectLink}
                         onDeleteComment={this.handleDeleteComment}
                         onFavoriteClicked={this.handleFavoriteToggle}
                         onLoadMore={this.handleLoadMore}

src/views/preview/subactions.jsx

@@ -47,7 +47,10 @@ const Subactions = props => (
                     )}
                 </React.Fragment>
             }
-            <Button className="action-button copy-link-button">
+            <Button
+                className="action-button copy-link-button"
+                onClick={props.onCopyProjectLink}
+            >
                 <FormattedMessage id="general.copyLink" />
             </Button>
             {(props.canReport) &&
@@ -80,6 +83,7 @@ Subactions.propTypes = {
     canReport: PropTypes.bool,
     onAddToStudioClicked: PropTypes.func,
     onAddToStudioClosed: PropTypes.func,
+    onCopyProjectLink: PropTypes.func,
     onReportClicked: PropTypes.func.isRequired,
     onReportClose: PropTypes.func.isRequired,
     onReportSubmit: PropTypes.func.isRequired,