]> Untitled Git - lemmy-ui.git/blobdiff - src/shared/components/community/community.tsx
Use http client (#1081)
[lemmy-ui.git] / src / shared / components / community / community.tsx
index af562c195cac2bf4b248b3d443371fec402c7eb0..7dc150f332fd89b40a8635c79e526ffa53e3b3ed 100644 (file)
@@ -1,59 +1,85 @@
 import { Component, linkEvent } from "inferno";
 import { RouteComponentProps } from "inferno-router/dist/Route";
 import {
+  AddAdmin,
+  AddModToCommunity,
   AddModToCommunityResponse,
+  BanFromCommunity,
   BanFromCommunityResponse,
-  BlockCommunityResponse,
-  BlockPersonResponse,
+  BanPerson,
+  BanPersonResponse,
+  BlockCommunity,
+  BlockPerson,
+  CommentId,
+  CommentReplyResponse,
   CommentResponse,
-  CommentView,
   CommunityResponse,
+  CreateComment,
+  CreateCommentLike,
+  CreateCommentReport,
+  CreatePostLike,
+  CreatePostReport,
+  DeleteComment,
+  DeleteCommunity,
+  DeletePost,
+  DistinguishComment,
+  EditComment,
+  EditCommunity,
+  EditPost,
+  FeaturePost,
+  FollowCommunity,
   GetComments,
   GetCommentsResponse,
   GetCommunity,
   GetCommunityResponse,
   GetPosts,
   GetPostsResponse,
-  PostReportResponse,
+  GetSiteResponse,
+  LockPost,
+  MarkCommentReplyAsRead,
+  MarkPersonMentionAsRead,
   PostResponse,
-  PostView,
+  PurgeComment,
+  PurgeCommunity,
   PurgeItemResponse,
+  PurgePerson,
+  PurgePost,
+  RemoveComment,
+  RemoveCommunity,
+  RemovePost,
+  SaveComment,
+  SavePost,
   SortType,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
+  TransferCommunity,
 } from "lemmy-js-client";
-import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
 import {
   CommentViewType,
   DataType,
   InitialFetchRequest,
 } from "../../interfaces";
-import { UserService, WebSocketService } from "../../services";
+import { UserService } from "../../services";
+import { FirstLoadService } from "../../services/FirstLoadService";
+import { HttpService, RequestState } from "../../services/HttpService";
 import {
   QueryParams,
   commentsToFlatNodes,
   communityRSSUrl,
-  createCommentLikeRes,
-  createPostLikeFindRes,
-  editCommentRes,
-  editPostFindRes,
+  editComment,
+  editPost,
+  editWith,
   enableDownvotes,
   enableNsfw,
   fetchLimit,
+  getCommentParentId,
   getDataTypeString,
   getPageFromString,
   getQueryParams,
   getQueryString,
-  isPostBlocked,
   myAuth,
-  notifyPost,
-  nsfwCheck,
   postToCommentSortType,
   relTags,
   restoreScrollPosition,
-  saveCommentRes,
   saveScrollPosition,
   setIsoData,
   setupTippy,
@@ -61,8 +87,6 @@ import {
   toast,
   updateCommunityBlock,
   updatePersonBlock,
-  wsClient,
-  wsSubscribe,
 } from "../../utils";
 import { CommentNodes } from "../comment/comment-nodes";
 import { BannerIconHeader } from "../common/banner-icon-header";
@@ -77,12 +101,13 @@ import { PostListings } from "../post/post-listings";
 import { CommunityLink } from "./community-link";
 
 interface State {
-  communityRes?: GetCommunityResponse;
-  communityLoading: boolean;
-  listingsLoading: boolean;
-  posts: PostView[];
-  comments: CommentView[];
+  communityRes: RequestState<GetCommunityResponse>;
+  postsRes: RequestState<GetPostsResponse>;
+  commentsRes: RequestState<GetCommentsResponse>;
+  siteRes: GetSiteResponse;
   showSidebarMobile: boolean;
+  finished: Map<CommentId, boolean | undefined>;
+  isIsomorphic: boolean;
 }
 
 interface CommunityProps {
@@ -116,13 +141,14 @@ export class Community extends Component<
   State
 > {
   private isoData = setIsoData(this.context);
-  private subscription?: Subscription;
   state: State = {
-    communityLoading: true,
-    listingsLoading: true,
-    posts: [],
-    comments: [],
+    communityRes: { state: "empty" },
+    postsRes: { state: "empty" },
+    commentsRes: { state: "empty" },
+    siteRes: this.isoData.site_res,
     showSidebarMobile: false,
+    finished: new Map(),
+    isIsomorphic: false,
   };
 
   constructor(props: RouteComponentProps<{ name: string }>, context: any) {
@@ -132,56 +158,73 @@ export class Community extends Component<
     this.handleDataTypeChange = this.handleDataTypeChange.bind(this);
     this.handlePageChange = this.handlePageChange.bind(this);
 
-    this.parseMessage = this.parseMessage.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
+    // All of the action binds
+    this.handleDeleteCommunity = this.handleDeleteCommunity.bind(this);
+    this.handleEditCommunity = this.handleEditCommunity.bind(this);
+    this.handleFollow = this.handleFollow.bind(this);
+    this.handleRemoveCommunity = this.handleRemoveCommunity.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.handleCommentReplyRead = this.handleCommentReplyRead.bind(this);
+    this.handlePersonMentionRead = this.handlePersonMentionRead.bind(this);
+    this.handleBanFromCommunity = this.handleBanFromCommunity.bind(this);
+    this.handleBanPerson = this.handleBanPerson.bind(this);
+    this.handlePostVote = this.handlePostVote.bind(this);
+    this.handlePostEdit = this.handlePostEdit.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);
 
     // Only fetch the data if coming from another route
-    if (this.isoData.path == this.context.router.route.match.url) {
+    if (FirstLoadService.isFirstLoad) {
+      const [communityRes, postsRes, commentsRes] = this.isoData.routeData;
       this.state = {
         ...this.state,
-        communityRes: this.isoData.routeData[0] as GetCommunityResponse,
+        communityRes,
+        postsRes,
+        commentsRes,
+        isIsomorphic: true,
       };
-      const postsRes = this.isoData.routeData[1] as
-        | GetPostsResponse
-        | undefined;
-      const commentsRes = this.isoData.routeData[2] as
-        | GetCommentsResponse
-        | undefined;
-
-      if (postsRes) {
-        this.state = { ...this.state, posts: postsRes.posts };
-      }
-
-      if (commentsRes) {
-        this.state = { ...this.state, comments: commentsRes.comments };
-      }
-
-      this.state = {
-        ...this.state,
-        communityLoading: false,
-        listingsLoading: false,
-      };
-    } else {
-      this.fetchCommunity();
-      this.fetchData();
     }
   }
 
-  fetchCommunity() {
-    const form: GetCommunity = {
-      name: this.props.match.params.name,
-      auth: myAuth(false),
-    };
-    WebSocketService.Instance.send(wsClient.getCommunity(form));
+  async fetchCommunity() {
+    this.setState({ communityRes: { state: "loading" } });
+    this.setState({
+      communityRes: await HttpService.client.getCommunity({
+        name: this.props.match.params.name,
+        auth: myAuth(),
+      }),
+    });
   }
 
-  componentDidMount() {
+  async componentDidMount() {
+    if (!this.state.isIsomorphic) {
+      await Promise.all([this.fetchCommunity(), this.fetchData()]);
+    }
+
     setupTippy();
   }
 
   componentWillUnmount() {
     saveScrollPosition(this.context);
-    this.subscription?.unsubscribe();
   }
 
   static fetchInitialData({
@@ -189,9 +232,11 @@ export class Community extends Component<
     path,
     query: { dataType: urlDataType, page: urlPage, sort: urlSort },
     auth,
-  }: InitialFetchRequest<QueryParams<CommunityProps>>): Promise<any>[] {
+  }: InitialFetchRequest<QueryParams<CommunityProps>>): Promise<
+    RequestState<any>
+  >[] {
     const pathSplit = path.split("/");
-    const promises: Promise<any>[] = [];
+    const promises: Promise<RequestState<any>>[] = [];
 
     const communityName = pathSplit[2];
     const communityForm: GetCommunity = {
@@ -217,7 +262,7 @@ export class Community extends Component<
         auth,
       };
       promises.push(client.getPosts(getPostsForm));
-      promises.push(Promise.resolve());
+      promises.push(Promise.resolve({ state: "empty" }));
     } else {
       const getCommentsForm: GetComments = {
         community_name: communityName,
@@ -228,7 +273,7 @@ export class Community extends Component<
         saved_only: false,
         auth,
       };
-      promises.push(Promise.resolve());
+      promises.push(Promise.resolve({ state: "empty" }));
       promises.push(client.getComments(getCommentsForm));
     }
 
@@ -237,141 +282,192 @@ export class Community extends Component<
 
   get documentTitle(): string {
     const cRes = this.state.communityRes;
-    return cRes
-      ? `${cRes.community_view.community.title} - ${this.isoData.site_res.site_view.site.name}`
+    return cRes.state == "success"
+      ? `${cRes.data.community_view.community.title} - ${this.isoData.site_res.site_view.site.name}`
       : "";
   }
 
-  render() {
-    const res = this.state.communityRes;
-    const { page } = getCommunityQueryParams();
-
-    return (
-      <div className="container-lg">
-        {this.state.communityLoading ? (
+  renderCommunity() {
+    switch (this.state.communityRes.state) {
+      case "loading":
+        return (
           <h5>
             <Spinner large />
           </h5>
-        ) : (
-          res && (
-            <>
-              <HtmlTags
-                title={this.documentTitle}
-                path={this.context.router.route.match.url}
-                description={res.community_view.community.description}
-                image={res.community_view.community.icon}
-              />
-
-              <div className="row">
-                <div className="col-12 col-md-8">
-                  {this.communityInfo}
-                  <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"
-                      />
-                    </button>
-                    {this.state.showSidebarMobile && this.sidebar(res)}
-                  </div>
-                  {this.selects}
-                  {this.listings}
-                  <Paginator page={page} onChange={this.handlePageChange} />
-                </div>
-                <div className="d-none d-md-block col-md-4">
-                  {this.sidebar(res)}
+        );
+      case "success": {
+        const res = this.state.communityRes.data;
+        const { page } = getCommunityQueryParams();
+
+        return (
+          <>
+            <HtmlTags
+              title={this.documentTitle}
+              path={this.context.router.route.match.url}
+              description={res.community_view.community.description}
+              image={res.community_view.community.icon}
+            />
+
+            <div className="row">
+              <div className="col-12 col-md-8">
+                {this.communityInfo(res)}
+                <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"
+                    />
+                  </button>
+                  {this.state.showSidebarMobile && this.sidebar(res)}
                 </div>
+                {this.selects(res)}
+                {this.listings(res)}
+                <Paginator page={page} onChange={this.handlePageChange} />
               </div>
-            </>
-          )
-        )}
-      </div>
-    );
+              <div className="d-none d-md-block col-md-4">
+                {this.sidebar(res)}
+              </div>
+            </div>
+          </>
+        );
+      }
+    }
   }
 
-  sidebar({
-    community_view,
-    moderators,
-    online,
-    discussion_languages,
-    site,
-  }: GetCommunityResponse) {
+  render() {
+    return <div className="container-lg">{this.renderCommunity()}</div>;
+  }
+
+  sidebar(res: GetCommunityResponse) {
     const { site_res } = this.isoData;
     // For some reason, this returns an empty vec if it matches the site langs
     const communityLangs =
-      discussion_languages.length === 0
+      res.discussion_languages.length === 0
         ? site_res.all_languages.map(({ id }) => id)
-        : discussion_languages;
+        : res.discussion_languages;
 
     return (
       <>
         <Sidebar
-          community_view={community_view}
-          moderators={moderators}
+          community_view={res.community_view}
+          moderators={res.moderators}
           admins={site_res.admins}
-          online={online}
+          online={res.online}
           enableNsfw={enableNsfw(site_res)}
           editable
           allLanguages={site_res.all_languages}
           siteLanguages={site_res.discussion_languages}
           communityLanguages={communityLangs}
+          onDeleteCommunity={this.handleDeleteCommunity}
+          onRemoveCommunity={this.handleRemoveCommunity}
+          onLeaveModTeam={this.handleAddModToCommunity}
+          onFollowCommunity={this.handleFollow}
+          onBlockCommunity={this.handleBlockCommunity}
+          onPurgeCommunity={this.handlePurgeCommunity}
+          onEditCommunity={this.handleEditCommunity}
         />
-        {!community_view.community.local && site && (
-          <SiteSidebar site={site} showLocal={showLocal(this.isoData)} />
+        {!res.community_view.community.local && res.site && (
+          <SiteSidebar site={res.site} showLocal={showLocal(this.isoData)} />
         )}
       </>
     );
   }
 
-  get listings() {
+  listings(communityRes: GetCommunityResponse) {
     const { dataType } = getCommunityQueryParams();
     const { site_res } = this.isoData;
-    const { listingsLoading, posts, comments, communityRes } = this.state;
-
-    if (listingsLoading) {
-      return (
-        <h5>
-          <Spinner large />
-        </h5>
-      );
-    } else if (dataType === DataType.Post) {
-      return (
-        <PostListings
-          posts={posts}
-          removeDuplicates
-          enableDownvotes={enableDownvotes(site_res)}
-          enableNsfw={enableNsfw(site_res)}
-          allLanguages={site_res.all_languages}
-          siteLanguages={site_res.discussion_languages}
-        />
-      );
+
+    if (dataType === DataType.Post) {
+      switch (this.state.postsRes.state) {
+        case "loading":
+          return (
+            <h5>
+              <Spinner large />
+            </h5>
+          );
+        case "success":
+          return (
+            <PostListings
+              posts={this.state.postsRes.data.posts}
+              removeDuplicates
+              enableDownvotes={enableDownvotes(site_res)}
+              enableNsfw={enableNsfw(site_res)}
+              allLanguages={site_res.all_languages}
+              siteLanguages={site_res.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}
+            />
+          );
+      }
     } else {
-      return (
-        <CommentNodes
-          nodes={commentsToFlatNodes(comments)}
-          viewType={CommentViewType.Flat}
-          noIndent
-          showContext
-          enableDownvotes={enableDownvotes(site_res)}
-          moderators={communityRes?.moderators}
-          admins={site_res.admins}
-          allLanguages={site_res.all_languages}
-          siteLanguages={site_res.discussion_languages}
-        />
-      );
+      switch (this.state.commentsRes.state) {
+        case "loading":
+          return (
+            <h5>
+              <Spinner large />
+            </h5>
+          );
+        case "success":
+          return (
+            <CommentNodes
+              nodes={commentsToFlatNodes(this.state.commentsRes.data.comments)}
+              viewType={CommentViewType.Flat}
+              finished={this.state.finished}
+              noIndent
+              showContext
+              enableDownvotes={enableDownvotes(site_res)}
+              moderators={communityRes.moderators}
+              admins={site_res.admins}
+              allLanguages={site_res.all_languages}
+              siteLanguages={site_res.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}
+              onPurgeComment={this.handlePurgeComment}
+              onPurgePerson={this.handlePurgePerson}
+              onCommentReplyRead={this.handleCommentReplyRead}
+              onPersonMentionRead={this.handlePersonMentionRead}
+              onBanPersonFromCommunity={this.handleBanFromCommunity}
+              onBanPerson={this.handleBanPerson}
+              onCreateComment={this.handleCreateComment}
+              onEditComment={this.handleEditComment}
+            />
+          );
+      }
     }
   }
 
-  get communityInfo() {
-    const community = this.state.communityRes?.community_view.community;
+  communityInfo(res: GetCommunityResponse) {
+    const community = res.community_view.community;
 
     return (
       community && (
@@ -390,12 +486,11 @@ export class Community extends Component<
     );
   }
 
-  get selects() {
+  selects(res: GetCommunityResponse) {
     // let communityRss = this.state.communityRes.map(r =>
     //   communityRSSUrl(r.community_view.community.actor_id, this.state.sort)
     // );
     const { dataType, sort } = getCommunityQueryParams();
-    const res = this.state.communityRes;
     const communityRss = res
       ? communityRSSUrl(res.community_view.community.actor_id, sort)
       : undefined;
@@ -448,7 +543,7 @@ export class Community extends Component<
     }));
   }
 
-  updateUrl({ dataType, page, sort }: Partial<CommunityProps>) {
+  async updateUrl({ dataType, page, sort }: Partial<CommunityProps>) {
     const {
       dataType: urlDataType,
       page: urlPage,
@@ -465,284 +560,368 @@ export class Community extends Component<
       `/c/${this.props.match.params.name}${getQueryString(queryParams)}`
     );
 
-    this.setState({
-      comments: [],
-      posts: [],
-      listingsLoading: true,
-    });
-
-    this.fetchData();
+    await this.fetchData();
   }
 
-  fetchData() {
+  async fetchData() {
     const { dataType, page, sort } = getCommunityQueryParams();
     const { name } = this.props.match.params;
 
-    let req: string;
     if (dataType === DataType.Post) {
-      const form: GetPosts = {
-        page,
-        limit: fetchLimit,
-        sort,
-        type_: "All",
-        community_name: name,
-        saved_only: false,
-        auth: myAuth(false),
-      };
-      req = wsClient.getPosts(form);
+      this.setState({ postsRes: { state: "loading" } });
+      this.setState({
+        postsRes: await HttpService.client.getPosts({
+          page,
+          limit: fetchLimit,
+          sort,
+          type_: "All",
+          community_name: name,
+          saved_only: false,
+          auth: myAuth(),
+        }),
+      });
     } else {
-      const form: GetComments = {
-        page,
-        limit: fetchLimit,
-        sort: postToCommentSortType(sort),
-        type_: "All",
-        community_name: name,
-        saved_only: false,
-        auth: myAuth(false),
-      };
-
-      req = wsClient.getComments(form);
+      this.setState({ commentsRes: { state: "loading" } });
+      this.setState({
+        commentsRes: await HttpService.client.getComments({
+          page,
+          limit: fetchLimit,
+          sort: postToCommentSortType(sort),
+          type_: "All",
+          community_name: name,
+          saved_only: false,
+          auth: myAuth(),
+        }),
+      });
     }
 
-    WebSocketService.Instance.send(req);
+    restoreScrollPosition(this.context);
+    setupTippy();
   }
 
-  parseMessage(msg: any) {
-    const { page } = getCommunityQueryParams();
-    const op = wsUserOp(msg);
-    console.log(msg);
-    const res = this.state.communityRes;
-
-    if (msg.error) {
-      toast(i18n.t(msg.error), "danger");
-      this.context.router.history.push("/");
-    } else if (msg.reconnect) {
-      if (res) {
-        WebSocketService.Instance.send(
-          wsClient.communityJoin({
-            community_id: res.community_view.community.id,
-          })
-        );
-      }
-
-      this.fetchData();
-    } else {
-      switch (op) {
-        case UserOperation.GetCommunity: {
-          const data = wsJsonToRes<GetCommunityResponse>(msg);
-
-          this.setState({ communityRes: data, communityLoading: false });
-          // TODO why is there no auth in this form?
-          WebSocketService.Instance.send(
-            wsClient.communityJoin({
-              community_id: data.community_view.community.id,
-            })
-          );
+  async handleDeleteCommunity(form: DeleteCommunity) {
+    const deleteCommunityRes = await HttpService.client.deleteCommunity(form);
+    this.updateCommunity(deleteCommunityRes);
+  }
 
-          break;
-        }
+  async handleAddModToCommunity(form: AddModToCommunity) {
+    const addModRes = await HttpService.client.addModToCommunity(form);
+    this.updateModerators(addModRes);
+  }
 
-        case UserOperation.EditCommunity:
-        case UserOperation.DeleteCommunity:
-        case UserOperation.RemoveCommunity: {
-          const { community_view, discussion_languages } =
-            wsJsonToRes<CommunityResponse>(msg);
+  async handleFollow(form: FollowCommunity) {
+    const followCommunityRes = await HttpService.client.followCommunity(form);
+    this.updateCommunity(followCommunityRes);
 
-          if (res) {
-            res.community_view = community_view;
-            res.discussion_languages = discussion_languages;
-            this.setState(this.state);
-          }
+    // 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);
+      }
+    }
+  }
 
-          break;
-        }
+  async handlePurgeCommunity(form: PurgeCommunity) {
+    const purgeCommunityRes = await HttpService.client.purgeCommunity(form);
+    this.purgeItem(purgeCommunityRes);
+  }
 
-        case UserOperation.FollowCommunity: {
-          const {
-            community_view: {
-              subscribed,
-              counts: { subscribers },
-            },
-          } = wsJsonToRes<CommunityResponse>(msg);
-
-          if (res) {
-            res.community_view.subscribed = subscribed;
-            res.community_view.counts.subscribers = subscribers;
-            this.setState(this.state);
-          }
-
-          break;
-        }
+  async handlePurgePerson(form: PurgePerson) {
+    const purgePersonRes = await HttpService.client.purgePerson(form);
+    this.purgeItem(purgePersonRes);
+  }
 
-        case UserOperation.GetPosts: {
-          const { posts } = wsJsonToRes<GetPostsResponse>(msg);
+  async handlePurgeComment(form: PurgeComment) {
+    const purgeCommentRes = await HttpService.client.purgeComment(form);
+    this.purgeItem(purgeCommentRes);
+  }
 
-          this.setState({ posts, listingsLoading: false });
-          restoreScrollPosition(this.context);
-          setupTippy();
+  async handlePurgePost(form: PurgePost) {
+    const purgeRes = await HttpService.client.purgePost(form);
+    this.purgeItem(purgeRes);
+  }
 
-          break;
-        }
+  async handleBlockCommunity(form: BlockCommunity) {
+    const blockCommunityRes = await HttpService.client.blockCommunity(form);
+    if (blockCommunityRes.state == "success") {
+      updateCommunityBlock(blockCommunityRes.data);
+    }
+  }
 
-        case UserOperation.EditPost:
-        case UserOperation.DeletePost:
-        case UserOperation.RemovePost:
-        case UserOperation.LockPost:
-        case UserOperation.FeaturePost:
-        case UserOperation.SavePost: {
-          const { post_view } = wsJsonToRes<PostResponse>(msg);
+  async handleBlockPerson(form: BlockPerson) {
+    const blockPersonRes = await HttpService.client.blockPerson(form);
+    if (blockPersonRes.state == "success") {
+      updatePersonBlock(blockPersonRes.data);
+    }
+  }
 
-          editPostFindRes(post_view, this.state.posts);
-          this.setState(this.state);
+  async handleRemoveCommunity(form: RemoveCommunity) {
+    const removeCommunityRes = await HttpService.client.removeCommunity(form);
+    this.updateCommunity(removeCommunityRes);
+  }
 
-          break;
-        }
+  async handleEditCommunity(form: EditCommunity) {
+    const res = await HttpService.client.editCommunity(form);
+    this.updateCommunity(res);
 
-        case UserOperation.CreatePost: {
-          const { post_view } = wsJsonToRes<PostResponse>(msg);
+    return res;
+  }
 
-          const showPostNotifs =
-            UserService.Instance.myUserInfo?.local_user_view.local_user
-              .show_new_post_notifs;
+  async handleCreateComment(form: CreateComment) {
+    const createCommentRes = await HttpService.client.createComment(form);
+    this.createAndUpdateComments(createCommentRes);
 
-          // Only push these if you're on the first page, you pass the nsfw check, and it isn't blocked
-          if (page === 1 && nsfwCheck(post_view) && !isPostBlocked(post_view)) {
-            this.state.posts.unshift(post_view);
-            if (showPostNotifs) {
-              notifyPost(post_view, this.context.router);
-            }
-            this.setState(this.state);
-          }
+    return createCommentRes;
+  }
 
-          break;
-        }
+  async handleEditComment(form: EditComment) {
+    const editCommentRes = await HttpService.client.editComment(form);
+    this.findAndUpdateComment(editCommentRes);
 
-        case UserOperation.CreatePostLike: {
-          const { post_view } = wsJsonToRes<PostResponse>(msg);
+    return editCommentRes;
+  }
 
-          createPostLikeFindRes(post_view, this.state.posts);
-          this.setState(this.state);
+  async handleDeleteComment(form: DeleteComment) {
+    const deleteCommentRes = await HttpService.client.deleteComment(form);
+    this.findAndUpdateComment(deleteCommentRes);
+  }
 
-          break;
-        }
+  async handleDeletePost(form: DeletePost) {
+    const deleteRes = await HttpService.client.deletePost(form);
+    this.findAndUpdatePost(deleteRes);
+  }
 
-        case UserOperation.AddModToCommunity: {
-          const { moderators } = wsJsonToRes<AddModToCommunityResponse>(msg);
+  async handleRemovePost(form: RemovePost) {
+    const removeRes = await HttpService.client.removePost(form);
+    this.findAndUpdatePost(removeRes);
+  }
 
-          if (res) {
-            res.moderators = moderators;
-            this.setState(this.state);
-          }
+  async handleRemoveComment(form: RemoveComment) {
+    const removeCommentRes = await HttpService.client.removeComment(form);
+    this.findAndUpdateComment(removeCommentRes);
+  }
 
-          break;
-        }
+  async handleSaveComment(form: SaveComment) {
+    const saveCommentRes = await HttpService.client.saveComment(form);
+    this.findAndUpdateComment(saveCommentRes);
+  }
 
-        case UserOperation.BanFromCommunity: {
-          const {
-            person_view: {
-              person: { id: personId },
-            },
-            banned,
-          } = wsJsonToRes<BanFromCommunityResponse>(msg);
+  async handleSavePost(form: SavePost) {
+    const saveRes = await HttpService.client.savePost(form);
+    this.findAndUpdatePost(saveRes);
+  }
 
-          // TODO this might be incorrect
-          this.state.posts
-            .filter(p => p.creator.id === personId)
-            .forEach(p => (p.creator_banned_from_community = banned));
+  async handleFeaturePost(form: FeaturePost) {
+    const featureRes = await HttpService.client.featurePost(form);
+    this.findAndUpdatePost(featureRes);
+  }
 
-          this.setState(this.state);
+  async handleCommentVote(form: CreateCommentLike) {
+    const voteRes = await HttpService.client.likeComment(form);
+    this.findAndUpdateComment(voteRes);
+  }
 
-          break;
-        }
+  async handlePostEdit(form: EditPost) {
+    const res = await HttpService.client.editPost(form);
+    this.findAndUpdatePost(res);
+  }
 
-        case UserOperation.GetComments: {
-          const { comments } = wsJsonToRes<GetCommentsResponse>(msg);
-          this.setState({ comments, listingsLoading: false });
+  async handlePostVote(form: CreatePostLike) {
+    const voteRes = await HttpService.client.likePost(form);
+    this.findAndUpdatePost(voteRes);
+  }
 
-          break;
-        }
+  async handleCommentReport(form: CreateCommentReport) {
+    const reportRes = await HttpService.client.createCommentReport(form);
+    if (reportRes.state == "success") {
+      toast(i18n.t("report_created"));
+    }
+  }
 
-        case UserOperation.EditComment:
-        case UserOperation.DeleteComment:
-        case UserOperation.RemoveComment: {
-          const { comment_view } = wsJsonToRes<CommentResponse>(msg);
-          editCommentRes(comment_view, this.state.comments);
-          this.setState(this.state);
+  async handlePostReport(form: CreatePostReport) {
+    const reportRes = await HttpService.client.createPostReport(form);
+    if (reportRes.state == "success") {
+      toast(i18n.t("report_created"));
+    }
+  }
 
-          break;
-        }
+  async handleLockPost(form: LockPost) {
+    const lockRes = await HttpService.client.lockPost(form);
+    this.findAndUpdatePost(lockRes);
+  }
 
-        case UserOperation.CreateComment: {
-          const { form_id, comment_view } = wsJsonToRes<CommentResponse>(msg);
+  async handleDistinguishComment(form: DistinguishComment) {
+    const distinguishRes = await HttpService.client.distinguishComment(form);
+    this.findAndUpdateComment(distinguishRes);
+  }
 
-          // Necessary since it might be a user reply
-          if (form_id) {
-            this.setState(({ comments }) => ({
-              comments: [comment_view].concat(comments),
-            }));
-          }
+  async handleAddAdmin(form: AddAdmin) {
+    const addAdminRes = await HttpService.client.addAdmin(form);
 
-          break;
-        }
+    if (addAdminRes.state == "success") {
+      this.setState(s => ((s.siteRes.admins = addAdminRes.data.admins), s));
+    }
+  }
 
-        case UserOperation.SaveComment: {
-          const { comment_view } = wsJsonToRes<CommentResponse>(msg);
+  async handleTransferCommunity(form: TransferCommunity) {
+    const transferCommunityRes = await HttpService.client.transferCommunity(
+      form
+    );
+    toast(i18n.t("transfer_community"));
+    this.updateCommunityFull(transferCommunityRes);
+  }
 
-          saveCommentRes(comment_view, this.state.comments);
-          this.setState(this.state);
+  async handleCommentReplyRead(form: MarkCommentReplyAsRead) {
+    const readRes = await HttpService.client.markCommentReplyAsRead(form);
+    this.findAndUpdateCommentReply(readRes);
+  }
 
-          break;
-        }
+  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);
+  }
 
-        case UserOperation.CreateCommentLike: {
-          const { comment_view } = wsJsonToRes<CommentResponse>(msg);
+  async handleBanFromCommunity(form: BanFromCommunity) {
+    const banRes = await HttpService.client.banFromCommunity(form);
+    this.updateBanFromCommunity(banRes);
+  }
 
-          createCommentLikeRes(comment_view, this.state.comments);
-          this.setState(this.state);
+  async handleBanPerson(form: BanPerson) {
+    const banRes = await HttpService.client.banPerson(form);
+    this.updateBan(banRes);
+  }
 
-          break;
+  updateBanFromCommunity(banRes: RequestState<BanFromCommunityResponse>) {
+    // Maybe not necessary
+    if (banRes.state == "success") {
+      this.setState(s => {
+        if (s.postsRes.state == "success") {
+          s.postsRes.data.posts
+            .filter(c => c.creator.id == banRes.data.person_view.person.id)
+            .forEach(
+              c => (c.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;
+      });
+    }
+  }
 
-        case UserOperation.BlockPerson: {
-          const data = wsJsonToRes<BlockPersonResponse>(msg);
-          updatePersonBlock(data);
-
-          break;
+  updateBan(banRes: RequestState<BanPersonResponse>) {
+    // Maybe not necessary
+    if (banRes.state == "success") {
+      this.setState(s => {
+        if (s.postsRes.state == "success") {
+          s.postsRes.data.posts
+            .filter(c => c.creator.id == banRes.data.person_view.person.id)
+            .forEach(c => (c.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;
+      });
+    }
+  }
 
-        case UserOperation.CreatePostReport:
-        case UserOperation.CreateCommentReport: {
-          const data = wsJsonToRes<PostReportResponse>(msg);
+  updateCommunity(res: RequestState<CommunityResponse>) {
+    this.setState(s => {
+      if (s.communityRes.state == "success" && res.state == "success") {
+        s.communityRes.data.community_view = res.data.community_view;
+        s.communityRes.data.discussion_languages =
+          res.data.discussion_languages;
+      }
+      return s;
+    });
+  }
 
-          if (data) {
-            toast(i18n.t("report_created"));
-          }
+  updateCommunityFull(res: RequestState<GetCommunityResponse>) {
+    this.setState(s => {
+      if (s.communityRes.state == "success" && res.state == "success") {
+        s.communityRes.data.community_view = res.data.community_view;
+        s.communityRes.data.moderators = res.data.moderators;
+      }
+      return s;
+    });
+  }
 
-          break;
-        }
+  purgeItem(purgeRes: RequestState<PurgeItemResponse>) {
+    if (purgeRes.state == "success") {
+      toast(i18n.t("purge_success"));
+      this.context.router.history.push(`/`);
+    }
+  }
 
-        case UserOperation.PurgeCommunity: {
-          const { success } = wsJsonToRes<PurgeItemResponse>(msg);
+  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;
+    });
+  }
 
-          if (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);
 
-          break;
-        }
+        // Set finished for the parent
+        s.finished.set(
+          getCommentParentId(res.data.comment_view.comment) ?? 0,
+          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;
+    });
+  }
 
-        case UserOperation.BlockCommunity: {
-          const data = wsJsonToRes<BlockCommunityResponse>(msg);
-          if (res) {
-            res.community_view.blocked = data.blocked;
-            this.setState(this.state);
-          }
-          updateCommunityBlock(data);
+  findAndUpdatePost(res: RequestState<PostResponse>) {
+    this.setState(s => {
+      if (s.postsRes.state == "success" && res.state == "success") {
+        s.postsRes.data.posts = editPost(
+          res.data.post_view,
+          s.postsRes.data.posts
+        );
+      }
+      return s;
+    });
+  }
 
-          break;
-        }
+  updateModerators(res: RequestState<AddModToCommunityResponse>) {
+    // Update the moderators
+    this.setState(s => {
+      if (s.communityRes.state == "success" && res.state == "success") {
+        s.communityRes.data.moderators = res.data.moderators;
       }
-    }
+      return s;
+    });
   }
 }