diff --git a/src/redux/preview.js b/src/redux/preview.js index 5492b51d3..662affd56 100644 --- a/src/redux/preview.js +++ b/src/redux/preview.js @@ -37,7 +37,8 @@ module.exports.getInitialState = () => ({ parent: {}, projectStudios: [], curatedStudios: [], - currentStudioIds: [] + currentStudioIds: [], + moreCommentsToLoad: false }); module.exports.previewReducer = (state, action) => { @@ -153,6 +154,10 @@ module.exports.previewReducer = (state, action) => { state = JSON.parse(JSON.stringify(state)); state.status.studioRequests[action.studioId] = action.status; return state; + case 'SET_MORE_COMMENTS_TO_LOAD': + return Object.assign({}, state, { + moreCommentsToLoad: action.moreCommentsToLoad + }); case 'ERROR': log.error(action.error); return state; @@ -291,6 +296,11 @@ module.exports.addNewComment = (comment, topLevelCommentId) => ({ topLevelCommentId: topLevelCommentId }); +module.exports.setMoreCommentsToLoad = moreCommentsToLoad => ({ + type: 'SET_MORE_COMMENTS_TO_LOAD', + moreCommentsToLoad: moreCommentsToLoad +}); + module.exports.getProjectInfo = (id, token) => (dispatch => { const opts = { uri: `/projects/${id}` @@ -377,11 +387,12 @@ 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`, authentication: isAdmin ? token : null, - params: {offset: offset || 0} + params: {offset: offset || 0, limit: COMMENT_LIMIT} }, (err, body) => { if (err) { dispatch(module.exports.setFetchStatus('comments', module.exports.Status.ERROR)); @@ -396,6 +407,13 @@ 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)); + + // 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 + // any more server query complexity, so seems worth it. In the case of a project with + // number of comments divisible by the COMMENT_LIMIT, the load more button will be + // clickable, but upon clicking it will go away. + dispatch(module.exports.setMoreCommentsToLoad(body.length === COMMENT_LIMIT)); }); }); diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx index de421d13e..ad13768fe 100644 --- a/src/views/preview/presentation.jsx +++ b/src/views/preview/presentation.jsx @@ -59,6 +59,7 @@ const PreviewPresentation = ({ isShared, loved, loveCount, + moreCommentsToLoad, originalInfo, parentInfo, projectHost, @@ -89,7 +90,6 @@ const PreviewPresentation = ({ onUpdate }) => { const shareDate = ((projectInfo.history && projectInfo.history.shared)) ? projectInfo.history.shared : ''; - const loadedCommentCount = comments.length + Object.keys(replies).reduce((acc, id) => acc + replies[id].length, 0); return (
{!isShared && ( @@ -381,7 +381,7 @@ const PreviewPresentation = ({ onRestore={onRestoreComment} /> ))} - {loadedCommentCount < projectInfo.stats.comments && + {moreCommentsToLoad &&