Merge pull request #2196 from paulkaplan/share-banner

Make share banner work on preview

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

@@ -83,12 +83,15 @@ const PreviewPresentation = ({
     onToggleStudio,
     onToggleComments,
     onSeeInside,
+    onShare,
     onUpdate
 }) => {
     const shareDate = ((projectInfo.history && projectInfo.history.shared)) ? projectInfo.history.shared : '';
     return (
         <div className="preview">
-            <ShareBanner shared={isShared} />
+            {!isShared && (
+                <ShareBanner onShare={onShare} />
+            )}
             { projectInfo && projectInfo.author && projectInfo.author.id && (
                 <Formsy onKeyPress={onKeyPress}>
                     <div className="inner">
@@ -430,6 +433,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(
@@ -372,6 +378,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}
@@ -548,10 +555,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 || (
-            state.preview.projectInfo.history &&
-            state.preview.projectInfo.history.shared &&
-            state.preview.projectInfo.history.shared.length > 0),
+        isShared: !projectInfoPresent || state.preview.projectInfo.is_published,
         loved: state.preview.loved,
         original: state.preview.original,
         parent: state.preview.parent,

src/views/preview/share-banner.jsx

@@ -1,30 +1,29 @@
 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');
 
 require('./share-banner.scss');
 
-const ShareBanner = props => {
-    if (props.shared) return null;
-    return (
-        <div className="shareBanner">
-            <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!
-                    </span>
-                    <Button className="button share-button">
-                        Share
-                    </Button>
-                </FlexRow>
-            </div>
-        </div>
-    );
-};
+const ShareBanner = ({onShare}) => (
+    <div className="share-banner-outer">
+        <FlexRow className="inner share-banner">
+            <span className="share-text">
+                <FormattedMessage id="preview.share.notShared" />
+            </span>
+            <Button
+                className="button share-button"
+                onClick={onShare}
+            >
+                <FormattedMessage id="preview.share.shareButton" />
+            </Button>
+        </FlexRow>
+    </div>
+);
 
 ShareBanner.propTypes = {
-    shared: PropTypes.bool.isRequired
+    onShare: PropTypes.func
 };
 
 module.exports = ShareBanner;

src/views/preview/share-banner.scss

@@ -2,19 +2,23 @@
 
 $navigation-height: 50px;
 
-.shareBanner {
+.share-banner-outer {
     background-color: $ui-orange-25percent;
     width: 100%;
     overflow: hidden;
     color: $ui-orange;
 }
 
+.share-banner {
+    align-items: center;
+    justify-content: space-between;
+}
+
 .share-button {
-    margin-top: 0;
     background-color: $ui-orange;
     font-size: .875rem;
     font-weight: normal;
-    
+
     &:before {
         display: inline-block;
         margin-right: .5rem;