Allow user to exit "single comment mode" and see all comments.

This visually appears like a "load more comments" button for now, but has the impact of unsetting the #comments-<id> hash in the url and resetting the comment state, showing all the comments (in paginated view)

src/l10n.json

@@ -88,7 +88,8 @@
     "general.report": "Report",
     "general.notAvailableHeadline": "Whoops! Our server is Scratch'ing its head",
     "general.notAvailableSubtitle": "We couldn't find the page you're looking for. Check to make sure you've typed the url correctly.",
-
+    "general.seeAllComments": "See all comments",
+    
     "general.all": "All",
     "general.animations": "Animations",
     "general.art": "Art",

src/redux/preview.js

@@ -91,6 +91,11 @@ module.exports.previewReducer = (state, action) => {
                 item !== action.studioId
             ))
         });
+    case 'RESET_COMMENTS':
+        return Object.assign({}, state, {
+            comments: [],
+            replies: {}
+        });
     case 'SET_COMMENTS':
         return Object.assign({}, state, {
             comments: [...state.comments, ...action.items] // TODO: consider a different way of doing this?
@@ -312,6 +317,10 @@ module.exports.setMoreCommentsToLoad = moreCommentsToLoad => ({
     moreCommentsToLoad: moreCommentsToLoad
 });
 
+module.exports.resetComments = () => ({
+    type: 'RESET_COMMENTS'
+});
+
 module.exports.getProjectInfo = (id, token) => (dispatch => {
     const opts = {
         uri: `/projects/${id}`

src/views/preview/presentation.jsx

@@ -79,6 +79,7 @@ const PreviewPresentation = ({
     onReportComment,
     onReportSubmit,
     onRestoreComment,
+    onSeeAllComments,
     onSeeInside,
     onShare,
     onToggleComments,
@@ -385,23 +386,26 @@ const PreviewPresentation = ({
                                         ) : null}
                                     </FlexRow>
 
-                                    <FlexRow className="comments-root-reply">
-                                        {projectInfo.comments_allowed ? (
-                                            isLoggedIn ? (
-                                                <ComposeComment
-                                                    projectId={projectId}
-                                                    onAddComment={onAddComment}
-                                                />
+                                    {/* Do not show the top-level comment form in single comment mode */}
+                                    {!singleCommentId && (
+                                        <FlexRow className="comments-root-reply">
+                                            {projectInfo.comments_allowed ? (
+                                                isLoggedIn ? (
+                                                    <ComposeComment
+                                                        projectId={projectId}
+                                                        onAddComment={onAddComment}
+                                                    />
+                                                ) : (
+                                                    /* TODO add box for signing in to leave a comment */
+                                                    null
+                                                )
                                             ) : (
-                                                /* TODO add box for signing in to leave a comment */
-                                                null
-                                            )
-                                        ) : (
-                                            <div className="comments-turned-off">
-                                                <FormattedMessage id="project.comments.turnedOff" />
-                                            </div>
-                                        )}
-                                    </FlexRow>
+                                                <div className="comments-turned-off">
+                                                    <FormattedMessage id="project.comments.turnedOff" />
+                                                </div>
+                                            )}
+                                        </FlexRow>
+                                    )}
 
                                     <FlexRow className="comments-list">
                                         {comments.map(comment => (
@@ -435,6 +439,14 @@ const PreviewPresentation = ({
                                             <FormattedMessage id="general.loadMore" />
                                         </Button>
                                         }
+                                        {!!singleCommentId &&
+                                            <Button
+                                                className="button load-more-button"
+                                                onClick={onSeeAllComments}
+                                            >
+                                                <FormattedMessage id="general.seeAllComments" />
+                                            </Button>
+                                        }
                                     </FlexRow>
                                 </div>
                                 <FlexRow className="column">
@@ -487,6 +499,7 @@ PreviewPresentation.propTypes = {
     onReportComment: PropTypes.func.isRequired,
     onReportSubmit: PropTypes.func.isRequired,
     onRestoreComment: PropTypes.func,
+    onSeeAllComments: PropTypes.func,
     onSeeInside: PropTypes.func,
     onShare: PropTypes.func,
     onToggleComments: PropTypes.func,

src/views/preview/preview.jsx

@@ -51,6 +51,7 @@ class Preview extends React.Component {
             'handleAddToStudioClick',
             'handleAddToStudioClose',
             'handleRemix',
+            'handleSeeAllComments',
             'handleSeeInside',
             'handleShare',
             'handleUpdateProjectId',
@@ -376,6 +377,16 @@ class Preview extends React.Component {
             if (callback) callback();
         });
     }
+    handleSeeAllComments () {
+        // Remove hash from URL
+        history.pushState('', document.title, window.location.pathname + window.location.search);
+        this.setState({singleCommentId: null});
+        this.props.handleSeeAllComments(
+            this.props.projectInfo.id,
+            this.props.isAdmin,
+            this.props.user.token
+        );
+    }
     initCounts (favorites, loves) {
         this.setState({
             favoriteCount: favorites,
@@ -451,6 +462,7 @@ class Preview extends React.Component {
                         onReportComment={this.handleReportComment}
                         onReportSubmit={this.handleReportSubmit}
                         onRestoreComment={this.handleRestoreComment}
+                        onSeeAllComments={this.handleSeeAllComments}
                         onSeeInside={this.handleSeeInside}
                         onShare={this.handleShare}
                         onToggleComments={this.handleToggleComments}
@@ -536,6 +548,7 @@ Preview.propTypes = {
     handleOpenRegistration: PropTypes.func,
     handleReportComment: PropTypes.func,
     handleRestoreComment: PropTypes.func,
+    handleSeeAllComments: PropTypes.func,
     handleToggleLoginOpen: PropTypes.func,
     isAdmin: PropTypes.bool,
     isEditable: PropTypes.bool,
@@ -674,6 +687,10 @@ const mapDispatchToProps = dispatch => ({
         event.preventDefault();
         dispatch(navigationActions.toggleLoginOpen());
     },
+    handleSeeAllComments: (id, isAdmin, token) => {
+        dispatch(previewActions.resetComments());
+        dispatch(previewActions.getTopLevelComments(id, 0, isAdmin, token));
+    },
     getOriginalInfo: id => {
         dispatch(previewActions.getOriginalInfo(id));
     },