Make share banner actually share projects

src/views/preview/l10n.json

@@ -9,5 +9,7 @@
     "preview.videoMotionChip": "Video Motion",
     "preview.comments.header": "Comments",
     "preview.comments.turnOff": "Turn off commenting",
-    "preview.comments.turnedOff": "Sorry, comment posting has been turned off for this project."
+    "preview.comments.turnedOff": "Sorry, comment posting has been turned off for this project.",
+    "preview.share.notShared": "This project is not shared — so only you can see it. Click share to let everyone see it!",
+    "preview.share.shareButton": "Share"
 }

src/views/preview/presentation.jsx

@@ -81,12 +81,16 @@ const PreviewPresentation = ({
     onToggleStudio,
     onToggleComments,
     onSeeInside,
+    onShare,
     onUpdate
 }) => {
     const shareDate = ((projectInfo.history && projectInfo.history.shared)) ? projectInfo.history.shared : '';
     return (
         <div className="preview">
-            <ShareBanner shared={isShared} />
+            <ShareBanner
+                shared={isShared}
+                onShare={onShare}
+            />
             { projectInfo && projectInfo.author && projectInfo.author.id && (
                 <Formsy onKeyPress={onKeyPress}>
                     <div className="inner">
@@ -427,6 +431,7 @@ PreviewPresentation.propTypes = {
     onReportComment: PropTypes.func.isRequired,
     onReportSubmit: PropTypes.func.isRequired,
     onSeeInside: PropTypes.func,
+    onShare: PropTypes.func,
     onToggleComments: PropTypes.func,
     onToggleStudio: PropTypes.func,
     onUpdate: PropTypes.func,

src/views/preview/preview.jsx

@@ -47,6 +47,7 @@ class Preview extends React.Component {
             'handleAddToStudioClick',
             'handleAddToStudioClose',
             'handleSeeInside',
+            'handleShare',
             'handleUpdateProjectTitle',
             'handleUpdate',
             'handleToggleComments',
@@ -291,7 +292,12 @@ class Preview extends React.Component {
         this.props.setPlayer(false);
     }
     handleShare () {
-        // This is just a placeholder, but enables the button in the editor
+        this.props.updateProject(
+            this.props.projectInfo.id,
+            {isPublished: true},
+            this.props.user.username,
+            this.props.user.token
+        );
     }
     handleUpdate (jsonData) {
         this.props.updateProject(
@@ -370,6 +376,7 @@ class Preview extends React.Component {
                         onReportComment={this.handleReportComment}
                         onReportSubmit={this.handleReportSubmit}
                         onSeeInside={this.handleSeeInside}
+                        onShare={this.handleShare}
                         onToggleComments={this.handleToggleComments}
                         onToggleStudio={this.handleToggleStudio}
                         onUpdate={this.handleUpdate}
@@ -525,10 +532,7 @@ const mapStateToProps = state => {
             state.permissions.admin === true),
         isLoggedIn: isLoggedIn,
         // if we don't have projectInfo, assume it's shared until we know otherwise
-        isShared: !projectInfoPresent || (
+        isShared: !projectInfoPresent || state.preview.projectInfo.is_published,
-            state.preview.projectInfo.history &&
-            state.preview.projectInfo.history.shared &&
-            state.preview.projectInfo.history.shared.length > 0),
         loved: state.preview.loved,
         original: state.preview.original,
         parent: state.preview.parent,

src/views/preview/share-banner.jsx

@@ -1,5 +1,6 @@
 const PropTypes = require('prop-types');
 const React = require('react');
+const FormattedMessage = require('react-intl').FormattedMessage;
 const FlexRow = require('../../components/flex-row/flex-row.jsx');
 const Button = require('../../components/forms/button.jsx');
 
@@ -12,10 +13,13 @@ const ShareBanner = props => {
             <div className="inner">
                 <FlexRow className="preview-row">
                     <span className="share-text">
-                        This project is not shared — so only you can see it. Click share to let everyone see it!
+                        <FormattedMessage id="preview.share.notShared" />
                     </span>
-                    <Button className="button share-button">
+                    <Button
-                        Share
+                        className="button share-button"
+                        onClick={props.onShare}
+                    >
+                        <FormattedMessage id="preview.share.shareButton" />
                     </Button>
                 </FlexRow>
             </div>
@@ -24,6 +28,7 @@ const ShareBanner = props => {
 };
 
 ShareBanner.propTypes = {
+    onShare: PropTypes.func,
     shared: PropTypes.bool.isRequired
 };