Merge pull request #2657 from paulkaplan/more-replies

Allow loading more than 20 replies
2024-11-23 07:38:07 -05:00 · 2019-01-10 14:29:27 -05:00 · 2019-01-10 14:29:27 -05:00 · 6c8881106e
commit 6c8881106e
parent 17be315d25 16391f25ee
8 changed files with 122 additions and 44 deletions
--- a/package.json
+++ b/package.json
@ -78,8 +78,10 @@
    "lodash.defaultsdeep": "3.10.0",
    "lodash.isarray": "3.0.4",
    "lodash.merge": "3.3.2",
+    "lodash.mergewith": "4.6.1",
    "lodash.omit": "3.1.0",
    "lodash.range": "3.0.1",
+    "lodash.uniqby": "4.7.0",
    "minilog": "2.0.8",
    "node-dir": "0.1.16",
    "node-sass": "4.6.1",
--- a/src/l10n.json
+++ b/src/l10n.json
@ -237,7 +237,7 @@
    "comments.post": "Post",
    "comments.cancel": "Cancel",
    "comments.lengthWarning": "{remainingCharacters, plural, one {1 character left} other {{remainingCharacters} characters left}}",
-    "comments.seeMoreReplies": "{repliesCount, plural, one {See 1 more reply} other {See all {repliesCount} replies}}",
+    "comments.loadMoreReplies": "See more replies",
    "comments.status.delbyusr": "Deleted by project owner",
    "comments.status.censbyfilter": "Censored by filter",
    "comments.status.delbyparentcomment": "Parent comment deleted",
--- a/src/redux/preview.js
+++ b/src/redux/preview.js
@ -1,11 +1,14 @@
 const defaults = require('lodash.defaults');
 const keyMirror = require('keymirror');
 const async = require('async');
-const merge = require('lodash.merge');
+const mergeWith = require('lodash.mergewith');
+const uniqBy = require('lodash.uniqby');

 const api = require('../lib/api');
 const log = require('../lib/log');

+const COMMENT_LIMIT = 20;
+
 module.exports.Status = keyMirror({
    FETCHED: null,
    NOT_FETCHED: null,
@ -100,7 +103,7 @@ module.exports.previewReducer = (state, action) => {
        });
    case 'SET_COMMENTS':
        return Object.assign({}, state, {
-            comments: [...state.comments, ...action.items] // TODO: consider a different way of doing this?
+            comments: uniqBy(state.comments.concat(action.items), 'id')
        });
    case 'UPDATE_COMMENT':
        if (action.topLevelCommentId) {
@ -149,7 +152,19 @@ module.exports.previewReducer = (state, action) => {
        });
    case 'SET_REPLIES':
        return Object.assign({}, state, {
-            replies: merge({}, state.replies, action.replies)
+            // Append new replies to the state.replies structure
+            replies: mergeWith({}, state.replies, action.replies, (replies, newReplies) => (
+                uniqBy((replies || []).concat(newReplies || []), 'id')
+            )),
+            // Also set the `moreRepliesToLoad` property on the top-level comments
+            comments: state.comments.map(comment => {
+                if (action.replies[comment.id]) {
+                    return Object.assign({}, comment, {
+                        moreRepliesToLoad: action.replies[comment.id].length === COMMENT_LIMIT
+                    });
+                }
+                return comment;
+            })
        });
    case 'SET_LOVED':
        return Object.assign({}, state, {
@ -448,7 +463,6 @@ module.exports.getFavedStatus = (id, username, token) => (dispatch => {
 });

 module.exports.getTopLevelComments = (id, offset, isAdmin, token) => (dispatch => {
-    const COMMENT_LIMIT = 20;
    dispatch(module.exports.setFetchStatus('comments', module.exports.Status.FETCHING));
    api({
        uri: `${isAdmin ? '/admin' : ''}/projects/${id}/comments`,
@ -467,7 +481,7 @@ module.exports.getTopLevelComments = (id, offset, isAdmin, token) => (dispatch =
        }
        dispatch(module.exports.setFetchStatus('comments', module.exports.Status.FETCHED));
        dispatch(module.exports.setComments(body));
-        dispatch(module.exports.getReplies(id, body.map(comment => comment.id), isAdmin, token));
+        dispatch(module.exports.getReplies(id, body.map(comment => comment.id), 0, isAdmin, token));

        // If we loaded a full page of comments, assume there are more to load.
        // This will be wrong (1 / COMMENT_LIMIT) of the time, but does not require
@ -503,17 +517,18 @@ module.exports.getCommentById = (projectId, commentId, isAdmin, token) => (dispa
        // If the comment is not a reply, show it as top level and load replies
        dispatch(module.exports.setFetchStatus('comments', module.exports.Status.FETCHED));
        dispatch(module.exports.setComments([body]));
-        dispatch(module.exports.getReplies(projectId, [body.id], isAdmin, token));
+        dispatch(module.exports.getReplies(projectId, [body.id], 0, isAdmin, token));
    });
 });

-module.exports.getReplies = (projectId, commentIds, isAdmin, token) => (dispatch => {
+module.exports.getReplies = (projectId, commentIds, offset, isAdmin, token) => (dispatch => {
    dispatch(module.exports.setFetchStatus('replies', module.exports.Status.FETCHING));
    const fetchedReplies = {};
    async.eachLimit(commentIds, 10, (parentId, callback) => {
        api({
            uri: `${isAdmin ? '/admin' : ''}/projects/${projectId}/comments/${parentId}/replies`,
-            authentication: isAdmin ? token : null
+            authentication: isAdmin ? token : null,
+            params: {offset: offset || 0, limit: COMMENT_LIMIT}
        }, (err, body) => {
            if (err) {
                return callback(`Error fetching comment replies: ${err}`);
--- a/src/views/preview/comment/comment.scss
+++ b/src/views/preview/comment/comment.scss
@ -235,22 +235,20 @@

 .replies {
    width: calc(100% - 4rem);
+}

-    &.collapsed .comment {
-        &:last-child {
-            &:after {
-                position: absolute;
-                bottom: 0;
-                background: linear-gradient(
-                    $ui-light-primary-transparent,
-                    $ui-light-primary
-                );
-                width: 100%;
-                height: 100%;
-                content: "";
-                pointer-events: none;
-            }
-        }
+.replies.collapsed > .comment:last-of-type {
+    &:after {
+        position: absolute;
+        bottom: 0;
+        background: linear-gradient(
+            $ui-light-primary-transparent,
+            $ui-light-primary
+        );
+        width: 100%;
+        height: 100%;
+        content: "";
+        pointer-events: none;
    }
 }

--- a/src/views/preview/comment/top-level-comment.jsx
+++ b/src/views/preview/comment/top-level-comment.jsx
@ -28,9 +28,11 @@ class TopLevelComment extends React.Component {
    }

    handleExpandThread () {
-        this.setState({
-            expanded: true
-        });
+        if (this.state.expanded) {
+            this.props.onLoadMoreReplies(this.props.id, this.props.replies.length);
+        } else {
+            this.setState({expanded: true});
+        }
    }

    handleDeleteReply (replyId) {
@ -79,6 +81,7 @@ class TopLevelComment extends React.Component {
            datetimeCreated,
            highlightedCommentId,
            id,
+            moreRepliesToLoad,
            onDelete,
            onReport,
            onRestore,
@ -141,21 +144,17 @@ class TopLevelComment extends React.Component {
                                onRestore={this.handleRestoreReply}
                            />
                        ))}
+                        {((!this.state.expanded && replies.length > 3) ||
+                            (this.state.expanded && moreRepliesToLoad)) &&
+                            <a
+                                className="expand-thread"
+                                onClick={this.handleExpandThread}
+                            >
+                                <FormattedMessage id="comments.loadMoreReplies" />
+                            </a>
+                        }
                    </FlexRow>
                }
-                {!this.state.expanded && replies.length > 3 &&
-                    <a
-                        className="expand-thread"
-                        onClick={this.handleExpandThread}
-                    >
-                        <FormattedMessage
-                            id="comments.seeMoreReplies"
-                            values={{
-                                repliesCount: replies.length
-                            }}
-                        />
-                    </a>
-                }
            </FlexRow>
        );
    }
@ -178,8 +177,10 @@ TopLevelComment.propTypes = {
    deletable: PropTypes.bool,
    highlightedCommentId: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
    id: PropTypes.number,
+    moreRepliesToLoad: PropTypes.bool,
    onAddComment: PropTypes.func,
    onDelete: PropTypes.func,
+    onLoadMoreReplies: PropTypes.func,
    onReport: PropTypes.func,
    onRestore: PropTypes.func,
    parentId: PropTypes.number,
@ -189,7 +190,8 @@ TopLevelComment.propTypes = {
 };

 TopLevelComment.defaultProps = {
-    defaultExpanded: false
+    defaultExpanded: false,
+    moreRepliesToLoad: false
 };

 module.exports = TopLevelComment;
--- a/src/views/preview/presentation.jsx
+++ b/src/views/preview/presentation.jsx
@ -88,6 +88,7 @@ const PreviewPresentation = ({
    onFavoriteClicked,
    onGreenFlag,
    onLoadMore,
+    onLoadMoreReplies,
    onLoveClicked,
    onOpenAdminPanel,
    onRemix,
@ -550,12 +551,14 @@ const PreviewPresentation = ({
                                                highlightedCommentId={singleCommentId}
                                                id={comment.id}
                                                key={comment.id}
+                                                moreRepliesToLoad={comment.moreRepliesToLoad}
                                                parentId={comment.parent_id}
                                                projectId={projectId}
                                                replies={replies && replies[comment.id] ? replies[comment.id] : []}
                                                visibility={comment.visibility}
                                                onAddComment={onAddComment}
                                                onDelete={onDeleteComment}
+                                                onLoadMoreReplies={onLoadMoreReplies}
                                                onReport={onReportComment}
                                                onRestore={onRestoreComment}
                                            />
@ -644,6 +647,7 @@ PreviewPresentation.propTypes = {
    onFavoriteClicked: PropTypes.func,
    onGreenFlag: PropTypes.func,
    onLoadMore: PropTypes.func,
+    onLoadMoreReplies: PropTypes.func,
    onLoveClicked: PropTypes.func,
    onOpenAdminPanel: PropTypes.func,
    onRemix: PropTypes.func,
--- a/src/views/preview/project-view.jsx
+++ b/src/views/preview/project-view.jsx
@ -60,6 +60,7 @@ class Preview extends React.Component {
            'handleToggleStudio',
            'handleFavoriteToggle',
            'handleLoadMore',
+            'handleLoadMoreReplies',
            'handleLoveToggle',
            'handleMessage',
            'handlePopState',
@ -440,6 +441,11 @@ class Preview extends React.Component {
        this.props.getTopLevelComments(this.state.projectId, this.props.comments.length,
            this.props.isAdmin, this.props.user && this.props.user.token);
    }
+    handleLoadMoreReplies (commentId, offset) {
+        this.props.getMoreReplies(this.state.projectId, commentId, offset,
+            this.props.isAdmin, this.props.user && this.props.user.token
+        );
+    }
    handleLoveToggle () {
        if (!this.props.lovedLoaded) return;

@ -644,6 +650,7 @@ class Preview extends React.Component {
                            onFavoriteClicked={this.handleFavoriteToggle}
                            onGreenFlag={this.handleGreenFlag}
                            onLoadMore={this.handleLoadMore}
+                            onLoadMoreReplies={this.handleLoadMoreReplies}
                            onLoveClicked={this.handleLoveToggle}
                            onOpenAdminPanel={this.handleOpenAdminPanel}
                            onRemix={this.handleRemix}
@ -736,6 +743,7 @@ Preview.propTypes = {
    getCuratedStudios: PropTypes.func.isRequired,
    getFavedStatus: PropTypes.func.isRequired,
    getLovedStatus: PropTypes.func.isRequired,
+    getMoreReplies: PropTypes.func.isRequired,
    getOriginalInfo: PropTypes.func.isRequired,
    getParentInfo: PropTypes.func.isRequired,
    getProjectInfo: PropTypes.func.isRequired,
@ -948,6 +956,9 @@ const mapDispatchToProps = dispatch => ({
    getCommentById: (projectId, commentId, isAdmin, token) => {
        dispatch(previewActions.getCommentById(projectId, commentId, isAdmin, token));
    },
+    getMoreReplies: (projectId, commentId, offset, isAdmin, token) => {
+        dispatch(previewActions.getReplies(projectId, [commentId], offset, isAdmin, token));
+    },
    getFavedStatus: (id, username, token) => {
        dispatch(previewActions.getFavedStatus(id, username, token));
    },
--- a/test/unit/redux/preview-test.js
+++ b/test/unit/redux/preview-test.js
@ -59,9 +59,9 @@ tap.test('setComments', t => {
    // Initial value
    t.deepEqual(initialState.comments, []);

-    state = reducer(initialState, Preview.setComments([1, 2]));
-    state = reducer(state, Preview.setComments([3, 4]));
-    t.deepEqual(state.comments, [1, 2, 3, 4]);
+    state = reducer(initialState, Preview.setComments([{id: 1}, {id: 2}]));
+    state = reducer(state, Preview.setComments([{id: 3}, {id: 4}]));
+    t.deepEqual(state.comments, [{id: 1}, {id: 2}, {id: 3}, {id: 4}]);

    t.end();
 });
@ -80,6 +80,13 @@ const commentState = {
    }
 };

+tap.test('setComments, discards duplicates', t => {
+    state = reducer(commentState, Preview.setComments([{id: 'id1'}]));
+    // Does not increase the number of comments, still 3
+    t.equal(state.comments.length, 3);
+    t.end();
+});
+
 tap.test('setCommentDeleted, top level comment', t => {
    state = reducer(commentState, Preview.setCommentDeleted('id2'));
    t.equal(state.comments[1].visibility, 'deleted');
@ -128,3 +135,42 @@ tap.test('addNewComment, reply comment', t => {
    t.equal(state.replies.id1[2].id, 'new comment');
    t.end();
 });
+
+tap.test('setReplies', t => {
+    // setReplies should append new replies
+    state = reducer(commentState, Preview.setReplies({
+        id1: {id: 'id6'}
+    }));
+    t.equal(state.replies.id1[2].id, 'id6');
+    t.equal(state.comments[0].moreRepliesToLoad, false);
+
+    // setReplies should ignore duplicates, do the same as above again
+    t.equal(state.replies.id1.length, 3);
+    state = reducer(state, Preview.setReplies({id1: {id: 'id6'}}));
+    t.equal(state.replies.id1.length, 3);
+
+    // setReplies can add replies to a comment that didn't have any
+    state = reducer(state, Preview.setReplies({
+        id2: {id: 'id7'}
+    }));
+    t.equal(state.replies.id1.length, 3);
+    t.equal(state.replies.id2.length, 1);
+    t.equal(state.replies.id2[0].id, 'id7');
+    t.equal(state.comments[0].moreRepliesToLoad, false);
+    t.equal(state.comments[1].moreRepliesToLoad, false);
+
+    // Getting 20 (COMMENT_LIMIT) replies sets moreRepliesToLoad to true
+    state = reducer(state, Preview.setReplies({
+        id3: (new Array(20)).map((_, i) => ({id: `id${i + 1}`}))
+    }));
+    t.equal(state.comments[0].moreRepliesToLoad, false);
+    t.equal(state.comments[1].moreRepliesToLoad, false);
+    t.equal(state.comments[2].moreRepliesToLoad, true);
+
+    // Getting one more reply sets moreRepliesToLoad back to false
+    state = reducer(state, Preview.setReplies({
+        id3: {id: 'id21'}
+    }));
+    t.equal(state.comments[2].moreRepliesToLoad, false);
+    t.end();
+});