Merge pull request #2150 from paulkaplan/new-comment

Add comments to projects and replies to comments

src/components/forms/inplace-input.scss

@@ -36,7 +36,7 @@
 }
 
 .inplace-textarea {
-    transition: all 1s ease;
+    transition: all .2s ease;
     border: 2px dashed $ui-blue-25percent;
     border-radius: 8px;
     background-color: $ui-light-gray;
@@ -49,7 +49,7 @@
     resize: none;
 
     &:focus {
-        transition: all 1s ease;
+        transition: all .2s ease;
         outline: none;
         border: 2px solid $ui-blue;
         box-shadow: 0 0 0 4px $ui-blue-25percent;

src/redux/preview.js

@@ -87,6 +87,19 @@ module.exports.previewReducer = (state, action) => {
             comments: [...state.comments, ...action.items] // TODO: consider a different way of doing this?
         });
     case 'SET_COMMENT_DELETED':
+        if (action.topLevelCommentId) {
+            return Object.assign({}, state, {
+                replies: Object.assign({}, state.replies, {
+                    [action.topLevelCommentId]: state.replies[action.topLevelCommentId].map(comment => {
+                        if (comment.id === action.commentId) {
+                            return Object.assign({}, comment, {deleted: true});
+                        }
+                        return comment;
+                    })
+                })
+            });
+        }
+
         return Object.assign({}, state, {
             comments: state.comments.map(comment => {
                 if (comment.id === action.commentId) {
@@ -95,6 +108,21 @@ module.exports.previewReducer = (state, action) => {
                 return comment;
             })
         });
+    case 'ADD_NEW_COMMENT':
+        if (action.topLevelCommentId) {
+            return Object.assign({}, state, {
+                replies: Object.assign({}, state.replies, {
+                    // Replies to comments go at the end  of the thread
+                    [action.topLevelCommentId]: state.replies[action.topLevelCommentId].concat(action.comment)
+                })
+            });
+        }
+
+        // Reply to the top level project, put the reply at the beginning
+        return Object.assign({}, state, {
+            comments: [action.comment, ...state.comments],
+            replies: Object.assign({}, state.replies, {[action.comment.id]: []})
+        });
     case 'SET_REPLIES':
         return Object.assign({}, state, {
             replies: merge({}, state.replies, action.replies)
@@ -200,9 +228,16 @@ module.exports.setStudioFetchStatus = (studioId, status) => ({
     status: status
 });
 
-module.exports.setCommentDeleted = commentId => ({
+module.exports.setCommentDeleted = (commentId, topLevelCommentId) => ({
     type: 'SET_COMMENT_DELETED',
-    commentId: commentId
+    commentId: commentId,
+    topLevelCommentId: topLevelCommentId
+});
+
+module.exports.addNewComment = (comment, topLevelCommentId) => ({
+    type: 'ADD_NEW_COMMENT',
+    comment: comment,
+    topLevelCommentId: topLevelCommentId
 });
 
 module.exports.getProjectInfo = (id, token) => (dispatch => {

src/views/preview/comment/comment.jsx

@@ -1,22 +1,54 @@
 const React = require('react');
 const PropTypes = require('prop-types');
+const bindAll = require('lodash.bindall');
 const classNames = require('classnames');
 
 const FlexRow = require('../../../components/flex-row/flex-row.jsx');
 const Avatar = require('../../../components/avatar/avatar.jsx');
 const FormattedRelative = require('react-intl').FormattedRelative;
+const ComposeComment = require('./compose-comment.jsx');
 
 require('./comment.scss');
 
-const Comment = ({
+class Comment extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleDelete',
+            'handlePostReply',
+            'handleToggleReplying'
+        ]);
+        this.state = {
+            replying: false
+        };
+    }
+
+    handlePostReply (comment) {
+        this.setState({replying: false});
+        this.props.onAddComment(comment);
+    }
+
+    handleToggleReplying () {
+        this.setState({replying: !this.state.replying});
+    }
+
+    handleDelete () {
+        this.props.onDelete(this.props.id);
+    }
+
+    render () {
+        const {
             author,
             deletable,
             deleted,
+            canReply,
             content,
             datetimeCreated,
-    onDelete,
-    id
-}) => (
+            id,
+            projectId
+        } = this.props;
+
+        return (
             <div
                 className="flex-row comment"
                 id={`comments-${id}`}
@@ -34,7 +66,7 @@ const Comment = ({
                             {deletable ? (
                                 <span
                                     className="comment-delete"
-                            onClick={onDelete}
+                                    onClick={this.handleDelete}
                                 >
                                     Delete {/* TODO internationalize */}
                                 </span>
@@ -60,17 +92,31 @@ const Comment = ({
                             <span className="comment-time">
                                 <FormattedRelative value={new Date(datetimeCreated)} />
                             </span>
-                    <a
+                            {canReply ? (
+                                <span
                                     className="comment-reply"
-                        href={`#comments-${id}`}
+                                    onClick={this.handleToggleReplying}
                                 >
                                     reply
-                    </a>
+                                </span>
+                            ) : null}
                         </FlexRow>
                     </div>
+                    {this.state.replying ? (
+                        <FlexRow className="comment-reply-row">
+                            <ComposeComment
+                                parentId={id}
+                                projectId={projectId}
+                                onAddComment={this.handlePostReply}
+                                onCancel={this.handleToggleReplying}
+                            />
+                        </FlexRow>
+                    ) : null}
                 </FlexRow>
             </div>
         );
+    }
+}
 
 Comment.propTypes = {
     author: PropTypes.shape({
@@ -78,12 +124,15 @@ Comment.propTypes = {
         image: PropTypes.string,
         username: PropTypes.string
     }),
+    canReply: PropTypes.bool,
     content: PropTypes.string,
     datetimeCreated: PropTypes.string,
     deletable: PropTypes.bool,
     deleted: PropTypes.bool,
     id: PropTypes.number,
-    onDelete: PropTypes.func
+    onAddComment: PropTypes.func,
+    onDelete: PropTypes.func,
+    projectId: PropTypes.number
 };
 
 module.exports = Comment;

src/views/preview/comment/comment.scss

@@ -1,8 +1,26 @@
 @import "../../../colors";
 
 .compose-comment {
+    margin-left: .5rem;
     width: 100%;
 
+    .compose-error-row {
+        width: 100%;
+        justify-content: flex-start;
+
+        .compose-error-tip {
+            margin-bottom: .5rem;
+            border: 1px solid $active-gray;
+            border-radius: 5px;
+            background-color: $ui-orange;
+            padding: .25rem;
+            width: 100%;
+            text-align: left;
+            color: $type-white;
+            font-size: .85rem;
+        }
+    }
+
     .textarea-row {
         width: 100%;
 
@@ -161,6 +179,9 @@
 
             .comment-reply {
                 display: inline-flex;
+                cursor: pointer;
+                color: $ui-blue;
+                font-weight: bold;
 
                 &:after {
                     margin-left: .25rem;
@@ -197,6 +218,16 @@
     }
 }
 
+.comments-root-reply {
+    margin-bottom: 1.5rem;
+}
+
+.comment-reply-row {
+    margin-top: 1.5rem;
+    margin-left: .5rem;
+    width: 100%;
+}
+
 .expand-thread {
     margin-bottom: 24px;
     width: 100%;

src/views/preview/comment/compose-comment.jsx

@@ -1,26 +1,203 @@
 const React = require('react');
+const PropTypes = require('prop-types');
+const bindAll = require('lodash.bindall');
+const classNames = require('classnames');
+const keyMirror = require('keymirror');
 
 const FlexRow = require('../../../components/flex-row/flex-row.jsx');
+const Avatar = require('../../../components/avatar/avatar.jsx');
 const InplaceInput = require('../../../components/forms/inplace-input.jsx');
 const Button = require('../../../components/forms/button.jsx');
 
+const connect = require('react-redux').connect;
+
+const api = require('../../../lib/api');
+
 require('./comment.scss');
 
 const onUpdate = update => update;
 
-const ComposeComment = () => (
+const MAX_COMMENT_LENGTH = 500;
+
+const ComposeStatus = keyMirror({
+    EDITING: null,
+    SUBMITTING: null,
+    REJECTED: null
+});
+
+/* TODO translations */
+const CommentErrorMessages = {
+    isEmpty: "You can't post an empty comment",
+    isFlood: "Woah, seems like you're commenting really quickly. Please wait longer between posts.",
+    isBad: 'Hmm...the bad word detector thinks there is a problem with your comment. ' +
+        'Please change it and remember to be respectful.',
+    hasChatSite: 'Uh oh! This comment contains a link to a website with unmoderated chat.' +
+        'For safety reasons, please do not link to these sites!',
+    isSpam: "Hmm, seems like you've posted the same comment a bunch of times. Please don't spam.",
+    isMuted: "Hmm, the filterbot is pretty sure your recent comments weren't ok for Scratch, " +
+        'so your account has been muted for the rest of the day. :/',
+    isUnconstructive: 'Hmm, the filterbot thinks your comment may be mean or disrespectful. ' +
+        'Remember, most projects on Scratch are made by people who are just learning how to program.',
+    isDisallowed: 'Hmm, it looks like comments have been turned off for this page. :/',
+    // TODO implement the special modal for ip mute bans that includes links to appeals
+    //      this is just a stub of the actual message
+    isIPMuted: 'Sorry, the Scratch Team had to prevent your network from sharing comments or ' +
+        'projects because it was used to break our community guidelines too many times.' +
+        'You can still share comments and projects from another network.',
+    isTooLong: "That's too long! Please find a way to shorten your text.",
+    error: 'Oops! Something went wrong'
+};
+
+class ComposeComment extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handlePost',
+            'handleCancel',
+            'handleInput'
+        ]);
+        this.state = {
+            message: '',
+            status: ComposeStatus.EDITING,
+            error: null
+        };
+    }
+    handleInput (event) {
+        this.setState({
+            message: event.target.value,
+            status: ComposeStatus.EDITING,
+            error: null
+        });
+    }
+    handlePost () {
+        this.setState({status: ComposeStatus.SUBMITTING});
+        api({
+            uri: `/proxy/comments/project/${this.props.projectId}`,
+            authentication: this.props.user.token,
+            withCredentials: true,
+            method: 'POST',
+            useCsrf: true,
+            json: {
+                content: this.state.message,
+                parent_id: this.props.parentId || '',
+                comentee_id: this.props.comenteeId || ''
+            }
+        }, (err, body, res) => {
+            if (err || res.statusCode !== 200) {
+                body = {rejected: 'error'};
+            }
+
+            if (body.rejected && this.state.status === ComposeStatus.SUBMITTING) {
+                // Note: does not reset the message state
+                this.setState({
+                    status: ComposeStatus.REJECTED,
+                    // If there is a special error message for the rejected reason,
+                    // use it. Otherwise, use the generic 'error' ("Oops!...")
+                    error: CommentErrorMessages[body.rejected] ?
+                        body.rejected : 'error'
+                });
+                return;
+            }
+
+            // Clear the text field and reset status on successful submission
+            this.setState({
+                message: '',
+                status: ComposeStatus.EDITING,
+                error: null
+            });
+
+            // Add the username, which isn't included right now from scratch-api
+            if (body.author) body.author.username = this.props.user.username;
+
+            this.props.onAddComment(body);
+        });
+    }
+    handleCancel () {
+        this.setState({
+            message: '',
+            status: ComposeStatus.EDITING,
+            error: null
+        });
+        if (this.props.onCancel) this.props.onCancel();
+    }
+    render () {
+        return (
+            <div
+                className="flex-row comment"
+            >
+                <a href={`/users/${this.props.user.username}`}>
+                    <Avatar src={this.props.user.thumbnailUrl} />
+                </a>
                 <FlexRow className="compose-comment column">
+                    {this.state.error ? (
+                        <FlexRow className="compose-error-row">
+                            <div className="compose-error-tip">
+                                {CommentErrorMessages[this.state.error] || 'Unknown error'}
+                            </div>
+                        </FlexRow>
+                    ) : null}
                     <InplaceInput
+                        className={classNames('compose-input',
+                            MAX_COMMENT_LENGTH - this.state.message.length >= 0 ? 'compose-valid' : 'compose-invalid')}
                         handleUpdate={onUpdate}
                         name="compose-comment"
                         type="textarea"
+                        value={this.state.message}
+                        onInput={this.handleInput}
                     />
                     <FlexRow className="compose-bottom-row">
-            <Button className="compose-post">Post</Button>
-            <Button className="compose-cancel">Cancel</Button>
-            <span className="compose-limit">500 characters left</span>
+                        <Button
+                            className="compose-post"
+                            disabled={this.state.status === ComposeStatus.SUBMITTING}
+                            onClick={this.handlePost}
+                        >
+                            {this.state.status === ComposeStatus.SUBMITTING ? (
+                                'Posting...' /* TODO internationalize */
+                            ) : (
+                                'Post' /* TODO internationalize */
+                            )}
+                        </Button>
+                        <Button
+                            className="compose-cancel"
+                            onClick={this.handleCancel}
+                        >
+                            Cancel {/* TODO internationalize */}
+                        </Button>
+                        <span
+                            className={classNames('compose-limit',
+                                MAX_COMMENT_LENGTH - this.state.message.length >= 0 ?
+                                    'compose-valid' : 'compose-invalid')}
+                        >
+                            {/* TODO internationalize */}
+                            {MAX_COMMENT_LENGTH - this.state.message.length} characters left
+                        </span>
                     </FlexRow>
                 </FlexRow>
+            </div>
         );
+    }
+}
 
-module.exports = ComposeComment;
+ComposeComment.propTypes = {
+    comenteeId: PropTypes.number,
+    onAddComment: PropTypes.func,
+    onCancel: PropTypes.func,
+    parentId: PropTypes.number,
+    projectId: PropTypes.number,
+    user: PropTypes.shape({
+        id: PropTypes.number,
+        username: PropTypes.string,
+        token: PropTypes.string,
+        thumbnailUrl: PropTypes.string
+    })
+};
+
+const mapStateToProps = state => ({
+    user: state.session.session.user
+});
+
+const ConnectedComposeComment = connect(
+    mapStateToProps
+)(ComposeComment);
+
+module.exports = ConnectedComposeComment;

src/views/preview/comment/top-level-comment.jsx

@@ -13,7 +13,8 @@ class TopLevelComment extends React.Component {
         super(props);
         bindAll(this, [
             'handleExpandThread',
-            'handleDelete'
+            'handleAddComment',
+            'handleDeleteReply'
         ]);
         this.state = {
             expanded: false
@@ -26,26 +27,36 @@ class TopLevelComment extends React.Component {
         });
     }
 
-    handleDelete () {
-        this.props.onDelete(this.props.id);
+    handleDeleteReply (commentId) {
+        // Only apply topLevelCommentId for deleting replies
+        // The top level comment itself just gets passed onDelete directly
+        this.props.onDelete(commentId, this.props.id);
+    }
+
+    handleAddComment (comment) {
+        this.props.onAddComment(comment, this.props.id);
     }
 
     render () {
         const {
             author,
+            canReply,
             content,
             datetimeCreated,
             deletable,
             deleted,
             id,
-            replies
+            onDelete,
+            replies,
+            projectId
         } = this.props;
 
         return (
             <FlexRow className="comment-container">
                 <Comment
-                    onDelete={this.handleDelete}
-                    {...{author, content, datetimeCreated, deletable, deleted, id}}
+                    projectId={projectId}
+                    onAddComment={this.handleAddComment}
+                    {...{author, content, datetimeCreated, deletable, deleted, canReply, id, onDelete}}
                 />
                 {replies.length > 0 &&
                     <FlexRow
@@ -59,13 +70,16 @@ class TopLevelComment extends React.Component {
                         {(this.state.expanded ? replies : replies.slice(0, 3)).map(reply => (
                             <Comment
                                 author={reply.author}
+                                canReply={canReply}
                                 content={reply.content}
                                 datetimeCreated={reply.datetime_created}
                                 deletable={deletable}
                                 deleted={reply.deleted}
                                 id={reply.id}
                                 key={reply.id}
-                                onDelete={this.handleDelete}
+                                projectId={projectId}
+                                onAddComment={this.handleAddComment}
+                                onDelete={this.handleDeleteReply}
                             />
                         ))}
                     </FlexRow>
@@ -87,11 +101,13 @@ TopLevelComment.propTypes = {
         image: PropTypes.string,
         username: PropTypes.string
     }),
+    canReply: PropTypes.bool,
     content: PropTypes.string,
     datetimeCreated: PropTypes.string,
     deletable: PropTypes.bool,
     deleted: PropTypes.bool,
     id: PropTypes.number,
+    onAddComment: PropTypes.func,
     onDelete: PropTypes.func,
     parentId: PropTypes.number,
     projectId: PropTypes.string,

src/views/preview/presentation.jsx

@@ -21,6 +21,7 @@ const StudioList = require('./studio-list.jsx');
 const Subactions = require('./subactions.jsx');
 const InplaceInput = require('../../components/forms/inplace-input.jsx');
 const TopLevelComment = require('./comment/top-level-comment.jsx');
+const ComposeComment = require('./comment/compose-comment.jsx');
 const ExtensionChip = require('./extension-chip.jsx');
 
 const projectShape = require('./projectshape.jsx').projectShape;
@@ -64,6 +65,7 @@ const PreviewPresentation = ({
     projectStudios,
     studios,
     userOwnsProject,
+    onAddComment,
     onDeleteComment,
     onFavoriteClicked,
     onLoadMore,
@@ -317,10 +319,21 @@ const PreviewPresentation = ({
                                         <h4>Comments</h4>
                                         {/* TODO: Add toggle comments component and logic*/}
                                     </FlexRow>
+
+                                    <FlexRow className="comments-root-reply">
+                                        {isLoggedIn &&
+                                            <ComposeComment
+                                                projectId={projectId}
+                                                onAddComment={onAddComment}
+                                            />
+                                        }
+                                    </FlexRow>
+
                                     <FlexRow className="comments-list">
                                         {comments.map(comment => (
                                             <TopLevelComment
                                                 author={comment.author}
+                                                canReply={isLoggedIn}
                                                 content={comment.content}
                                                 datetimeCreated={comment.datetime_created}
                                                 deletable={userOwnsProject}
@@ -330,6 +343,7 @@ const PreviewPresentation = ({
                                                 parentId={comment.parent_id}
                                                 projectId={projectId}
                                                 replies={replies && replies[comment.id] ? replies[comment.id] : []}
+                                                onAddComment={onAddComment}
                                                 onDelete={onDeleteComment}
                                             />
                                         ))}
@@ -374,6 +388,7 @@ PreviewPresentation.propTypes = {
     isShared: PropTypes.bool,
     loveCount: PropTypes.number,
     loved: PropTypes.bool,
+    onAddComment: PropTypes.func,
     onAddToStudioClicked: PropTypes.func,
     onAddToStudioClosed: PropTypes.func,
     onDeleteComment: PropTypes.func,

src/views/preview/preview.jsx

@@ -33,6 +33,7 @@ class Preview extends React.Component {
         super(props);
         bindAll(this, [
             'addEventListeners',
+            'handleAddComment',
             'handleDeleteComment',
             'handleToggleStudio',
             'handleFavoriteToggle',
@@ -166,8 +167,11 @@ class Preview extends React.Component {
                 });
             });
     }
-    handleDeleteComment (id) {
-        this.props.handleDeleteComment(this.state.projectId, id, this.props.user.token);
+    handleAddComment (comment, topLevelCommentId) {
+        this.props.handleAddComment(comment, topLevelCommentId);
+    }
+    handleDeleteComment (id, topLevelCommentId) {
+        this.props.handleDeleteComment(this.state.projectId, id, topLevelCommentId, this.props.user.token);
     }
     handleReportClick () {
         this.setState({reportOpen: true});
@@ -341,6 +345,7 @@ class Preview extends React.Component {
                         reportOpen={this.state.reportOpen}
                         studios={this.props.studios}
                         userOwnsProject={this.props.userOwnsProject}
+                        onAddComment={this.handleAddComment}
                         onAddToStudioClicked={this.handleAddToStudioClick}
                         onAddToStudioClosed={this.handleAddToStudioClose}
                         onDeleteComment={this.handleDeleteComment}
@@ -399,6 +404,7 @@ Preview.propTypes = {
     getProjectStudios: PropTypes.func.isRequired,
     getRemixes: PropTypes.func.isRequired,
     getTopLevelComments: PropTypes.func.isRequired,
+    handleAddComment: PropTypes.func,
     handleDeleteComment: PropTypes.func,
     handleLogIn: PropTypes.func,
     handleLogOut: PropTypes.func,
@@ -526,8 +532,11 @@ const mapStateToProps = state => {
 };
 
 const mapDispatchToProps = dispatch => ({
-    handleDeleteComment: (projectId, commentId, token) => {
-        dispatch(previewActions.deleteComment(projectId, commentId, token));
+    handleAddComment: (comment, topLevelCommentId) => {
+        dispatch(previewActions.addNewComment(comment, topLevelCommentId));
+    },
+    handleDeleteComment: (projectId, commentId, topLevelCommentId, token) => {
+        dispatch(previewActions.deleteComment(projectId, commentId, topLevelCommentId, token));
     },
     handleOpenRegistration: event => {
         event.preventDefault();