Fixing some technical debt. Fixes #524

13 files changed, 207 insertions, 257 deletions

diff --git a/server/src/db/comment_view.rs b/server/src/db/comment_view.rs
index 01e1bbaf..ff915d5e 100644
--- a/server/src/db/comment_view.rs
+++ b/server/src/db/comment_view.rs
@@ -251,9 +251,8 @@ impl CommentView {
     from_comment_id: i32,
     my_user_id: Option<i32>,
   ) -> Result<Self, Error> {
-    use super::comment_view::comment_view::dsl::*;
-
-    let mut query = comment_view.into_boxed();
+    use super::comment_view::comment_mview::dsl::*;
+    let mut query = comment_mview.into_boxed();
 
     // The view lets you pass a null user_id, if you're not logged in
     if let Some(my_user_id) = my_user_id {
diff --git a/server/src/db/community_view.rs b/server/src/db/community_view.rs
index 95e00c65..18ff67a8 100644
--- a/server/src/db/community_view.rs
+++ b/server/src/db/community_view.rs
@@ -227,9 +227,9 @@ impl CommunityView {
     from_community_id: i32,
     from_user_id: Option<i32>,
   ) -> Result<Self, Error> {
-    use super::community_view::community_view::dsl::*;
+    use super::community_view::community_mview::dsl::*;
 
-    let mut query = community_view.into_boxed();
+    let mut query = community_mview.into_boxed();
 
     query = query.filter(id.eq(from_community_id));
 
diff --git a/server/src/db/post_view.rs b/server/src/db/post_view.rs
index a831b87d..3f385077 100644
--- a/server/src/db/post_view.rs
+++ b/server/src/db/post_view.rs
@@ -315,10 +315,10 @@ impl PostView {
     from_post_id: i32,
     my_user_id: Option<i32>,
   ) -> Result<Self, Error> {
-    use super::post_view::post_view::dsl::*;
+    use super::post_view::post_mview::dsl::*;
     use diesel::prelude::*;
 
-    let mut query = post_view.into_boxed();
+    let mut query = post_mview.into_boxed();
 
     query = query.filter(id.eq(from_post_id));
 
diff --git a/server/src/db/user_view.rs b/server/src/db/user_view.rs
index 3ea506e7..2274ecbd 100644
--- a/server/src/db/user_view.rs
+++ b/server/src/db/user_view.rs
@@ -144,9 +144,8 @@ impl<'a> UserQueryBuilder<'a> {
 
 impl UserView {
   pub fn read(conn: &PgConnection, from_user_id: i32) -> Result<Self, Error> {
-    use super::user_view::user_view::dsl::*;
-
-    user_view.find(from_user_id).first::<Self>(conn)
+    use super::user_view::user_mview::dsl::*;
+    user_mview.find(from_user_id).first::<Self>(conn)
   }
 
   pub fn admins(conn: &PgConnection) -> Result<Vec<Self>, Error> {
diff --git a/ui/package.json b/ui/package.json
index 31d91bb4..9cf34910 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -7,7 +7,7 @@
   "main": "index.js",
   "scripts": {
     "build": "node fuse prod",
-    "lint": "eslint --report-unused-disable-directives --ext .js,.ts,.tsx src",
+    "lint": "tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx src",
     "start": "node fuse dev"
   },
   "keywords": [],
@@ -22,7 +22,7 @@
     "bootswatch": "^4.3.1",
     "classcat": "^1.1.3",
     "dotenv": "^8.2.0",
-    "emoji-short-name": "^0.1.0",
+    "emoji-short-name": "^1.0.0",
     "husky": "^4.2.1",
     "i18next": "^19.0.3",
     "inferno": "^7.0.1",
@@ -35,7 +35,7 @@
     "markdown-it-emoji": "^1.4.0",
     "moment": "^2.24.0",
     "prettier": "^1.18.2",
-    "reconnecting-websocket": "^4.3.0",
+    "reconnecting-websocket": "^4.4.0",
     "rxjs": "^6.4.0",
     "terser": "^4.6.3",
     "toastify-js": "^1.6.2",
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;
+}
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 64493e39..5c9ad637 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -1079,10 +1079,10 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
-emoji-short-name@^0.1.0:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/emoji-short-name/-/emoji-short-name-0.1.4.tgz#125a452adc22a399b089f802f9d8d46ecb6e5b08"
-  integrity sha512-VTjEKkhN1UARtHLqlK70N5K3SwxuZAkmdm5sXvSjkV677kr0jt/O7mvB5eQqM+3rKCa+w3Qb5G7wwU/fezonKQ==
+emoji-short-name@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-short-name/-/emoji-short-name-1.0.0.tgz#82e6f543b6c68984d69bdc80eac735104fdd4af8"
+  integrity sha512-+tiniHvgRR7XMI1jAaGveumWg5LALE/nWkFD6CcOn6M5IDM9w4PkMs8UwzLTMoZtDLdTdQmzxGvLOxHVIjPzjg==
 
 encodeurl@~1.0.2:
   version "1.0.2"
@@ -3731,10 +3731,10 @@ realm-utils@^1.0.9:
     app-root-path "^1.3.0"
     mkdirp "^0.5.1"
 
-reconnecting-websocket@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/reconnecting-websocket/-/reconnecting-websocket-4.3.0.tgz#aaefbc7629a89450aa45324b89aec2276e728cc5"
-  integrity sha512-3eaHIEVYB9Zb0GfYy1xdEHKJLA2JaawAegByZ1AZ8Npb3AiRgUN5l89cvE2H+pHTsFcoC88t32ky9qET6DJ75Q==
+reconnecting-websocket@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/reconnecting-websocket/-/reconnecting-websocket-4.4.0.tgz#3b0e5b96ef119e78a03135865b8bb0af1b948783"
+  integrity sha512-D2E33ceRPga0NvTDhJmphEgJ7FUYF0v4lr1ki0csq06OdlxKfugGzN0dSkxM/NfqCxYELK4KcaTOUOjTV6Dcng==
 
 regenerate-unicode-properties@^8.1.0:
   version "8.1.0"