Add comment toggling

src/views/preview/l10n.json

@@ -6,5 +6,7 @@
     "preview.penExtensionChip": "Pen",
     "preview.speechExtensionChip": "Google Speech",
     "preview.translateExtensionChip": "Google Translate",
-    "preview.videoMotionChip": "Video Motion"
+    "preview.videoMotionChip": "Video Motion",
+    "preview.comments.turnOff": "Turn off commenting",
+    "preview.comments.turnedOff": "Sorry, comment posting has been turned off for this project."
 }

src/views/preview/presentation.jsx

@@ -1,6 +1,8 @@
 const injectIntl = require('react-intl').injectIntl;
 const PropTypes = require('prop-types');
 const intlShape = require('react-intl').intlShape;
+const FormattedMessage = require('react-intl').FormattedMessage;
+
 const MediaQuery = require('react-responsive').default;
 const React = require('react');
 const Formsy = require('formsy-react').default;
@@ -76,6 +78,7 @@ const PreviewPresentation = ({
     onAddToStudioClicked,
     onAddToStudioClosed,
     onToggleStudio,
+    onToggleComments,
     onSeeInside,
     onUpdate
 }) => {
@@ -317,16 +320,37 @@ const PreviewPresentation = ({
                                 <div className="comments-container">
                                     <FlexRow className="comments-header">
                                         <h4>Comments</h4>
-                                        {/* TODO: Add toggle comments component and logic*/}
+                                        {userOwnsProject ? (
+                                            <div>
+                                                <label>
+                                                    <input
+                                                        checked={!projectInfo.comments_allowed}
+                                                        className="comments-allowed-input"
+                                                        type="checkbox"
+                                                        onChange={onToggleComments}
+                                                    />
+                                                    <FormattedMessage id="preview.comments.turnOff" />
+                                                </label>
+                                            </div>
+                                        ) : null}
                                     </FlexRow>
 
                                     <FlexRow className="comments-root-reply">
-                                        {isLoggedIn &&
+                                        {projectInfo.comments_allowed ? (
+                                            isLoggedIn ? (
                                                 <ComposeComment
                                                     projectId={projectId}
                                                     onAddComment={onAddComment}
                                                 />
-                                        }
+                                            ) : (
+                                                /* TODO add box for signing in to leave a comment */
+                                                null
+                                            )
+                                        ) : (
+                                            <div className="comments-turned-off">
+                                                <FormattedMessage id="preview.comments.turnedOff" />
+                                            </div>
+                                        )}
                                     </FlexRow>
 
                                     <FlexRow className="comments-list">
@@ -399,6 +423,7 @@ PreviewPresentation.propTypes = {
     onReportClose: PropTypes.func.isRequired,
     onReportSubmit: PropTypes.func.isRequired,
     onSeeInside: PropTypes.func,
+    onToggleComments: PropTypes.func,
     onToggleStudio: PropTypes.func,
     onUpdate: PropTypes.func,
     originalInfo: projectShape,

src/views/preview/preview.jsx

@@ -48,6 +48,7 @@ class Preview extends React.Component {
             'handleSeeInside',
             'handleUpdateProjectTitle',
             'handleUpdate',
+            'handleToggleComments',
             'initCounts',
             'pushHistory',
             'renderLogin',
@@ -167,6 +168,14 @@ class Preview extends React.Component {
                 });
             });
     }
+    handleToggleComments () {
+        this.props.updateProject(
+            this.props.projectInfo.id,
+            {comments_allowed: !this.props.projectInfo.comments_allowed},
+            this.props.user.username,
+            this.props.user.token
+        );
+    }
     handleAddComment (comment, topLevelCommentId) {
         this.props.handleAddComment(comment, topLevelCommentId);
     }
@@ -356,6 +365,7 @@ class Preview extends React.Component {
                         onReportClose={this.handleReportClose}
                         onReportSubmit={this.handleReportSubmit}
                         onSeeInside={this.handleSeeInside}
+                        onToggleComments={this.handleToggleComments}
                         onToggleStudio={this.handleToggleStudio}
                         onUpdate={this.handleUpdate}
                     />

src/views/preview/preview.scss

@@ -189,6 +189,19 @@ $stage-width: 480px;
         .comment-bubble {
             text-align: left;
         }
+
+        .comments-turned-off {
+            border: 1px solid $ui-blue-25percent;
+            border-radius: .5rem;
+            padding: 1.5rem 0;
+            background: $ui-blue-10percent;
+            width: 100%;
+            text-align: center;
+        }
+
+        .comments-allowed-input {
+            margin-right: 3px;
+        }
     }
 
     .remix-button,