]> Untitled Git - lemmy-ui.git/blobdiff - src/shared/components/post/post.tsx
Merge branch 'main' into breakout-role-utils
[lemmy-ui.git] / src / shared / components / post / post.tsx
index 33e0978e109d49634e34a4292680d62583da6021..05e4d9b918fdb116a193b5d4da7592f9347879a1 100644 (file)
@@ -1,70 +1,89 @@
-import { None, Option, Right, Some } from "@sniptt/monads";
 import autosize from "autosize";
 import { Component, createRef, linkEvent, RefObject } from "inferno";
 import {
-  AddAdminResponse,
+  AddAdmin,
+  AddModToCommunity,
   AddModToCommunityResponse,
+  BanFromCommunity,
   BanFromCommunityResponse,
+  BanPerson,
   BanPersonResponse,
-  BlockPersonResponse,
-  CommentNode as CommentNodeI,
-  CommentReportResponse,
+  BlockCommunity,
+  BlockPerson,
+  CommentId,
+  CommentReplyResponse,
   CommentResponse,
   CommentSortType,
   CommunityResponse,
+  CreateComment,
+  CreateCommentLike,
+  CreateCommentReport,
+  CreatePostLike,
+  CreatePostReport,
+  DeleteComment,
+  DeleteCommunity,
+  DeletePost,
+  DistinguishComment,
+  EditComment,
+  EditCommunity,
+  EditPost,
+  FeaturePost,
+  FollowCommunity,
   GetComments,
   GetCommentsResponse,
   GetCommunityResponse,
   GetPost,
   GetPostResponse,
   GetSiteResponse,
-  ListingType,
-  PostReportResponse,
+  LockPost,
+  MarkCommentReplyAsRead,
+  MarkPersonMentionAsRead,
   PostResponse,
-  PostView,
+  PurgeComment,
+  PurgeCommunity,
   PurgeItemResponse,
-  Search,
-  SearchResponse,
-  SearchType,
-  SortType,
-  toOption,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
+  PurgePerson,
+  PurgePost,
+  RemoveComment,
+  RemoveCommunity,
+  RemovePost,
+  SaveComment,
+  SavePost,
+  TransferCommunity,
 } from "lemmy-js-client";
-import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
-import { CommentViewType, InitialFetchRequest } from "../../interfaces";
-import { UserService, WebSocketService } from "../../services";
 import {
-  auth,
+  CommentNodeI,
+  CommentViewType,
+  InitialFetchRequest,
+} from "../../interfaces";
+import { UserService } from "../../services";
+import { FirstLoadService } from "../../services/FirstLoadService";
+import { HttpService, RequestState } from "../../services/HttpService";
+import {
   buildCommentsTree,
   commentsToFlatNodes,
   commentTreeMaxDepth,
-  createCommentLikeRes,
-  createPostLikeRes,
   debounce,
-  editCommentRes,
+  editComment,
+  editWith,
   enableDownvotes,
   enableNsfw,
   getCommentIdFromProps,
   getCommentParentId,
   getDepthFromComment,
   getIdFromProps,
-  insertCommentIntoTree,
-  isBrowser,
   isImage,
+  myAuth,
   restoreScrollPosition,
-  saveCommentRes,
   saveScrollPosition,
   setIsoData,
   setupTippy,
   toast,
-  trendingFetchLimit,
+  updateCommunityBlock,
   updatePersonBlock,
-  wsClient,
-  wsSubscribe,
 } from "../../utils";
+import { isBrowser } from "../../utils/browser/is-browser";
 import { CommentForm } from "../comment/comment-form";
 import { CommentNodes } from "../comment/comment-nodes";
 import { HtmlTags } from "../common/html-tags";
@@ -75,213 +94,191 @@ import { PostListing } from "./post-listing";
 const commentsShownInterval = 15;
 
 interface PostState {
-  postId: Option<number>;
-  commentId: Option<number>;
-  postRes: Option<GetPostResponse>;
-  commentsRes: Option<GetCommentsResponse>;
-  commentTree: CommentNodeI[];
+  postId?: number;
+  commentId?: number;
+  postRes: RequestState<GetPostResponse>;
+  commentsRes: RequestState<GetCommentsResponse>;
   commentSort: CommentSortType;
   commentViewType: CommentViewType;
   scrolled?: boolean;
-  loading: boolean;
-  crossPosts: Option<PostView[]>;
   siteRes: GetSiteResponse;
   commentSectionRef?: RefObject<HTMLDivElement>;
   showSidebarMobile: boolean;
   maxCommentsShown: number;
+  finished: Map<CommentId, boolean | undefined>;
+  isIsomorphic: boolean;
 }
 
 export class Post extends Component<any, PostState> {
-  private subscription: Subscription;
-  private isoData = setIsoData(
-    this.context,
-    GetPostResponse,
-    GetCommentsResponse
-  );
+  private isoData = setIsoData(this.context);
   private commentScrollDebounced: () => void;
-  private emptyState: PostState = {
-    postRes: None,
-    commentsRes: None,
+  state: PostState = {
+    postRes: { state: "empty" },
+    commentsRes: { state: "empty" },
     postId: getIdFromProps(this.props),
     commentId: getCommentIdFromProps(this.props),
-    commentTree: [],
-    commentSort: CommentSortType[CommentSortType.Hot],
+    commentSort: "Hot",
     commentViewType: CommentViewType.Tree,
     scrolled: false,
-    loading: true,
-    crossPosts: None,
     siteRes: this.isoData.site_res,
-    commentSectionRef: null,
     showSidebarMobile: false,
     maxCommentsShown: commentsShownInterval,
+    finished: new Map(),
+    isIsomorphic: false,
   };
 
   constructor(props: any, context: any) {
     super(props, context);
 
-    this.state = this.emptyState;
-    this.state.commentSectionRef = createRef();
+    this.handleDeleteCommunityClick =
+      this.handleDeleteCommunityClick.bind(this);
+    this.handleEditCommunity = this.handleEditCommunity.bind(this);
+    this.handleFollow = this.handleFollow.bind(this);
+    this.handleModRemoveCommunity = this.handleModRemoveCommunity.bind(this);
+    this.handleCreateComment = this.handleCreateComment.bind(this);
+    this.handleEditComment = this.handleEditComment.bind(this);
+    this.handleSaveComment = this.handleSaveComment.bind(this);
+    this.handleBlockCommunity = this.handleBlockCommunity.bind(this);
+    this.handleBlockPerson = this.handleBlockPerson.bind(this);
+    this.handleDeleteComment = this.handleDeleteComment.bind(this);
+    this.handleRemoveComment = this.handleRemoveComment.bind(this);
+    this.handleCommentVote = this.handleCommentVote.bind(this);
+    this.handleAddModToCommunity = this.handleAddModToCommunity.bind(this);
+    this.handleAddAdmin = this.handleAddAdmin.bind(this);
+    this.handlePurgePerson = this.handlePurgePerson.bind(this);
+    this.handlePurgeComment = this.handlePurgeComment.bind(this);
+    this.handleCommentReport = this.handleCommentReport.bind(this);
+    this.handleDistinguishComment = this.handleDistinguishComment.bind(this);
+    this.handleTransferCommunity = this.handleTransferCommunity.bind(this);
+    this.handleFetchChildren = this.handleFetchChildren.bind(this);
+    this.handleCommentReplyRead = this.handleCommentReplyRead.bind(this);
+    this.handlePersonMentionRead = this.handlePersonMentionRead.bind(this);
+    this.handleBanFromCommunity = this.handleBanFromCommunity.bind(this);
+    this.handleBanPerson = this.handleBanPerson.bind(this);
+    this.handlePostEdit = this.handlePostEdit.bind(this);
+    this.handlePostVote = this.handlePostVote.bind(this);
+    this.handlePostReport = this.handlePostReport.bind(this);
+    this.handleLockPost = this.handleLockPost.bind(this);
+    this.handleDeletePost = this.handleDeletePost.bind(this);
+    this.handleRemovePost = this.handleRemovePost.bind(this);
+    this.handleSavePost = this.handleSavePost.bind(this);
+    this.handlePurgePost = this.handlePurgePost.bind(this);
+    this.handleFeaturePost = this.handleFeaturePost.bind(this);
 
-    this.parseMessage = this.parseMessage.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
+    this.state = { ...this.state, commentSectionRef: createRef() };
 
     // Only fetch the data if coming from another route
-    if (this.isoData.path == this.context.router.route.match.url) {
-      this.state.postRes = Some(this.isoData.routeData[0] as GetPostResponse);
-      this.state.commentsRes = Some(
-        this.isoData.routeData[1] as GetCommentsResponse
-      );
+    if (FirstLoadService.isFirstLoad) {
+      const [postRes, commentsRes] = this.isoData.routeData;
 
-      this.state.commentsRes.match({
-        some: res => {
-          this.state.commentTree = buildCommentsTree(
-            res.comments,
-            this.state.commentId.isSome()
-          );
-        },
-        none: void 0,
-      });
-      this.state.loading = false;
+      this.state = {
+        ...this.state,
+        postRes,
+        commentsRes,
+        isIsomorphic: true,
+      };
 
       if (isBrowser()) {
-        WebSocketService.Instance.send(
-          wsClient.communityJoin({
-            community_id:
-              this.state.postRes.unwrap().community_view.community.id,
-          })
-        );
-
-        this.state.postId.match({
-          some: post_id =>
-            WebSocketService.Instance.send(wsClient.postJoin({ post_id })),
-          none: void 0,
-        });
-
-        this.fetchCrossPosts();
-
         if (this.checkScrollIntoCommentsParam) {
           this.scrollIntoCommentSection();
         }
       }
-    } else {
-      this.fetchPost();
     }
   }
 
-  fetchPost() {
-    this.setState({ commentsRes: None });
-    let postForm = new GetPost({
-      id: this.state.postId,
-      comment_id: this.state.commentId,
-      auth: auth(false).ok(),
+  async fetchPost() {
+    this.setState({
+      postRes: { state: "loading" },
+      commentsRes: { state: "loading" },
     });
-    WebSocketService.Instance.send(wsClient.getPost(postForm));
-
-    let commentsForm = new GetComments({
-      post_id: this.state.postId,
-      parent_id: this.state.commentId,
-      max_depth: Some(commentTreeMaxDepth),
-      page: None,
-      limit: None,
-      sort: Some(this.state.commentSort),
-      type_: Some(ListingType.All),
-      community_name: None,
-      community_id: None,
-      saved_only: Some(false),
-      auth: auth(false).ok(),
+
+    const auth = myAuth();
+
+    this.setState({
+      postRes: await HttpService.client.getPost({
+        id: this.state.postId,
+        comment_id: this.state.commentId,
+        auth,
+      }),
+      commentsRes: await HttpService.client.getComments({
+        post_id: this.state.postId,
+        parent_id: this.state.commentId,
+        max_depth: commentTreeMaxDepth,
+        sort: this.state.commentSort,
+        type_: "All",
+        saved_only: false,
+        auth,
+      }),
     });
-    WebSocketService.Instance.send(wsClient.getComments(commentsForm));
-  }
-
-  fetchCrossPosts() {
-    this.state.postRes
-      .andThen(r => r.post_view.post.url)
-      .match({
-        some: url => {
-          let form = new Search({
-            q: url,
-            type_: Some(SearchType.Url),
-            sort: Some(SortType.TopAll),
-            listing_type: Some(ListingType.All),
-            page: Some(1),
-            limit: Some(trendingFetchLimit),
-            community_id: None,
-            community_name: None,
-            creator_id: None,
-            auth: auth(false).ok(),
-          });
-          WebSocketService.Instance.send(wsClient.search(form));
-        },
-        none: void 0,
-      });
+
+    setupTippy();
+
+    if (!this.state.commentId) restoreScrollPosition(this.context);
+
+    if (this.checkScrollIntoCommentsParam) {
+      this.scrollIntoCommentSection();
+    }
   }
 
-  static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
-    let pathSplit = req.path.split("/");
-    let promises: Promise<any>[] = [];
+  static fetchInitialData({
+    auth,
+    client,
+    path,
+  }: InitialFetchRequest): Promise<any>[] {
+    const pathSplit = path.split("/");
+    const promises: Promise<RequestState<any>>[] = [];
 
-    let pathType = pathSplit[1];
-    let id = Number(pathSplit[2]);
+    const pathType = pathSplit.at(1);
+    const id = pathSplit.at(2) ? Number(pathSplit.at(2)) : undefined;
 
-    let postForm = new GetPost({
-      id: None,
-      comment_id: None,
-      auth: req.auth,
-    });
+    const postForm: GetPost = {
+      auth,
+    };
 
-    let commentsForm = new GetComments({
-      post_id: None,
-      parent_id: None,
-      max_depth: Some(commentTreeMaxDepth),
-      page: None,
-      limit: None,
-      sort: Some(CommentSortType.Hot),
-      type_: Some(ListingType.All),
-      community_name: None,
-      community_id: None,
-      saved_only: Some(false),
-      auth: req.auth,
-    });
+    const commentsForm: GetComments = {
+      max_depth: commentTreeMaxDepth,
+      sort: "Hot",
+      type_: "All",
+      saved_only: false,
+      auth,
+    };
 
     // Set the correct id based on the path type
-    if (pathType == "post") {
-      postForm.id = Some(id);
-      commentsForm.post_id = Some(id);
+    if (pathType === "post") {
+      postForm.id = id;
+      commentsForm.post_id = id;
     } else {
-      postForm.comment_id = Some(id);
-      commentsForm.parent_id = Some(id);
+      postForm.comment_id = id;
+      commentsForm.parent_id = id;
     }
 
-    promises.push(req.client.getPost(postForm));
-    promises.push(req.client.getComments(commentsForm));
+    promises.push(client.getPost(postForm));
+    promises.push(client.getComments(commentsForm));
 
     return promises;
   }
 
   componentWillUnmount() {
-    this.subscription.unsubscribe();
     document.removeEventListener("scroll", this.commentScrollDebounced);
 
     saveScrollPosition(this.context);
   }
 
-  componentDidMount() {
+  async componentDidMount() {
+    if (!this.state.isIsomorphic) {
+      await this.fetchPost();
+    }
+
     autosize(document.querySelectorAll("textarea"));
 
     this.commentScrollDebounced = debounce(this.trackCommentsBoxScrolling, 100);
     document.addEventListener("scroll", this.commentScrollDebounced);
   }
 
-  componentDidUpdate(_lastProps: any) {
+  async componentDidUpdate(_lastProps: any) {
     // Necessary if you are on a post and you click another post (same route)
     if (_lastProps.location.pathname !== _lastProps.history.location.pathname) {
-      // TODO Couldnt get a refresh working. This does for now.
-      location.reload();
-
-      // let currentId = this.props.match.params.id;
-      // WebSocketService.Instance.getPost(currentId);
-      // this.context.refresh();
-      // this.context.router.history.push(_lastProps.location.pathname);
+      await this.fetchPost();
     }
   }
 
@@ -292,7 +289,7 @@ export class Post extends Component<any, PostState> {
   }
 
   scrollIntoCommentSection() {
-    this.state.commentSectionRef.current?.scrollIntoView();
+    this.state.commentSectionRef?.current?.scrollIntoView();
   }
 
   isBottom(el: Element): boolean {
@@ -305,168 +302,183 @@ export class Post extends Component<any, PostState> {
   trackCommentsBoxScrolling = () => {
     const wrappedElement = document.getElementsByClassName("comments")[0];
     if (wrappedElement && this.isBottom(wrappedElement)) {
-      this.state.maxCommentsShown += commentsShownInterval;
-      this.setState(this.state);
+      const commentCount =
+        this.state.commentsRes.state == "success"
+          ? this.state.commentsRes.data.comments.length
+          : 0;
+
+      if (this.state.maxCommentsShown < commentCount) {
+        this.setState({
+          maxCommentsShown: this.state.maxCommentsShown + commentsShownInterval,
+        });
+      }
     }
   };
 
   get documentTitle(): string {
-    return this.state.postRes.match({
-      some: res =>
-        this.state.siteRes.site_view.match({
-          some: siteView =>
-            `${res.post_view.post.name} - ${siteView.site.name}`,
-          none: "",
-        }),
-      none: "",
-    });
-  }
-
-  get imageTag(): Option<string> {
-    return this.state.postRes.match({
-      some: res =>
-        res.post_view.post.thumbnail_url.or(
-          res.post_view.post.url.match({
-            some: url => (isImage(url) ? Some(url) : None),
-            none: None,
-          })
-        ),
-      none: None,
-    });
+    const siteName = this.state.siteRes.site_view.site.name;
+    return this.state.postRes.state == "success"
+      ? `${this.state.postRes.data.post_view.post.name} - ${siteName}`
+      : siteName;
   }
 
-  get descriptionTag(): Option<string> {
-    return this.state.postRes.andThen(r => r.post_view.post.body);
+  get imageTag(): string | undefined {
+    if (this.state.postRes.state == "success") {
+      const post = this.state.postRes.data.post_view.post;
+      const thumbnail = post.thumbnail_url;
+      const url = post.url;
+      return thumbnail || (url && isImage(url) ? url : undefined);
+    } else return undefined;
   }
 
-  render() {
-    return (
-      <div class="container">
-        {this.state.loading ? (
+  renderPostRes() {
+    switch (this.state.postRes.state) {
+      case "loading":
+        return (
           <h5>
             <Spinner large />
           </h5>
-        ) : (
-          this.state.postRes.match({
-            some: res => (
-              <div class="row">
-                <div class="col-12 col-md-8 mb-3">
-                  <HtmlTags
-                    title={this.documentTitle}
-                    path={this.context.router.route.match.url}
-                    image={this.imageTag}
-                    description={this.descriptionTag}
-                  />
-                  <PostListing
-                    post_view={res.post_view}
-                    duplicates={this.state.crossPosts}
-                    showBody
-                    showCommunity
-                    moderators={Some(res.moderators)}
-                    admins={Some(this.state.siteRes.admins)}
-                    enableDownvotes={enableDownvotes(this.state.siteRes)}
-                    enableNsfw={enableNsfw(this.state.siteRes)}
-                  />
-                  <div ref={this.state.commentSectionRef} className="mb-2" />
-                  <CommentForm
-                    node={Right(res.post_view.post.id)}
-                    disabled={res.post_view.post.locked}
+        );
+      case "success": {
+        const res = this.state.postRes.data;
+        return (
+          <div className="row">
+            <div className="col-12 col-md-8 mb-3">
+              <HtmlTags
+                title={this.documentTitle}
+                path={this.context.router.route.match.url}
+                image={this.imageTag}
+                description={res.post_view.post.body}
+              />
+              <PostListing
+                post_view={res.post_view}
+                crossPosts={res.cross_posts}
+                showBody
+                showCommunity
+                moderators={res.moderators}
+                admins={this.state.siteRes.admins}
+                enableDownvotes={enableDownvotes(this.state.siteRes)}
+                enableNsfw={enableNsfw(this.state.siteRes)}
+                allLanguages={this.state.siteRes.all_languages}
+                siteLanguages={this.state.siteRes.discussion_languages}
+                onBlockPerson={this.handleBlockPerson}
+                onPostEdit={this.handlePostEdit}
+                onPostVote={this.handlePostVote}
+                onPostReport={this.handlePostReport}
+                onLockPost={this.handleLockPost}
+                onDeletePost={this.handleDeletePost}
+                onRemovePost={this.handleRemovePost}
+                onSavePost={this.handleSavePost}
+                onPurgePerson={this.handlePurgePerson}
+                onPurgePost={this.handlePurgePost}
+                onBanPerson={this.handleBanPerson}
+                onBanPersonFromCommunity={this.handleBanFromCommunity}
+                onAddModToCommunity={this.handleAddModToCommunity}
+                onAddAdmin={this.handleAddAdmin}
+                onTransferCommunity={this.handleTransferCommunity}
+                onFeaturePost={this.handleFeaturePost}
+              />
+              <div ref={this.state.commentSectionRef} className="mb-2" />
+              <CommentForm
+                node={res.post_view.post.id}
+                disabled={res.post_view.post.locked}
+                allLanguages={this.state.siteRes.all_languages}
+                siteLanguages={this.state.siteRes.discussion_languages}
+                onUpsertComment={this.handleCreateComment}
+                finished={this.state.finished.get(0)}
+              />
+              <div className="d-block d-md-none">
+                <button
+                  className="btn btn-secondary d-inline-block mb-2 mr-3"
+                  onClick={linkEvent(this, this.handleShowSidebarMobile)}
+                >
+                  {i18n.t("sidebar")}{" "}
+                  <Icon
+                    icon={
+                      this.state.showSidebarMobile
+                        ? `minus-square`
+                        : `plus-square`
+                    }
+                    classes="icon-inline"
                   />
-                  <div class="d-block d-md-none">
-                    <button
-                      class="btn btn-secondary d-inline-block mb-2 mr-3"
-                      onClick={linkEvent(this, this.handleShowSidebarMobile)}
-                    >
-                      {i18n.t("sidebar")}{" "}
-                      <Icon
-                        icon={
-                          this.state.showSidebarMobile
-                            ? `minus-square`
-                            : `plus-square`
-                        }
-                        classes="icon-inline"
-                      />
-                    </button>
-                    {this.state.showSidebarMobile && this.sidebar()}
-                  </div>
-                  {this.sortRadios()}
-                  {this.state.commentViewType == CommentViewType.Tree &&
-                    this.commentsTree()}
-                  {this.state.commentViewType == CommentViewType.Flat &&
-                    this.commentsFlat()}
-                </div>
-                <div class="d-none d-md-block col-md-4">{this.sidebar()}</div>
+                </button>
+                {this.state.showSidebarMobile && this.sidebar()}
               </div>
-            ),
-            none: <></>,
-          })
-        )}
-      </div>
-    );
+              {this.sortRadios()}
+              {this.state.commentViewType == CommentViewType.Tree &&
+                this.commentsTree()}
+              {this.state.commentViewType == CommentViewType.Flat &&
+                this.commentsFlat()}
+            </div>
+            <div className="d-none d-md-block col-md-4">{this.sidebar()}</div>
+          </div>
+        );
+      }
+    }
+  }
+
+  render() {
+    return <div className="container-lg">{this.renderPostRes()}</div>;
   }
 
   sortRadios() {
     return (
       <>
-        <div class="btn-group btn-group-toggle flex-wrap mr-3 mb-2">
+        <div className="btn-group btn-group-toggle flex-wrap mr-3 mb-2">
           <label
             className={`btn btn-outline-secondary pointer ${
-              CommentSortType[this.state.commentSort] === CommentSortType.Hot &&
-              "active"
+              this.state.commentSort === "Hot" && "active"
             }`}
           >
             {i18n.t("hot")}
             <input
               type="radio"
-              value={CommentSortType.Hot}
-              checked={this.state.commentSort === CommentSortType.Hot}
+              value={"Hot"}
+              checked={this.state.commentSort === "Hot"}
               onChange={linkEvent(this, this.handleCommentSortChange)}
             />
           </label>
           <label
             className={`btn btn-outline-secondary pointer ${
-              CommentSortType[this.state.commentSort] === CommentSortType.Top &&
-              "active"
+              this.state.commentSort === "Top" && "active"
             }`}
           >
             {i18n.t("top")}
             <input
               type="radio"
-              value={CommentSortType.Top}
-              checked={this.state.commentSort === CommentSortType.Top}
+              value={"Top"}
+              checked={this.state.commentSort === "Top"}
               onChange={linkEvent(this, this.handleCommentSortChange)}
             />
           </label>
           <label
             className={`btn btn-outline-secondary pointer ${
-              CommentSortType[this.state.commentSort] === CommentSortType.New &&
-              "active"
+              this.state.commentSort === "New" && "active"
             }`}
           >
             {i18n.t("new")}
             <input
               type="radio"
-              value={CommentSortType.New}
-              checked={this.state.commentSort === CommentSortType.New}
+              value={"New"}
+              checked={this.state.commentSort === "New"}
               onChange={linkEvent(this, this.handleCommentSortChange)}
             />
           </label>
           <label
             className={`btn btn-outline-secondary pointer ${
-              CommentSortType[this.state.commentSort] === CommentSortType.Old &&
-              "active"
+              this.state.commentSort === "Old" && "active"
             }`}
           >
             {i18n.t("old")}
             <input
               type="radio"
-              value={CommentSortType.Old}
-              checked={this.state.commentSort === CommentSortType.Old}
+              value={"Old"}
+              checked={this.state.commentSort === "Old"}
               onChange={linkEvent(this, this.handleCommentSortChange)}
             />
           </label>
         </div>
-        <div class="btn-group btn-group-toggle flex-wrap mb-2">
+        <div className="btn-group btn-group-toggle flex-wrap mb-2">
           <label
             className={`btn btn-outline-secondary pointer ${
               this.state.commentViewType === CommentViewType.Flat && "active"
@@ -487,108 +499,96 @@ export class Post extends Component<any, PostState> {
 
   commentsFlat() {
     // These are already sorted by new
-    return this.state.commentsRes.match({
-      some: commentsRes =>
-        this.state.postRes.match({
-          some: postRes => (
-            <div>
-              <CommentNodes
-                nodes={commentsToFlatNodes(commentsRes.comments)}
-                viewType={this.state.commentViewType}
-                maxCommentsShown={Some(this.state.maxCommentsShown)}
-                noIndent
-                locked={postRes.post_view.post.locked}
-                moderators={Some(postRes.moderators)}
-                admins={Some(this.state.siteRes.admins)}
-                enableDownvotes={enableDownvotes(this.state.siteRes)}
-                showContext
-              />
-            </div>
-          ),
-          none: <></>,
-        }),
-      none: <></>,
-    });
+    const commentsRes = this.state.commentsRes;
+    const postRes = this.state.postRes;
+
+    if (commentsRes.state == "success" && postRes.state == "success") {
+      return (
+        <div>
+          <CommentNodes
+            nodes={commentsToFlatNodes(commentsRes.data.comments)}
+            viewType={this.state.commentViewType}
+            maxCommentsShown={this.state.maxCommentsShown}
+            noIndent
+            locked={postRes.data.post_view.post.locked}
+            moderators={postRes.data.moderators}
+            admins={this.state.siteRes.admins}
+            enableDownvotes={enableDownvotes(this.state.siteRes)}
+            showContext
+            finished={this.state.finished}
+            allLanguages={this.state.siteRes.all_languages}
+            siteLanguages={this.state.siteRes.discussion_languages}
+            onSaveComment={this.handleSaveComment}
+            onBlockPerson={this.handleBlockPerson}
+            onDeleteComment={this.handleDeleteComment}
+            onRemoveComment={this.handleRemoveComment}
+            onCommentVote={this.handleCommentVote}
+            onCommentReport={this.handleCommentReport}
+            onDistinguishComment={this.handleDistinguishComment}
+            onAddModToCommunity={this.handleAddModToCommunity}
+            onAddAdmin={this.handleAddAdmin}
+            onTransferCommunity={this.handleTransferCommunity}
+            onFetchChildren={this.handleFetchChildren}
+            onPurgeComment={this.handlePurgeComment}
+            onPurgePerson={this.handlePurgePerson}
+            onCommentReplyRead={this.handleCommentReplyRead}
+            onPersonMentionRead={this.handlePersonMentionRead}
+            onBanPersonFromCommunity={this.handleBanFromCommunity}
+            onBanPerson={this.handleBanPerson}
+            onCreateComment={this.handleCreateComment}
+            onEditComment={this.handleEditComment}
+          />
+        </div>
+      );
+    }
   }
 
   sidebar() {
-    return this.state.postRes.match({
-      some: res => (
-        <div class="mb-3">
+    const res = this.state.postRes;
+    if (res.state === "success") {
+      return (
+        <div className="mb-3">
           <Sidebar
-            community_view={res.community_view}
-            moderators={res.moderators}
+            community_view={res.data.community_view}
+            moderators={res.data.moderators}
             admins={this.state.siteRes.admins}
-            online={res.online}
             enableNsfw={enableNsfw(this.state.siteRes)}
             showIcon
+            allLanguages={this.state.siteRes.all_languages}
+            siteLanguages={this.state.siteRes.discussion_languages}
+            onDeleteCommunity={this.handleDeleteCommunityClick}
+            onLeaveModTeam={this.handleAddModToCommunity}
+            onFollowCommunity={this.handleFollow}
+            onRemoveCommunity={this.handleModRemoveCommunity}
+            onPurgeCommunity={this.handlePurgeCommunity}
+            onBlockCommunity={this.handleBlockCommunity}
+            onEditCommunity={this.handleEditCommunity}
           />
         </div>
-      ),
-      none: <></>,
-    });
-  }
-
-  handleCommentSortChange(i: Post, event: any) {
-    i.state.commentSort = CommentSortType[event.target.value];
-    i.state.commentViewType = CommentViewType.Tree;
-    i.setState(i.state);
-    i.fetchPost();
-  }
-
-  handleCommentViewTypeChange(i: Post, event: any) {
-    i.state.commentViewType = Number(event.target.value);
-    i.state.commentSort = CommentSortType.New;
-    i.state.commentTree = buildCommentsTree(
-      i.state.commentsRes.map(r => r.comments).unwrapOr([]),
-      i.state.commentId.isSome()
-    );
-    i.setState(i.state);
-  }
-
-  handleShowSidebarMobile(i: Post) {
-    i.state.showSidebarMobile = !i.state.showSidebarMobile;
-    i.setState(i.state);
-  }
-
-  handleViewPost(i: Post) {
-    i.state.postRes.match({
-      some: res =>
-        i.context.router.history.push(`/post/${res.post_view.post.id}`),
-      none: void 0,
-    });
-  }
-
-  handleViewContext(i: Post) {
-    i.state.commentsRes.match({
-      some: res =>
-        i.context.router.history.push(
-          `/comment/${getCommentParentId(res.comments[0].comment).unwrap()}`
-        ),
-      none: void 0,
-    });
+      );
+    }
   }
 
   commentsTree() {
-    let showContextButton = toOption(this.state.commentTree[0]).match({
-      some: comment => getDepthFromComment(comment.comment_view.comment) > 0,
-      none: false,
-    });
+    const res = this.state.postRes;
+    const firstComment = this.commentTree().at(0)?.comment_view.comment;
+    const depth = getDepthFromComment(firstComment);
+    const showContextButton = depth ? depth > 0 : false;
 
-    return this.state.postRes.match({
-      some: res => (
+    return (
+      res.state == "success" && (
         <div>
-          {this.state.commentId.isSome() && (
+          {!!this.state.commentId && (
             <>
               <button
-                class="pl-0 d-block btn btn-link text-muted"
+                className="pl-0 d-block btn btn-link text-muted"
                 onClick={linkEvent(this, this.handleViewPost)}
               >
                 {i18n.t("view_all_comments")} âž”
               </button>
               {showContextButton && (
                 <button
-                  class="pl-0 d-block btn btn-link text-muted"
+                  className="pl-0 d-block btn btn-link text-muted"
                   onClick={linkEvent(this, this.handleViewContext)}
                 >
                   {i18n.t("show_context")} âž”
@@ -597,283 +597,432 @@ export class Post extends Component<any, PostState> {
             </>
           )}
           <CommentNodes
-            nodes={this.state.commentTree}
+            nodes={this.commentTree()}
             viewType={this.state.commentViewType}
-            maxCommentsShown={Some(this.state.maxCommentsShown)}
-            locked={res.post_view.post.locked}
-            moderators={Some(res.moderators)}
-            admins={Some(this.state.siteRes.admins)}
+            maxCommentsShown={this.state.maxCommentsShown}
+            locked={res.data.post_view.post.locked}
+            moderators={res.data.moderators}
+            admins={this.state.siteRes.admins}
             enableDownvotes={enableDownvotes(this.state.siteRes)}
+            finished={this.state.finished}
+            allLanguages={this.state.siteRes.all_languages}
+            siteLanguages={this.state.siteRes.discussion_languages}
+            onSaveComment={this.handleSaveComment}
+            onBlockPerson={this.handleBlockPerson}
+            onDeleteComment={this.handleDeleteComment}
+            onRemoveComment={this.handleRemoveComment}
+            onCommentVote={this.handleCommentVote}
+            onCommentReport={this.handleCommentReport}
+            onDistinguishComment={this.handleDistinguishComment}
+            onAddModToCommunity={this.handleAddModToCommunity}
+            onAddAdmin={this.handleAddAdmin}
+            onTransferCommunity={this.handleTransferCommunity}
+            onFetchChildren={this.handleFetchChildren}
+            onPurgeComment={this.handlePurgeComment}
+            onPurgePerson={this.handlePurgePerson}
+            onCommentReplyRead={this.handleCommentReplyRead}
+            onPersonMentionRead={this.handlePersonMentionRead}
+            onBanPersonFromCommunity={this.handleBanFromCommunity}
+            onBanPerson={this.handleBanPerson}
+            onCreateComment={this.handleCreateComment}
+            onEditComment={this.handleEditComment}
           />
         </div>
-      ),
-      none: <></>,
+      )
+    );
+  }
+
+  commentTree(): CommentNodeI[] {
+    if (this.state.commentsRes.state == "success") {
+      return buildCommentsTree(
+        this.state.commentsRes.data.comments,
+        !!this.state.commentId
+      );
+    } else {
+      return [];
+    }
+  }
+
+  async handleCommentSortChange(i: Post, event: any) {
+    i.setState({
+      commentSort: event.target.value as CommentSortType,
+      commentViewType: CommentViewType.Tree,
+      commentsRes: { state: "loading" },
+      postRes: { state: "loading" },
     });
+    await i.fetchPost();
   }
 
-  parseMessage(msg: any) {
-    let op = wsUserOp(msg);
-    console.log(msg);
-    if (msg.error) {
-      toast(i18n.t(msg.error), "danger");
-      return;
-    } else if (msg.reconnect) {
-      this.state.postRes.match({
-        some: res => {
-          let postId = res.post_view.post.id;
-          WebSocketService.Instance.send(
-            wsClient.postJoin({ post_id: postId })
-          );
-          WebSocketService.Instance.send(
-            wsClient.getPost({
-              id: Some(postId),
-              comment_id: None,
-              auth: auth(false).ok(),
-            })
-          );
-        },
-        none: void 0,
-      });
-    } else if (op == UserOperation.GetPost) {
-      let data = wsJsonToRes<GetPostResponse>(msg, GetPostResponse);
-      this.state.postRes = Some(data);
+  handleCommentViewTypeChange(i: Post, event: any) {
+    i.setState({
+      commentViewType: Number(event.target.value),
+      commentSort: "New",
+    });
+  }
 
-      // join the rooms
-      WebSocketService.Instance.send(
-        wsClient.postJoin({ post_id: data.post_view.post.id })
-      );
-      WebSocketService.Instance.send(
-        wsClient.communityJoin({
-          community_id: data.community_view.community.id,
-        })
-      );
+  handleShowSidebarMobile(i: Post) {
+    i.setState({ showSidebarMobile: !i.state.showSidebarMobile });
+  }
 
-      // Get cross-posts
-      // TODO move this into initial fetch and refetch
-      this.fetchCrossPosts();
-      this.setState(this.state);
-      setupTippy();
-      if (this.state.commentId.isNone()) restoreScrollPosition(this.context);
+  handleViewPost(i: Post) {
+    if (i.state.postRes.state == "success") {
+      const id = i.state.postRes.data.post_view.post.id;
+      i.context.router.history.push(`/post/${id}`);
+    }
+  }
 
-      if (this.checkScrollIntoCommentsParam) {
-        this.scrollIntoCommentSection();
-      }
-    } else if (op == UserOperation.GetComments) {
-      let data = wsJsonToRes<GetCommentsResponse>(msg, GetCommentsResponse);
-      // You might need to append here, since this could be building more comments from a tree fetch
-      this.state.commentsRes.match({
-        some: res => {
-          // Remove the first comment, since it is the parent
-          let newComments = data.comments;
-          newComments.shift();
-          res.comments.push(...newComments);
-        },
-        none: () => {
-          this.state.commentsRes = Some(data);
-        },
-      });
-      // this.state.commentsRes = Some(data);
-      this.state.commentTree = buildCommentsTree(
-        this.state.commentsRes.map(r => r.comments).unwrapOr([]),
-        this.state.commentId.isSome()
+  handleViewContext(i: Post) {
+    if (i.state.commentsRes.state == "success") {
+      const parentId = getCommentParentId(
+        i.state.commentsRes.data.comments.at(0)?.comment
       );
-      this.state.loading = false;
-      this.setState(this.state);
-    } else if (op == UserOperation.CreateComment) {
-      let data = wsJsonToRes<CommentResponse>(msg, CommentResponse);
-
-      // Don't get comments from the post room, if the creator is blocked
-      let creatorBlocked = UserService.Instance.myUserInfo
-        .map(m => m.person_blocks)
-        .unwrapOr([])
-        .map(pb => pb.target.id)
-        .includes(data.comment_view.creator.id);
-
-      // Necessary since it might be a user reply, which has the recipients, to avoid double
-      if (data.recipient_ids.length == 0 && !creatorBlocked) {
-        this.state.postRes.match({
-          some: postRes =>
-            this.state.commentsRes.match({
-              some: commentsRes => {
-                commentsRes.comments.unshift(data.comment_view);
-                insertCommentIntoTree(
-                  this.state.commentTree,
-                  data.comment_view,
-                  this.state.commentId.isSome()
-                );
-                postRes.post_view.counts.comments++;
-              },
-              none: void 0,
-            }),
-          none: void 0,
-        });
-        this.setState(this.state);
-        setupTippy();
+      if (parentId) {
+        i.context.router.history.push(`/comment/${parentId}`);
       }
-    } else if (
-      op == UserOperation.EditComment ||
-      op == UserOperation.DeleteComment ||
-      op == UserOperation.RemoveComment
-    ) {
-      let data = wsJsonToRes<CommentResponse>(msg, CommentResponse);
-      editCommentRes(
-        data.comment_view,
-        this.state.commentsRes.map(r => r.comments).unwrapOr([])
-      );
-      this.setState(this.state);
-    } else if (op == UserOperation.SaveComment) {
-      let data = wsJsonToRes<CommentResponse>(msg, CommentResponse);
-      saveCommentRes(
-        data.comment_view,
-        this.state.commentsRes.map(r => r.comments).unwrapOr([])
-      );
-      this.setState(this.state);
-      setupTippy();
-    } else if (op == UserOperation.CreateCommentLike) {
-      let data = wsJsonToRes<CommentResponse>(msg, CommentResponse);
-      createCommentLikeRes(
-        data.comment_view,
-        this.state.commentsRes.map(r => r.comments).unwrapOr([])
-      );
-      this.setState(this.state);
-    } else if (op == UserOperation.CreatePostLike) {
-      let data = wsJsonToRes<PostResponse>(msg, PostResponse);
-      this.state.postRes.match({
-        some: res => createPostLikeRes(data.post_view, res.post_view),
-        none: void 0,
-      });
-      this.setState(this.state);
-    } else if (
-      op == UserOperation.EditPost ||
-      op == UserOperation.DeletePost ||
-      op == UserOperation.RemovePost ||
-      op == UserOperation.LockPost ||
-      op == UserOperation.StickyPost ||
-      op == UserOperation.SavePost
-    ) {
-      let data = wsJsonToRes<PostResponse>(msg, PostResponse);
-      this.state.postRes.match({
-        some: res => (res.post_view = data.post_view),
-        none: void 0,
+    }
+  }
+
+  async handleDeleteCommunityClick(form: DeleteCommunity) {
+    const deleteCommunityRes = await HttpService.client.deleteCommunity(form);
+    this.updateCommunity(deleteCommunityRes);
+  }
+
+  async handleAddModToCommunity(form: AddModToCommunity) {
+    const addModRes = await HttpService.client.addModToCommunity(form);
+    this.updateModerators(addModRes);
+  }
+
+  async handleFollow(form: FollowCommunity) {
+    const followCommunityRes = await HttpService.client.followCommunity(form);
+    this.updateCommunity(followCommunityRes);
+
+    // Update myUserInfo
+    if (followCommunityRes.state === "success") {
+      const communityId = followCommunityRes.data.community_view.community.id;
+      const mui = UserService.Instance.myUserInfo;
+      if (mui) {
+        mui.follows = mui.follows.filter(i => i.community.id != communityId);
+      }
+    }
+  }
+
+  async handlePurgeCommunity(form: PurgeCommunity) {
+    const purgeCommunityRes = await HttpService.client.purgeCommunity(form);
+    this.purgeItem(purgeCommunityRes);
+  }
+
+  async handlePurgePerson(form: PurgePerson) {
+    const purgePersonRes = await HttpService.client.purgePerson(form);
+    this.purgeItem(purgePersonRes);
+  }
+
+  async handlePurgeComment(form: PurgeComment) {
+    const purgeCommentRes = await HttpService.client.purgeComment(form);
+    this.purgeItem(purgeCommentRes);
+  }
+
+  async handlePurgePost(form: PurgePost) {
+    const purgeRes = await HttpService.client.purgePost(form);
+    this.purgeItem(purgeRes);
+  }
+
+  async handleBlockCommunity(form: BlockCommunity) {
+    const blockCommunityRes = await HttpService.client.blockCommunity(form);
+    if (blockCommunityRes.state == "success") {
+      updateCommunityBlock(blockCommunityRes.data);
+      this.setState(s => {
+        if (s.postRes.state == "success") {
+          s.postRes.data.community_view.blocked =
+            blockCommunityRes.data.blocked;
+        }
       });
-      this.setState(this.state);
-      setupTippy();
-    } else if (
-      op == UserOperation.EditCommunity ||
-      op == UserOperation.DeleteCommunity ||
-      op == UserOperation.RemoveCommunity ||
-      op == UserOperation.FollowCommunity
+    }
+  }
+
+  async handleBlockPerson(form: BlockPerson) {
+    const blockPersonRes = await HttpService.client.blockPerson(form);
+    if (blockPersonRes.state == "success") {
+      updatePersonBlock(blockPersonRes.data);
+    }
+  }
+
+  async handleModRemoveCommunity(form: RemoveCommunity) {
+    const removeCommunityRes = await HttpService.client.removeCommunity(form);
+    this.updateCommunity(removeCommunityRes);
+  }
+
+  async handleEditCommunity(form: EditCommunity) {
+    const res = await HttpService.client.editCommunity(form);
+    this.updateCommunity(res);
+
+    return res;
+  }
+
+  async handleCreateComment(form: CreateComment) {
+    const createCommentRes = await HttpService.client.createComment(form);
+    this.createAndUpdateComments(createCommentRes);
+
+    return createCommentRes;
+  }
+
+  async handleEditComment(form: EditComment) {
+    const editCommentRes = await HttpService.client.editComment(form);
+    this.findAndUpdateComment(editCommentRes);
+
+    return editCommentRes;
+  }
+
+  async handleDeleteComment(form: DeleteComment) {
+    const deleteCommentRes = await HttpService.client.deleteComment(form);
+    this.findAndUpdateComment(deleteCommentRes);
+  }
+
+  async handleDeletePost(form: DeletePost) {
+    const deleteRes = await HttpService.client.deletePost(form);
+    this.updatePost(deleteRes);
+  }
+
+  async handleRemovePost(form: RemovePost) {
+    const removeRes = await HttpService.client.removePost(form);
+    this.updatePost(removeRes);
+  }
+
+  async handleRemoveComment(form: RemoveComment) {
+    const removeCommentRes = await HttpService.client.removeComment(form);
+    this.findAndUpdateComment(removeCommentRes);
+  }
+
+  async handleSaveComment(form: SaveComment) {
+    const saveCommentRes = await HttpService.client.saveComment(form);
+    this.findAndUpdateComment(saveCommentRes);
+  }
+
+  async handleSavePost(form: SavePost) {
+    const saveRes = await HttpService.client.savePost(form);
+    this.updatePost(saveRes);
+  }
+
+  async handleFeaturePost(form: FeaturePost) {
+    const featureRes = await HttpService.client.featurePost(form);
+    this.updatePost(featureRes);
+  }
+
+  async handleCommentVote(form: CreateCommentLike) {
+    const voteRes = await HttpService.client.likeComment(form);
+    this.findAndUpdateComment(voteRes);
+  }
+
+  async handlePostVote(form: CreatePostLike) {
+    const voteRes = await HttpService.client.likePost(form);
+    this.updatePost(voteRes);
+  }
+
+  async handlePostEdit(form: EditPost) {
+    const res = await HttpService.client.editPost(form);
+    this.updatePost(res);
+  }
+
+  async handleCommentReport(form: CreateCommentReport) {
+    const reportRes = await HttpService.client.createCommentReport(form);
+    if (reportRes.state == "success") {
+      toast(i18n.t("report_created"));
+    }
+  }
+
+  async handlePostReport(form: CreatePostReport) {
+    const reportRes = await HttpService.client.createPostReport(form);
+    if (reportRes.state == "success") {
+      toast(i18n.t("report_created"));
+    }
+  }
+
+  async handleLockPost(form: LockPost) {
+    const lockRes = await HttpService.client.lockPost(form);
+    this.updatePost(lockRes);
+  }
+
+  async handleDistinguishComment(form: DistinguishComment) {
+    const distinguishRes = await HttpService.client.distinguishComment(form);
+    this.findAndUpdateComment(distinguishRes);
+  }
+
+  async handleAddAdmin(form: AddAdmin) {
+    const addAdminRes = await HttpService.client.addAdmin(form);
+
+    if (addAdminRes.state === "success") {
+      this.setState(s => ((s.siteRes.admins = addAdminRes.data.admins), s));
+    }
+  }
+
+  async handleTransferCommunity(form: TransferCommunity) {
+    const transferCommunityRes = await HttpService.client.transferCommunity(
+      form
+    );
+    this.updateCommunityFull(transferCommunityRes);
+  }
+
+  async handleFetchChildren(form: GetComments) {
+    const moreCommentsRes = await HttpService.client.getComments(form);
+    if (
+      this.state.commentsRes.state == "success" &&
+      moreCommentsRes.state == "success"
     ) {
-      let data = wsJsonToRes<CommunityResponse>(msg, CommunityResponse);
-      this.state.postRes.match({
-        some: res => {
-          res.community_view = data.community_view;
-          res.post_view.community = data.community_view.community;
-          this.setState(this.state);
-        },
-        none: void 0,
-      });
-    } else if (op == UserOperation.BanFromCommunity) {
-      let data = wsJsonToRes<BanFromCommunityResponse>(
-        msg,
-        BanFromCommunityResponse
-      );
-      this.state.postRes.match({
-        some: postRes =>
-          this.state.commentsRes.match({
-            some: commentsRes => {
-              commentsRes.comments
-                .filter(c => c.creator.id == data.person_view.person.id)
-                .forEach(c => (c.creator_banned_from_community = data.banned));
-              if (postRes.post_view.creator.id == data.person_view.person.id) {
-                postRes.post_view.creator_banned_from_community = data.banned;
-              }
-              this.setState(this.state);
-            },
-            none: void 0,
-          }),
-        none: void 0,
-      });
-    } else if (op == UserOperation.AddModToCommunity) {
-      let data = wsJsonToRes<AddModToCommunityResponse>(
-        msg,
-        AddModToCommunityResponse
-      );
-      this.state.postRes.match({
-        some: res => {
-          res.moderators = data.moderators;
-          this.setState(this.state);
-        },
-        none: void 0,
-      });
-    } else if (op == UserOperation.BanPerson) {
-      let data = wsJsonToRes<BanPersonResponse>(msg, BanPersonResponse);
-      this.state.postRes.match({
-        some: postRes =>
-          this.state.commentsRes.match({
-            some: commentsRes => {
-              commentsRes.comments
-                .filter(c => c.creator.id == data.person_view.person.id)
-                .forEach(c => (c.creator.banned = data.banned));
-              if (postRes.post_view.creator.id == data.person_view.person.id) {
-                postRes.post_view.creator.banned = data.banned;
-              }
-              this.setState(this.state);
-            },
-            none: void 0,
-          }),
-        none: void 0,
+      const newComments = moreCommentsRes.data.comments;
+      // Remove the first comment, since it is the parent
+      newComments.shift();
+      const newRes = this.state.commentsRes;
+      newRes.data.comments.push(...newComments);
+      this.setState({ commentsRes: newRes });
+    }
+  }
+
+  async handleCommentReplyRead(form: MarkCommentReplyAsRead) {
+    const readRes = await HttpService.client.markCommentReplyAsRead(form);
+    this.findAndUpdateCommentReply(readRes);
+  }
+
+  async handlePersonMentionRead(form: MarkPersonMentionAsRead) {
+    // TODO not sure what to do here. Maybe it is actually optional, because post doesn't need it.
+    await HttpService.client.markPersonMentionAsRead(form);
+  }
+
+  async handleBanFromCommunity(form: BanFromCommunity) {
+    const banRes = await HttpService.client.banFromCommunity(form);
+    this.updateBan(banRes);
+  }
+
+  async handleBanPerson(form: BanPerson) {
+    const banRes = await HttpService.client.banPerson(form);
+    this.updateBan(banRes);
+  }
+
+  updateBanFromCommunity(banRes: RequestState<BanFromCommunityResponse>) {
+    // Maybe not necessary
+    if (banRes.state == "success") {
+      this.setState(s => {
+        if (
+          s.postRes.state == "success" &&
+          s.postRes.data.post_view.creator.id ==
+            banRes.data.person_view.person.id
+        ) {
+          s.postRes.data.post_view.creator_banned_from_community =
+            banRes.data.banned;
+        }
+        if (s.commentsRes.state == "success") {
+          s.commentsRes.data.comments
+            .filter(c => c.creator.id == banRes.data.person_view.person.id)
+            .forEach(
+              c => (c.creator_banned_from_community = banRes.data.banned)
+            );
+        }
+        return s;
       });
-    } else if (op == UserOperation.AddAdmin) {
-      let data = wsJsonToRes<AddAdminResponse>(msg, AddAdminResponse);
-      this.state.siteRes.admins = data.admins;
-      this.setState(this.state);
-    } else if (op == UserOperation.Search) {
-      let data = wsJsonToRes<SearchResponse>(msg, SearchResponse);
-      let xPosts = data.posts.filter(
-        p => p.post.id != Number(this.props.match.params.id)
-      );
-      this.state.crossPosts = xPosts.length > 0 ? Some(xPosts) : None;
-      this.setState(this.state);
-    } else if (op == UserOperation.LeaveAdmin) {
-      let data = wsJsonToRes<GetSiteResponse>(msg, GetSiteResponse);
-      this.state.siteRes = data;
-      this.setState(this.state);
-    } else if (op == UserOperation.TransferCommunity) {
-      let data = wsJsonToRes<GetCommunityResponse>(msg, GetCommunityResponse);
-      this.state.postRes.match({
-        some: res => {
-          res.community_view = data.community_view;
-          res.post_view.community = data.community_view.community;
-          res.moderators = data.moderators;
-          this.setState(this.state);
-        },
-        none: void 0,
+    }
+  }
+
+  updateBan(banRes: RequestState<BanPersonResponse>) {
+    // Maybe not necessary
+    if (banRes.state == "success") {
+      this.setState(s => {
+        if (
+          s.postRes.state == "success" &&
+          s.postRes.data.post_view.creator.id ==
+            banRes.data.person_view.person.id
+        ) {
+          s.postRes.data.post_view.creator.banned = banRes.data.banned;
+        }
+        if (s.commentsRes.state == "success") {
+          s.commentsRes.data.comments
+            .filter(c => c.creator.id == banRes.data.person_view.person.id)
+            .forEach(c => (c.creator.banned = banRes.data.banned));
+        }
+        return s;
       });
-    } else if (op == UserOperation.BlockPerson) {
-      let data = wsJsonToRes<BlockPersonResponse>(msg, BlockPersonResponse);
-      updatePersonBlock(data);
-    } else if (op == UserOperation.CreatePostReport) {
-      let data = wsJsonToRes<PostReportResponse>(msg, PostReportResponse);
-      if (data) {
-        toast(i18n.t("report_created"));
+    }
+  }
+
+  updateCommunity(communityRes: RequestState<CommunityResponse>) {
+    this.setState(s => {
+      if (s.postRes.state == "success" && communityRes.state == "success") {
+        s.postRes.data.community_view = communityRes.data.community_view;
       }
-    } else if (op == UserOperation.CreateCommentReport) {
-      let data = wsJsonToRes<CommentReportResponse>(msg, CommentReportResponse);
-      if (data) {
-        toast(i18n.t("report_created"));
+      return s;
+    });
+  }
+
+  updateCommunityFull(res: RequestState<GetCommunityResponse>) {
+    this.setState(s => {
+      if (s.postRes.state == "success" && res.state == "success") {
+        s.postRes.data.community_view = res.data.community_view;
+        s.postRes.data.moderators = res.data.moderators;
       }
-    } else if (
-      op == UserOperation.PurgePerson ||
-      op == UserOperation.PurgePost ||
-      op == UserOperation.PurgeComment ||
-      op == UserOperation.PurgeCommunity
-    ) {
-      let data = wsJsonToRes<PurgeItemResponse>(msg, PurgeItemResponse);
-      if (data.success) {
-        toast(i18n.t("purge_success"));
-        this.context.router.history.push(`/`);
+      return s;
+    });
+  }
+
+  updatePost(post: RequestState<PostResponse>) {
+    this.setState(s => {
+      if (s.postRes.state == "success" && post.state == "success") {
+        s.postRes.data.post_view = post.data.post_view;
       }
+      return s;
+    });
+  }
+
+  purgeItem(purgeRes: RequestState<PurgeItemResponse>) {
+    if (purgeRes.state == "success") {
+      toast(i18n.t("purge_success"));
+      this.context.router.history.push(`/`);
     }
   }
+
+  createAndUpdateComments(res: RequestState<CommentResponse>) {
+    this.setState(s => {
+      if (s.commentsRes.state === "success" && res.state === "success") {
+        s.commentsRes.data.comments.unshift(res.data.comment_view);
+
+        // Set finished for the parent
+        s.finished.set(
+          getCommentParentId(res.data.comment_view.comment) ?? 0,
+          true
+        );
+      }
+      return s;
+    });
+  }
+
+  findAndUpdateComment(res: RequestState<CommentResponse>) {
+    this.setState(s => {
+      if (s.commentsRes.state == "success" && res.state == "success") {
+        s.commentsRes.data.comments = editComment(
+          res.data.comment_view,
+          s.commentsRes.data.comments
+        );
+        s.finished.set(res.data.comment_view.comment.id, true);
+      }
+      return s;
+    });
+  }
+
+  findAndUpdateCommentReply(res: RequestState<CommentReplyResponse>) {
+    this.setState(s => {
+      if (s.commentsRes.state == "success" && res.state == "success") {
+        s.commentsRes.data.comments = editWith(
+          res.data.comment_reply_view,
+          s.commentsRes.data.comments
+        );
+      }
+      return s;
+    });
+  }
+
+  updateModerators(res: RequestState<AddModToCommunityResponse>) {
+    // Update the moderators
+    this.setState(s => {
+      if (s.postRes.state == "success" && res.state == "success") {
+        s.postRes.data.moderators = res.data.moderators;
+      }
+      return s;
+    });
+  }
 }