Fixing some technical debt. Fixes #524

7 files changed, 188 insertions, 236 deletions

diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx
index 3e04a8bf..32392ca1 100644
--- a/ui/src/components/community.tsx
+++ b/ui/src/components/community.tsx
@@ -37,6 +37,12 @@ import {
   getPageFromProps,
   getSortTypeFromProps,
   getDataTypeFromProps,
+  editCommentRes,
+  saveCommentRes,
+  createCommentLikeRes,
+  createPostLikeFindRes,
+  editPostFindRes,
+  commentsToFlatNodes,
 } from '../utils';
 import { i18n } from '../i18next';
 
@@ -174,13 +180,7 @@ export class Community extends Component<any, State> {
     return this.state.dataType == DataType.Post ? (
       <PostListings posts={this.state.posts} removeDuplicates />
     ) : (
-      this.state.comments.map(comment => (
-        <div class="row">
-          <div class="col-12">
-            <CommentNodes nodes={[{ comment: comment }]} noIndent />
-          </div>
-        </div>
-      ))
+      <CommentNodes nodes={commentsToFlatNodes(this.state.comments)} noIndent />
     );
   }
 
@@ -333,30 +333,15 @@ export class Community extends Component<any, State> {
       this.setState(this.state);
     } else if (res.op == UserOperation.EditPost) {
       let data = res.data as PostResponse;
-      let found = this.state.posts.find(c => c.id == data.post.id);
-      if (found) {
-        found.url = data.post.url;
-        found.name = data.post.name;
-        found.nsfw = data.post.nsfw;
-        this.setState(this.state);
-      }
+      editPostFindRes(data, this.state.posts);
+      this.setState(this.state);
     } else if (res.op == UserOperation.CreatePost) {
       let data = res.data as PostResponse;
       this.state.posts.unshift(data.post);
       this.setState(this.state);
     } else if (res.op == UserOperation.CreatePostLike) {
       let data = res.data as PostResponse;
-      let found = this.state.posts.find(c => c.id == data.post.id);
-      if (found) {
-        found.score = data.post.score;
-        found.upvotes = data.post.upvotes;
-        found.downvotes = data.post.downvotes;
-        if (data.post.my_vote !== null) {
-          found.my_vote = data.post.my_vote;
-          found.upvoteLoading = false;
-          found.downvoteLoading = false;
-        }
-      }
+      createPostLikeFindRes(data, this.state.posts);
       this.setState(this.state);
     } else if (res.op == UserOperation.AddModToCommunity) {
       let data = res.data as AddModToCommunityResponse;
@@ -377,18 +362,8 @@ export class Community extends Component<any, State> {
       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);
-      }
+      editCommentRes(data, this.state.comments);
+      this.setState(this.state);
     } else if (res.op == UserOperation.CreateComment) {
       let data = res.data as CommentResponse;
 
@@ -399,18 +374,11 @@ export class Community extends Component<any, 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;
+      saveCommentRes(data, this.state.comments);
       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;
+      createCommentLikeRes(data, this.state.comments);
       this.setState(this.state);
     }
   }
diff --git a/ui/src/components/inbox.tsx b/ui/src/components/inbox.tsx
index 6849b37d..027a1db0 100644
--- a/ui/src/components/inbox.tsx
+++ b/ui/src/components/inbox.tsx
@@ -19,7 +19,16 @@ import {
   PrivateMessageResponse,
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
-import { wsJsonToRes, fetchLimit, isCommentType, toast } from '../utils';
+import {
+  wsJsonToRes,
+  fetchLimit,
+  isCommentType,
+  toast,
+  editCommentRes,
+  saveCommentRes,
+  createCommentLikeRes,
+  commentsToFlatNodes,
+} from '../utils';
 import { CommentNodes } from './comment-nodes';
 import { PrivateMessage } from './private-message';
 import { SortSelect } from './sort-select';
@@ -197,9 +206,11 @@ export class Inbox extends Component<any, InboxState> {
   replies() {
     return (
       <div>
-        {this.state.replies.map(reply => (
-          <CommentNodes nodes={[{ comment: reply }]} noIndent markable />
-        ))}
+        <CommentNodes
+          nodes={commentsToFlatNodes(this.state.replies)}
+          noIndent
+          markable
+        />
       </div>
     );
   }
@@ -362,15 +373,7 @@ export class Inbox extends Component<any, InboxState> {
       this.setState(this.state);
     } else if (res.op == UserOperation.EditComment) {
       let data = res.data as CommentResponse;
-
-      let found = this.state.replies.find(c => c.id == data.comment.id);
-      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;
+      editCommentRes(data, this.state.replies);
 
       // If youre in the unread view, just remove it from the list
       if (this.state.unreadOrAll == UnreadOrAll.Unread && data.comment.read) {
@@ -418,28 +421,17 @@ export class Inbox extends Component<any, InboxState> {
       this.setState(this.state);
     } else if (res.op == UserOperation.CreatePrivateMessage) {
       let data = res.data as PrivateMessageResponse;
-
       if (data.message.recipient_id == UserService.Instance.user.id) {
         this.state.messages.unshift(data.message);
         this.setState(this.state);
-      } else if (data.message.creator_id == UserService.Instance.user.id) {
-        toast(i18n.t('message_sent'));
       }
-      this.setState(this.state);
     } else if (res.op == UserOperation.SaveComment) {
       let data = res.data as CommentResponse;
-      let found = this.state.replies.find(c => c.id == data.comment.id);
-      found.saved = data.comment.saved;
+      saveCommentRes(data, this.state.replies);
       this.setState(this.state);
     } else if (res.op == UserOperation.CreateCommentLike) {
       let data = res.data as CommentResponse;
-      let found: Comment = this.state.replies.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;
+      createCommentLikeRes(data, this.state.replies);
       this.setState(this.state);
     }
   }
diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx
index 92434360..99b1618d 100644
--- a/ui/src/components/main.tsx
+++ b/ui/src/components/main.tsx
@@ -45,6 +45,12 @@ import {
   getPageFromProps,
   getSortTypeFromProps,
   getDataTypeFromProps,
+  editCommentRes,
+  saveCommentRes,
+  createCommentLikeRes,
+  createPostLikeFindRes,
+  editPostFindRes,
+  commentsToFlatNodes,
 } from '../utils';
 import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
@@ -400,17 +406,11 @@ export class Main extends Component<any, MainState> {
     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>
-      ))
+      <CommentNodes
+        nodes={commentsToFlatNodes(this.state.comments)}
+        noIndent
+        showCommunity
+      />
     );
   }
 
@@ -625,28 +625,12 @@ export class Main extends Component<any, MainState> {
       this.setState(this.state);
     } else if (res.op == UserOperation.EditPost) {
       let data = res.data as PostResponse;
-      let found = this.state.posts.find(c => c.id == data.post.id);
-      if (found) {
-        found.url = data.post.url;
-        found.name = data.post.name;
-        found.nsfw = data.post.nsfw;
-
-        this.setState(this.state);
-      }
+      editPostFindRes(data, this.state.posts);
+      this.setState(this.state);
     } else if (res.op == UserOperation.CreatePostLike) {
       let data = res.data as PostResponse;
-      let found = this.state.posts.find(c => c.id == data.post.id);
-      if (found) {
-        found.score = data.post.score;
-        found.upvotes = data.post.upvotes;
-        found.downvotes = data.post.downvotes;
-        if (data.post.my_vote !== null) {
-          found.my_vote = data.post.my_vote;
-          found.upvoteLoading = false;
-          found.downvoteLoading = false;
-        }
-        this.setState(this.state);
-      }
+      createPostLikeFindRes(data, this.state.posts);
+      this.setState(this.state);
     } else if (res.op == UserOperation.AddAdmin) {
       let data = res.data as AddAdminResponse;
       this.state.siteRes.admins = data.admins;
@@ -676,18 +660,8 @@ export class Main extends Component<any, MainState> {
       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);
-      }
+      editCommentRes(data, this.state.comments);
+      this.setState(this.state);
     } else if (res.op == UserOperation.CreateComment) {
       let data = res.data as CommentResponse;
 
@@ -709,18 +683,11 @@ export class Main extends Component<any, MainState> {
       }
     } 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;
+      saveCommentRes(data, this.state.comments);
       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;
+      createCommentLikeRes(data, this.state.comments);
       this.setState(this.state);
     }
   }
diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx
index 922fc01e..1f2e40ba 100644
--- a/ui/src/components/post.tsx
+++ b/ui/src/components/post.tsx
@@ -29,7 +29,16 @@ import {
   WebSocketJsonResponse,
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
-import { wsJsonToRes, hotRank, toast } from '../utils';
+import {
+  wsJsonToRes,
+  hotRank,
+  toast,
+  editCommentRes,
+  saveCommentRes,
+  createCommentLikeRes,
+  createPostLikeRes,
+  commentsToFlatNodes,
+} from '../utils';
 import { PostListing } from './post-listing';
 import { PostListings } from './post-listings';
 import { Sidebar } from './sidebar';
@@ -256,16 +265,14 @@ export class Post extends Component<any, PostState> {
       <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>
-          {this.state.comments.map(comment => (
-            <CommentNodes
-              nodes={[{ comment: comment }]}
-              noIndent
-              locked={this.state.post.locked}
-              moderators={this.state.moderators}
-              admins={this.state.admins}
-              postCreatorId={this.state.post.creator_id}
-            />
-          ))}
+          <CommentNodes
+            nodes={commentsToFlatNodes(this.state.comments)}
+            noIndent
+            locked={this.state.post.locked}
+            moderators={this.state.moderators}
+            admins={this.state.admins}
+            postCreatorId={this.state.post.creator_id}
+          />
         </div>
       </div>
     );
@@ -408,53 +415,19 @@ export class Post extends Component<any, PostState> {
       }
     } 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;
-        found.read = data.comment.read;
-
-        this.setState(this.state);
-      }
+      editCommentRes(data, this.state.comments);
+      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);
-      if (found) {
-        found.saved = data.comment.saved;
-        this.setState(this.state);
-      }
+      saveCommentRes(data, this.state.comments);
+      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
-      );
-      if (found) {
-        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;
-          found.upvoteLoading = false;
-          found.downvoteLoading = false;
-        }
-      }
+      createCommentLikeRes(data, this.state.comments);
       this.setState(this.state);
     } else if (res.op == UserOperation.CreatePostLike) {
       let data = res.data as PostResponse;
-      this.state.post.score = data.post.score;
-      this.state.post.upvotes = data.post.upvotes;
-      this.state.post.downvotes = data.post.downvotes;
-      if (data.post.my_vote !== null) {
-        this.state.post.my_vote = data.post.my_vote;
-        this.state.post.upvoteLoading = false;
-        this.state.post.downvoteLoading = false;
-      }
-
+      createPostLikeRes(data, this.state.post);
       this.setState(this.state);
     } else if (res.op == UserOperation.EditPost) {
       let data = res.data as PostResponse;
@@ -510,7 +483,6 @@ export class Post extends Component<any, PostState> {
       this.setState(this.state);
     } else if (res.op == UserOperation.TransferSite) {
       let data = res.data as GetSiteResponse;
-
       this.state.admins = data.admins;
       this.setState(this.state);
     } else if (res.op == UserOperation.TransferCommunity) {
diff --git a/ui/src/components/search.tsx b/ui/src/components/search.tsx
index 3acb7167..3fd2f467 100644
--- a/ui/src/components/search.tsx
+++ b/ui/src/components/search.tsx
@@ -25,6 +25,9 @@ import {
   pictshareAvatarThumbnail,
   showAvatars,
   toast,
+  createCommentLikeRes,
+  createPostLikeFindRes,
+  commentsToFlatNodes,
 } from '../utils';
 import { PostListing } from './post-listing';
 import { SortSelect } from './sort-select';
@@ -294,15 +297,11 @@ export class Search extends Component<any, SearchState> {
 
   comments() {
     return (
-      <>
-        {this.state.searchResponse.comments.map(comment => (
-          <div class="row">
-            <div class="col-12">
-              <CommentNodes nodes={[{ comment: comment }]} locked noIndent />
-            </div>
-          </div>
-        ))}
-      </>
+      <CommentNodes
+        nodes={commentsToFlatNodes(this.state.searchResponse.comments)}
+        locked
+        noIndent
+      />
     );
   }
 
@@ -474,27 +473,11 @@ export class Search extends Component<any, SearchState> {
       this.setState(this.state);
     } else if (res.op == UserOperation.CreateCommentLike) {
       let data = res.data as CommentResponse;
-      let found: Comment = this.state.searchResponse.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;
-        found.upvoteLoading = false;
-        found.downvoteLoading = false;
-      }
+      createCommentLikeRes(data, this.state.searchResponse.comments);
       this.setState(this.state);
     } else if (res.op == UserOperation.CreatePostLike) {
       let data = res.data as PostResponse;
-      let found = this.state.searchResponse.posts.find(
-        c => c.id == data.post.id
-      );
-      found.my_vote = data.post.my_vote;
-      found.score = data.post.score;
-      found.upvotes = data.post.upvotes;
-      found.downvotes = data.post.downvotes;
+      createPostLikeFindRes(data, this.state.searchResponse.posts);
       this.setState(this.state);
     }
   }
diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx
index effc9e1d..e2df15e1 100644
--- a/ui/src/components/user.tsx
+++ b/ui/src/components/user.tsx
@@ -32,6 +32,11 @@ import {
   languages,
   showAvatars,
   toast,
+  editCommentRes,
+  saveCommentRes,
+  createCommentLikeRes,
+  createPostLikeFindRes,
+  commentsToFlatNodes,
 } from '../utils';
 import { PostListing } from './post-listing';
 import { SortSelect } from './sort-select';
@@ -316,13 +321,11 @@ export class User extends Component<any, UserState> {
   comments() {
     return (
       <div>
-        {this.state.comments.map(comment => (
-          <CommentNodes
-            nodes={[{ comment: comment }]}
-            admins={this.state.admins}
-            noIndent
-          />
-        ))}
+        <CommentNodes
+          nodes={commentsToFlatNodes(this.state.comments)}
+          admins={this.state.admins}
+          noIndent
+        />
       </div>
     );
   }
@@ -1032,18 +1035,8 @@ export class User extends Component<any, UserState> {
       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);
-      }
+      editCommentRes(data, this.state.comments);
+      this.setState(this.state);
     } else if (res.op == UserOperation.CreateComment) {
       let data = res.data as CommentResponse;
       if (
@@ -1054,26 +1047,15 @@ export class User extends Component<any, UserState> {
       }
     } 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;
+      saveCommentRes(data, this.state.comments);
       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;
+      createCommentLikeRes(data, this.state.comments);
       this.setState(this.state);
     } else if (res.op == UserOperation.CreatePostLike) {
       let data = res.data as PostResponse;
-      let found = this.state.posts.find(c => c.id == data.post.id);
-      found.my_vote = data.post.my_vote;
-      found.score = data.post.score;
-      found.upvotes = data.post.upvotes;
-      found.downvotes = data.post.downvotes;
+      createPostLikeFindRes(data, this.state.posts);
       this.setState(this.state);
     } else if (res.op == UserOperation.BanUser) {
       let data = res.data as BanUserResponse;
diff --git a/ui/src/utils.ts b/ui/src/utils.ts
index 51836c6f..8cdc02f0 100644
--- a/ui/src/utils.ts
+++ b/ui/src/utils.ts
@@ -15,6 +15,8 @@ import 'moment/locale/pt-br';
 import {
   UserOperation,
   Comment,
+  CommentNode,
+  Post,
   PrivateMessage,
   User,
   SortType,
@@ -25,6 +27,8 @@ import {
   WebSocketJsonResponse,
   SearchForm,
   SearchResponse,
+  CommentResponse,
+  PostResponse,
 } from './interfaces';
 import { UserService, WebSocketService } from './services';
 
@@ -551,3 +555,87 @@ export function getSortTypeFromProps(props: any): SortType {
 export function getPageFromProps(props: any): number {
   return props.match.params.page ? Number(props.match.params.page) : 1;
 }
+
+export function editCommentRes(
+  data: CommentResponse,
+  comments: Array<Comment>
+) {
+  let found = 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;
+  }
+}
+
+export function saveCommentRes(
+  data: CommentResponse,
+  comments: Array<Comment>
+) {
+  let found = comments.find(c => c.id == data.comment.id);
+  if (found) {
+    found.saved = data.comment.saved;
+  }
+}
+
+export function createCommentLikeRes(
+  data: CommentResponse,
+  comments: Array<Comment>
+) {
+  let found: Comment = comments.find(c => c.id === data.comment.id);
+  if (found) {
+    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;
+      found.upvoteLoading = false;
+      found.downvoteLoading = false;
+    }
+  }
+}
+
+export function createPostLikeFindRes(data: PostResponse, posts: Array<Post>) {
+  let found = posts.find(c => c.id == data.post.id);
+  if (found) {
+    createPostLikeRes(data, found);
+  }
+}
+
+export function createPostLikeRes(data: PostResponse, post: Post) {
+  post.score = data.post.score;
+  post.upvotes = data.post.upvotes;
+  post.downvotes = data.post.downvotes;
+  if (data.post.my_vote !== null) {
+    post.my_vote = data.post.my_vote;
+    post.upvoteLoading = false;
+    post.downvoteLoading = false;
+  }
+}
+
+export function editPostFindRes(data: PostResponse, posts: Array<Post>) {
+  let found = posts.find(c => c.id == data.post.id);
+  if (found) {
+    editPostRes(data, found);
+  }
+}
+
+export function editPostRes(data: PostResponse, post: Post) {
+  post.url = data.post.url;
+  post.name = data.post.name;
+  post.nsfw = data.post.nsfw;
+}
+
+export function commentsToFlatNodes(
+  comments: Array<Comment>
+): Array<CommentNode> {
+  let nodes: Array<CommentNode> = [];
+  for (let comment of comments) {
+    nodes.push({ comment: comment });
+  }
+  return nodes;
+}