Add new comments views to main and community pages. Fixes #480

1 files changed, 149 insertions, 60 deletions

diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx
index 161f5df4..92434360 100644
--- a/ui/src/components/main.tsx
+++ b/ui/src/components/main.tsx
@@ -12,30 +12,39 @@ import {
   SortType,
   GetSiteResponse,
   ListingType,
+  DataType,
   SiteResponse,
   GetPostsResponse,
   PostResponse,
   Post,
   GetPostsForm,
+  Comment,
+  GetCommentsForm,
+  GetCommentsResponse,
+  CommentResponse,
   AddAdminResponse,
   BanUserResponse,
   WebSocketJsonResponse,
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import { PostListings } from './post-listings';
+import { CommentNodes } from './comment-nodes';
 import { SortSelect } from './sort-select';
 import { ListingTypeSelect } from './listing-type-select';
+import { DataTypeSelect } from './data-type-select';
 import { SiteForm } from './site-form';
 import {
   wsJsonToRes,
   repoUrl,
   mdToHtml,
   fetchLimit,
-  routeSortTypeToEnum,
-  routeListingTypeToEnum,
   pictshareAvatarThumbnail,
   showAvatars,
   toast,
+  getListingTypeFromProps,
+  getPageFromProps,
+  getSortTypeFromProps,
+  getDataTypeFromProps,
 } from '../utils';
 import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
@@ -47,7 +56,9 @@ interface MainState {
   showEditSite: boolean;
   loading: boolean;
   posts: Array<Post>;
-  type_: ListingType;
+  comments: Array<Comment>;
+  listingType: ListingType;
+  dataType: DataType;
   sort: SortType;
   page: number;
 }
@@ -79,38 +90,21 @@ export class Main extends Component<any, MainState> {
     showEditSite: false,
     loading: true,
     posts: [],
-    type_: this.getListingTypeFromProps(this.props),
-    sort: this.getSortTypeFromProps(this.props),
-    page: this.getPageFromProps(this.props),
+    comments: [],
+    listingType: getListingTypeFromProps(this.props),
+    dataType: getDataTypeFromProps(this.props),
+    sort: getSortTypeFromProps(this.props),
+    page: getPageFromProps(this.props),
   };
 
-  getListingTypeFromProps(props: any): ListingType {
-    return props.match.params.type
-      ? routeListingTypeToEnum(props.match.params.type)
-      : UserService.Instance.user
-      ? UserService.Instance.user.default_listing_type
-      : ListingType.All;
-  }
-
-  getSortTypeFromProps(props: any): SortType {
-    return props.match.params.sort
-      ? routeSortTypeToEnum(props.match.params.sort)
-      : UserService.Instance.user
-      ? UserService.Instance.user.default_sort_type
-      : SortType.Hot;
-  }
-
-  getPageFromProps(props: any): number {
-    return props.match.params.page ? Number(props.match.params.page) : 1;
-  }
-
   constructor(props: any, context: any) {
     super(props, context);
 
     this.state = this.emptyState;
     this.handleEditCancel = this.handleEditCancel.bind(this);
     this.handleSortChange = this.handleSortChange.bind(this);
-    this.handleTypeChange = this.handleTypeChange.bind(this);
+    this.handleListingTypeChange = this.handleListingTypeChange.bind(this);
+    this.handleDataTypeChange = this.handleDataTypeChange.bind(this);
 
     this.subscription = WebSocketService.Instance.subject
       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
@@ -133,7 +127,7 @@ export class Main extends Component<any, MainState> {
 
     WebSocketService.Instance.listCommunities(listCommunitiesForm);
 
-    this.fetchPosts();
+    this.fetchData();
   }
 
   componentWillUnmount() {
@@ -146,11 +140,12 @@ export class Main extends Component<any, MainState> {
       nextProps.history.action == 'POP' ||
       nextProps.history.action == 'PUSH'
     ) {
-      this.state.type_ = this.getListingTypeFromProps(nextProps);
-      this.state.sort = this.getSortTypeFromProps(nextProps);
-      this.state.page = this.getPageFromProps(nextProps);
+      this.state.listingType = getListingTypeFromProps(nextProps);
+      this.state.dataType = getDataTypeFromProps(nextProps);
+      this.state.sort = getSortTypeFromProps(nextProps);
+      this.state.page = getPageFromProps(nextProps);
       this.setState(this.state);
-      this.fetchPosts();
+      this.fetchData();
     }
   }
 
@@ -251,10 +246,11 @@ export class Main extends Component<any, MainState> {
   }
 
   updateUrl() {
-    let typeStr = ListingType[this.state.type_].toLowerCase();
+    let listingTypeStr = ListingType[this.state.listingType].toLowerCase();
+    let dataTypeStr = DataType[this.state.dataType].toLowerCase();
     let sortStr = SortType[this.state.sort].toLowerCase();
     this.props.history.push(
-      `/home/type/${typeStr}/sort/${sortStr}/page/${this.state.page}`
+      `/home/data_type/${dataTypeStr}/listing_type/${listingTypeStr}/sort/${sortStr}/page/${this.state.page}`
     );
   }
 
@@ -392,11 +388,7 @@ export class Main extends Component<any, MainState> {
         ) : (
           <div>
             {this.selects()}
-            <PostListings
-              posts={this.state.posts}
-              showCommunity
-              removeDuplicates
-            />
+            {this.listings()}
             {this.paginator()}
           </div>
         )}
@@ -404,17 +396,41 @@ export class Main extends Component<any, MainState> {
     );
   }
 
+  listings() {
+    return this.state.dataType == DataType.Post ? (
+      <PostListings posts={this.state.posts} showCommunity removeDuplicates />
+    ) : (
+      this.state.comments.map(comment => (
+        <div class="row">
+          <div class="col-12">
+            <CommentNodes
+              nodes={[{ comment: comment }]}
+              noIndent
+              showCommunity
+            />
+          </div>
+        </div>
+      ))
+    );
+  }
+
   selects() {
     return (
       <div className="mb-3">
-        <ListingTypeSelect
-          type_={this.state.type_}
-          onChange={this.handleTypeChange}
+        <DataTypeSelect
+          type_={this.state.dataType}
+          onChange={this.handleDataTypeChange}
         />
         <span class="mx-2">
+          <ListingTypeSelect
+            type_={this.state.listingType}
+            onChange={this.handleListingTypeChange}
+          />
+        </span>
+        <span class="mr-2">
           <SortSelect sort={this.state.sort} onChange={this.handleSortChange} />
         </span>
-        {this.state.type_ == ListingType.All && (
+        {this.state.listingType == ListingType.All && (
           <a
             href={`/feeds/all.xml?sort=${SortType[this.state.sort]}`}
             target="_blank"
@@ -425,7 +441,7 @@ export class Main extends Component<any, MainState> {
           </a>
         )}
         {UserService.Instance.user &&
-          this.state.type_ == ListingType.Subscribed && (
+          this.state.listingType == ListingType.Subscribed && (
             <a
               href={`/feeds/front/${UserService.Instance.auth}.xml?sort=${
                 SortType[this.state.sort]
@@ -488,7 +504,7 @@ export class Main extends Component<any, MainState> {
     i.state.loading = true;
     i.setState(i.state);
     i.updateUrl();
-    i.fetchPosts();
+    i.fetchData();
     window.scrollTo(0, 0);
   }
 
@@ -497,7 +513,7 @@ export class Main extends Component<any, MainState> {
     i.state.loading = true;
     i.setState(i.state);
     i.updateUrl();
-    i.fetchPosts();
+    i.fetchData();
     window.scrollTo(0, 0);
   }
 
@@ -507,28 +523,48 @@ export class Main extends Component<any, MainState> {
     this.state.loading = true;
     this.setState(this.state);
     this.updateUrl();
-    this.fetchPosts();
+    this.fetchData();
     window.scrollTo(0, 0);
   }
 
-  handleTypeChange(val: ListingType) {
-    this.state.type_ = val;
+  handleListingTypeChange(val: ListingType) {
+    this.state.listingType = val;
     this.state.page = 1;
     this.state.loading = true;
     this.setState(this.state);
     this.updateUrl();
-    this.fetchPosts();
+    this.fetchData();
     window.scrollTo(0, 0);
   }
 
-  fetchPosts() {
-    let getPostsForm: GetPostsForm = {
-      page: this.state.page,
-      limit: fetchLimit,
-      sort: SortType[this.state.sort],
-      type_: ListingType[this.state.type_],
-    };
-    WebSocketService.Instance.getPosts(getPostsForm);
+  handleDataTypeChange(val: DataType) {
+    this.state.dataType = val;
+    this.state.page = 1;
+    this.state.loading = true;
+    this.setState(this.state);
+    this.updateUrl();
+    this.fetchData();
+    window.scrollTo(0, 0);
+  }
+
+  fetchData() {
+    if (this.state.dataType == DataType.Post) {
+      let getPostsForm: GetPostsForm = {
+        page: this.state.page,
+        limit: fetchLimit,
+        sort: SortType[this.state.sort],
+        type_: ListingType[this.state.listingType],
+      };
+      WebSocketService.Instance.getPosts(getPostsForm);
+    } else {
+      let getCommentsForm: GetCommentsForm = {
+        page: this.state.page,
+        limit: fetchLimit,
+        sort: SortType[this.state.sort],
+        type_: ListingType[this.state.listingType],
+      };
+      WebSocketService.Instance.getComments(getCommentsForm);
+    }
   }
 
   parseMessage(msg: WebSocketJsonResponse) {
@@ -538,7 +574,7 @@ export class Main extends Component<any, MainState> {
       toast(i18n.t(msg.error), 'danger');
       return;
     } else if (msg.reconnect) {
-      this.fetchPosts();
+      this.fetchData();
     } else if (res.op == UserOperation.GetFollowedCommunities) {
       let data = res.data as GetFollowedCommunitiesResponse;
       this.state.subscribedCommunities = data.communities;
@@ -574,7 +610,7 @@ export class Main extends Component<any, MainState> {
       let data = res.data as PostResponse;
 
       // If you're on subscribed, only push it if you're subscribed.
-      if (this.state.type_ == ListingType.Subscribed) {
+      if (this.state.listingType == ListingType.Subscribed) {
         if (
           this.state.subscribedCommunities
             .map(c => c.community_id)
@@ -633,6 +669,59 @@ export class Main extends Component<any, MainState> {
         .forEach(p => (p.banned = data.banned));
 
       this.setState(this.state);
+    } else if (res.op == UserOperation.GetComments) {
+      let data = res.data as GetCommentsResponse;
+      this.state.comments = data.comments;
+      this.state.loading = false;
+      this.setState(this.state);
+    } else if (res.op == UserOperation.EditComment) {
+      let data = res.data as CommentResponse;
+
+      let found = this.state.comments.find(c => c.id == data.comment.id);
+      if (found) {
+        found.content = data.comment.content;
+        found.updated = data.comment.updated;
+        found.removed = data.comment.removed;
+        found.deleted = data.comment.deleted;
+        found.upvotes = data.comment.upvotes;
+        found.downvotes = data.comment.downvotes;
+        found.score = data.comment.score;
+        this.setState(this.state);
+      }
+    } else if (res.op == UserOperation.CreateComment) {
+      let data = res.data as CommentResponse;
+
+      // Necessary since it might be a user reply
+      if (data.recipient_ids.length == 0) {
+        // If you're on subscribed, only push it if you're subscribed.
+        if (this.state.listingType == ListingType.Subscribed) {
+          if (
+            this.state.subscribedCommunities
+              .map(c => c.community_id)
+              .includes(data.comment.community_id)
+          ) {
+            this.state.comments.unshift(data.comment);
+          }
+        } else {
+          this.state.comments.unshift(data.comment);
+        }
+        this.setState(this.state);
+      }
+    } else if (res.op == UserOperation.SaveComment) {
+      let data = res.data as CommentResponse;
+      let found = this.state.comments.find(c => c.id == data.comment.id);
+      found.saved = data.comment.saved;
+      this.setState(this.state);
+    } else if (res.op == UserOperation.CreateCommentLike) {
+      let data = res.data as CommentResponse;
+      let found: Comment = this.state.comments.find(
+        c => c.id === data.comment.id
+      );
+      found.score = data.comment.score;
+      found.upvotes = data.comment.upvotes;
+      found.downvotes = data.comment.downvotes;
+      if (data.comment.my_vote !== null) found.my_vote = data.comment.my_vote;
+      this.setState(this.state);
     }
   }
 }