Moving recent comments into main view as a chat select. Fixes #943

ui/src/components/post.tsx

@@ -11,6 +11,7 @@ import {
   CommentForm as CommentFormI,
   CommentResponse,
   CommentSortType,
+  CommentViewType,
   CommunityUser,
   CommunityResponse,
   CommentNode as CommentNodeI,
@@ -49,6 +50,7 @@ interface PostState {
   post: PostI;
   comments: Array<Comment>;
   commentSort: CommentSortType;
+  commentViewType: CommentViewType;
   community: Community;
   moderators: Array<CommunityUser>;
   online: number;
@@ -65,6 +67,7 @@ export class Post extends Component<any, PostState> {
     post: null,
     comments: [],
     commentSort: CommentSortType.Hot,
+    commentViewType: CommentViewType.Tree,
     community: null,
     moderators: [],
     online: null,
@@ -208,12 +211,12 @@ export class Post extends Component<any, PostState> {
                 disabled={this.state.post.locked}
               />
               {this.state.comments.length > 0 && this.sortRadios()}
-              {this.commentsTree()}
-            </div>
-            <div class="col-12 col-sm-12 col-md-4">
-              {this.state.comments.length > 0 && this.newComments()}
-              {this.sidebar()}
+              {this.state.commentViewType == CommentViewType.Tree &&
+                this.commentsTree()}
+              {this.state.commentViewType == CommentViewType.Chat &&
+                this.commentsFlat()}
             </div>
+            <div class="col-12 col-sm-12 col-md-4">{this.sidebar()}</div>
           </div>
         )}
       </div>
@@ -222,6 +225,7 @@ export class Post extends Component<any, PostState> {
 
   sortRadios() {
     return (
+      <>
         <div class="btn-group btn-group-toggle mb-2">
           <label
             className={`btn btn-sm btn-secondary pointer ${
@@ -276,14 +280,41 @@ export class Post extends Component<any, PostState> {
             />
           </label>
         </div>
+        <div class="btn-group btn-group-toggle ml-3 mb-2">
+          <label
+            className={`btn btn-sm btn-secondary pointer ${
+              this.state.commentViewType === CommentViewType.Tree && 'active'
+            }`}
+          >
+            {i18n.t('tree')}
+            <input
+              type="radio"
+              value={CommentViewType.Tree}
+              checked={this.state.commentViewType === CommentViewType.Tree}
+              onChange={linkEvent(this, this.handleCommentViewTypeChange)}
+            />
+          </label>
+          <label
+            className={`btn btn-sm btn-secondary pointer ${
+              this.state.commentViewType === CommentViewType.Chat && 'active'
+            }`}
+          >
+            {i18n.t('chat')}
+            <input
+              type="radio"
+              value={CommentViewType.Chat}
+              checked={this.state.commentViewType === CommentViewType.Chat}
+              onChange={linkEvent(this, this.handleCommentViewTypeChange)}
+            />
+          </label>
+        </div>
+      </>
     );
   }
 
-  newComments() {
+  commentsFlat() {
     return (
-      <div class="d-none d-md-block new-comments mb-3 card border-secondary">
-        <div class="card-body small">
-          <h6>{i18n.t('recent_comments')}</h6>
+      <div>
         <CommentNodes
           nodes={commentsToFlatNodes(this.state.comments)}
           noIndent
@@ -293,9 +324,9 @@ export class Post extends Component<any, PostState> {
           postCreatorId={this.state.post.creator_id}
           showContext
           enableDownvotes={this.state.siteRes.site.enable_downvotes}
+          sort={this.state.commentSort}
         />
       </div>
-      </div>
     );
   }
 
@@ -318,6 +349,11 @@ export class Post extends Component<any, PostState> {
     i.setState(i.state);
   }
 
+  handleCommentViewTypeChange(i: Post, event: any) {
+    i.state.commentViewType = Number(event.target.value);
+    i.setState(i.state);
+  }
+
   buildCommentsTree(): Array<CommentNodeI> {
     let map = new Map<number, CommentNodeI>();
     for (let comment of this.state.comments) {

ui/src/interfaces.ts

@@ -54,6 +54,11 @@ export enum CommentSortType {
   Old,
 }
 
+export enum CommentViewType {
+  Tree,
+  Chat,
+}
+
 export enum ListingType {
   All,
   Subscribed,

ui/translations/en.json

@@ -177,6 +177,7 @@
     "community": "Community",
     "expand_here": "Expand here",
     "subscribe_to_communities": "Subscribe to some <1>communities</1>.",
+    "tree": "Tree",
     "chat": "Chat",
     "recent_comments": "Recent Comments",
     "no_results": "No results.",