Use http client (#1081)

* Beginning work on websocket -> http client conversion.

* About 30% done.

* half done.

* more done.

* Almost passing lint.

* Passing lint, but untested.

* Add back in event listeners.

* Fixing some community forms.

* Remove webpack cache.

* fixing some more.

* Fixed ISOwrappers.

* A few more fixes.

* Refactor utils

* Fix instance add/remove buttons

* Not catching errors in isoWrapper.

* Wrap Http client

* Fixing up tagline and ratelimit forms.

* Make all http client wrapping be in one place

* Reworking some more forms.

* Upgrading lemmy-js-client.

* Fixing verify email.

* Fix linting errors

* Upgrading woodpecker node.

* Fix comment scrolling rerender bug.

* Fixing a few things, commenting out props for now.

* v0.18.0-beta.1

* Trying to fix woodpecker, 1.

* Trying to fix woodpecker, 2.

* Handroll prompt

* Add navigation prompt to other pages

* Fix prompt navigation bug

* Fix prompt bug introduced from last bug fix

* Fix PWA bug

* Fix isoData not working

* Fix search page update url

* Fix sharp issue.

* v0.18.0-beta.2

* Make create post pre-fetch communities

* Fix bug from last commit

* Fix issue of posts/comments not being switched when changing select options

* Fix unnecessary fetches on home screen

* Make circular icon buttons not look stupid

* Prevent unnecessary fetches

* Make login experience smoother

* Add PWA shortcuts

* Add related application to PWA

* Update translations

* Forgot to add post editing.

* Fixing site setup.

* Deploy script setup.

* v0.18.0-beta.4

* Sanitize again.

* Adding sanitize json function.

* Upping version.

* Another sanitize fix.

* Upping version.

* Prevent search nav item from disappearing when on search page

* Allow admin and mod actions on non-local comments.

* Fix mobile menu collapse bug

* Completely fix prompt component

* Fix undefined value checks in use_http_client_2 (#1230)

* fix: filter out undefined from posts

* fix: emoji initialisation passing undefined

* fix: || => ?? to be more explicit

* linting

---------

Co-authored-by: Alex Maras <alexmaras@gmail.com>

* Re-add accidentally removed state

* Fix dropdown bug

* Use linkEvent where appropriate

* Fix navigation warnings.

---------

Co-authored-by: Dessalines <tyhou13@gmx.com>
Co-authored-by: Alex Maras <dev@alexmaras.com>
Co-authored-by: Alex Maras <alexmaras@gmail.com>

.eslintrc.json

@@ -18,6 +18,7 @@
     "@typescript-eslint/ban-ts-comment": 0,
     "@typescript-eslint/no-explicit-any": 0,
     "@typescript-eslint/explicit-module-boundary-types": 0,
+    "@typescript-eslint/no-empty-function": 0,
     "arrow-body-style": 0,
     "curly": 0,
     "eol-last": 0,

.woodpecker.yml

@@ -1,6 +1,6 @@
 pipeline:
   fetch_git_submodules:
-    image: node:14-alpine
+    image: node:alpine
     commands:
       - apk add git
       - git submodule init
@@ -8,93 +8,27 @@ pipeline:
       # - git fetch --tags
 
   yarn:
-    image: node:14-alpine
+    image: node:alpine
     commands:
       - yarn
 
   yarn_lint:
-    image: node:14-alpine
+    image: node:alpine
     commands:
       - yarn lint
 
   yarn_build_dev:
-    image: node:14-alpine
+    image: node:alpine
     commands:
       - yarn build:dev
 
-  nightly_build:
+  publish_release_docker:
-    image: plugins/docker
+    image: woodpeckerci/plugin-docker-buildx
+    secrets: [docker_username, docker_password]
     settings:
-      dockerfile: Dockerfile
       repo: dessalines/lemmy-ui
-      username:
-        from_secret: docker_username
-      password:
-        from_secret: docker_password
-      tags:
-        - dev
-    when:
-      event:
-        - cron
-
-  publish_release_docker_image_amd:
-    image: plugins/docker
-    settings:
       dockerfile: Dockerfile
-      repo: dessalines/lemmy-ui
+      platforms: linux/amd64
       auto_tag: true
-      auto_tag_suffix: linux-amd64
-      username:
-        from_secret: docker_username
-      password:
-        from_secret: docker_password
-    when:
-      event: tag
-      platform: linux/arm64
-
-  publish_release_docker_image_arm:
-    image: plugins/docker
-    settings:
-      dockerfile: Dockerfile
-      repo: dessalines/lemmy-ui
-      auto_tag: true
-      auto_tag_suffix: linux-arm64
-      username:
-        from_secret: docker_username
-      password:
-        from_secret: docker_password
-    when:
-      event: tag
-      platform: linux/amd64
-
-  publish_release_docker_manifest:
-    image: plugins/manifest
-    settings:
-      username:
-        from_secret: docker_username
-      password:
-        from_secret: docker_password
-      target: "dessalines/lemmy-ui:${CI_COMMIT_TAG}"
-      template: "dessalines/lemmy-ui:${CI_COMMIT_TAG}-OS-ARCH"
-      platforms:
-        - linux/amd64
-        - linux/arm64
-      ignore_missing: true
-    when:
-      event: tag
-
-  publish_latest_release_docker_manifest:
-    image: plugins/manifest
-    settings:
-      username:
-        from_secret: docker_username
-      password:
-        from_secret: docker_password
-      target: "dessalines/lemmy-ui:latest"
-      template: "dessalines/lemmy-ui:${CI_COMMIT_TAG}-OS-ARCH"
-      platforms:
-        - linux/amd64
-        - linux/arm64
-      ignore_missing: true
     when:
       event: tag

README.md

@@ -1,4 +1,4 @@
-# lemmy-ui
+# Lemmy-UI
 
 The official web app for [Lemmy](https://github.com/LemmyNet/lemmy), written in inferno.
 
@@ -13,7 +13,6 @@ The following environment variables can be used to configure lemmy-ui:
 | `LEMMY_UI_HOST`                | `string` | `0.0.0.0:1234`   | The IP / port that the lemmy-ui isomorphic node server is hosted at.                |
 | `LEMMY_UI_LEMMY_INTERNAL_HOST` | `string` | `0.0.0.0:8536`   | The internal IP / port that lemmy is hosted at. Often `lemmy:8536` if using docker. |
 | `LEMMY_UI_LEMMY_EXTERNAL_HOST` | `string` | `0.0.0.0:8536`   | The external IP / port that lemmy is hosted at. Often `DOMAIN.TLD`.                 |
-| `LEMMY_UI_LEMMY_WS_HOST`       | `string` | `0.0.0.0:8536`   | An alternate location for lemmy's websocket address. Not usually necessary.         |
 | `LEMMY_UI_HTTPS`               | `bool`   | `false`          | Whether to use https.                                                               |
 | `LEMMY_UI_EXTRA_THEMES_FOLDER` | `string` | `./extra_themes` | A location for additional lemmy css themes.                                         |
 | `LEMMY_UI_DEBUG`               | `bool`   | `false`          | Loads the [Eruda](https://github.com/liriliri/eruda) debugging utility.             |

deploy.sh

@@ -4,6 +4,7 @@ set -e
 new_tag="$1"
 
 # Old deploy
+# sudo docker build . --tag dessalines/lemmy-ui:$new_tag --platform=linux/amd64 --push
 # sudo docker build . --tag dessalines/lemmy-ui:$new_tag --platform=linux/amd64
 # sudo docker push dessalines/lemmy-ui:$new_tag
 

lemmy-translations

@@ -1 +1 @@
-Subproject commit ddf0d3a4dcfba5eddbcdb702db2470b52abb3815
+Subproject commit f45ddff206adb52ab0ac7555bf14978edac5d2f2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lemmy-ui",
-  "version": "0.17.1",
+  "version": "0.18.0-beta.6",
   "description": "An isomorphic UI for lemmy",
   "repository": "https://github.com/LemmyNet/lemmy-ui",
   "license": "AGPL-3.0",
@@ -17,16 +17,9 @@
     "start": "yarn build:dev --watch"
   },
   "lint-staged": {
-    "*.{ts,tsx,js}": [
+    "*.{ts,tsx,js}": ["prettier --write", "eslint --fix"],
-      "prettier --write",
+    "*.{css, scss}": ["prettier --write"],
-      "eslint --fix"
+    "package.json": ["sortpack"]
-    ],
-    "*.{css, scss}": [
-      "prettier --write"
-    ],
-    "package.json": [
-      "sortpack"
-    ]
   },
   "dependencies": {
     "@babel/plugin-proposal-decorators": "^7.21.0",
@@ -49,6 +42,7 @@
     "emoji-mart": "^5.4.0",
     "emoji-short-name": "^2.0.0",
     "express": "~4.18.2",
+    "history": "^5.3.0",
     "html-to-text": "^9.0.5",
     "i18next": "^22.4.15",
     "inferno": "^8.1.1",
@@ -60,7 +54,7 @@
     "inferno-server": "^8.1.1",
     "isomorphic-cookie": "^1.2.4",
     "jwt-decode": "^3.1.2",
-    "lemmy-js-client": "0.17.2-rc.17",
+    "lemmy-js-client": "0.17.2-rc.24",
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.1",
     "markdown-it-container": "^3.0.0",
@@ -73,7 +67,6 @@
     "moment": "^2.29.4",
     "register-service-worker": "^1.7.2",
     "run-node-webpack-plugin": "^1.3.0",
-    "rxjs": "^7.8.1",
     "sanitize-html": "^2.10.0",
     "sass": "^1.62.1",
     "sass-loader": "^13.2.2",
@@ -85,8 +78,7 @@
     "tributejs": "^5.1.3",
     "webpack": "5.82.1",
     "webpack-cli": "^5.1.1",
-    "webpack-node-externals": "^3.0.0",
+    "webpack-node-externals": "^3.0.0"
-    "websocket-ts": "^1.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.21.8",

src/client/index.tsx

@@ -1,18 +1,19 @@
 import { hydrate } from "inferno-hydrate";
-import { BrowserRouter } from "inferno-router";
+import { Router } from "inferno-router";
 import { App } from "../shared/components/app/app";
 import { initializeSite } from "../shared/utils";
 
 import "bootstrap/js/dist/collapse";
 import "bootstrap/js/dist/dropdown";
+import { HistoryService } from "../shared/services/HistoryService";
 
 const site = window.isoData.site_res;
 initializeSite(site);
 
 const wrapper = (
-  <BrowserRouter>
+  <Router history={HistoryService.history}>
     <App />
-  </BrowserRouter>
+  </Router>
 );
 
 const root = document.getElementById("root");

src/server/index.tsx

@@ -6,19 +6,20 @@ import { Helmet } from "inferno-helmet";
 import { matchPath, StaticRouter } from "inferno-router";
 import { renderToString } from "inferno-server";
 import IsomorphicCookie from "isomorphic-cookie";
-import { GetSite, GetSiteResponse, LemmyHttp, Site } from "lemmy-js-client";
+import { GetSite, GetSiteResponse, LemmyHttp } from "lemmy-js-client";
 import path from "path";
 import process from "process";
 import serialize from "serialize-javascript";
 import sharp from "sharp";
 import { App } from "../shared/components/app/app";
-import { getHttpBase, getHttpBaseInternal } from "../shared/env";
+import { getHttpBaseExternal, getHttpBaseInternal } from "../shared/env";
 import {
   ILemmyConfig,
   InitialFetchRequest,
   IsoDataOptionalSite,
 } from "../shared/interfaces";
 import { routes } from "../shared/routes";
+import { RequestState, wrapClient } from "../shared/services/HttpService";
 import {
   ErrorPageData,
   favIconPngUrl,
@@ -64,7 +65,13 @@ Disallow: /search/
 
 server.get("/service-worker.js", async (_req, res) => {
   res.setHeader("Content-Type", "application/javascript");
-  res.sendFile(path.resolve("./dist/service-worker.js"));
+  res.sendFile(
+    path.resolve(
+      `./dist/service-worker${
+        process.env.NODE_ENV === "development" ? "-development" : ""
+      }.js`
+    )
+  );
 });
 
 server.get("/robots.txt", async (_req, res) => {
@@ -121,7 +128,7 @@ server.get("/*", async (req, res) => {
     const getSiteForm: GetSite = { auth };
 
     const headers = setForwardedHeaders(req.headers);
-    const client = new LemmyHttp(getHttpBaseInternal(), headers);
+    const client = wrapClient(new LemmyHttp(getHttpBaseInternal(), headers));
 
     const { path, url, query } = req;
 
@@ -129,11 +136,10 @@ server.get("/*", async (req, res) => {
     // This bypasses errors, so that the client can hit the error on its own,
     // in order to remove the jwt on the browser. Necessary for wrong jwts
     let site: GetSiteResponse | undefined = undefined;
-    let routeData: any[] = [];
+    const routeData: RequestState<any>[] = [];
-    let errorPageData: ErrorPageData | undefined;
+    let errorPageData: ErrorPageData | undefined = undefined;
-    try {
+    let try_site = await client.getSite(getSiteForm);
-      let try_site: any = await client.getSite(getSiteForm);
+    if (try_site.state === "failed" && try_site.msg == "not_logged_in") {
-      if (try_site.error == "not_logged_in") {
       console.error(
         "Incorrect JWT token, skipping auth so frontend can remove jwt cookie"
       );
@@ -143,13 +149,17 @@ server.get("/*", async (req, res) => {
     }
 
     if (!auth && isAuthPath(path)) {
-        res.redirect("/login");
+      return res.redirect("/login");
-        return;
     }
 
-      site = try_site;
+    if (try_site.state === "success") {
+      site = try_site.data;
       initializeSite(site);
 
+      if (path != "/setup" && !site.site_view.local_site.site_setup) {
+        return res.redirect("/setup");
+      }
+
       if (site) {
         const initialFetchReq: InitialFetchRequest = {
           client,
@@ -160,23 +170,25 @@ server.get("/*", async (req, res) => {
         };
 
         if (activeRoute?.fetchInitialData) {
-          routeData = await Promise.all([
+          routeData.push(
+            ...(await Promise.all([
               ...activeRoute.fetchInitialData(initialFetchReq),
-          ]);
+            ]))
+          );
         }
       }
-    } catch (error) {
+    } else if (try_site.state === "failed") {
-      errorPageData = getErrorPageData(error, site);
+      errorPageData = getErrorPageData(new Error(try_site.msg), site);
     }
 
     // Redirect to the 404 if there's an API error
-    if (routeData[0] && routeData[0].error) {
+    if (routeData[0] && routeData[0].state === "failed") {
-      const error = routeData[0].error;
+      const error = routeData[0].msg;
       console.error(error);
       if (error === "instance_is_private") {
         return res.redirect(`/signup`);
       } else {
-        errorPageData = getErrorPageData(error, site);
+        errorPageData = getErrorPageData(new Error(error), site);
       }
     }
 
@@ -234,7 +246,7 @@ process.on("SIGINT", () => {
   process.exit(0);
 });
 
-const iconSizes = [72, 96, 128, 144, 152, 192, 384, 512];
+const iconSizes = [72, 96, 144, 192, 512];
 const defaultLogoPathDirectory = path.join(
   process.cwd(),
   "dist",
@@ -242,12 +254,15 @@ const defaultLogoPathDirectory = path.join(
   "icons"
 );
 
-export async function generateManifestBase64(site: Site) {
+export async function generateManifestBase64({
-  const url = (
+  my_user,
-    process.env.NODE_ENV === "development"
+  site_view: {
-      ? "http://localhost:1236/"
+    site,
-      : getHttpBase()
+    local_site: { community_creation_admin_only },
-  ).replace(/\/$/g, "");
+  },
+}: GetSiteResponse) {
+  const url = getHttpBaseExternal();
+
   const icon = site.icon ? await fetchIconPng(site.icon) : null;
 
   const manifest = {
@@ -281,15 +296,58 @@ export async function generateManifestBase64(site: Site) {
         };
       })
     ),
+    shortcuts: [
+      {
+        name: "Search",
+        short_name: "Search",
+        description: "Perform a search.",
+        url: "/search",
+      },
+      {
+        name: "Communities",
+        url: "/communities",
+        short_name: "Communities",
+        description: "Browse communities",
+      },
+    ]
+      .concat(
+        my_user
+          ? [
+              {
+                name: "Create Post",
+                url: "/create_post",
+                short_name: "Create Post",
+                description: "Create a post.",
+              },
+            ]
+          : []
+      )
+      .concat(
+        my_user?.local_user_view.person.admin || !community_creation_admin_only
+          ? [
+              {
+                name: "Create Community",
+                url: "/create_community",
+                short_name: "Create Community",
+                description: "Create a community",
+              },
+            ]
+          : []
+      ),
+    related_applications: [
+      {
+        platform: "f-droid",
+        url: "https://f-droid.org/packages/com.jerboa/",
+        id: "com.jerboa",
+      },
+    ],
   };
 
   return Buffer.from(JSON.stringify(manifest)).toString("base64");
 }
 
 async function fetchIconPng(iconUrl: string) {
-  return await fetch(
+  return await fetch(iconUrl)
-    iconUrl.replace(/https?:\/\/[^\/]+/g, getHttpBaseInternal())
-  )
     .then(res => res.blob())
     .then(blob => blob.arrayBuffer());
 }
@@ -376,9 +434,9 @@ async function createSsrHtml(root: string, isoData: IsoDataOptionalSite) {
     site &&
     `<link
         rel="manifest"
-        href={${`data:application/manifest+json;base64,${await generateManifestBase64(
+        href=${`data:application/manifest+json;base64,${await generateManifestBase64(
-          site.site_view.site
+          site
-        )}`}}
+        )}`}
       />`
   }
   <link rel="apple-touch-icon" href=${appleTouchIcon} />

src/shared/components/app/navbar.tsx

@@ -1,35 +1,23 @@
 import { Component, createRef, linkEvent } from "inferno";
 import { NavLink } from "inferno-router";
 import {
-  CommentResponse,
-  GetReportCount,
   GetReportCountResponse,
   GetSiteResponse,
-  GetUnreadCount,
   GetUnreadCountResponse,
-  GetUnreadRegistrationApplicationCount,
   GetUnreadRegistrationApplicationCountResponse,
-  PrivateMessageResponse,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
 } from "lemmy-js-client";
-import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
-import { UserService, WebSocketService } from "../../services";
+import { UserService } from "../../services";
+import { HttpService, RequestState } from "../../services/HttpService";
 import {
   amAdmin,
   canCreateCommunity,
   donateLemmyUrl,
   isBrowser,
   myAuth,
-  notifyComment,
-  notifyPrivateMessage,
   numToSI,
   showAvatars,
   toast,
-  wsClient,
-  wsSubscribe,
 } from "../../utils";
 import { Icon } from "../common/icon";
 import { PictrsImage } from "../common/pictrs-image";
@@ -39,14 +27,16 @@ interface NavbarProps {
 }
 
 interface NavbarState {
-  unreadInboxCount: number;
+  unreadInboxCountRes: RequestState<GetUnreadCountResponse>;
-  unreadReportCount: number;
+  unreadReportCountRes: RequestState<GetReportCountResponse>;
-  unreadApplicationCount: number;
+  unreadApplicationCountRes: RequestState<GetUnreadRegistrationApplicationCountResponse>;
   onSiteBanner?(url: string): any;
 }
 
 function handleCollapseClick(i: Navbar) {
+  if (i.collapseButtonRef.current?.ariaExpanded === "true") {
     i.collapseButtonRef.current?.click();
+  }
 }
 
 function handleLogOut(i: Navbar) {
@@ -55,77 +45,42 @@ function handleLogOut(i: Navbar) {
 }
 
 export class Navbar extends Component<NavbarProps, NavbarState> {
-  private wsSub: Subscription;
-  private userSub: Subscription;
-  private unreadInboxCountSub: Subscription;
-  private unreadReportCountSub: Subscription;
-  private unreadApplicationCountSub: Subscription;
   state: NavbarState = {
-    unreadInboxCount: 0,
+    unreadInboxCountRes: { state: "empty" },
-    unreadReportCount: 0,
+    unreadReportCountRes: { state: "empty" },
-    unreadApplicationCount: 0,
+    unreadApplicationCountRes: { state: "empty" },
   };
-  subscription: any;
   collapseButtonRef = createRef<HTMLButtonElement>();
   mobileMenuRef = createRef<HTMLDivElement>();
 
   constructor(props: any, context: any) {
     super(props, context);
 
-    this.parseMessage = this.parseMessage.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
     this.handleOutsideMenuClick = this.handleOutsideMenuClick.bind(this);
   }
 
-  componentDidMount() {
+  async componentDidMount() {
     // Subscribe to jwt changes
     if (isBrowser()) {
       // On the first load, check the unreads
-      const auth = myAuth(false);
-      if (auth && UserService.Instance.myUserInfo) {
       this.requestNotificationPermission();
-        WebSocketService.Instance.send(
+      await this.fetchUnreads();
-          wsClient.userJoin({
-            auth,
-          })
-        );
-
-        this.fetchUnreads();
-      }
-
       this.requestNotificationPermission();
 
-      // Subscribe to unread count changes
+      document.addEventListener("mouseup", this.handleOutsideMenuClick);
-      this.unreadInboxCountSub =
-        UserService.Instance.unreadInboxCountSub.subscribe(res => {
-          this.setState({ unreadInboxCount: res });
-        });
-      // Subscribe to unread report count changes
-      this.unreadReportCountSub =
-        UserService.Instance.unreadReportCountSub.subscribe(res => {
-          this.setState({ unreadReportCount: res });
-        });
-      // Subscribe to unread application count
-      this.unreadApplicationCountSub =
-        UserService.Instance.unreadApplicationCountSub.subscribe(res => {
-          this.setState({ unreadApplicationCount: res });
-        });
-
-      document.addEventListener("click", this.handleOutsideMenuClick);
     }
   }
 
   componentWillUnmount() {
-    this.wsSub.unsubscribe();
+    document.removeEventListener("mouseup", this.handleOutsideMenuClick);
-    this.userSub.unsubscribe();
+  }
-    this.unreadInboxCountSub.unsubscribe();
+
-    this.unreadReportCountSub.unsubscribe();
+  render() {
-    this.unreadApplicationCountSub.unsubscribe();
+    return this.navbar();
-    document.removeEventListener("click", this.handleOutsideMenuClick);
   }
 
   // TODO class active corresponding to current page
-  render() {
+  navbar() {
     const siteView = this.props.siteRes?.site_view;
     const person = UserService.Instance.myUserInfo?.local_user_view.person;
     return (
@@ -148,15 +103,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                 to="/inbox"
                 className="p-1 nav-link border-0"
                 title={i18n.t("unread_messages", {
-                  count: Number(this.state.unreadInboxCount),
+                  count: Number(this.state.unreadApplicationCountRes.state),
-                  formattedCount: numToSI(this.state.unreadInboxCount),
+                  formattedCount: numToSI(this.unreadInboxCount),
                 })}
                 onMouseUp={linkEvent(this, handleCollapseClick)}
               >
                 <Icon icon="bell" />
-                {this.state.unreadInboxCount > 0 && (
+                {this.unreadInboxCount > 0 && (
                   <span className="mx-1 badge badge-light">
-                    {numToSI(this.state.unreadInboxCount)}
+                    {numToSI(this.unreadInboxCount)}
                   </span>
                 )}
               </NavLink>
@@ -167,15 +122,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   to="/reports"
                   className="p-1 nav-link border-0"
                   title={i18n.t("unread_reports", {
-                    count: Number(this.state.unreadReportCount),
+                    count: Number(this.unreadReportCount),
-                    formattedCount: numToSI(this.state.unreadReportCount),
+                    formattedCount: numToSI(this.unreadReportCount),
                   })}
                   onMouseUp={linkEvent(this, handleCollapseClick)}
                 >
                   <Icon icon="shield" />
-                  {this.state.unreadReportCount > 0 && (
+                  {this.unreadReportCount > 0 && (
                     <span className="mx-1 badge badge-light">
-                      {numToSI(this.state.unreadReportCount)}
+                      {numToSI(this.unreadReportCount)}
                     </span>
                   )}
                 </NavLink>
@@ -187,15 +142,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   to="/registration_applications"
                   className="p-1 nav-link border-0"
                   title={i18n.t("unread_registration_applications", {
-                    count: Number(this.state.unreadApplicationCount),
+                    count: Number(this.unreadApplicationCount),
-                    formattedCount: numToSI(this.state.unreadApplicationCount),
+                    formattedCount: numToSI(this.unreadApplicationCount),
                   })}
                   onMouseUp={linkEvent(this, handleCollapseClick)}
                 >
                   <Icon icon="clipboard" />
-                  {this.state.unreadApplicationCount > 0 && (
+                  {this.unreadApplicationCount > 0 && (
                     <span className="mx-1 badge badge-light">
-                      {numToSI(this.state.unreadApplicationCount)}
+                      {numToSI(this.unreadApplicationCount)}
                     </span>
                   )}
                 </NavLink>
@@ -272,9 +227,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
             </li>
           </ul>
           <ul className="navbar-nav">
-            {!this.context.router.history.location.pathname.match(
-              /^\/search/
-            ) && (
             <li className="nav-item">
               <NavLink
                 to="/search"
@@ -285,7 +237,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                 <Icon icon="search" />
               </NavLink>
             </li>
-            )}
             {amAdmin() && (
               <li className="nav-item">
                 <NavLink
@@ -305,15 +256,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                     className="nav-link"
                     to="/inbox"
                     title={i18n.t("unread_messages", {
-                      count: Number(this.state.unreadInboxCount),
+                      count: Number(this.unreadInboxCount),
-                      formattedCount: numToSI(this.state.unreadInboxCount),
+                      formattedCount: numToSI(this.unreadInboxCount),
                     })}
                     onMouseUp={linkEvent(this, handleCollapseClick)}
                   >
                     <Icon icon="bell" />
-                    {this.state.unreadInboxCount > 0 && (
+                    {this.unreadInboxCount > 0 && (
-                      <span className="ml-1 badge badge-light">
+                      <span className="mx-1 badge badge-light">
-                        {numToSI(this.state.unreadInboxCount)}
+                        {numToSI(this.unreadInboxCount)}
                       </span>
                     )}
                   </NavLink>
@@ -324,15 +275,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                       className="nav-link"
                       to="/reports"
                       title={i18n.t("unread_reports", {
-                        count: Number(this.state.unreadReportCount),
+                        count: Number(this.unreadReportCount),
-                        formattedCount: numToSI(this.state.unreadReportCount),
+                        formattedCount: numToSI(this.unreadReportCount),
                       })}
                       onMouseUp={linkEvent(this, handleCollapseClick)}
                     >
                       <Icon icon="shield" />
-                      {this.state.unreadReportCount > 0 && (
+                      {this.unreadReportCount > 0 && (
-                        <span className="ml-1 badge badge-light">
+                        <span className="mx-1 badge badge-light">
-                          {numToSI(this.state.unreadReportCount)}
+                          {numToSI(this.unreadReportCount)}
                         </span>
                       )}
                     </NavLink>
@@ -344,17 +295,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                       to="/registration_applications"
                       className="nav-link"
                       title={i18n.t("unread_registration_applications", {
-                        count: Number(this.state.unreadApplicationCount),
+                        count: Number(this.unreadApplicationCount),
-                        formattedCount: numToSI(
+                        formattedCount: numToSI(this.unreadApplicationCount),
-                          this.state.unreadApplicationCount
-                        ),
                       })}
                       onMouseUp={linkEvent(this, handleCollapseClick)}
                     >
                       <Icon icon="clipboard" />
-                      {this.state.unreadApplicationCount > 0 && (
+                      {this.unreadApplicationCount > 0 && (
                         <span className="mx-1 badge badge-light">
-                          {numToSI(this.state.unreadApplicationCount)}
+                          {numToSI(this.unreadApplicationCount)}
                         </span>
                       )}
                     </NavLink>
@@ -457,124 +406,72 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     return amAdmin() || moderatesS;
   }
 
-  parseMessage(msg: any) {
+  async fetchUnreads() {
-    const op = wsUserOp(msg);
-    console.log(msg);
-    if (msg.error) {
-      if (msg.error == "not_logged_in") {
-        UserService.Instance.logout();
-      }
-      return;
-    } else if (msg.reconnect) {
-      console.log(i18n.t("websocket_reconnected"));
-      const auth = myAuth(false);
-      if (UserService.Instance.myUserInfo && auth) {
-        WebSocketService.Instance.send(
-          wsClient.userJoin({
-            auth,
-          })
-        );
-        this.fetchUnreads();
-      }
-    } else if (op == UserOperation.GetUnreadCount) {
-      const data = wsJsonToRes<GetUnreadCountResponse>(msg);
-      this.setState({
-        unreadInboxCount: data.replies + data.mentions + data.private_messages,
-      });
-      this.sendUnreadCount();
-    } else if (op == UserOperation.GetReportCount) {
-      const data = wsJsonToRes<GetReportCountResponse>(msg);
-      this.setState({
-        unreadReportCount:
-          data.post_reports +
-          data.comment_reports +
-          (data.private_message_reports ?? 0),
-      });
-      this.sendReportUnread();
-    } else if (op == UserOperation.GetUnreadRegistrationApplicationCount) {
-      const data =
-        wsJsonToRes<GetUnreadRegistrationApplicationCountResponse>(msg);
-      this.setState({ unreadApplicationCount: data.registration_applications });
-      this.sendApplicationUnread();
-    } else if (op == UserOperation.CreateComment) {
-      const data = wsJsonToRes<CommentResponse>(msg);
-      const mui = UserService.Instance.myUserInfo;
-      if (
-        mui &&
-        data.recipient_ids.includes(mui.local_user_view.local_user.id)
-      ) {
-        this.setState({
-          unreadInboxCount: this.state.unreadInboxCount + 1,
-        });
-        this.sendUnreadCount();
-        notifyComment(data.comment_view, this.context.router);
-      }
-    } else if (op == UserOperation.CreatePrivateMessage) {
-      const data = wsJsonToRes<PrivateMessageResponse>(msg);
-
-      if (
-        data.private_message_view.recipient.id ==
-        UserService.Instance.myUserInfo?.local_user_view.person.id
-      ) {
-        this.setState({
-          unreadInboxCount: this.state.unreadInboxCount + 1,
-        });
-        this.sendUnreadCount();
-        notifyPrivateMessage(data.private_message_view, this.context.router);
-      }
-    }
-  }
-
-  fetchUnreads() {
-    console.log("Fetching inbox unreads...");
-
     const auth = myAuth();
     if (auth) {
-      const unreadForm: GetUnreadCount = {
+      this.setState({ unreadInboxCountRes: { state: "loading" } });
+      this.setState({
+        unreadInboxCountRes: await HttpService.client.getUnreadCount({
           auth,
-      };
+        }),
-      WebSocketService.Instance.send(wsClient.getUnreadCount(unreadForm));
+      });
 
-      console.log("Fetching reports...");
+      if (this.moderatesSomething) {
-
+        this.setState({ unreadReportCountRes: { state: "loading" } });
-      const reportCountForm: GetReportCount = {
+        this.setState({
+          unreadReportCountRes: await HttpService.client.getReportCount({
             auth,
-      };
+          }),
-      WebSocketService.Instance.send(wsClient.getReportCount(reportCountForm));
+        });
+      }
 
       if (amAdmin()) {
-        console.log("Fetching applications...");
+        this.setState({ unreadApplicationCountRes: { state: "loading" } });
-
+        this.setState({
-        const applicationCountForm: GetUnreadRegistrationApplicationCount = {
+          unreadApplicationCountRes:
+            await HttpService.client.getUnreadRegistrationApplicationCount({
               auth,
-        };
+            }),
-        WebSocketService.Instance.send(
+        });
-          wsClient.getUnreadRegistrationApplicationCount(applicationCountForm)
-        );
       }
     }
   }
 
+  get unreadInboxCount(): number {
+    if (this.state.unreadInboxCountRes.state == "success") {
+      const data = this.state.unreadInboxCountRes.data;
+      return data.replies + data.mentions + data.private_messages;
+    } else {
+      return 0;
+    }
+  }
+
+  get unreadReportCount(): number {
+    if (this.state.unreadReportCountRes.state == "success") {
+      const data = this.state.unreadReportCountRes.data;
+      return (
+        data.post_reports +
+        data.comment_reports +
+        (data.private_message_reports ?? 0)
+      );
+    } else {
+      return 0;
+    }
+  }
+
+  get unreadApplicationCount(): number {
+    if (this.state.unreadApplicationCountRes.state == "success") {
+      const data = this.state.unreadApplicationCountRes.data;
+      return data.registration_applications;
+    } else {
+      return 0;
+    }
+  }
+
   get currentLocation() {
     return this.context.router.history.location.pathname;
   }
 
-  sendUnreadCount() {
-    UserService.Instance.unreadInboxCountSub.next(this.state.unreadInboxCount);
-  }
-
-  sendReportUnread() {
-    UserService.Instance.unreadReportCountSub.next(
-      this.state.unreadReportCount
-    );
-  }
-
-  sendApplicationUnread() {
-    UserService.Instance.unreadApplicationCountSub.next(
-      this.state.unreadApplicationCount
-    );
-  }
-
   requestNotificationPermission() {
     if (UserService.Instance.myUserInfo) {
       document.addEventListener("DOMContentLoaded", function () {

src/shared/components/comment/comment-form.tsx

@@ -1,25 +1,11 @@
 import { Component } from "inferno";
 import { T } from "inferno-i18next-dess";
 import { Link } from "inferno-router";
-import {
+import { CreateComment, EditComment, Language } from "lemmy-js-client";
-  CommentResponse,
-  CreateComment,
-  EditComment,
-  Language,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
-} from "lemmy-js-client";
-import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
 import { CommentNodeI } from "../../interfaces";
-import { UserService, WebSocketService } from "../../services";
+import { UserService } from "../../services";
-import {
+import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
-  capitalizeFirstLetter,
-  myAuth,
-  wsClient,
-  wsSubscribe,
-} from "../../utils";
 import { Icon } from "../common/icon";
 import { MarkdownTextArea } from "../common/markdown-textarea";
 
@@ -28,44 +14,21 @@ interface CommentFormProps {
    * Can either be the parent, or the editable comment. The right side is a postId.
    */
   node: CommentNodeI | number;
+  finished?: boolean;
   edit?: boolean;
   disabled?: boolean;
   focus?: boolean;
-  onReplyCancel?(): any;
+  onReplyCancel?(): void;
   allLanguages: Language[];
   siteLanguages: number[];
+  onUpsertComment(form: EditComment | CreateComment): void;
 }
 
-interface CommentFormState {
+export class CommentForm extends Component<CommentFormProps, any> {
-  buttonTitle: string;
-  finished: boolean;
-  formId?: string;
-}
-
-export class CommentForm extends Component<CommentFormProps, CommentFormState> {
-  private subscription?: Subscription;
-  state: CommentFormState = {
-    buttonTitle:
-      typeof this.props.node === "number"
-        ? capitalizeFirstLetter(i18n.t("post"))
-        : this.props.edit
-        ? capitalizeFirstLetter(i18n.t("save"))
-        : capitalizeFirstLetter(i18n.t("reply")),
-    finished: false,
-  };
-
   constructor(props: any, context: any) {
     super(props, context);
 
     this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
-    this.handleReplyCancel = this.handleReplyCancel.bind(this);
-
-    this.parseMessage = this.parseMessage.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
-  }
-
-  componentWillUnmount() {
-    this.subscription?.unsubscribe();
   }
 
   render() {
@@ -82,13 +45,13 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
           <MarkdownTextArea
             initialContent={initialContent}
             showLanguage
-            buttonTitle={this.state.buttonTitle}
+            buttonTitle={this.buttonTitle}
-            finished={this.state.finished}
+            finished={this.props.finished}
             replyType={typeof this.props.node !== "number"}
             focus={this.props.focus}
             disabled={this.props.disabled}
             onSubmit={this.handleCommentSubmit}
-            onReplyCancel={this.handleReplyCancel}
+            onReplyCancel={this.props.onReplyCancel}
             placeholder={i18n.t("comment_here")}
             allLanguages={this.props.allLanguages}
             siteLanguages={this.props.siteLanguages}
@@ -108,77 +71,46 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
     );
   }
 
-  handleCommentSubmit(msg: {
+  get buttonTitle(): string {
-    val: string;
+    return typeof this.props.node === "number"
-    formId: string;
+      ? capitalizeFirstLetter(i18n.t("post"))
-    languageId?: number;
+      : this.props.edit
-  }) {
+      ? capitalizeFirstLetter(i18n.t("save"))
-    const content = msg.val;
+      : capitalizeFirstLetter(i18n.t("reply"));
-    const language_id = msg.languageId;
+  }
-    const node = this.props.node;
 
-    this.setState({ formId: msg.formId });
+  handleCommentSubmit(content: string, form_id: string, language_id?: number) {
-
+    const { node, onUpsertComment, edit } = this.props;
-    const auth = myAuth();
-    if (auth) {
     if (typeof node === "number") {
-        const postId = node;
+      const post_id = node;
-        const form: CreateComment = {
+      onUpsertComment({
         content,
-          form_id: this.state.formId,
+        post_id,
-          post_id: postId,
         language_id,
-          auth,
+        form_id,
-        };
+        auth: myAuthRequired(),
-        WebSocketService.Instance.send(wsClient.createComment(form));
+      });
     } else {
-        if (this.props.edit) {
+      if (edit) {
-          const form: EditComment = {
+        const comment_id = node.comment_view.comment.id;
+        onUpsertComment({
           content,
-            form_id: this.state.formId,
+          comment_id,
-            comment_id: node.comment_view.comment.id,
+          form_id,
           language_id,
-            auth,
+          auth: myAuthRequired(),
-          };
+        });
-          WebSocketService.Instance.send(wsClient.editComment(form));
       } else {
-          const form: CreateComment = {
+        const post_id = node.comment_view.post.id;
+        const parent_id = node.comment_view.comment.id;
+        this.props.onUpsertComment({
           content,
-            form_id: this.state.formId,
+          parent_id,
-            post_id: node.comment_view.post.id,
+          post_id,
-            parent_id: node.comment_view.comment.id,
+          form_id,
           language_id,
-            auth,
+          auth: myAuthRequired(),
-          };
+        });
-          WebSocketService.Instance.send(wsClient.createComment(form));
-        }
-      }
-    }
-  }
-
-  handleReplyCancel() {
-    this.props.onReplyCancel?.();
-  }
-
-  parseMessage(msg: any) {
-    const op = wsUserOp(msg);
-    console.log(msg);
-
-    // Only do the showing and hiding if logged in
-    if (UserService.Instance.myUserInfo) {
-      if (
-        op == UserOperation.CreateComment ||
-        op == UserOperation.EditComment
-      ) {
-        const data = wsJsonToRes<CommentResponse>(msg);
-
-        // This only finishes this form, if the randomly generated form_id matches the one received
-        if (this.state.formId && this.state.formId == data.form_id) {
-          this.setState({ finished: true });
-
-          // Necessary because it broke tribute for some reason
-          this.setState({ finished: false });
-        }
       }
     }
   }

src/shared/components/comment/comment-nodes.tsx

@@ -1,5 +1,29 @@
 import { Component } from "inferno";
-import { CommunityModeratorView, Language, PersonView } from "lemmy-js-client";
+import {
+  AddAdmin,
+  AddModToCommunity,
+  BanFromCommunity,
+  BanPerson,
+  BlockPerson,
+  CommentId,
+  CommunityModeratorView,
+  CreateComment,
+  CreateCommentLike,
+  CreateCommentReport,
+  DeleteComment,
+  DistinguishComment,
+  EditComment,
+  GetComments,
+  Language,
+  MarkCommentReplyAsRead,
+  MarkPersonMentionAsRead,
+  PersonView,
+  PurgeComment,
+  PurgePerson,
+  RemoveComment,
+  SaveComment,
+  TransferCommunity,
+} from "lemmy-js-client";
 import { CommentNodeI, CommentViewType } from "../../interfaces";
 import { CommentNode } from "./comment-node";
 
@@ -20,6 +44,26 @@ interface CommentNodesProps {
   allLanguages: Language[];
   siteLanguages: number[];
   hideImages?: boolean;
+  finished: Map<CommentId, boolean | undefined>;
+  onSaveComment(form: SaveComment): void;
+  onCommentReplyRead(form: MarkCommentReplyAsRead): void;
+  onPersonMentionRead(form: MarkPersonMentionAsRead): void;
+  onCreateComment(form: EditComment | CreateComment): void;
+  onEditComment(form: EditComment | CreateComment): void;
+  onCommentVote(form: CreateCommentLike): void;
+  onBlockPerson(form: BlockPerson): void;
+  onDeleteComment(form: DeleteComment): void;
+  onRemoveComment(form: RemoveComment): void;
+  onDistinguishComment(form: DistinguishComment): void;
+  onAddModToCommunity(form: AddModToCommunity): void;
+  onAddAdmin(form: AddAdmin): void;
+  onBanPersonFromCommunity(form: BanFromCommunity): void;
+  onBanPerson(form: BanPerson): void;
+  onTransferCommunity(form: TransferCommunity): void;
+  onFetchChildren?(form: GetComments): void;
+  onCommentReport(form: CreateCommentReport): void;
+  onPurgePerson(form: PurgePerson): void;
+  onPurgeComment(form: PurgeComment): void;
 }
 
 export class CommentNodes extends Component<CommentNodesProps, any> {
@@ -50,6 +94,26 @@ export class CommentNodes extends Component<CommentNodesProps, any> {
             allLanguages={this.props.allLanguages}
             siteLanguages={this.props.siteLanguages}
             hideImages={this.props.hideImages}
+            onCommentReplyRead={this.props.onCommentReplyRead}
+            onPersonMentionRead={this.props.onPersonMentionRead}
+            finished={this.props.finished}
+            onCreateComment={this.props.onCreateComment}
+            onEditComment={this.props.onEditComment}
+            onCommentVote={this.props.onCommentVote}
+            onBlockPerson={this.props.onBlockPerson}
+            onSaveComment={this.props.onSaveComment}
+            onDeleteComment={this.props.onDeleteComment}
+            onRemoveComment={this.props.onRemoveComment}
+            onDistinguishComment={this.props.onDistinguishComment}
+            onAddModToCommunity={this.props.onAddModToCommunity}
+            onAddAdmin={this.props.onAddAdmin}
+            onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
+            onBanPerson={this.props.onBanPerson}
+            onTransferCommunity={this.props.onTransferCommunity}
+            onFetchChildren={this.props.onFetchChildren}
+            onCommentReport={this.props.onCommentReport}
+            onPurgePerson={this.props.onPurgePerson}
+            onPurgeComment={this.props.onPurgeComment}
           />
         ))}
       </div>

src/shared/components/comment/comment-report.tsx

@@ -1,4 +1,4 @@
-import { Component, linkEvent } from "inferno";
+import { Component, InfernoNode, linkEvent } from "inferno";
 import { T } from "inferno-i18next-dess";
 import {
   CommentReportView,
@@ -7,21 +7,39 @@ import {
 } from "lemmy-js-client";
 import { i18n } from "../../i18next";
 import { CommentNodeI, CommentViewType } from "../../interfaces";
-import { WebSocketService } from "../../services";
+import { myAuthRequired } from "../../utils";
-import { myAuth, wsClient } from "../../utils";
+import { Icon, Spinner } from "../common/icon";
-import { Icon } from "../common/icon";
 import { PersonListing } from "../person/person-listing";
 import { CommentNode } from "./comment-node";
 
 interface CommentReportProps {
   report: CommentReportView;
+  onResolveReport(form: ResolveCommentReport): void;
 }
 
-export class CommentReport extends Component<CommentReportProps, any> {
+interface CommentReportState {
+  loading: boolean;
+}
+
+export class CommentReport extends Component<
+  CommentReportProps,
+  CommentReportState
+> {
+  state: CommentReportState = {
+    loading: false,
+  };
   constructor(props: any, context: any) {
     super(props, context);
   }
 
+  componentWillReceiveProps(
+    nextProps: Readonly<{ children?: InfernoNode } & CommentReportProps>
+  ): void {
+    if (this.props != nextProps) {
+      this.setState({ loading: false });
+    }
+  }
+
   render() {
     const r = this.props.report;
     const comment = r.comment;
@@ -62,6 +80,26 @@ export class CommentReport extends Component<CommentReportProps, any> {
           allLanguages={[]}
           siteLanguages={[]}
           hideImages
+          // All of these are unused, since its viewonly
+          finished={new Map()}
+          onSaveComment={() => {}}
+          onBlockPerson={() => {}}
+          onDeleteComment={() => {}}
+          onRemoveComment={() => {}}
+          onCommentVote={() => {}}
+          onCommentReport={() => {}}
+          onDistinguishComment={() => {}}
+          onAddModToCommunity={() => {}}
+          onAddAdmin={() => {}}
+          onTransferCommunity={() => {}}
+          onPurgeComment={() => {}}
+          onPurgePerson={() => {}}
+          onCommentReplyRead={() => {}}
+          onPersonMentionRead={() => {}}
+          onBanPersonFromCommunity={() => {}}
+          onBanPerson={() => {}}
+          onCreateComment={() => Promise.resolve({ state: "empty" })}
+          onEditComment={() => Promise.resolve({ state: "empty" })}
         />
         <div>
           {i18n.t("reporter")}: <PersonListing person={r.creator} />
@@ -90,26 +128,27 @@ export class CommentReport extends Component<CommentReportProps, any> {
           data-tippy-content={tippyContent}
           aria-label={tippyContent}
         >
+          {this.state.loading ? (
+            <Spinner />
+          ) : (
             <Icon
               icon="check"
               classes={`icon-inline ${
                 r.comment_report.resolved ? "text-success" : "text-danger"
               }`}
             />
+          )}
         </button>
       </div>
     );
   }
 
   handleResolveReport(i: CommentReport) {
-    const auth = myAuth();
+    i.setState({ loading: true });
-    if (auth) {
+    i.props.onResolveReport({
-      const form: ResolveCommentReport = {
       report_id: i.props.report.comment_report.id,
       resolved: !i.props.report.comment_report.resolved,
-        auth,
+      auth: myAuthRequired(),
-      };
+    });
-      WebSocketService.Instance.send(wsClient.resolveCommentReport(form));
-    }
   }
 }

src/shared/components/common/image-upload-form.tsx

@@ -1,7 +1,7 @@
 import { Component, linkEvent } from "inferno";
 import { i18n } from "../../i18next";
-import { UserService } from "../../services";
+import { HttpService, UserService } from "../../services";
-import { randomStr, toast, uploadImage } from "../../utils";
+import { randomStr, toast } from "../../utils";
 import { Icon } from "./icon";
 
 interface ImageUploadFormProps {
@@ -73,26 +73,25 @@ export class ImageUploadForm extends Component<
 
   handleImageUpload(i: ImageUploadForm, event: any) {
     event.preventDefault();
-    const file = event.target.files[0];
+    const image = event.target.files[0] as File;
 
     i.setState({ loading: true });
 
-    uploadImage(file)
+    HttpService.client.uploadImage({ image }).then(res => {
-      .then(res => {
       console.log("pictrs upload:");
       console.log(res);
-        if (res.msg === "ok") {
+      if (res.state === "success") {
-          i.setState({ loading: false });
+        if (res.data.msg === "ok") {
-          i.props.onUpload(res.url as string);
+          i.props.onUpload(res.data.url as string);
         } else {
-          i.setState({ loading: false });
           toast(JSON.stringify(res), "danger");
         }
-      })
+      } else if (res.state === "failed") {
-      .catch(error => {
+        console.error(res.msg);
+        toast(res.msg, "danger");
+      }
+
       i.setState({ loading: false });
-        console.error(error);
-        toast(error, "danger");
     });
   }
 

src/shared/components/common/listing-type-select.tsx

@@ -8,7 +8,7 @@ interface ListingTypeSelectProps {
   type_: ListingType;
   showLocal: boolean;
   showSubscribed: boolean;
-  onChange?(val: ListingType): any;
+  onChange(val: ListingType): void;
 }
 
 interface ListingTypeSelectState {
@@ -29,11 +29,11 @@ export class ListingTypeSelect extends Component<
     super(props, context);
   }
 
-  static getDerivedStateFromProps(props: any): ListingTypeSelectProps {
+  static getDerivedStateFromProps(
+    props: ListingTypeSelectProps
+  ): ListingTypeSelectState {
     return {
       type_: props.type_,
-      showLocal: props.showLocal,
-      showSubscribed: props.showSubscribed,
     };
   }
 
@@ -97,6 +97,6 @@ export class ListingTypeSelect extends Component<
   }
 
   handleTypeChange(i: ListingTypeSelect, event: any) {
-    i.props.onChange?.(event.target.value);
+    i.props.onChange(event.target.value);
   }
 }

src/shared/components/common/markdown-textarea.tsx

@@ -3,7 +3,7 @@ import { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
 import { Language } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { UserService } from "../../services";
+import { HttpService, UserService } from "../../services";
 import {
   concurrentImageUpload,
   customEmojisLookup,
@@ -19,7 +19,6 @@ import {
   setupTippy,
   setupTribute,
   toast,
-  uploadImage,
 } from "../../utils";
 import { EmojiPicker } from "./emoji-picker";
 import { Icon, Spinner } from "./icon";
@@ -39,9 +38,9 @@ interface MarkdownTextAreaProps {
   finished?: boolean;
   showLanguage?: boolean;
   hideNavigationWarnings?: boolean;
-  onContentChange?(val: string): any;
+  onContentChange?(val: string): void;
-  onReplyCancel?(): any;
+  onReplyCancel?(): void;
-  onSubmit?(msg: { val?: string; formId: string; languageId?: number }): any;
+  onSubmit?(content: string, formId: string, languageId?: number): void;
   allLanguages: Language[]; // TODO should probably be nullable
   siteLanguages: number[]; // TODO same
 }
@@ -55,8 +54,9 @@ interface MarkdownTextAreaState {
   content?: string;
   languageId?: number;
   previewMode: boolean;
-  loading: boolean;
   imageUploadStatus?: ImageUploadStatus;
+  loading: boolean;
+  submitted: boolean;
 }
 
 export class MarkdownTextArea extends Component<
@@ -72,6 +72,7 @@ export class MarkdownTextArea extends Component<
     languageId: this.props.initialLanguageId,
     previewMode: false,
     loading: false,
+    submitted: false,
   };
 
   constructor(props: any, context: any) {
@@ -105,17 +106,14 @@ export class MarkdownTextArea extends Component<
     }
   }
 
-  componentDidUpdate() {
-    if (!this.props.hideNavigationWarnings && this.state.content) {
-      window.onbeforeunload = () => true;
-    } else {
-      window.onbeforeunload = null;
-    }
-  }
-
   componentWillReceiveProps(nextProps: MarkdownTextAreaProps) {
     if (nextProps.finished) {
-      this.setState({ previewMode: false, loading: false, content: undefined });
+      this.setState({
+        previewMode: false,
+        imageUploadStatus: undefined,
+        loading: false,
+        content: undefined,
+      });
       if (this.props.replyType) {
         this.props.onReplyCancel?.();
       }
@@ -127,16 +125,23 @@ export class MarkdownTextArea extends Component<
     }
   }
 
-  componentWillUnmount() {
-    window.onbeforeunload = null;
-  }
-
   render() {
     const languageId = this.state.languageId;
 
+    // TODO add these prompts back in at some point
+    // <Prompt
+    //   when={!this.props.hideNavigationWarnings && this.state.content}
+    //   message={i18n.t("block_leaving")}
+    // />
     return (
       <form id={this.formId} onSubmit={linkEvent(this, this.handleSubmit)}>
-        <NavigationPrompt when={!!this.state.content} />
+        <NavigationPrompt
+          when={
+            !this.props.hideNavigationWarnings &&
+            !!this.state.content &&
+            !this.state.submitted
+          }
+        />
         <div className="form-group row">
           <div className={`col-sm-12`}>
             <textarea
@@ -390,29 +395,29 @@ export class MarkdownTextArea extends Component<
     }
   }
 
-  async uploadSingleImage(i: MarkdownTextArea, file: File) {
+  async uploadSingleImage(i: MarkdownTextArea, image: File) {
-    try {
+    const res = await HttpService.client.uploadImage({ image });
-      const res = await uploadImage(file);
     console.log("pictrs upload:");
     console.log(res);
-      if (res.msg === "ok") {
+    if (res.state === "success") {
-        const imageMarkdown = `![](${res.url})`;
+      if (res.data.msg === "ok") {
+        const imageMarkdown = `![](${res.data.url})`;
         i.setState(({ content }) => ({
           content: content ? `${content}\n${imageMarkdown}` : imageMarkdown,
         }));
         i.contentChange();
         const textarea: any = document.getElementById(i.id);
         autosize.update(textarea);
-        pictrsDeleteToast(file.name, res.delete_url as string);
+        pictrsDeleteToast(image.name, res.data.delete_url as string);
       } else {
-        throw JSON.stringify(res);
+        throw JSON.stringify(res.data);
       }
-    } catch (error) {
+    } else if (res.state === "failed") {
       i.setState({ imageUploadStatus: undefined });
-      console.error(error);
+      console.error(res.msg);
-      toast(error, "danger");
+      toast(res.msg, "danger");
 
-      throw error;
+      throw res.msg;
     }
   }
 
@@ -486,13 +491,10 @@ export class MarkdownTextArea extends Component<
 
   handleSubmit(i: MarkdownTextArea, event: any) {
     event.preventDefault();
-    i.setState({ loading: true });
+    if (i.state.content) {
-    const msg = {
+      i.setState({ loading: true, submitted: true });
-      val: i.state.content,
+      i.props.onSubmit?.(i.state.content, i.formId, i.state.languageId);
-      formId: i.formId,
+    }
-      languageId: i.state.languageId,
-    };
-    i.props.onSubmit?.(msg);
   }
 
   handleReplyCancel(i: MarkdownTextArea) {

src/shared/components/common/registration-application.tsx

@@ -1,23 +1,26 @@
-import { Component, linkEvent } from "inferno";
+import { Component, InfernoNode, linkEvent } from "inferno";
 import { T } from "inferno-i18next-dess";
 import {
   ApproveRegistrationApplication,
   RegistrationApplicationView,
 } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { WebSocketService } from "../../services";
+import { mdToHtml, myAuthRequired } from "../../utils";
-import { mdToHtml, myAuth, wsClient } from "../../utils";
 import { PersonListing } from "../person/person-listing";
+import { Spinner } from "./icon";
 import { MarkdownTextArea } from "./markdown-textarea";
 import { MomentTime } from "./moment-time";
 
 interface RegistrationApplicationProps {
   application: RegistrationApplicationView;
+  onApproveApplication(form: ApproveRegistrationApplication): void;
 }
 
 interface RegistrationApplicationState {
   denyReason?: string;
   denyExpanded: boolean;
+  approveLoading: boolean;
+  denyLoading: boolean;
 }
 
 export class RegistrationApplication extends Component<
@@ -27,12 +30,27 @@ export class RegistrationApplication extends Component<
   state: RegistrationApplicationState = {
     denyReason: this.props.application.registration_application.deny_reason,
     denyExpanded: false,
+    approveLoading: false,
+    denyLoading: false,
   };
 
   constructor(props: any, context: any) {
     super(props, context);
     this.handleDenyReasonChange = this.handleDenyReasonChange.bind(this);
   }
+  componentWillReceiveProps(
+    nextProps: Readonly<
+      { children?: InfernoNode } & RegistrationApplicationProps
+    >
+  ): void {
+    if (this.props != nextProps) {
+      this.setState({
+        denyExpanded: false,
+        approveLoading: false,
+        denyLoading: false,
+      });
+    }
+  }
 
   render() {
     const a = this.props.application;
@@ -99,7 +117,7 @@ export class RegistrationApplication extends Component<
             onClick={linkEvent(this, this.handleApprove)}
             aria-label={i18n.t("approve")}
           >
-            {i18n.t("approve")}
+            {this.state.approveLoading ? <Spinner /> : i18n.t("approve")}
           </button>
         )}
         {(!ra.admin_id || (ra.admin_id && accepted)) && (
@@ -108,7 +126,7 @@ export class RegistrationApplication extends Component<
             onClick={linkEvent(this, this.handleDeny)}
             aria-label={i18n.t("deny")}
           >
-            {i18n.t("deny")}
+            {this.state.denyLoading ? <Spinner /> : i18n.t("deny")}
           </button>
         )}
       </div>
@@ -116,35 +134,23 @@ export class RegistrationApplication extends Component<
   }
 
   handleApprove(i: RegistrationApplication) {
-    const auth = myAuth();
+    i.setState({ denyExpanded: false, approveLoading: true });
-    if (auth) {
+    i.props.onApproveApplication({
-      i.setState({ denyExpanded: false });
-      const form: ApproveRegistrationApplication = {
       id: i.props.application.registration_application.id,
       approve: true,
-        auth,
+      auth: myAuthRequired(),
-      };
+    });
-      WebSocketService.Instance.send(
-        wsClient.approveRegistrationApplication(form)
-      );
-    }
   }
 
   handleDeny(i: RegistrationApplication) {
     if (i.state.denyExpanded) {
-      i.setState({ denyExpanded: false });
+      i.setState({ denyExpanded: false, denyLoading: true });
-      const auth = myAuth();
+      i.props.onApproveApplication({
-      if (auth) {
-        const form: ApproveRegistrationApplication = {
         id: i.props.application.registration_application.id,
         approve: false,
         deny_reason: i.state.denyReason,
-          auth,
+        auth: myAuthRequired(),
-        };
+      });
-        WebSocketService.Instance.send(
-          wsClient.approveRegistrationApplication(form)
-        );
-      }
     } else {
       i.setState({ denyExpanded: true });
     }

src/shared/components/common/searchable-select.tsx

@@ -38,12 +38,38 @@ function handleSearch(i: SearchableSelect, e: ChangeEvent<HTMLInputElement>) {
   });
 }
 
+function focusSearch(i: SearchableSelect) {
+  if (i.toggleButtonRef.current?.ariaExpanded !== "true") {
+    i.searchInputRef.current?.focus();
+
+    if (i.props.onSearch) {
+      i.props.onSearch("");
+    }
+
+    i.setState({
+      searchText: "",
+    });
+  }
+}
+
+function handleChange({ option, i }: { option: Choice; i: SearchableSelect }) {
+  const { onChange, value } = i.props;
+
+  if (option.value !== value?.toString()) {
+    if (onChange) {
+      onChange(option);
+    }
+
+    i.setState({ searchText: "" });
+  }
+}
+
 export class SearchableSelect extends Component<
   SearchableSelectProps,
   SearchableSelectState
 > {
-  private searchInputRef: RefObject<HTMLInputElement> = createRef();
+  searchInputRef: RefObject<HTMLInputElement> = createRef();
-  private toggleButtonRef: RefObject<HTMLButtonElement> = createRef();
+  toggleButtonRef: RefObject<HTMLButtonElement> = createRef();
   private loadingEllipsesInterval?: NodeJS.Timer = undefined;
 
   state: SearchableSelectState = {
@@ -55,9 +81,6 @@ export class SearchableSelect extends Component<
   constructor(props: SearchableSelectProps, context: any) {
     super(props, context);
 
-    this.handleChange = this.handleChange.bind(this);
-    this.focusSearch = this.focusSearch.bind(this);
-
     if (props.value) {
       let selectedIndex = props.options.findIndex(
         ({ value }) => value === props.value?.toString()
@@ -86,7 +109,8 @@ export class SearchableSelect extends Component<
           className="custom-select text-start"
           aria-haspopup="listbox"
           data-bs-toggle="dropdown"
-          onClick={this.focusSearch}
+          onClick={linkEvent(this, focusSearch)}
+          ref={this.toggleButtonRef}
         >
           {loading
             ? `${i18n.t("loading")}${loadingEllipses}`
@@ -127,7 +151,7 @@ export class SearchableSelect extends Component<
                 aria-disabled={option.disabled}
                 disabled={option.disabled}
                 aria-selected={selectedIndex === index}
-                onClick={() => this.handleChange(option)}
+                onClick={linkEvent({ i: this, option }, handleChange)}
                 type="button"
               >
                 {option.label}
@@ -138,20 +162,6 @@ export class SearchableSelect extends Component<
     );
   }
 
-  focusSearch() {
-    if (this.toggleButtonRef.current?.ariaExpanded !== "true") {
-      this.searchInputRef.current?.focus();
-
-      if (this.props.onSearch) {
-        this.props.onSearch("");
-      }
-
-      this.setState({
-        searchText: "",
-      });
-    }
-  }
-
   static getDerivedStateFromProps({
     value,
     options,
@@ -189,16 +199,4 @@ export class SearchableSelect extends Component<
       clearInterval(this.loadingEllipsesInterval);
     }
   }
-
-  handleChange(option: Choice) {
-    const { onChange, value } = this.props;
-
-    if (option.value !== value?.toString()) {
-      if (onChange) {
-        onChange(option);
-      }
-
-      this.setState({ searchText: "" });
-    }
-  }
 }

src/shared/components/common/sort-select.tsx

@@ -6,7 +6,7 @@ import { Icon } from "./icon";
 
 interface SortSelectProps {
   sort: SortType;
-  onChange?(val: SortType): any;
+  onChange(val: SortType): void;
   hideHot?: boolean;
   hideMostComments?: boolean;
 }
@@ -25,7 +25,7 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
     super(props, context);
   }
 
-  static getDerivedStateFromProps(props: any): SortSelectState {
+  static getDerivedStateFromProps(props: SortSelectProps): SortSelectState {
     return {
       sort: props.sort,
     };
@@ -85,6 +85,6 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
   }
 
   handleSortChange(i: SortSelect, event: any) {
-    i.props.onChange?.(event.target.value);
+    i.props.onChange(event.target.value);
   }
 }

src/shared/components/community/communities.tsx

@@ -1,32 +1,26 @@
 import { Component, linkEvent } from "inferno";
 import {
   CommunityResponse,
-  FollowCommunity,
   GetSiteResponse,
   ListCommunities,
   ListCommunitiesResponse,
   ListingType,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
 } from "lemmy-js-client";
-import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
 import { InitialFetchRequest } from "../../interfaces";
-import { WebSocketService } from "../../services";
+import { FirstLoadService } from "../../services/FirstLoadService";
+import { HttpService, RequestState } from "../../services/HttpService";
 import {
   QueryParams,
+  editCommunity,
   getPageFromString,
   getQueryParams,
   getQueryString,
-  isBrowser,
   myAuth,
+  myAuthRequired,
   numToSI,
   setIsoData,
   showLocal,
-  toast,
-  wsClient,
-  wsSubscribe,
 } from "../../utils";
 import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
@@ -37,10 +31,10 @@ import { CommunityLink } from "./community-link";
 const communityLimit = 50;
 
 interface CommunitiesState {
-  listCommunitiesResponse?: ListCommunitiesResponse;
+  listCommunitiesResponse: RequestState<ListCommunitiesResponse>;
-  loading: boolean;
   siteRes: GetSiteResponse;
   searchText: string;
+  isIsomorphic: boolean;
 }
 
 interface CommunitiesProps {
@@ -48,51 +42,17 @@ interface CommunitiesProps {
   page: number;
 }
 
-function getCommunitiesQueryParams() {
-  return getQueryParams<CommunitiesProps>({
-    listingType: getListingTypeFromQuery,
-    page: getPageFromString,
-  });
-}
-
 function getListingTypeFromQuery(listingType?: string): ListingType {
   return listingType ? (listingType as ListingType) : "Local";
 }
 
-function toggleSubscribe(community_id: number, follow: boolean) {
-  const auth = myAuth();
-  if (auth) {
-    const form: FollowCommunity = {
-      community_id,
-      follow,
-      auth,
-    };
-
-    WebSocketService.Instance.send(wsClient.followCommunity(form));
-  }
-}
-
-function refetch() {
-  const { listingType, page } = getCommunitiesQueryParams();
-
-  const listCommunitiesForm: ListCommunities = {
-    type_: listingType,
-    sort: "TopMonth",
-    limit: communityLimit,
-    page,
-    auth: myAuth(false),
-  };
-
-  WebSocketService.Instance.send(wsClient.listCommunities(listCommunitiesForm));
-}
-
 export class Communities extends Component<any, CommunitiesState> {
-  private subscription?: Subscription;
   private isoData = setIsoData(this.context);
   state: CommunitiesState = {
-    loading: true,
+    listCommunitiesResponse: { state: "empty" },
     siteRes: this.isoData.site_res,
     searchText: "",
+    isIsomorphic: false,
   };
 
   constructor(props: any, context: any) {
@@ -100,25 +60,19 @@ export class Communities extends Component<any, CommunitiesState> {
     this.handlePageChange = this.handlePageChange.bind(this);
     this.handleListingTypeChange = this.handleListingTypeChange.bind(this);
 
-    this.parseMessage = this.parseMessage.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
-
     // Only fetch the data if coming from another route
-    if (this.isoData.path === this.context.router.route.match.url) {
+    if (FirstLoadService.isFirstLoad) {
-      const listRes = this.isoData.routeData[0] as ListCommunitiesResponse;
       this.state = {
         ...this.state,
-        listCommunitiesResponse: listRes,
+        listCommunitiesResponse: this.isoData.routeData[0],
-        loading: false,
+        isIsomorphic: true,
       };
-    } else {
-      refetch();
     }
   }
 
-  componentWillUnmount() {
+  async componentDidMount() {
-    if (isBrowser()) {
+    if (!this.state.isIsomorphic) {
-      this.subscription?.unsubscribe();
+      await this.refetch();
     }
   }
 
@@ -128,20 +82,17 @@ export class Communities extends Component<any, CommunitiesState> {
     }`;
   }
 
-  render() {
+  renderListings() {
-    const { listingType, page } = getCommunitiesQueryParams();
+    switch (this.state.listCommunitiesResponse.state) {
-
+      case "loading":
         return (
-      <div className="container-lg">
-        <HtmlTags
-          title={this.documentTitle}
-          path={this.context.router.route.match.url}
-        />
-        {this.state.loading ? (
           <h5>
             <Spinner large />
           </h5>
-        ) : (
+        );
+      case "success": {
+        const { listingType, page } = this.getCommunitiesQueryParams();
+        return (
           <div>
             <div className="row">
               <div className="col-md-6">
@@ -182,7 +133,8 @@ export class Communities extends Component<any, CommunitiesState> {
                   </tr>
                 </thead>
                 <tbody>
-                  {this.state.listCommunitiesResponse?.communities.map(cv => (
+                  {this.state.listCommunitiesResponse.data.communities.map(
+                    cv => (
                       <tr key={cv.community.id}>
                         <td>
                           <CommunityLink community={cv.community} />
@@ -204,8 +156,12 @@ export class Communities extends Component<any, CommunitiesState> {
                             <button
                               className="btn btn-link d-inline-block"
                               onClick={linkEvent(
-                              cv.community.id,
+                                {
-                              this.handleUnsubscribe
+                                  i: this,
+                                  communityId: cv.community.id,
+                                  follow: false,
+                                },
+                                this.handleFollow
                               )}
                             >
                               {i18n.t("unsubscribe")}
@@ -215,8 +171,12 @@ export class Communities extends Component<any, CommunitiesState> {
                             <button
                               className="btn btn-link d-inline-block"
                               onClick={linkEvent(
-                              cv.community.id,
+                                {
-                              this.handleSubscribe
+                                  i: this,
+                                  communityId: cv.community.id,
+                                  follow: true,
+                                },
+                                this.handleFollow
                               )}
                             >
                               {i18n.t("subscribe")}
@@ -229,13 +189,26 @@ export class Communities extends Component<any, CommunitiesState> {
                           )}
                         </td>
                       </tr>
-                  ))}
+                    )
+                  )}
                 </tbody>
               </table>
             </div>
             <Paginator page={page} onChange={this.handlePageChange} />
           </div>
-        )}
+        );
+      }
+    }
+  }
+
+  render() {
+    return (
+      <div className="container-lg">
+        <HtmlTags
+          title={this.documentTitle}
+          path={this.context.router.route.match.url}
+        />
+        {this.renderListings()}
       </div>
     );
   }
@@ -266,9 +239,9 @@ export class Communities extends Component<any, CommunitiesState> {
     );
   }
 
-  updateUrl({ listingType, page }: Partial<CommunitiesProps>) {
+  async updateUrl({ listingType, page }: Partial<CommunitiesProps>) {
     const { listingType: urlListingType, page: urlPage } =
-      getCommunitiesQueryParams();
+      this.getCommunitiesQueryParams();
 
     const queryParams: QueryParams<CommunitiesProps> = {
       listingType: listingType ?? urlListingType,
@@ -277,7 +250,7 @@ export class Communities extends Component<any, CommunitiesState> {
 
     this.props.history.push(`/communities${getQueryString(queryParams)}`);
 
-    refetch();
+    await this.refetch();
   }
 
   handlePageChange(page: number) {
@@ -291,19 +264,12 @@ export class Communities extends Component<any, CommunitiesState> {
     });
   }
 
-  handleUnsubscribe(communityId: number) {
-    toggleSubscribe(communityId, false);
-  }
-
-  handleSubscribe(communityId: number) {
-    toggleSubscribe(communityId, true);
-  }
-
   handleSearchChange(i: Communities, event: any) {
     i.setState({ searchText: event.target.value });
   }
 
-  handleSearchSubmit(i: Communities) {
+  handleSearchSubmit(i: Communities, event: any) {
+    event.preventDefault();
     const searchParamEncoded = encodeURIComponent(i.state.searchText);
     i.context.router.history.push(`/search?q=${searchParamEncoded}`);
   }
@@ -312,7 +278,9 @@ export class Communities extends Component<any, CommunitiesState> {
     query: { listingType, page },
     client,
     auth,
-  }: InitialFetchRequest<QueryParams<CommunitiesProps>>): Promise<any>[] {
+  }: InitialFetchRequest<QueryParams<CommunitiesProps>>): Promise<
+    RequestState<any>
+  >[] {
     const listCommunitiesForm: ListCommunities = {
       type_: getListingTypeFromQuery(listingType),
       sort: "TopMonth",
@@ -324,33 +292,56 @@ export class Communities extends Component<any, CommunitiesState> {
     return [client.listCommunities(listCommunitiesForm)];
   }
 
-  parseMessage(msg: any) {
+  getCommunitiesQueryParams() {
-    const op = wsUserOp(msg);
+    return getQueryParams<CommunitiesProps>({
-    console.log(msg);
+      listingType: getListingTypeFromQuery,
-    if (msg.error) {
+      page: getPageFromString,
-      toast(i18n.t(msg.error), "danger");
+    });
-    } else if (op === UserOperation.ListCommunities) {
+  }
-      const data = wsJsonToRes<ListCommunitiesResponse>(msg);
-      this.setState({ listCommunitiesResponse: data, loading: false });
-      window.scrollTo(0, 0);
-    } else if (op === UserOperation.FollowCommunity) {
-      const {
-        community_view: {
-          community,
-          subscribed,
-          counts: { subscribers },
-        },
-      } = wsJsonToRes<CommunityResponse>(msg);
-      const res = this.state.listCommunitiesResponse;
-      const found = res?.communities.find(
-        ({ community: { id } }) => id == community.id
-      );
 
-      if (found) {
+  async handleFollow(data: {
-        found.subscribed = subscribed;
+    i: Communities;
-        found.counts.subscribers = subscribers;
+    communityId: number;
-        this.setState(this.state);
+    follow: boolean;
+  }) {
+    const res = await HttpService.client.followCommunity({
+      community_id: data.communityId,
+      follow: data.follow,
+      auth: myAuthRequired(),
+    });
+    data.i.findAndUpdateCommunity(res);
   }
+
+  async refetch() {
+    this.setState({ listCommunitiesResponse: { state: "loading" } });
+
+    const { listingType, page } = this.getCommunitiesQueryParams();
+
+    this.setState({
+      listCommunitiesResponse: await HttpService.client.listCommunities({
+        type_: listingType,
+        sort: "TopMonth",
+        limit: communityLimit,
+        page,
+        auth: myAuth(),
+      }),
+    });
+
+    window.scrollTo(0, 0);
   }
+
+  findAndUpdateCommunity(res: RequestState<CommunityResponse>) {
+    this.setState(s => {
+      if (
+        s.listCommunitiesResponse.state == "success" &&
+        res.state == "success"
+      ) {
+        s.listCommunitiesResponse.data.communities = editCommunity(
+          res.data.community_view,
+          s.listCommunitiesResponse.data.communities
+        );
+      }
+      return s;
+    });
   }
 }

src/shared/components/community/community-form.tsx

@@ -1,24 +1,12 @@
 import { Component, linkEvent } from "inferno";
 import {
-  CommunityResponse,
   CommunityView,
   CreateCommunity,
   EditCommunity,
   Language,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
 } from "lemmy-js-client";
-import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
-import { UserService, WebSocketService } from "../../services";
+import { capitalizeFirstLetter, myAuthRequired, randomStr } from "../../utils";
-import {
-  capitalizeFirstLetter,
-  myAuth,
-  randomStr,
-  wsClient,
-  wsSubscribe,
-} from "../../utils";
 import { Icon, Spinner } from "../common/icon";
 import { ImageUploadForm } from "../common/image-upload-form";
 import { LanguageSelect } from "../common/language-select";
@@ -31,8 +19,7 @@ interface CommunityFormProps {
   siteLanguages: number[];
   communityLanguages?: number[];
   onCancel?(): any;
-  onCreate?(community: CommunityView): any;
+  onUpsertCommunity(form: CreateCommunity | EditCommunity): void;
-  onEdit?(community: CommunityView): any;
   enableNsfw?: boolean;
 }
 
@@ -48,6 +35,7 @@ interface CommunityFormState {
     discussion_languages?: number[];
   };
   loading: boolean;
+  submitted: boolean;
 }
 
 export class CommunityForm extends Component<
@@ -55,11 +43,11 @@ export class CommunityForm extends Component<
   CommunityFormState
 > {
   private id = `community-form-${randomStr()}`;
-  private subscription?: Subscription;
 
   state: CommunityFormState = {
     form: {},
     loading: false,
+    submitted: false,
   };
 
   constructor(props: any, context: any) {
@@ -77,12 +65,11 @@ export class CommunityForm extends Component<
     this.handleDiscussionLanguageChange =
       this.handleDiscussionLanguageChange.bind(this);
 
-    this.parseMessage = this.parseMessage.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
     const cv = this.props.community_view;
 
     if (cv) {
       this.state = {
+        ...this.state,
         form: {
           name: cv.community.name,
           title: cv.community.title,
@@ -98,27 +85,9 @@ export class CommunityForm extends Component<
     }
   }
 
-  componentDidUpdate() {
-    if (
-      !this.state.loading &&
-      (this.state.form.name ||
-        this.state.form.title ||
-        this.state.form.description)
-    ) {
-      window.onbeforeunload = () => true;
-    } else {
-      window.onbeforeunload = null;
-    }
-  }
-
-  componentWillUnmount() {
-    this.subscription?.unsubscribe();
-    window.onbeforeunload = null;
-  }
-
   render() {
     return (
-      <>
+      <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
         <NavigationPrompt
           when={
             !this.state.loading &&
@@ -126,10 +95,10 @@ export class CommunityForm extends Component<
               this.state.form.name ||
               this.state.form.title ||
               this.state.form.description
-            )
+            ) &&
+            !this.state.submitted
           }
         />
-        <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
         {!this.props.community_view && (
           <div className="form-group row">
             <label
@@ -217,6 +186,7 @@ export class CommunityForm extends Component<
               initialContent={this.state.form.description}
               placeholder={i18n.t("description")}
               onContentChange={this.handleCommunityDescriptionChange}
+              hideNavigationWarnings
               allLanguages={[]}
               siteLanguages={[]}
             />
@@ -295,21 +265,19 @@ export class CommunityForm extends Component<
           </div>
         </div>
       </form>
-      </>
     );
   }
 
   handleCreateCommunitySubmit(i: CommunityForm, event: any) {
     event.preventDefault();
-    i.setState({ loading: true });
+    i.setState({ loading: true, submitted: true });
     const cForm = i.state.form;
-    const auth = myAuth();
+    const auth = myAuthRequired();
 
     const cv = i.props.community_view;
 
-    if (auth) {
     if (cv) {
-        const form: EditCommunity = {
+      i.props.onUpsertCommunity({
         community_id: cv.community.id,
         title: cForm.title,
         description: cForm.description,
@@ -319,12 +287,10 @@ export class CommunityForm extends Component<
         posting_restricted_to_mods: cForm.posting_restricted_to_mods,
         discussion_languages: cForm.discussion_languages,
         auth,
-        };
+      });
-
-        WebSocketService.Instance.send(wsClient.editCommunity(form));
     } else {
       if (cForm.title && cForm.name) {
-          const form: CreateCommunity = {
+        i.props.onUpsertCommunity({
           name: cForm.name,
           title: cForm.title,
           description: cForm.description,
@@ -334,22 +300,17 @@ export class CommunityForm extends Component<
           posting_restricted_to_mods: cForm.posting_restricted_to_mods,
           discussion_languages: cForm.discussion_languages,
           auth,
-          };
+        });
-          WebSocketService.Instance.send(wsClient.createCommunity(form));
       }
     }
   }
-    i.setState(i.state);
-  }
 
   handleCommunityNameChange(i: CommunityForm, event: any) {
-    i.state.form.name = event.target.value;
+    i.setState(s => ((s.form.name = event.target.value), s));
-    i.setState(i.state);
   }
 
   handleCommunityTitleChange(i: CommunityForm, event: any) {
-    i.state.form.title = event.target.value;
+    i.setState(s => ((s.form.title = event.target.value), s));
-    i.setState(i.state);
   }
 
   handleCommunityDescriptionChange(val: string) {
@@ -357,13 +318,13 @@ export class CommunityForm extends Component<
   }
 
   handleCommunityNsfwChange(i: CommunityForm, event: any) {
-    i.state.form.nsfw = event.target.checked;
+    i.setState(s => ((s.form.nsfw = event.target.checked), s));
-    i.setState(i.state);
   }
 
   handleCommunityPostingRestrictedToMods(i: CommunityForm, event: any) {
-    i.state.form.posting_restricted_to_mods = event.target.checked;
+    i.setState(
-    i.setState(i.state);
+      s => ((s.form.posting_restricted_to_mods = event.target.checked), s)
+    );
   }
 
   handleCancel(i: CommunityForm) {
@@ -389,56 +350,4 @@ export class CommunityForm extends Component<
   handleDiscussionLanguageChange(val: number[]) {
     this.setState(s => ((s.form.discussion_languages = val), s));
   }
-
-  parseMessage(msg: any) {
-    const op = wsUserOp(msg);
-    console.log(msg);
-    if (msg.error) {
-      // Errors handled by top level pages
-      // toast(i18n.t(msg.error), "danger");
-      this.setState({ loading: false });
-      return;
-    } else if (op == UserOperation.CreateCommunity) {
-      const data = wsJsonToRes<CommunityResponse>(msg);
-      this.props.onCreate?.(data.community_view);
-
-      // Update myUserInfo
-      const community = data.community_view.community;
-
-      const mui = UserService.Instance.myUserInfo;
-      if (mui) {
-        const person = mui.local_user_view.person;
-        mui.follows.push({
-          community,
-          follower: person,
-        });
-        mui.moderates.push({
-          community,
-          moderator: person,
-        });
-      }
-    } else if (op == UserOperation.EditCommunity) {
-      const data = wsJsonToRes<CommunityResponse>(msg);
-      this.setState({ loading: false });
-      this.props.onEdit?.(data.community_view);
-      const community = data.community_view.community;
-
-      const mui = UserService.Instance.myUserInfo;
-      if (mui) {
-        const followFound = mui.follows.findIndex(
-          f => f.community.id == community.id
-        );
-        if (followFound) {
-          mui.follows[followFound].community = community;
-        }
-
-        const moderatesFound = mui.moderates.findIndex(
-          f => f.community.id == community.id
-        );
-        if (moderatesFound) {
-          mui.moderates[moderatesFound].community = community;
-        }
-      }
-    }
-  }
 }

src/shared/components/community/create-community.tsx

@@ -1,42 +1,26 @@
 import { Component } from "inferno";
-import { CommunityView, GetSiteResponse } from "lemmy-js-client";
-import { Subscription } from "rxjs";
-import { i18n } from "../../i18next";
 import {
-  enableNsfw,
+  CreateCommunity as CreateCommunityI,
-  isBrowser,
+  GetSiteResponse,
-  setIsoData,
+} from "lemmy-js-client";
-  toast,
+import { i18n } from "../../i18next";
-  wsSubscribe,
+import { HttpService } from "../../services/HttpService";
-} from "../../utils";
+import { enableNsfw, setIsoData } from "../../utils";
 import { HtmlTags } from "../common/html-tags";
-import { Spinner } from "../common/icon";
 import { CommunityForm } from "./community-form";
 
 interface CreateCommunityState {
   siteRes: GetSiteResponse;
-  loading: boolean;
 }
 
 export class CreateCommunity extends Component<any, CreateCommunityState> {
   private isoData = setIsoData(this.context);
-  private subscription?: Subscription;
   state: CreateCommunityState = {
     siteRes: this.isoData.site_res,
-    loading: false,
   };
   constructor(props: any, context: any) {
     super(props, context);
     this.handleCommunityCreate = this.handleCommunityCreate.bind(this);
-
-    this.parseMessage = this.parseMessage.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
-  }
-
-  componentWillUnmount() {
-    if (isBrowser()) {
-      this.subscription?.unsubscribe();
-    }
   }
 
   get documentTitle(): string {
@@ -52,16 +36,11 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
-        {this.state.loading ? (
-          <h5>
-            <Spinner large />
-          </h5>
-        ) : (
         <div className="row">
           <div className="col-12 col-lg-6 offset-lg-3 mb-4">
             <h5>{i18n.t("create_community")}</h5>
             <CommunityForm
-                onCreate={this.handleCommunityCreate}
+              onUpsertCommunity={this.handleCommunityCreate}
               enableNsfw={enableNsfw(this.state.siteRes)}
               allLanguages={this.state.siteRes.all_languages}
               siteLanguages={this.state.siteRes.discussion_languages}
@@ -69,18 +48,15 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
             />
           </div>
         </div>
-        )}
       </div>
     );
   }
 
-  handleCommunityCreate(cv: CommunityView) {
+  async handleCommunityCreate(form: CreateCommunityI) {
-    this.props.history.push(`/c/${cv.community.name}`);
+    const res = await HttpService.client.createCommunity(form);
-  }
+    if (res.state === "success") {
-
+      const name = res.data.community_view.community.name;
-  parseMessage(msg: any) {
+      this.props.history.replace(`/c/${name}`);
-    if (msg.error) {
-      toast(i18n.t(msg.error), "danger");
     }
   }
 }

src/shared/components/community/sidebar.tsx

@@ -1,4 +1,4 @@
-import { Component, linkEvent } from "inferno";
+import { Component, InfernoNode, linkEvent } from "inferno";
 import { Link } from "inferno-router";
 import {
   AddModToCommunity,
@@ -6,6 +6,7 @@ import {
   CommunityModeratorView,
   CommunityView,
   DeleteCommunity,
+  EditCommunity,
   FollowCommunity,
   Language,
   PersonView,
@@ -13,7 +14,7 @@ import {
   RemoveCommunity,
 } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { UserService, WebSocketService } from "../../services";
+import { UserService } from "../../services";
 import {
   amAdmin,
   amMod,
@@ -21,9 +22,8 @@ import {
   getUnixTime,
   hostname,
   mdToHtml,
-  myAuth,
+  myAuthRequired,
   numToSI,
-  wsClient,
 } from "../../utils";
 import { BannerIconHeader } from "../common/banner-icon-header";
 import { Icon, PurgeWarning, Spinner } from "../common/icon";
@@ -42,6 +42,13 @@ interface SidebarProps {
   enableNsfw?: boolean;
   showIcon?: boolean;
   editable?: boolean;
+  onDeleteCommunity(form: DeleteCommunity): void;
+  onRemoveCommunity(form: RemoveCommunity): void;
+  onLeaveModTeam(form: AddModToCommunity): void;
+  onFollowCommunity(form: FollowCommunity): void;
+  onBlockCommunity(form: BlockCommunity): void;
+  onPurgeCommunity(form: PurgeCommunity): void;
+  onEditCommunity(form: EditCommunity): void;
 }
 
 interface SidebarState {
@@ -51,8 +58,13 @@ interface SidebarState {
   showRemoveDialog: boolean;
   showPurgeDialog: boolean;
   purgeReason?: string;
-  purgeLoading: boolean;
   showConfirmLeaveModTeam: boolean;
+  deleteCommunityLoading: boolean;
+  removeCommunityLoading: boolean;
+  leaveModTeamLoading: boolean;
+  followCommunityLoading: boolean;
+  blockCommunityLoading: boolean;
+  purgeCommunityLoading: boolean;
 }
 
 export class Sidebar extends Component<SidebarProps, SidebarState> {
@@ -60,16 +72,44 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     showEdit: false,
     showRemoveDialog: false,
     showPurgeDialog: false,
-    purgeLoading: false,
     showConfirmLeaveModTeam: false,
+    deleteCommunityLoading: false,
+    removeCommunityLoading: false,
+    leaveModTeamLoading: false,
+    followCommunityLoading: false,
+    blockCommunityLoading: false,
+    purgeCommunityLoading: false,
   };
 
   constructor(props: any, context: any) {
     super(props, context);
-    this.handleEditCommunity = this.handleEditCommunity.bind(this);
     this.handleEditCancel = this.handleEditCancel.bind(this);
   }
 
+  componentWillReceiveProps(
+    nextProps: Readonly<{ children?: InfernoNode } & SidebarProps>
+  ): void {
+    if (this.props.moderators != nextProps.moderators) {
+      this.setState({
+        showConfirmLeaveModTeam: false,
+      });
+    }
+
+    if (this.props.community_view != nextProps.community_view) {
+      this.setState({
+        showEdit: false,
+        showPurgeDialog: false,
+        showRemoveDialog: false,
+        deleteCommunityLoading: false,
+        removeCommunityLoading: false,
+        leaveModTeamLoading: false,
+        followCommunityLoading: false,
+        blockCommunityLoading: false,
+        purgeCommunityLoading: false,
+      });
+    }
+  }
+
   render() {
     return (
       <div>
@@ -81,7 +121,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             allLanguages={this.props.allLanguages}
             siteLanguages={this.props.siteLanguages}
             communityLanguages={this.props.communityLanguages}
-            onEdit={this.handleEditCommunity}
+            onUpsertCommunity={this.props.onEditCommunity}
             onCancel={this.handleEditCancel}
             enableNsfw={this.props.enableNsfw}
           />
@@ -138,18 +178,28 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           {subscribed === "Subscribed" && (
             <button
               className="btn btn-secondary btn-sm mr-2"
-              onClick={linkEvent(this, this.handleUnsubscribe)}
+              onClick={linkEvent(this, this.handleUnfollowCommunity)}
             >
+              {this.state.followCommunityLoading ? (
+                <Spinner />
+              ) : (
+                <>
                   <Icon icon="check" classes="icon-inline text-success mr-1" />
                   {i18n.t("joined")}
+                </>
+              )}
             </button>
           )}
           {subscribed === "Pending" && (
             <button
               className="btn btn-warning mr-2"
-              onClick={linkEvent(this, this.handleUnsubscribe)}
+              onClick={linkEvent(this, this.handleUnfollowCommunity)}
             >
-              {i18n.t("subscribe_pending")}
+              {this.state.followCommunityLoading ? (
+                <Spinner />
+              ) : (
+                i18n.t("subscribe_pending")
+              )}
             </button>
           )}
           {community.removed && (
@@ -306,9 +356,13 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
         {community_view.subscribed == "NotSubscribed" && (
           <button
             className="btn btn-secondary btn-block"
-            onClick={linkEvent(this, this.handleSubscribe)}
+            onClick={linkEvent(this, this.handleFollowCommunity)}
           >
-            {i18n.t("subscribe")}
+            {this.state.followCommunityLoading ? (
+              <Spinner />
+            ) : (
+              i18n.t("subscribe")
+            )}
           </button>
         )}
       </div>
@@ -325,16 +379,24 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           (blocked ? (
             <button
               className="btn btn-danger btn-block"
-              onClick={linkEvent(this, this.handleUnblock)}
+              onClick={linkEvent(this, this.handleBlockCommunity)}
             >
-              {i18n.t("unblock_community")}
+              {this.state.blockCommunityLoading ? (
+                <Spinner />
+              ) : (
+                i18n.t("unblock_community")
+              )}
             </button>
           ) : (
             <button
               className="btn btn-danger btn-block"
-              onClick={linkEvent(this, this.handleBlock)}
+              onClick={linkEvent(this, this.handleBlockCommunity)}
             >
-              {i18n.t("block_community")}
+              {this.state.blockCommunityLoading ? (
+                <Spinner />
+              ) : (
+                i18n.t("block_community")
+              )}
             </button>
           ))}
       </div>
@@ -388,7 +450,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                     <li className="list-inline-item-action">
                       <button
                         className="btn btn-link text-muted d-inline-block"
-                        onClick={linkEvent(this, this.handleLeaveModTeamClick)}
+                        onClick={linkEvent(this, this.handleLeaveModTeam)}
                       >
                         {i18n.t("yes")}
                       </button>
@@ -410,7 +472,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                 <li className="list-inline-item-action">
                   <button
                     className="btn btn-link text-muted d-inline-block"
-                    onClick={linkEvent(this, this.handleDeleteClick)}
+                    onClick={linkEvent(this, this.handleDeleteCommunity)}
                     data-tippy-content={
                       !community_view.community.deleted
                         ? i18n.t("delete")
@@ -422,12 +484,16 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                         : i18n.t("restore")
                     }
                   >
+                    {this.state.deleteCommunityLoading ? (
+                      <Spinner />
+                    ) : (
                       <Icon
                         icon="trash"
                         classes={`icon-inline ${
                           community_view.community.deleted && "text-danger"
                         }`}
                       />
+                    )}{" "}
                   </button>
                 </li>
               )}
@@ -445,9 +511,13 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
               ) : (
                 <button
                   className="btn btn-link text-muted d-inline-block"
-                  onClick={linkEvent(this, this.handleModRemoveSubmit)}
+                  onClick={linkEvent(this, this.handleRemoveCommunity)}
                 >
-                  {i18n.t("restore")}
+                  {this.state.removeCommunityLoading ? (
+                    <Spinner />
+                  ) : (
+                    i18n.t("restore")
+                  )}
                 </button>
               )}
               <button
@@ -461,7 +531,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           )}
         </ul>
         {this.state.showRemoveDialog && (
-          <form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
+          <form onSubmit={linkEvent(this, this.handleRemoveCommunity)}>
             <div className="form-group">
               <label className="col-form-label" htmlFor="remove-reason">
                 {i18n.t("reason")}
@@ -482,13 +552,17 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             {/* </div> */}
             <div className="form-group">
               <button type="submit" className="btn btn-secondary">
-                {i18n.t("remove_community")}
+                {this.state.removeCommunityLoading ? (
+                  <Spinner />
+                ) : (
+                  i18n.t("remove_community")
+                )}
               </button>
             </div>
           </form>
         )}
         {this.state.showPurgeDialog && (
-          <form onSubmit={linkEvent(this, this.handlePurgeSubmit)}>
+          <form onSubmit={linkEvent(this, this.handlePurgeCommunity)}>
             <div className="form-group">
               <PurgeWarning />
             </div>
@@ -506,7 +580,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
               />
             </div>
             <div className="form-group">
-              {this.state.purgeLoading ? (
+              {this.state.purgeCommunityLoading ? (
                 <Spinner />
               ) : (
                 <button
@@ -528,93 +602,18 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     i.setState({ showEdit: true });
   }
 
-  handleEditCommunity() {
-    this.setState({ showEdit: false });
-  }
-
   handleEditCancel() {
     this.setState({ showEdit: false });
   }
 
-  handleDeleteClick(i: Sidebar, event: any) {
-    event.preventDefault();
-    const auth = myAuth();
-    if (auth) {
-      const deleteForm: DeleteCommunity = {
-        community_id: i.props.community_view.community.id,
-        deleted: !i.props.community_view.community.deleted,
-        auth,
-      };
-      WebSocketService.Instance.send(wsClient.deleteCommunity(deleteForm));
-    }
-  }
-
   handleShowConfirmLeaveModTeamClick(i: Sidebar) {
     i.setState({ showConfirmLeaveModTeam: true });
   }
 
-  handleLeaveModTeamClick(i: Sidebar) {
-    const mui = UserService.Instance.myUserInfo;
-    const auth = myAuth();
-    if (auth && mui) {
-      const form: AddModToCommunity = {
-        person_id: mui.local_user_view.person.id,
-        community_id: i.props.community_view.community.id,
-        added: false,
-        auth,
-      };
-      WebSocketService.Instance.send(wsClient.addModToCommunity(form));
-      i.setState({ showConfirmLeaveModTeam: false });
-    }
-  }
-
   handleCancelLeaveModTeamClick(i: Sidebar) {
     i.setState({ showConfirmLeaveModTeam: false });
   }
 
-  handleUnsubscribe(i: Sidebar, event: any) {
-    event.preventDefault();
-    const community_id = i.props.community_view.community.id;
-    const auth = myAuth();
-    if (auth) {
-      const form: FollowCommunity = {
-        community_id,
-        follow: false,
-        auth,
-      };
-      WebSocketService.Instance.send(wsClient.followCommunity(form));
-    }
-
-    // Update myUserInfo
-    const mui = UserService.Instance.myUserInfo;
-    if (mui) {
-      mui.follows = mui.follows.filter(i => i.community.id != community_id);
-    }
-  }
-
-  handleSubscribe(i: Sidebar, event: any) {
-    event.preventDefault();
-    const community_id = i.props.community_view.community.id;
-    const auth = myAuth();
-    if (auth) {
-      const form: FollowCommunity = {
-        community_id,
-        follow: true,
-        auth,
-      };
-      WebSocketService.Instance.send(wsClient.followCommunity(form));
-    }
-
-    // Update myUserInfo
-    const mui = UserService.Instance.myUserInfo;
-    if (mui) {
-      mui.follows.push({
-        community: i.props.community_view.community,
-        follower: mui.local_user_view.person,
-      });
-    }
-  }
-
   get canPost(): boolean {
     return (
       !this.props.community_view.community.posting_restricted_to_mods ||
@@ -635,23 +634,6 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     i.setState({ removeExpires: event.target.value });
   }
 
-  handleModRemoveSubmit(i: Sidebar, event: any) {
-    event.preventDefault();
-    const auth = myAuth();
-    if (auth) {
-      const removeForm: RemoveCommunity = {
-        community_id: i.props.community_view.community.id,
-        removed: !i.props.community_view.community.removed,
-        reason: i.state.removeReason,
-        expires: getUnixTime(i.state.removeExpires),
-        auth,
-      };
-      WebSocketService.Instance.send(wsClient.removeCommunity(removeForm));
-
-      i.setState({ showRemoveDialog: false });
-    }
-  }
-
   handlePurgeCommunityShow(i: Sidebar) {
     i.setState({ showPurgeDialog: true, showRemoveDialog: false });
   }
@@ -660,48 +642,75 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     i.setState({ purgeReason: event.target.value });
   }
 
-  handlePurgeSubmit(i: Sidebar, event: any) {
+  // TODO Do we need two of these?
-    event.preventDefault();
+  handleUnfollowCommunity(i: Sidebar) {
+    i.setState({ followCommunityLoading: true });
+    i.props.onFollowCommunity({
+      community_id: i.props.community_view.community.id,
+      follow: false,
+      auth: myAuthRequired(),
+    });
+  }
 
-    const auth = myAuth();
+  handleFollowCommunity(i: Sidebar) {
-    if (auth) {
+    i.setState({ followCommunityLoading: true });
-      const form: PurgeCommunity = {
+    i.props.onFollowCommunity({
+      community_id: i.props.community_view.community.id,
+      follow: true,
+      auth: myAuthRequired(),
+    });
+  }
+
+  handleBlockCommunity(i: Sidebar) {
+    i.setState({ blockCommunityLoading: true });
+    i.props.onBlockCommunity({
+      community_id: 0,
+      block: !i.props.community_view.blocked,
+      auth: myAuthRequired(),
+    });
+  }
+
+  handleLeaveModTeam(i: Sidebar) {
+    const myId = UserService.Instance.myUserInfo?.local_user_view.person.id;
+    if (myId) {
+      i.setState({ leaveModTeamLoading: true });
+      i.props.onLeaveModTeam({
+        community_id: i.props.community_view.community.id,
+        person_id: 92,
+        added: false,
+        auth: myAuthRequired(),
+      });
+    }
+  }
+
+  handleDeleteCommunity(i: Sidebar) {
+    i.setState({ deleteCommunityLoading: true });
+    i.props.onDeleteCommunity({
+      community_id: i.props.community_view.community.id,
+      deleted: !i.props.community_view.community.deleted,
+      auth: myAuthRequired(),
+    });
+  }
+
+  handleRemoveCommunity(i: Sidebar, event: any) {
+    event.preventDefault();
+    i.setState({ removeCommunityLoading: true });
+    i.props.onRemoveCommunity({
+      community_id: i.props.community_view.community.id,
+      removed: !i.props.community_view.community.removed,
+      reason: i.state.removeReason,
+      expires: getUnixTime(i.state.removeExpires), // TODO fix this
+      auth: myAuthRequired(),
+    });
+  }
+
+  handlePurgeCommunity(i: Sidebar, event: any) {
+    event.preventDefault();
+    i.setState({ purgeCommunityLoading: true });
+    i.props.onPurgeCommunity({
       community_id: i.props.community_view.community.id,
       reason: i.state.purgeReason,
-        auth,
+      auth: myAuthRequired(),
-      };
+    });
-      WebSocketService.Instance.send(wsClient.purgeCommunity(form));
-      i.setState({ purgeLoading: true });
-    }
-  }
-
-  handleBlock(i: Sidebar, event: any) {
-    event.preventDefault();
-    const auth = myAuth();
-    if (auth) {
-      const blockCommunityForm: BlockCommunity = {
-        community_id: i.props.community_view.community.id,
-        block: true,
-        auth,
-      };
-      WebSocketService.Instance.send(
-        wsClient.blockCommunity(blockCommunityForm)
-      );
-    }
-  }
-
-  handleUnblock(i: Sidebar, event: any) {
-    event.preventDefault();
-    const auth = myAuth();
-    if (auth) {
-      const blockCommunityForm: BlockCommunity = {
-        community_id: i.props.community_view.community.id,
-        block: false,
-        auth,
-      };
-      WebSocketService.Instance.send(
-        wsClient.blockCommunity(blockCommunityForm)
-      );
-    }
   }
 }

src/shared/components/home/admin-settings.tsx

@@ -1,30 +1,27 @@
-import autosize from "autosize";
 import { Component, linkEvent } from "inferno";
 import {
   BannedPersonsResponse,
-  GetBannedPersons,
+  CreateCustomEmoji,
+  DeleteCustomEmoji,
+  EditCustomEmoji,
+  EditSite,
   GetFederatedInstancesResponse,
   GetSiteResponse,
   PersonView,
-  SiteResponse,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
 } from "lemmy-js-client";
-import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
 import { InitialFetchRequest } from "../../interfaces";
-import { WebSocketService } from "../../services";
+import { FirstLoadService } from "../../services/FirstLoadService";
+import { HttpService, RequestState } from "../../services/HttpService";
 import {
   capitalizeFirstLetter,
-  isBrowser,
+  fetchThemeList,
-  myAuth,
+  myAuthRequired,
-  randomStr,
+  removeFromEmojiDataModel,
   setIsoData,
   showLocal,
   toast,
-  wsClient,
+  updateEmojiDataModel,
-  wsSubscribe,
 } from "../../utils";
 import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
@@ -37,76 +34,92 @@ import { TaglineForm } from "./tagline-form";
 
 interface AdminSettingsState {
   siteRes: GetSiteResponse;
-  instancesRes?: GetFederatedInstancesResponse;
   banned: PersonView[];
-  loading: boolean;
+  currentTab: string;
-  leaveAdminTeamLoading: boolean;
+  instancesRes: RequestState<GetFederatedInstancesResponse>;
+  bannedRes: RequestState<BannedPersonsResponse>;
+  leaveAdminTeamRes: RequestState<GetSiteResponse>;
+  themeList: string[];
+  isIsomorphic: boolean;
 }
 
 export class AdminSettings extends Component<any, AdminSettingsState> {
-  private siteConfigTextAreaId = `site-config-${randomStr()}`;
   private isoData = setIsoData(this.context);
-  private subscription?: Subscription;
   state: AdminSettingsState = {
     siteRes: this.isoData.site_res,
     banned: [],
-    loading: true,
+    currentTab: "site",
-    leaveAdminTeamLoading: false,
+    bannedRes: { state: "empty" },
+    instancesRes: { state: "empty" },
+    leaveAdminTeamRes: { state: "empty" },
+    themeList: [],
+    isIsomorphic: false,
   };
 
   constructor(props: any, context: any) {
     super(props, context);
 
-    this.parseMessage = this.parseMessage.bind(this);
+    this.handleEditSite = this.handleEditSite.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
+    this.handleEditEmoji = this.handleEditEmoji.bind(this);
+    this.handleDeleteEmoji = this.handleDeleteEmoji.bind(this);
+    this.handleCreateEmoji = this.handleCreateEmoji.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 [bannedRes, instancesRes] = this.isoData.routeData;
       this.state = {
         ...this.state,
-        banned: (this.isoData.routeData[0] as BannedPersonsResponse).banned,
+        bannedRes,
-        instancesRes: this.isoData
+        instancesRes,
-          .routeData[1] as GetFederatedInstancesResponse,
+        isIsomorphic: true,
-        loading: false,
       };
-    } else {
-      const cAuth = myAuth();
-      if (cAuth) {
-        WebSocketService.Instance.send(
-          wsClient.getBannedPersons({
-            auth: cAuth,
-          })
-        );
-        WebSocketService.Instance.send(
-          wsClient.getFederatedInstances({ auth: cAuth })
-        );
-      }
     }
   }
 
-  static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
+  async fetchData() {
-    const promises: Promise<any>[] = [];
+    this.setState({
+      bannedRes: { state: "loading" },
+      instancesRes: { state: "loading" },
+      themeList: [],
+    });
+
+    const auth = myAuthRequired();
+
+    const [bannedRes, instancesRes, themeList] = await Promise.all([
+      HttpService.client.getBannedPersons({ auth }),
+      HttpService.client.getFederatedInstances({ auth }),
+      fetchThemeList(),
+    ]);
+
+    this.setState({
+      bannedRes,
+      instancesRes,
+      themeList,
+    });
+  }
+
+  static fetchInitialData({
+    auth,
+    client,
+  }: InitialFetchRequest): Promise<any>[] {
+    const promises: Promise<RequestState<any>>[] = [];
 
-    const auth = req.auth;
     if (auth) {
-      const bannedPersonsForm: GetBannedPersons = { auth };
+      promises.push(client.getBannedPersons({ auth }));
-      promises.push(req.client.getBannedPersons(bannedPersonsForm));
+      promises.push(client.getFederatedInstances({ auth }));
-      promises.push(req.client.getFederatedInstances({ auth }));
+    } else {
+      promises.push(
+        Promise.resolve({ state: "empty" }),
+        Promise.resolve({ state: "empty" })
+      );
     }
 
     return promises;
   }
 
-  componentDidMount() {
+  async componentDidMount() {
-    if (isBrowser()) {
+    if (!this.state.isIsomorphic) {
-      var textarea: any = document.getElementById(this.siteConfigTextAreaId);
+      await this.fetchData();
-      autosize(textarea);
-    }
-  }
-
-  componentWillUnmount() {
-    if (isBrowser()) {
-      this.subscription?.unsubscribe();
     }
   }
 
@@ -117,17 +130,17 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
   }
 
   render() {
+    const federationData =
+      this.state.instancesRes.state === "success"
+        ? this.state.instancesRes.data.federated_instances
+        : undefined;
+
     return (
       <div className="container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
-        {this.state.loading ? (
-          <h5>
-            <Spinner large />
-          </h5>
-        ) : (
         <Tabs
           tabs={[
             {
@@ -137,9 +150,12 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                 <div className="row">
                   <div className="col-12 col-md-6">
                     <SiteForm
-                        siteRes={this.state.siteRes}
-                        instancesRes={this.state.instancesRes}
                       showLocal={showLocal(this.isoData)}
+                      allowedInstances={federationData?.allowed}
+                      blockedInstances={federationData?.blocked}
+                      onSaveSite={this.handleEditSite}
+                      siteRes={this.state.siteRes}
+                      themeList={this.state.themeList}
                     />
                   </div>
                   <div className="col-12 col-md-6">
@@ -154,13 +170,10 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
               label: "Rate Limiting",
               getNode: () => (
                 <RateLimitForm
-                    localSiteRateLimit={
+                  rateLimits={
                     this.state.siteRes.site_view.local_site_rate_limit
                   }
-                    applicationQuestion={
+                  onSaveSite={this.handleEditSite}
-                      this.state.siteRes.site_view.local_site
-                        .application_question
-                    }
                 />
               ),
             },
@@ -169,7 +182,10 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
               label: i18n.t("taglines"),
               getNode: () => (
                 <div className="row">
-                    <TaglineForm siteRes={this.state.siteRes} />
+                  <TaglineForm
+                    taglines={this.state.siteRes.taglines}
+                    onSaveSite={this.handleEditSite}
+                  />
                 </div>
               ),
             },
@@ -178,13 +194,16 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
               label: i18n.t("emojis"),
               getNode: () => (
                 <div className="row">
-                    <EmojiForm />
+                  <EmojiForm
+                    onCreate={this.handleCreateEmoji}
+                    onDelete={this.handleDeleteEmoji}
+                    onEdit={this.handleEditEmoji}
+                  />
                 </div>
               ),
             },
           ]}
         />
-        )}
       </div>
     );
   }
@@ -211,7 +230,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
         onClick={linkEvent(this, this.handleLeaveAdminTeam)}
         className="btn btn-danger mb-2"
       >
-        {this.state.leaveAdminTeamLoading ? (
+        {this.state.leaveAdminTeamRes.state == "loading" ? (
           <Spinner />
         ) : (
           i18n.t("leave_admin_team")
@@ -221,11 +240,20 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
   }
 
   bannedUsers() {
+    switch (this.state.bannedRes.state) {
+      case "loading":
+        return (
+          <h5>
+            <Spinner large />
+          </h5>
+        );
+      case "success": {
+        const bans = this.state.bannedRes.data.banned;
         return (
           <>
             <h5>{i18n.t("banned_users")}</h5>
             <ul className="list-unstyled">
-          {this.state.banned.map(banned => (
+              {bans.map(banned => (
                 <li key={banned.person.id} className="list-inline-item">
                   <PersonListing person={banned.person} />
                 </li>
@@ -234,39 +262,61 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
           </>
         );
       }
-
-  handleLeaveAdminTeam(i: AdminSettings) {
-    const auth = myAuth();
-    if (auth) {
-      i.setState({ leaveAdminTeamLoading: true });
-      WebSocketService.Instance.send(wsClient.leaveAdmin({ auth }));
     }
   }
 
-  parseMessage(msg: any) {
+  async handleEditSite(form: EditSite) {
-    const op = wsUserOp(msg);
+    const editRes = await HttpService.client.editSite(form);
-    console.log(msg);
+
-    if (msg.error) {
+    if (editRes.state === "success") {
-      toast(i18n.t(msg.error), "danger");
+      this.setState(s => {
-      this.context.router.history.push("/");
+        s.siteRes.site_view = editRes.data.site_view;
-      this.setState({ loading: false });
+        // TODO: Where to get taglines from?
-      return;
+        s.siteRes.taglines = editRes.data.taglines;
-    } else if (op == UserOperation.EditSite) {
+        return s;
-      const data = wsJsonToRes<SiteResponse>(msg);
+      });
-      this.setState(s => ((s.siteRes.site_view = data.site_view), s));
       toast(i18n.t("site_saved"));
-    } else if (op == UserOperation.GetBannedPersons) {
+    }
-      const data = wsJsonToRes<BannedPersonsResponse>(msg);
+
-      this.setState({ banned: data.banned, loading: false });
+    return editRes;
-    } else if (op == UserOperation.LeaveAdmin) {
+  }
-      const data = wsJsonToRes<GetSiteResponse>(msg);
+
-      this.setState(s => ((s.siteRes.site_view = data.site_view), s));
+  handleSwitchTab(i: { ctx: AdminSettings; tab: string }) {
-      this.setState({ leaveAdminTeamLoading: false });
+    i.ctx.setState({ currentTab: i.tab });
+  }
+
+  async handleLeaveAdminTeam(i: AdminSettings) {
+    i.setState({ leaveAdminTeamRes: { state: "loading" } });
+    this.setState({
+      leaveAdminTeamRes: await HttpService.client.leaveAdmin({
+        auth: myAuthRequired(),
+      }),
+    });
+
+    if (this.state.leaveAdminTeamRes.state === "success") {
       toast(i18n.t("left_admin_team"));
-      this.context.router.history.push("/");
+      this.context.router.history.replace("/");
-    } else if (op == UserOperation.GetFederatedInstances) {
+    }
-      const data = wsJsonToRes<GetFederatedInstancesResponse>(msg);
+  }
-      this.setState({ instancesRes: data });
+
+  async handleEditEmoji(form: EditCustomEmoji) {
+    const res = await HttpService.client.editCustomEmoji(form);
+    if (res.state === "success") {
+      updateEmojiDataModel(res.data.custom_emoji);
+    }
+  }
+
+  async handleDeleteEmoji(form: DeleteCustomEmoji) {
+    const res = await HttpService.client.deleteCustomEmoji(form);
+    if (res.state === "success") {
+      removeFromEmojiDataModel(res.data.id);
+    }
+  }
+
+  async handleCreateEmoji(form: CreateCustomEmoji) {
+    const res = await HttpService.client.createCustomEmoji(form);
+    if (res.state === "success") {
+      updateEmojiDataModel(res.data.custom_emoji);
     }
   }
 }

src/shared/components/home/emojis-form.tsx

@@ -1,36 +1,30 @@
 import { Component, linkEvent } from "inferno";
 import {
   CreateCustomEmoji,
-  CustomEmojiResponse,
   DeleteCustomEmoji,
-  DeleteCustomEmojiResponse,
   EditCustomEmoji,
   GetSiteResponse,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
 } from "lemmy-js-client";
-import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
-import { WebSocketService } from "../../services";
+import { HttpService } from "../../services/HttpService";
 import {
   customEmojisLookup,
-  isBrowser,
+  myAuthRequired,
-  myAuth,
   pictrsDeleteToast,
-  removeFromEmojiDataModel,
   setIsoData,
   toast,
-  updateEmojiDataModel,
-  uploadImage,
-  wsClient,
-  wsSubscribe,
 } from "../../utils";
 import { EmojiMart } from "../common/emoji-mart";
 import { HtmlTags } from "../common/html-tags";
 import { Icon } from "../common/icon";
 import { Paginator } from "../common/paginator";
 
+interface EmojiFormProps {
+  onEdit(form: EditCustomEmoji): void;
+  onCreate(form: CreateCustomEmoji): void;
+  onDelete(form: DeleteCustomEmoji): void;
+}
+
 interface EmojiFormState {
   siteRes: GetSiteResponse;
   customEmojis: CustomEmojiViewForm[];
@@ -49,9 +43,8 @@ interface CustomEmojiViewForm {
   page: number;
 }
 
-export class EmojiForm extends Component<any, EmojiFormState> {
+export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
   private isoData = setIsoData(this.context);
-  private subscription: Subscription | undefined;
   private itemsPerPage = 15;
   private emptyState: EmojiFormState = {
     loading: false,
@@ -75,20 +68,12 @@ export class EmojiForm extends Component<any, EmojiFormState> {
     this.state = this.emptyState;
 
     this.handlePageChange = this.handlePageChange.bind(this);
-    this.parseMessage = this.parseMessage.bind(this);
     this.handleEmojiClick = this.handleEmojiClick.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
   }
   get documentTitle(): string {
     return i18n.t("custom_emojis");
   }
 
-  componentWillUnmount() {
-    if (isBrowser()) {
-      this.subscription?.unsubscribe();
-    }
-  }
-
   render() {
     return (
       <div className="col-12">
@@ -232,7 +217,7 @@ export class EmojiForm extends Component<any, EmojiFormState> {
                               "btn btn-link btn-animate"
                             }
                             onClick={linkEvent(
-                              { form: this, cv: cv },
+                              { i: this, cv: cv },
                               this.handleEditEmojiClick
                             )}
                             data-tippy-content={i18n.t("save")}
@@ -253,7 +238,7 @@ export class EmojiForm extends Component<any, EmojiFormState> {
                         <button
                           className="btn btn-link btn-animate text-muted"
                           onClick={linkEvent(
-                            { form: this, index: index, cv: cv },
+                            { i: this, index: index, cv: cv },
                             this.handleDeleteEmojiClick
                           )}
                           data-tippy-content={i18n.t("delete")}
@@ -401,51 +386,47 @@ export class EmojiForm extends Component<any, EmojiFormState> {
     props.form.setState({ customEmojis: custom_emojis });
   }
 
-  handleDeleteEmojiClick(props: {
+  handleDeleteEmojiClick(d: {
-    form: EmojiForm;
+    i: EmojiForm;
     index: number;
     cv: CustomEmojiViewForm;
   }) {
-    const pagedIndex =
+    const pagedIndex = (d.i.state.page - 1) * d.i.itemsPerPage + d.index;
-      (props.form.state.page - 1) * props.form.itemsPerPage + props.index;
+    if (d.cv.id != 0) {
-    if (props.cv.id != 0) {
+      d.i.props.onDelete({
-      const deleteForm: DeleteCustomEmoji = {
+        id: d.cv.id,
-        id: props.cv.id,
+        auth: myAuthRequired(),
-        auth: myAuth() ?? "",
+      });
-      };
-      WebSocketService.Instance.send(wsClient.deleteCustomEmoji(deleteForm));
     } else {
-      const custom_emojis = [...props.form.state.customEmojis];
+      const custom_emojis = [...d.i.state.customEmojis];
       custom_emojis.splice(Number(pagedIndex), 1);
-      props.form.setState({ customEmojis: custom_emojis });
+      d.i.setState({ customEmojis: custom_emojis });
     }
   }
 
-  handleEditEmojiClick(props: { form: EmojiForm; cv: CustomEmojiViewForm }) {
+  handleEditEmojiClick(d: { i: EmojiForm; cv: CustomEmojiViewForm }) {
-    const keywords = props.cv.keywords
+    const keywords = d.cv.keywords
       .split(" ")
       .filter(x => x.length > 0) as string[];
     const uniqueKeywords = Array.from(new Set(keywords));
-    if (props.cv.id != 0) {
+    if (d.cv.id != 0) {
-      const editForm: EditCustomEmoji = {
+      d.i.props.onEdit({
-        id: props.cv.id,
+        id: d.cv.id,
-        category: props.cv.category,
+        category: d.cv.category,
-        image_url: props.cv.image_url,
+        image_url: d.cv.image_url,
-        alt_text: props.cv.alt_text,
+        alt_text: d.cv.alt_text,
         keywords: uniqueKeywords,
-        auth: myAuth() ?? "",
+        auth: myAuthRequired(),
-      };
+      });
-      WebSocketService.Instance.send(wsClient.editCustomEmoji(editForm));
     } else {
-      const createForm: CreateCustomEmoji = {
+      d.i.props.onCreate({
-        category: props.cv.category,
+        category: d.cv.category,
-        shortcode: props.cv.shortcode,
+        shortcode: d.cv.shortcode,
-        image_url: props.cv.image_url,
+        image_url: d.cv.image_url,
-        alt_text: props.cv.alt_text,
+        alt_text: d.cv.alt_text,
         keywords: uniqueKeywords,
-        auth: myAuth() ?? "",
+        auth: myAuthRequired(),
-      };
+      });
-      WebSocketService.Instance.send(wsClient.createCustomEmoji(createForm));
     }
   }
 
@@ -477,25 +458,25 @@ export class EmojiForm extends Component<any, EmojiFormState> {
       file = event;
     }
 
-    uploadImage(file)
+    HttpService.client.uploadImage({ image: file }).then(res => {
-      .then(res => {
       console.log("pictrs upload:");
       console.log(res);
-        if (res.msg === "ok") {
+      if (res.state === "success") {
-          pictrsDeleteToast(file.name, res.delete_url as string);
+        if (res.data.msg === "ok") {
+          pictrsDeleteToast(file.name, res.data.delete_url as string);
         } else {
           toast(JSON.stringify(res), "danger");
-          const hash = res.files?.at(0)?.file;
+          const hash = res.data.files?.at(0)?.file;
-          const url = `${res.url}/${hash}`;
+          const url = `${res.data.url}/${hash}`;
           props.form.handleEmojiImageUrlChange(
             { form: props.form, index: props.index, overrideValue: url },
             event
           );
         }
-      })
+      } else if (res.state === "failed") {
-      .catch(error => {
+        console.error(res.msg);
-        console.error(error);
+        toast(res.msg, "danger");
-        toast(error, "danger");
+      }
     });
   }
 
@@ -506,51 +487,4 @@ export class EmojiForm extends Component<any, EmojiFormState> {
       dynamicWidth: true,
     };
   }
-
-  parseMessage(msg: any) {
-    const op = wsUserOp(msg);
-    console.log(msg);
-    if (msg.error) {
-      toast(i18n.t(msg.error), "danger");
-      this.context.router.history.push("/");
-      this.setState({ loading: false });
-      return;
-    } else if (op == UserOperation.CreateCustomEmoji) {
-      const data = wsJsonToRes<CustomEmojiResponse>(msg);
-      const custom_emoji_view = data.custom_emoji;
-      updateEmojiDataModel(custom_emoji_view);
-      const currentEmojis = this.state.customEmojis;
-      const newEmojiIndex = currentEmojis.findIndex(
-        x => x.shortcode == custom_emoji_view.custom_emoji.shortcode
-      );
-      currentEmojis[newEmojiIndex].id = custom_emoji_view.custom_emoji.id;
-      currentEmojis[newEmojiIndex].changed = false;
-      this.setState({ customEmojis: currentEmojis });
-      toast(i18n.t("saved_emoji"));
-      this.setState({ loading: false });
-    } else if (op == UserOperation.EditCustomEmoji) {
-      const data = wsJsonToRes<CustomEmojiResponse>(msg);
-      const custom_emoji_view = data.custom_emoji;
-      updateEmojiDataModel(data.custom_emoji);
-      const currentEmojis = this.state.customEmojis;
-      const newEmojiIndex = currentEmojis.findIndex(
-        x => x.shortcode == custom_emoji_view.custom_emoji.shortcode
-      );
-      currentEmojis[newEmojiIndex].changed = false;
-      this.setState({ customEmojis: currentEmojis });
-      toast(i18n.t("saved_emoji"));
-      this.setState({ loading: false });
-    } else if (op == UserOperation.DeleteCustomEmoji) {
-      const data = wsJsonToRes<DeleteCustomEmojiResponse>(msg);
-      if (data.success) {
-        removeFromEmojiDataModel(data.id);
-        const custom_emojis = [
-          ...this.state.customEmojis.filter(x => x.id != data.id),
-        ];
-        this.setState({ customEmojis: custom_emojis });
-        toast(i18n.t("deleted_emoji"));
-      }
-      this.setState({ loading: false });
-    }
-  }
 }

src/shared/components/home/instances.tsx

@@ -3,106 +3,113 @@ import {
   GetFederatedInstancesResponse,
   GetSiteResponse,
   Instance,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
 } from "lemmy-js-client";
-import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
 import { InitialFetchRequest } from "../../interfaces";
-import { WebSocketService } from "../../services";
+import { FirstLoadService } from "../../services/FirstLoadService";
-import {
+import { HttpService, RequestState } from "../../services/HttpService";
-  isBrowser,
+import { relTags, setIsoData } from "../../utils";
-  relTags,
-  setIsoData,
-  toast,
-  wsClient,
-  wsSubscribe,
-} from "../../utils";
 import { HtmlTags } from "../common/html-tags";
+import { Spinner } from "../common/icon";
 
 interface InstancesState {
+  instancesRes: RequestState<GetFederatedInstancesResponse>;
   siteRes: GetSiteResponse;
-  instancesRes?: GetFederatedInstancesResponse;
+  isIsomorphic: boolean;
-  loading: boolean;
 }
 
 export class Instances extends Component<any, InstancesState> {
   private isoData = setIsoData(this.context);
   state: InstancesState = {
+    instancesRes: { state: "empty" },
     siteRes: this.isoData.site_res,
-    loading: true,
+    isIsomorphic: false,
   };
-  private subscription?: Subscription;
 
   constructor(props: any, context: any) {
     super(props, context);
 
-    this.parseMessage = this.parseMessage.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
-
     // Only fetch the data if coming from another route
-    if (this.isoData.path == this.context.router.route.match.url) {
+    if (FirstLoadService.isFirstLoad) {
       this.state = {
         ...this.state,
-        instancesRes: this.isoData
+        instancesRes: this.isoData.routeData[0],
-          .routeData[0] as GetFederatedInstancesResponse,
+        isIsomorphic: true,
-        loading: false,
       };
-    } else {
-      WebSocketService.Instance.send(wsClient.getFederatedInstances({}));
     }
   }
 
-  static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
+  async componentDidMount() {
-    const promises: Promise<any>[] = [];
+    if (!this.state.isIsomorphic) {
+      await this.fetchInstances();
+    }
+  }
 
-    promises.push(req.client.getFederatedInstances({}));
+  async fetchInstances() {
+    this.setState({
+      instancesRes: { state: "loading" },
+    });
 
-    return promises;
+    this.setState({
+      instancesRes: await HttpService.client.getFederatedInstances({}),
+    });
+  }
+
+  static fetchInitialData(
+    req: InitialFetchRequest
+  ): Promise<RequestState<any>>[] {
+    return [req.client.getFederatedInstances({})];
   }
 
   get documentTitle(): string {
     return `${i18n.t("instances")} - ${this.state.siteRes.site_view.site.name}`;
   }
 
-  componentWillUnmount() {
+  renderInstances() {
-    if (isBrowser()) {
+    switch (this.state.instancesRes.state) {
-      this.subscription?.unsubscribe();
+      case "loading":
+        return (
+          <h5>
+            <Spinner large />
+          </h5>
+        );
+      case "success": {
+        const instances = this.state.instancesRes.data.federated_instances;
+        return instances ? (
+          <div className="row">
+            <div className="col-md-6">
+              <h5>{i18n.t("linked_instances")}</h5>
+              {this.itemList(instances.linked)}
+            </div>
+            {instances.allowed && instances.allowed.length > 0 && (
+              <div className="col-md-6">
+                <h5>{i18n.t("allowed_instances")}</h5>
+                {this.itemList(instances.allowed)}
+              </div>
+            )}
+            {instances.blocked && instances.blocked.length > 0 && (
+              <div className="col-md-6">
+                <h5>{i18n.t("blocked_instances")}</h5>
+                {this.itemList(instances.blocked)}
+              </div>
+            )}
+          </div>
+        ) : (
+          <></>
+        );
+      }
     }
   }
 
   render() {
-    const federated_instances = this.state.instancesRes?.federated_instances;
+    return (
-    return federated_instances ? (
       <div className="container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
-        <div className="row">
+        {this.renderInstances()}
-          <div className="col-md-6">
-            <h5>{i18n.t("linked_instances")}</h5>
-            {this.itemList(federated_instances.linked)}
       </div>
-          {federated_instances.allowed &&
-            federated_instances.allowed.length > 0 && (
-              <div className="col-md-6">
-                <h5>{i18n.t("allowed_instances")}</h5>
-                {this.itemList(federated_instances.allowed)}
-              </div>
-            )}
-          {federated_instances.blocked &&
-            federated_instances.blocked.length > 0 && (
-              <div className="col-md-6">
-                <h5>{i18n.t("blocked_instances")}</h5>
-                {this.itemList(federated_instances.blocked)}
-              </div>
-            )}
-        </div>
-      </div>
-    ) : (
-      <></>
     );
   }
 
@@ -136,17 +143,4 @@ export class Instances extends Component<any, InstancesState> {
       <div>{i18n.t("none_found")}</div>
     );
   }
-  parseMessage(msg: any) {
-    const op = wsUserOp(msg);
-    console.log(msg);
-    if (msg.error) {
-      toast(i18n.t(msg.error), "danger");
-      this.context.router.history.push("/");
-      this.setState({ loading: false });
-      return;
-    } else if (op == UserOperation.GetFederatedInstances) {
-      const data = wsJsonToRes<GetFederatedInstancesResponse>(msg);
-      this.setState({ loading: false, instancesRes: data });
-    }
-  }
 }

src/shared/components/home/login.tsx

@@ -1,58 +1,35 @@
 import { Component, linkEvent } from "inferno";
-import {
+import { GetSiteResponse, LoginResponse } from "lemmy-js-client";
-  GetSiteResponse,
-  Login as LoginI,
-  LoginResponse,
-  PasswordReset,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
-} from "lemmy-js-client";
-import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
-import { UserService, WebSocketService } from "../../services";
+import { UserService } from "../../services";
-import {
+import { HttpService, RequestState } from "../../services/HttpService";
-  isBrowser,
+import { isBrowser, myAuth, setIsoData, toast, validEmail } from "../../utils";
-  setIsoData,
-  toast,
-  validEmail,
-  wsClient,
-  wsSubscribe,
-} from "../../utils";
 import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
 
 interface State {
+  loginRes: RequestState<LoginResponse>;
   form: {
     username_or_email?: string;
     password?: string;
     totp_2fa_token?: string;
   };
-  loginLoading: boolean;
   showTotp: boolean;
   siteRes: GetSiteResponse;
 }
 
 export class Login extends Component<any, State> {
   private isoData = setIsoData(this.context);
-  private subscription?: Subscription;
 
   state: State = {
+    loginRes: { state: "empty" },
     form: {},
-    loginLoading: false,
     showTotp: false,
     siteRes: this.isoData.site_res,
   };
 
   constructor(props: any, context: any) {
     super(props, context);
-
-    this.parseMessage = this.parseMessage.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
-
-    if (isBrowser()) {
-      WebSocketService.Instance.send(wsClient.getCaptcha({}));
-    }
   }
 
   componentDidMount() {
@@ -62,12 +39,6 @@ export class Login extends Component<any, State> {
     }
   }
 
-  componentWillUnmount() {
-    if (isBrowser()) {
-      this.subscription?.unsubscribe();
-    }
-  }
-
   get documentTitle(): string {
     return `${i18n.t("login")} - ${this.state.siteRes.site_view.site.name}`;
   }
@@ -169,7 +140,11 @@ export class Login extends Component<any, State> {
           <div className="form-group row">
             <div className="col-sm-10">
               <button type="submit" className="btn btn-secondary">
-                {this.state.loginLoading ? <Spinner /> : i18n.t("login")}
+                {this.state.loginRes.state == "loading" ? (
+                  <Spinner />
+                ) : (
+                  i18n.t("login")
+                )}
               </button>
             </div>
           </div>
@@ -178,20 +153,44 @@ export class Login extends Component<any, State> {
     );
   }
 
-  handleLoginSubmit(i: Login, event: any) {
+  async handleLoginSubmit(i: Login, event: any) {
     event.preventDefault();
-    i.setState({ loginLoading: true });
+    const { password, totp_2fa_token, username_or_email } = i.state.form;
-    const lForm = i.state.form;
+
-    const username_or_email = lForm.username_or_email;
-    const password = lForm.password;
-    const totp_2fa_token = lForm.totp_2fa_token;
     if (username_or_email && password) {
-      const form: LoginI = {
+      i.setState({ loginRes: { state: "loading" } });
+
+      const loginRes = await HttpService.client.login({
         username_or_email,
         password,
         totp_2fa_token,
-      };
+      });
-      WebSocketService.Instance.send(wsClient.login(form));
+      switch (loginRes.state) {
+        case "failed": {
+          if (loginRes.msg === "missing_totp_token") {
+            i.setState({ showTotp: true });
+            toast(i18n.t("enter_two_factor_code"), "info");
+          }
+
+          i.setState({ loginRes: { state: "empty" } });
+          break;
+        }
+
+        case "success": {
+          UserService.Instance.login(loginRes.data);
+          const site = await HttpService.client.getSite({
+            auth: myAuth(),
+          });
+
+          if (site.state === "success") {
+            UserService.Instance.myUserInfo = site.data.my_user;
+          }
+
+          i.props.history.replace("/");
+
+          break;
+        }
+      }
     }
   }
 
@@ -210,40 +209,13 @@ export class Login extends Component<any, State> {
     i.setState(i.state);
   }
 
-  handlePasswordReset(i: Login, event: any) {
+  async handlePasswordReset(i: Login, event: any) {
     event.preventDefault();
     const email = i.state.form.username_or_email;
     if (email) {
-      const resetForm: PasswordReset = { email };
+      const res = await HttpService.client.passwordReset({ email });
-      WebSocketService.Instance.send(wsClient.passwordReset(resetForm));
+      if (res.state == "success") {
-    }
-  }
-
-  parseMessage(msg: any) {
-    const op = wsUserOp(msg);
-    console.log(msg);
-    if (msg.error) {
-      // If the error comes back that the token is missing, show the TOTP field
-      if (msg.error == "missing_totp_token") {
-        this.setState({ showTotp: true, loginLoading: false });
-        toast(i18n.t("enter_two_factor_code"));
-        return;
-      } else {
-        toast(i18n.t(msg.error), "danger");
-        this.setState({ form: {}, loginLoading: false });
-        return;
-      }
-    } else {
-      if (op == UserOperation.Login) {
-        const data = wsJsonToRes<LoginResponse>(msg);
-        UserService.Instance.login(data);
-        this.props.history.push("/");
-        location.reload();
-      } else if (op == UserOperation.PasswordReset) {
         toast(i18n.t("reset_password_mail_sent"));
-      } else if (op == UserOperation.GetSite) {
-        const data = wsJsonToRes<GetSiteResponse>(msg);
-        this.setState({ siteRes: data });
       }
     }
   }

src/shared/components/home/rate-limit-form.tsx

@@ -1,8 +1,7 @@
 import { Component, FormEventHandler, linkEvent } from "inferno";
 import { EditSite, LocalSiteRateLimit } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { WebSocketService } from "../../services";
+import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
-import { capitalizeFirstLetter, myAuth, wsClient } from "../../utils";
 import { Spinner } from "../common/icon";
 import Tabs from "../common/tabs";
 
@@ -23,8 +22,8 @@ interface RateLimitsProps {
 }
 
 interface RateLimitFormProps {
-  localSiteRateLimit: LocalSiteRateLimit;
+  rateLimits: LocalSiteRateLimit;
-  applicationQuestion?: string;
+  onSaveSite(form: EditSite): void;
 }
 
 interface RateLimitFormState {
@@ -107,18 +106,19 @@ function handlePerSecondChange(
 
 function submitRateLimitForm(i: RateLimitsForm, event: any) {
   event.preventDefault();
-  const auth = myAuth() ?? "TODO";
+  const auth = myAuthRequired();
   const form: EditSite = Object.entries(i.state.form).reduce(
     (acc, [key, val]) => {
       acc[`rate_limit_${key}`] = val;
       return acc;
     },
-    { auth, application_question: i.props.applicationQuestion }
+    {
+      auth,
+    }
   );
 
   i.setState({ loading: true });
-
+  i.props.onSaveSite(form);
-  WebSocketService.Instance.send(wsClient.editSite(form));
 }
 
 export default class RateLimitsForm extends Component<
@@ -127,43 +127,10 @@ export default class RateLimitsForm extends Component<
 > {
   state: RateLimitFormState = {
     loading: false,
-    form: {},
+    form: this.props.rateLimits,
   };
-  constructor(props: RateLimitFormProps, context) {
+  constructor(props: RateLimitFormProps, context: any) {
     super(props, context);
-
-    const {
-      comment,
-      comment_per_second,
-      image,
-      image_per_second,
-      message,
-      message_per_second,
-      post,
-      post_per_second,
-      register,
-      register_per_second,
-      search,
-      search_per_second,
-    } = props.localSiteRateLimit;
-
-    this.state = {
-      ...this.state,
-      form: {
-        comment,
-        comment_per_second,
-        image,
-        image_per_second,
-        message,
-        message_per_second,
-        post,
-        post_per_second,
-        register,
-        register_per_second,
-        search,
-        search_per_second,
-      },
-    };
   }
 
   render() {
@@ -210,15 +177,4 @@ export default class RateLimitsForm extends Component<
       </form>
     );
   }
-
-  componentDidUpdate({ localSiteRateLimit }: RateLimitFormProps) {
-    if (
-      this.state.loading &&
-      Object.entries(localSiteRateLimit).some(
-        ([key, val]) => this.state.form[key] !== val
-      )
-    ) {
-      this.setState({ loading: false });
-    }
-  }
 }

src/shared/components/home/setup.tsx

@@ -1,18 +1,15 @@
 import { Component, linkEvent } from "inferno";
 import { Helmet } from "inferno-helmet";
 import {
+  CreateSite,
   GetSiteResponse,
   LoginResponse,
   Register,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
 } from "lemmy-js-client";
-import { Subscription } from "rxjs";
-import { delay, retryWhen, take } from "rxjs/operators";
 import { i18n } from "../../i18next";
-import { UserService, WebSocketService } from "../../services";
+import { UserService } from "../../services";
-import { setIsoData, toast, wsClient } from "../../utils";
+import { HttpService, RequestState } from "../../services/HttpService";
+import { fetchThemeList, setIsoData } from "../../utils";
 import { Spinner } from "../common/icon";
 import { SiteForm } from "./site-form";
 
@@ -29,37 +26,32 @@ interface State {
     answer?: string;
   };
   doneRegisteringUser: boolean;
-  userLoading: boolean;
+  registerRes: RequestState<LoginResponse>;
+  themeList: string[];
   siteRes: GetSiteResponse;
 }
 
 export class Setup extends Component<any, State> {
-  private subscription: Subscription;
   private isoData = setIsoData(this.context);
 
   state: State = {
+    registerRes: { state: "empty" },
+    themeList: [],
     form: {
       show_nsfw: true,
     },
     doneRegisteringUser: !!UserService.Instance.myUserInfo,
-    userLoading: false,
     siteRes: this.isoData.site_res,
   };
 
   constructor(props: any, context: any) {
     super(props, context);
 
-    this.subscription = WebSocketService.Instance.subject
+    this.handleCreateSite = this.handleCreateSite.bind(this);
-      .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
-      .subscribe(
-        msg => this.parseMessage(msg),
-        err => console.error(err),
-        () => console.log("complete")
-      );
   }
 
-  componentWillUnmount() {
+  async componentDidMount() {
-    this.subscription.unsubscribe();
+    this.setState({ themeList: await fetchThemeList() });
   }
 
   get documentTitle(): string {
@@ -76,7 +68,12 @@ export class Setup extends Component<any, State> {
             {!this.state.doneRegisteringUser ? (
               this.registerUser()
             ) : (
-              <SiteForm siteRes={this.state.siteRes} showLocal />
+              <SiteForm
+                showLocal
+                onSaveSite={this.handleCreateSite}
+                siteRes={this.state.siteRes}
+                themeList={this.state.themeList}
+              />
             )}
           </div>
         </div>
@@ -161,7 +158,11 @@ export class Setup extends Component<any, State> {
         <div className="form-group row">
           <div className="col-sm-10">
             <button type="submit" className="btn btn-secondary">
-              {this.state.userLoading ? <Spinner /> : i18n.t("sign_up")}
+              {this.state.registerRes.state == "loading" ? (
+                <Spinner />
+              ) : (
+                i18n.t("sign_up")
+              )}
             </button>
           </div>
         </div>
@@ -169,24 +170,53 @@ export class Setup extends Component<any, State> {
     );
   }
 
-  handleRegisterSubmit(i: Setup, event: any) {
+  async handleRegisterSubmit(i: Setup, event: any) {
     event.preventDefault();
-    i.setState({ userLoading: true });
+    i.setState({ registerRes: { state: "loading" } });
-    event.preventDefault();
+    const {
-    const cForm = i.state.form;
+      username,
-    if (cForm.username && cForm.password && cForm.password_verify) {
+      password_verify,
+      password,
+      email,
+      show_nsfw,
+      captcha_uuid,
+      captcha_answer,
+      honeypot,
+      answer,
+    } = i.state.form;
+
+    if (username && password && password_verify) {
       const form: Register = {
-        username: cForm.username,
+        username,
-        password: cForm.password,
+        password,
-        password_verify: cForm.password_verify,
+        password_verify,
-        email: cForm.email,
+        email,
-        show_nsfw: cForm.show_nsfw,
+        show_nsfw,
-        captcha_uuid: cForm.captcha_uuid,
+        captcha_uuid,
-        captcha_answer: cForm.captcha_answer,
+        captcha_answer,
-        honeypot: cForm.honeypot,
+        honeypot,
-        answer: cForm.answer,
+        answer,
       };
-      WebSocketService.Instance.send(wsClient.register(form));
+      i.setState({
+        registerRes: await HttpService.client.register(form),
+      });
+
+      if (i.state.registerRes.state == "success") {
+        const data = i.state.registerRes.data;
+
+        UserService.Instance.login(data);
+        if (UserService.Instance.jwtInfo) {
+          i.setState({ doneRegisteringUser: true });
+        }
+      }
+    }
+  }
+
+  async handleCreateSite(form: CreateSite) {
+    const createRes = await HttpService.client.createSite(form);
+    if (createRes.state === "success") {
+      this.props.history.replace("/");
+      location.reload();
     }
   }
 
@@ -209,22 +239,4 @@ export class Setup extends Component<any, State> {
     i.state.form.password_verify = event.target.value;
     i.setState(i.state);
   }
-
-  parseMessage(msg: any) {
-    const op = wsUserOp(msg);
-    if (msg.error) {
-      toast(i18n.t(msg.error), "danger");
-      this.setState({ userLoading: false });
-      return;
-    } else if (op == UserOperation.Register) {
-      const data = wsJsonToRes<LoginResponse>(msg);
-      this.setState({ userLoading: false });
-      UserService.Instance.login(data);
-      if (UserService.Instance.jwtInfo) {
-        this.setState({ doneRegisteringUser: true });
-      }
-    } else if (op == UserOperation.CreateSite) {
-      window.location.href = "/";
-    }
-  }
 }

src/shared/components/home/signup.tsx

@@ -7,24 +7,19 @@ import {
   GetCaptchaResponse,
   GetSiteResponse,
   LoginResponse,
-  Register,
   SiteView,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
 } from "lemmy-js-client";
-import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
-import { UserService, WebSocketService } from "../../services";
+import { UserService } from "../../services";
+import { HttpService, RequestState } from "../../services/HttpService";
 import {
   isBrowser,
   joinLemmyUrl,
   mdToHtml,
+  myAuth,
   setIsoData,
   toast,
   validEmail,
-  wsClient,
-  wsSubscribe,
 } from "../../utils";
 import { HtmlTags } from "../common/html-tags";
 import { Icon, Spinner } from "../common/icon";
@@ -58,6 +53,8 @@ const passwordStrengthOptions: Options<string> = [
 ];
 
 interface State {
+  registerRes: RequestState<LoginResponse>;
+  captchaRes: RequestState<GetCaptchaResponse>;
   form: {
     username?: string;
     email?: string;
@@ -69,22 +66,20 @@ interface State {
     honeypot?: string;
     answer?: string;
   };
-  registerLoading: boolean;
-  captcha?: GetCaptchaResponse;
   captchaPlaying: boolean;
   siteRes: GetSiteResponse;
 }
 
 export class Signup extends Component<any, State> {
   private isoData = setIsoData(this.context);
-  private subscription?: Subscription;
   private audio?: HTMLAudioElement;
 
   state: State = {
+    registerRes: { state: "empty" },
+    captchaRes: { state: "empty" },
     form: {
       show_nsfw: false,
     },
-    registerLoading: false,
     captchaPlaying: false,
     siteRes: this.isoData.site_res,
   };
@@ -93,19 +88,26 @@ export class Signup extends Component<any, State> {
     super(props, context);
 
     this.handleAnswerChange = this.handleAnswerChange.bind(this);
+  }
 
-    this.parseMessage = this.parseMessage.bind(this);
+  async componentDidMount() {
-    this.subscription = wsSubscribe(this.parseMessage);
+    if (this.state.siteRes.site_view.local_site.captcha_enabled) {
-
+      await this.fetchCaptcha();
-    if (isBrowser()) {
-      WebSocketService.Instance.send(wsClient.getCaptcha({}));
     }
   }
 
-  componentWillUnmount() {
+  async fetchCaptcha() {
-    if (isBrowser()) {
+    this.setState({ captchaRes: { state: "loading" } });
-      this.subscription?.unsubscribe();
+    this.setState({
+      captchaRes: await HttpService.client.getCaptcha({}),
+    });
+
+    this.setState(s => {
+      if (s.captchaRes.state == "success") {
+        s.form.captcha_uuid = s.captchaRes.data.ok?.uuid;
       }
+      return s;
+    });
   }
 
   get documentTitle(): string {
@@ -285,6 +287,7 @@ export class Signup extends Component<any, State> {
               </label>
               <div className="col-sm-10">
                 <MarkdownTextArea
+                  initialContent=""
                   onContentChange={this.handleAnswerChange}
                   hideNavigationWarnings
                   allLanguages={[]}
@@ -294,36 +297,7 @@ export class Signup extends Component<any, State> {
             </div>
           </>
         )}
-
+        {this.renderCaptcha()}
-        {this.state.captcha && (
-          <div className="form-group row">
-            <label className="col-sm-2" htmlFor="register-captcha">
-              <span className="mr-2">{i18n.t("enter_code")}</span>
-              <button
-                type="button"
-                className="btn btn-secondary"
-                onClick={linkEvent(this, this.handleRegenCaptcha)}
-                aria-label={i18n.t("captcha")}
-              >
-                <Icon icon="refresh-cw" classes="icon-refresh-cw" />
-              </button>
-            </label>
-            {this.showCaptcha()}
-            <div className="col-sm-6">
-              <input
-                type="text"
-                className="form-control"
-                id="register-captcha"
-                value={this.state.form.captcha_answer}
-                onInput={linkEvent(
-                  this,
-                  this.handleRegisterCaptchaAnswerChange
-                )}
-                required
-              />
-            </div>
-          </div>
-        )}
         {siteView.local_site.enable_nsfw && (
           <div className="form-group row">
             <div className="col-sm-10">
@@ -358,7 +332,7 @@ export class Signup extends Component<any, State> {
         <div className="form-group row">
           <div className="col-sm-10">
             <button type="submit" className="btn btn-secondary">
-              {this.state.registerLoading ? (
+              {this.state.registerRes.state == "loading" ? (
                 <Spinner />
               ) : (
                 this.titleName(siteView)
@@ -370,8 +344,47 @@ export class Signup extends Component<any, State> {
     );
   }
 
-  showCaptcha() {
+  renderCaptcha() {
-    const captchaRes = this.state.captcha?.ok;
+    switch (this.state.captchaRes.state) {
+      case "loading":
+        return <Spinner />;
+      case "success": {
+        const res = this.state.captchaRes.data;
+        return (
+          <div className="form-group row">
+            <label className="col-sm-2" htmlFor="register-captcha">
+              <span className="mr-2">{i18n.t("enter_code")}</span>
+              <button
+                type="button"
+                className="btn btn-secondary"
+                onClick={linkEvent(this, this.handleRegenCaptcha)}
+                aria-label={i18n.t("captcha")}
+              >
+                <Icon icon="refresh-cw" classes="icon-refresh-cw" />
+              </button>
+            </label>
+            {this.showCaptcha(res)}
+            <div className="col-sm-6">
+              <input
+                type="text"
+                className="form-control"
+                id="register-captcha"
+                value={this.state.form.captcha_answer}
+                onInput={linkEvent(
+                  this,
+                  this.handleRegisterCaptchaAnswerChange
+                )}
+                required
+              />
+            </div>
+          </div>
+        );
+      }
+    }
+  }
+
+  showCaptcha(res: GetCaptchaResponse) {
+    const captchaRes = res?.ok;
     return captchaRes ? (
       <div className="col-sm-4">
         <>
@@ -419,23 +432,66 @@ export class Signup extends Component<any, State> {
     }
   }
 
-  handleRegisterSubmit(i: Signup, event: any) {
+  async handleRegisterSubmit(i: Signup, event: any) {
     event.preventDefault();
-    i.setState({ registerLoading: true });
+    const {
-    const cForm = i.state.form;
+      show_nsfw,
-    if (cForm.username && cForm.password && cForm.password_verify) {
+      answer,
-      const form: Register = {
+      captcha_answer,
-        username: cForm.username,
+      captcha_uuid,
-        password: cForm.password,
+      email,
-        password_verify: cForm.password_verify,
+      honeypot,
-        email: cForm.email,
+      password,
-        show_nsfw: cForm.show_nsfw,
+      password_verify,
-        captcha_uuid: cForm.captcha_uuid,
+      username,
-        captcha_answer: cForm.captcha_answer,
+    } = i.state.form;
-        honeypot: cForm.honeypot,
+    if (username && password && password_verify) {
-        answer: cForm.answer,
+      i.setState({ registerRes: { state: "loading" } });
-      };
+
-      WebSocketService.Instance.send(wsClient.register(form));
+      const registerRes = await HttpService.client.register({
+        username,
+        password,
+        password_verify,
+        email,
+        show_nsfw,
+        captcha_uuid,
+        captcha_answer,
+        honeypot,
+        answer,
+      });
+      switch (registerRes.state) {
+        case "failed": {
+          toast(registerRes.msg, "danger");
+          i.setState({ registerRes: { state: "empty" } });
+          break;
+        }
+
+        case "success": {
+          const data = registerRes.data;
+
+          // Only log them in if a jwt was set
+          if (data.jwt) {
+            UserService.Instance.login(data);
+
+            const site = await HttpService.client.getSite({ auth: myAuth() });
+
+            if (site.state === "success") {
+              UserService.Instance.myUserInfo = site.data.my_user;
+            }
+
+            i.props.history.replace("/communities");
+          } else {
+            if (data.verify_email_sent) {
+              toast(i18n.t("verify_email_sent"));
+            }
+            if (data.registration_created) {
+              toast(i18n.t("registration_application_sent"));
+            }
+            i.props.history.push("/");
+          }
+          break;
+        }
+      }
     }
   }
 
@@ -481,17 +537,18 @@ export class Signup extends Component<any, State> {
     i.setState(i.state);
   }
 
-  handleRegenCaptcha(i: Signup) {
+  async handleRegenCaptcha(i: Signup) {
     i.audio = undefined;
     i.setState({ captchaPlaying: false });
-    WebSocketService.Instance.send(wsClient.getCaptcha({}));
+    await i.fetchCaptcha();
   }
 
   handleCaptchaPlay(i: Signup) {
     // This was a bad bug, it should only build the new audio on a new file.
     // Replays would stop prematurely if this was rebuilt every time.
-    const captchaRes = i.state.captcha?.ok;
+
-    if (captchaRes) {
+    if (i.state.captchaRes.state == "success" && i.state.captchaRes.data.ok) {
+      const captchaRes = i.state.captchaRes.data.ok;
       if (!i.audio) {
         const base64 = `data:audio/wav;base64,${captchaRes.wav}`;
         i.audio = new Audio(base64);
@@ -512,45 +569,4 @@ export class Signup extends Component<any, State> {
   captchaPngSrc(captcha: CaptchaResponse) {
     return `data:image/png;base64,${captcha.png}`;
   }
-
-  parseMessage(msg: any) {
-    const op = wsUserOp(msg);
-    console.log(msg);
-    if (msg.error) {
-      toast(i18n.t(msg.error), "danger");
-      this.setState(s => ((s.form.captcha_answer = undefined), s));
-      // Refetch another captcha
-      // WebSocketService.Instance.send(wsClient.getCaptcha());
-      return;
-    } else {
-      if (op == UserOperation.Register) {
-        const data = wsJsonToRes<LoginResponse>(msg);
-        // Only log them in if a jwt was set
-        if (data.jwt) {
-          UserService.Instance.login(data);
-          this.props.history.push("/communities");
-          location.reload();
-        } else {
-          if (data.verify_email_sent) {
-            toast(i18n.t("verify_email_sent"));
-          }
-          if (data.registration_created) {
-            toast(i18n.t("registration_application_sent"));
-          }
-          this.props.history.push("/");
-        }
-      } else if (op == UserOperation.GetCaptcha) {
-        const data = wsJsonToRes<GetCaptchaResponse>(msg);
-        if (data.ok) {
-          this.setState({ captcha: data });
-          this.setState(s => ((s.form.captcha_uuid = data.ok?.uuid), s));
-        }
-      } else if (op == UserOperation.PasswordReset) {
-        toast(i18n.t("reset_password_mail_sent"));
-      } else if (op == UserOperation.GetSite) {
-        const data = wsJsonToRes<GetSiteResponse>(msg);
-        this.setState({ siteRes: data });
-      }
-    }
-  }
 }

src/shared/components/home/site-form.tsx

@@ -7,18 +7,12 @@ import {
 import {
   CreateSite,
   EditSite,
-  GetFederatedInstancesResponse,
   GetSiteResponse,
+  Instance,
   ListingType,
 } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { WebSocketService } from "../../services";
+import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
-import {
-  capitalizeFirstLetter,
-  fetchThemeList,
-  myAuth,
-  wsClient,
-} from "../../utils";
 import { Icon, Spinner } from "../common/icon";
 import { ImageUploadForm } from "../common/image-upload-form";
 import { LanguageSelect } from "../common/language-select";
@@ -27,60 +21,41 @@ import { MarkdownTextArea } from "../common/markdown-textarea";
 import NavigationPrompt from "../common/navigation-prompt";
 
 interface SiteFormProps {
-  siteRes: GetSiteResponse;
+  blockedInstances?: Instance[];
-  instancesRes?: GetFederatedInstancesResponse;
+  allowedInstances?: Instance[];
   showLocal?: boolean;
+  themeList?: string[];
+  onSaveSite(form: EditSite): void;
+  siteRes: GetSiteResponse;
 }
 
 interface SiteFormState {
   siteForm: EditSite;
   loading: boolean;
-  themeList?: string[];
   instance_select: {
     allowed_instances: string;
     blocked_instances: string;
   };
+  submitted: boolean;
 }
 
 type InstanceKey = "allowed_instances" | "blocked_instances";
 
 export class SiteForm extends Component<SiteFormProps, SiteFormState> {
   state: SiteFormState = {
-    siteForm: {
+    siteForm: this.initSiteForm(),
-      auth: "TODO",
-    },
     loading: false,
     instance_select: {
       allowed_instances: "",
       blocked_instances: "",
     },
+    submitted: false,
   };
 
-  constructor(props: any, context: any) {
+  initSiteForm(): EditSite {
-    super(props, context);
-
-    this.handleSiteSidebarChange = this.handleSiteSidebarChange.bind(this);
-    this.handleSiteLegalInfoChange = this.handleSiteLegalInfoChange.bind(this);
-    this.handleSiteApplicationQuestionChange =
-      this.handleSiteApplicationQuestionChange.bind(this);
-
-    this.handleIconUpload = this.handleIconUpload.bind(this);
-    this.handleIconRemove = this.handleIconRemove.bind(this);
-
-    this.handleBannerUpload = this.handleBannerUpload.bind(this);
-    this.handleBannerRemove = this.handleBannerRemove.bind(this);
-
-    this.handleDefaultPostListingTypeChange =
-      this.handleDefaultPostListingTypeChange.bind(this);
-
-    this.handleDiscussionLanguageChange =
-      this.handleDiscussionLanguageChange.bind(this);
-
     const site = this.props.siteRes.site_view.site;
     const ls = this.props.siteRes.site_view.local_site;
-    this.state = {
+    return {
-      ...this.state,
-      siteForm: {
       name: site.name,
       sidebar: site.sidebar,
       description: site.description,
@@ -107,21 +82,34 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
       federation_worker_count: ls.federation_worker_count,
       captcha_enabled: ls.captcha_enabled,
       captcha_difficulty: ls.captcha_difficulty,
-        allowed_instances:
+      allowed_instances: this.props.allowedInstances?.map(i => i.domain),
-          this.props.instancesRes?.federated_instances?.allowed.map(
+      blocked_instances: this.props.blockedInstances?.map(i => i.domain),
-            i => i.domain
-          ),
-        blocked_instances:
-          this.props.instancesRes?.federated_instances?.blocked.map(
-            i => i.domain
-          ),
       auth: "TODO",
-      },
     };
   }
 
-  async componentDidMount() {
+  constructor(props: any, context: any) {
-    this.setState({ themeList: await fetchThemeList() });
+    super(props, context);
+
+    this.handleSiteSidebarChange = this.handleSiteSidebarChange.bind(this);
+    this.handleSiteLegalInfoChange = this.handleSiteLegalInfoChange.bind(this);
+    this.handleSiteApplicationQuestionChange =
+      this.handleSiteApplicationQuestionChange.bind(this);
+
+    this.handleIconUpload = this.handleIconUpload.bind(this);
+    this.handleIconRemove = this.handleIconRemove.bind(this);
+
+    this.handleBannerUpload = this.handleBannerUpload.bind(this);
+    this.handleBannerRemove = this.handleBannerRemove.bind(this);
+
+    this.handleDefaultPostListingTypeChange =
+      this.handleDefaultPostListingTypeChange.bind(this);
+
+    this.handleDiscussionLanguageChange =
+      this.handleDiscussionLanguageChange.bind(this);
+    this.handleAddInstance = this.handleAddInstance.bind(this);
+    this.handleInstanceEnterPress = this.handleInstanceEnterPress.bind(this);
+    this.handleInstanceTextChange = this.handleInstanceTextChange.bind(this);
   }
 
   // Necessary to stop the loading
@@ -129,29 +117,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
     this.setState({ loading: false });
   }
 
-  componentDidUpdate() {
-    if (
-      !this.state.loading &&
-      !this.props.siteRes.site_view.local_site.site_setup &&
-      (this.state.siteForm.name ||
-        this.state.siteForm.sidebar ||
-        this.state.siteForm.application_question ||
-        this.state.siteForm.description)
-    ) {
-      window.onbeforeunload = () => true;
-    } else {
-      window.onbeforeunload = null;
-    }
-  }
-
-  componentWillUnmount() {
-    window.onbeforeunload = null;
-  }
-
   render() {
     const siteSetup = this.props.siteRes.site_view.local_site.site_setup;
     return (
-      <>
+      <form onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}>
         <NavigationPrompt
           when={
             !this.state.loading &&
@@ -161,10 +130,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
               this.state.siteForm.sidebar ||
               this.state.siteForm.application_question ||
               this.state.siteForm.description
-            )
+            ) &&
+            !this.state.submitted
           }
         />
-        <form onSubmit={linkEvent(this, this.handleCreateSiteSubmit)}>
         <h5>{`${
           siteSetup
             ? capitalizeFirstLetter(i18n.t("save"))
@@ -255,10 +224,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                 id="create-site-downvotes"
                 type="checkbox"
                 checked={this.state.siteForm.enable_downvotes}
-                  onChange={linkEvent(
+                onChange={linkEvent(this, this.handleSiteEnableDownvotesChange)}
-                    this,
-                    this.handleSiteEnableDownvotesChange
-                  )}
               />
               <label
                 className="form-check-label"
@@ -299,10 +265,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             <select
               id="create-site-registration-mode"
               value={this.state.siteForm.registration_mode}
-                onChange={linkEvent(
+              onChange={linkEvent(this, this.handleSiteRegistrationModeChange)}
-                  this,
-                  this.handleSiteRegistrationModeChange
-                )}
               className="custom-select w-auto"
             >
               <option value={"RequireApplication"}>
@@ -429,7 +392,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
               className="custom-select w-auto"
             >
               <option value="browser">{i18n.t("browser_default")}</option>
-                {this.state.themeList?.map(theme => (
+              {this.props.themeList?.map(theme => (
                 <option key={theme} value={theme}>
                   {theme}
                 </option>
@@ -442,9 +405,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             <label className="col-sm-3">{i18n.t("listing_type")}</label>
             <div className="col-sm-9">
               <ListingTypeSelect
-                  type_={
+                type_={this.state.siteForm.default_post_listing_type ?? "Local"}
-                    this.state.siteForm.default_post_listing_type ?? "Local"
-                  }
                 showLocal
                 showSubscribed={false}
                 onChange={this.handleDefaultPostListingTypeChange}
@@ -661,7 +622,6 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
           </div>
         </div>
       </form>
-      </>
     );
   }
 
@@ -688,11 +648,15 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             type="button"
             className="btn btn-sm bg-success ml-2"
             onClick={linkEvent(key, this.handleAddInstance)}
+            style={"width: 2rem; height: 2rem;"}
             tabIndex={
               -1 /* Making this untabble because handling enter key in text input makes keyboard support for this button redundant */
             }
           >
-            <Icon icon="add" classes="icon-inline text-light m-auto" />
+            <Icon
+              icon="add"
+              classes="icon-inline text-light m-auto d-block position-static"
+            />
           </button>
         </div>
         {selectedInstances && selectedInstances.length > 0 && (
@@ -708,13 +672,17 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                 <button
                   id={instance}
                   type="button"
+                  style={"width: 2rem; height: 2rem;"}
                   className="btn btn-sm bg-danger"
                   onClick={linkEvent(
                     { key, instance },
                     this.handleRemoveInstance
                   )}
                 >
-                  <Icon icon="x" classes="icon-inline text-light m-auto" />
+                  <Icon
+                    icon="x"
+                    classes="icon-inline text-light m-auto d-block position-static"
+                  />
                 </button>
               </li>
             ))}
@@ -745,48 +713,69 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
     }
   }
 
-  handleCreateSiteSubmit(i: SiteForm, event: any) {
+  handleSaveSiteSubmit(i: SiteForm, event: any) {
     event.preventDefault();
-    i.setState({ loading: true });
+    const auth = myAuthRequired();
-    const auth = myAuth() ?? "TODO";
     i.setState(s => ((s.siteForm.auth = auth), s));
+    i.setState({ loading: true, submitted: true });
+
+    const stateSiteForm = i.state.siteForm;
+
+    let form: EditSite | CreateSite;
+
     if (i.props.siteRes.site_view.local_site.site_setup) {
-      WebSocketService.Instance.send(wsClient.editSite(i.state.siteForm));
+      form = stateSiteForm;
     } else {
-      const sForm = i.state.siteForm;
+      form = {
-      const form: CreateSite = {
+        name: stateSiteForm.name ?? "My site",
-        name: sForm.name ?? "My site",
+        sidebar: stateSiteForm.sidebar,
-        sidebar: sForm.sidebar,
+        description: stateSiteForm.description,
-        description: sForm.description,
+        icon: stateSiteForm.icon,
-        icon: sForm.icon,
+        banner: stateSiteForm.banner,
-        banner: sForm.banner,
+        community_creation_admin_only:
-        community_creation_admin_only: sForm.community_creation_admin_only,
+          stateSiteForm.community_creation_admin_only,
-        enable_nsfw: sForm.enable_nsfw,
+        enable_nsfw: stateSiteForm.enable_nsfw,
-        enable_downvotes: sForm.enable_downvotes,
+        enable_downvotes: stateSiteForm.enable_downvotes,
-        application_question: sForm.application_question,
+        application_question: stateSiteForm.application_question,
-        registration_mode: sForm.registration_mode,
+        registration_mode: stateSiteForm.registration_mode,
-        require_email_verification: sForm.require_email_verification,
+        require_email_verification: stateSiteForm.require_email_verification,
-        private_instance: sForm.private_instance,
+        private_instance: stateSiteForm.private_instance,
-        default_theme: sForm.default_theme,
+        default_theme: stateSiteForm.default_theme,
-        default_post_listing_type: sForm.default_post_listing_type,
+        default_post_listing_type: stateSiteForm.default_post_listing_type,
-        application_email_admins: sForm.application_email_admins,
+        application_email_admins: stateSiteForm.application_email_admins,
-        hide_modlog_mod_names: sForm.hide_modlog_mod_names,
+        hide_modlog_mod_names: stateSiteForm.hide_modlog_mod_names,
-        legal_information: sForm.legal_information,
+        legal_information: stateSiteForm.legal_information,
-        slur_filter_regex: sForm.slur_filter_regex,
+        slur_filter_regex: stateSiteForm.slur_filter_regex,
-        actor_name_max_length: sForm.actor_name_max_length,
+        actor_name_max_length: stateSiteForm.actor_name_max_length,
-        federation_enabled: sForm.federation_enabled,
+        rate_limit_message: stateSiteForm.rate_limit_message,
-        federation_debug: sForm.federation_debug,
+        rate_limit_message_per_second:
-        federation_worker_count: sForm.federation_worker_count,
+          stateSiteForm.rate_limit_message_per_second,
-        captcha_enabled: sForm.captcha_enabled,
+        rate_limit_comment: stateSiteForm.rate_limit_comment,
-        captcha_difficulty: sForm.captcha_difficulty,
+        rate_limit_comment_per_second:
-        allowed_instances: sForm.allowed_instances,
+          stateSiteForm.rate_limit_comment_per_second,
-        blocked_instances: sForm.blocked_instances,
+        rate_limit_image: stateSiteForm.rate_limit_image,
-        discussion_languages: sForm.discussion_languages,
+        rate_limit_image_per_second: stateSiteForm.rate_limit_image_per_second,
+        rate_limit_post: stateSiteForm.rate_limit_post,
+        rate_limit_post_per_second: stateSiteForm.rate_limit_post_per_second,
+        rate_limit_register: stateSiteForm.rate_limit_register,
+        rate_limit_register_per_second:
+          stateSiteForm.rate_limit_register_per_second,
+        rate_limit_search: stateSiteForm.rate_limit_search,
+        rate_limit_search_per_second:
+          stateSiteForm.rate_limit_search_per_second,
+        federation_enabled: stateSiteForm.federation_enabled,
+        federation_debug: stateSiteForm.federation_debug,
+        federation_worker_count: stateSiteForm.federation_worker_count,
+        captcha_enabled: stateSiteForm.captcha_enabled,
+        captcha_difficulty: stateSiteForm.captcha_difficulty,
+        allowed_instances: stateSiteForm.allowed_instances,
+        blocked_instances: stateSiteForm.blocked_instances,
+        discussion_languages: stateSiteForm.discussion_languages,
         auth,
       };
-      WebSocketService.Instance.send(wsClient.createSite(form));
     }
-    i.setState(i.state);
+
+    i.props.onSaveSite(form);
   }
 
   handleAddInstance(key: InstanceKey) {

src/shared/components/home/tagline-form.tsx

@@ -1,19 +1,18 @@
 import { Component, InfernoMouseEvent, linkEvent } from "inferno";
-import { EditSite, GetSiteResponse } from "lemmy-js-client";
+import { EditSite, Tagline } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { WebSocketService } from "../../services";
+import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
-import { capitalizeFirstLetter, myAuth, wsClient } from "../../utils";
 import { HtmlTags } from "../common/html-tags";
 import { Icon, Spinner } from "../common/icon";
 import { MarkdownTextArea } from "../common/markdown-textarea";
 
 interface TaglineFormProps {
-  siteRes: GetSiteResponse;
+  taglines: Array<Tagline>;
+  onSaveSite(form: EditSite): void;
 }
 
 interface TaglineFormState {
-  siteRes: GetSiteResponse;
+  taglines: Array<string>;
-  siteForm: EditSite;
   loading: boolean;
   editingRow?: number;
 }
@@ -21,12 +20,8 @@ interface TaglineFormState {
 export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
   state: TaglineFormState = {
     loading: false,
-    siteRes: this.props.siteRes,
     editingRow: undefined,
-    siteForm: {
+    taglines: this.props.taglines.map(x => x.content),
-      taglines: this.props.siteRes.taglines?.map(x => x.content),
-      auth: "TODO",
-    },
   };
   constructor(props: any, context: any) {
     super(props, context);
@@ -54,7 +49,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
               <th style="width:121px"></th>
             </thead>
             <tbody>
-              {this.state.siteForm.taglines?.map((cv, index) => (
+              {this.state.taglines.map((cv, index) => (
                 <tr key={index}>
                   <td>
                     {this.state.editingRow == index && (
@@ -64,8 +59,8 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
                           this.handleTaglineChange(this, index, s)
                         }
                         hideNavigationWarnings
-                        allLanguages={this.state.siteRes.all_languages}
+                        allLanguages={[]}
-                        siteLanguages={this.state.siteRes.discussion_languages}
+                        siteLanguages={[]}
                       />
                     )}
                     {this.state.editingRow != index && <div>{cv}</div>}
@@ -74,7 +69,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
                     <button
                       className="btn btn-link btn-animate text-muted"
                       onClick={linkEvent(
-                        { form: this, index: index },
+                        { i: this, index: index },
                         this.handleEditTaglineClick
                       )}
                       data-tippy-content={i18n.t("edit")}
@@ -86,7 +81,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
                     <button
                       className="btn btn-link btn-animate text-muted"
                       onClick={linkEvent(
-                        { form: this, index: index },
+                        { i: this, index: index },
                         this.handleDeleteTaglineClick
                       )}
                       data-tippy-content={i18n.t("delete")}
@@ -131,46 +126,38 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
   }
 
   handleTaglineChange(i: TaglineForm, index: number, val: string) {
-    const taglines = i.state.siteForm.taglines;
+    if (i.state.taglines) {
-    if (taglines) {
+      i.setState(prev => ({
-      taglines[index] = val;
+        ...prev,
-      i.setState(i.state);
+        taglines: prev.taglines.map((tl, i) => (i === index ? val : tl)),
+      }));
     }
   }
 
-  handleDeleteTaglineClick(
+  handleDeleteTaglineClick(d: { i: TaglineForm; index: number }, event: any) {
-    props: { form: TaglineForm; index: number },
-    event: any
-  ) {
     event.preventDefault();
-    const taglines = props.form.state.siteForm.taglines;
+    d.i.setState(prev => ({
-    if (taglines) {
+      ...prev,
-      taglines.splice(props.index, 1);
+      taglines: prev.taglines.filter((_, i) => i !== d.index),
-      props.form.state.siteForm.taglines = undefined;
+      editingRow: undefined,
-      props.form.setState(props.form.state);
+    }));
-      props.form.state.siteForm.taglines = taglines;
-      props.form.setState({ ...props.form.state, editingRow: undefined });
-    }
   }
 
-  handleEditTaglineClick(
+  handleEditTaglineClick(d: { i: TaglineForm; index: number }, event: any) {
-    props: { form: TaglineForm; index: number },
-    event: any
-  ) {
     event.preventDefault();
-    if (this.state.editingRow == props.index) {
+    if (this.state.editingRow == d.index) {
-      props.form.setState({ editingRow: undefined });
+      d.i.setState({ editingRow: undefined });
     } else {
-      props.form.setState({ editingRow: props.index });
+      d.i.setState({ editingRow: d.index });
     }
   }
 
-  handleSaveClick(i: TaglineForm) {
+  async handleSaveClick(i: TaglineForm) {
     i.setState({ loading: true });
-    const auth = myAuth() ?? "TODO";
+    i.props.onSaveSite({
-    i.setState(s => ((s.siteForm.auth = auth), s));
+      taglines: i.state.taglines,
-    WebSocketService.Instance.send(wsClient.editSite(i.state.siteForm));
+      auth: myAuthRequired(),
-    i.setState({ ...i.state, editingRow: undefined });
+    });
   }
 
   handleAddTaglineClick(
@@ -178,13 +165,12 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
     event: InfernoMouseEvent<HTMLButtonElement>
   ) {
     event.preventDefault();
-    if (!i.state.siteForm.taglines) {
+    const newTaglines = [...i.state.taglines];
-      i.state.siteForm.taglines = [];
+    newTaglines.push("");
-    }
+
-    i.state.siteForm.taglines.push("");
     i.setState({
-      ...i.state,
+      taglines: newTaglines,
-      editingRow: i.state.siteForm.taglines.length - 1,
+      editingRow: newTaglines.length - 1,
     });
   }
 }

src/shared/components/modlog.tsx

@@ -8,13 +8,11 @@ import {
   AdminPurgeCommunityView,
   AdminPurgePersonView,
   AdminPurgePostView,
-  CommunityModeratorView,
   GetCommunity,
   GetCommunityResponse,
   GetModlog,
   GetModlogResponse,
   GetPersonDetails,
-  GetPersonDetailsResponse,
   ModAddCommunityView,
   ModAddView,
   ModBanFromCommunityView,
@@ -27,15 +25,12 @@ import {
   ModTransferCommunityView,
   ModlogActionType,
   Person,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
 } from "lemmy-js-client";
 import moment from "moment";
-import { Subscription } from "rxjs";
 import { i18n } from "../i18next";
 import { InitialFetchRequest } from "../interfaces";
-import { WebSocketService } from "../services";
+import { FirstLoadService } from "../services/FirstLoadService";
+import { HttpService, RequestState } from "../services/HttpService";
 import {
   Choice,
   QueryParams,
@@ -49,13 +44,9 @@ import {
   getQueryParams,
   getQueryString,
   getUpdatedSearchId,
-  isBrowser,
   myAuth,
   personToChoice,
   setIsoData,
-  toast,
-  wsClient,
-  wsSubscribe,
 } from "../utils";
 import { HtmlTags } from "./common/html-tags";
 import { Icon, Spinner } from "./common/icon";
@@ -100,10 +91,8 @@ const getModlogQueryParams = () =>
   });
 
 interface ModlogState {
-  res?: GetModlogResponse;
+  res: RequestState<GetModlogResponse>;
-  communityMods?: CommunityModeratorView[];
+  communityRes: RequestState<GetCommunityResponse>;
-  communityName?: string;
-  loadingModlog: boolean;
   loadingModSearch: boolean;
   loadingUserSearch: boolean;
   modSearchOptions: Choice[];
@@ -629,7 +618,7 @@ async function createNewOptions({
 
   if (text.length > 0) {
     newOptions.push(
-      ...(await fetchUsers(text)).users
+      ...(await fetchUsers(text))
         .slice(0, Number(fetchLimit))
         .map<Choice>(personToChoice)
     );
@@ -643,10 +632,10 @@ export class Modlog extends Component<
   ModlogState
 > {
   private isoData = setIsoData(this.context);
-  private subscription?: Subscription;
 
   state: ModlogState = {
-    loadingModlog: true,
+    res: { state: "empty" },
+    communityRes: { state: "empty" },
     loadingModSearch: false,
     loadingUserSearch: false,
     userSearchOptions: [],
@@ -662,58 +651,35 @@ export class Modlog extends Component<
     this.handleUserChange = this.handleUserChange.bind(this);
     this.handleModChange = this.handleModChange.bind(this);
 
-    this.parseMessage = this.parseMessage.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
-
     // Only fetch the data if coming from another route
-    if (this.isoData.path === this.context.router.route.match.url) {
+    if (FirstLoadService.isFirstLoad) {
+      const [res, communityRes, filteredModRes, filteredUserRes] =
+        this.isoData.routeData;
       this.state = {
         ...this.state,
-        res: this.isoData.routeData[0] as GetModlogResponse,
+        res,
+        communityRes,
       };
 
-      const communityRes: GetCommunityResponse | undefined =
+      if (filteredModRes.state === "success") {
-        this.isoData.routeData[1];
-
-      // Getting the moderators
         this.state = {
           ...this.state,
-        communityMods: communityRes?.moderators,
+          modSearchOptions: [personToChoice(filteredModRes.data.person_view)],
-      };
-
-      const filteredModRes: GetPersonDetailsResponse | undefined =
-        this.isoData.routeData[2];
-      if (filteredModRes) {
-        this.state = {
-          ...this.state,
-          modSearchOptions: [personToChoice(filteredModRes.person_view)],
         };
       }
 
-      const filteredUserRes: GetPersonDetailsResponse | undefined =
+      if (filteredUserRes.state === "success") {
-        this.isoData.routeData[3];
-      if (filteredUserRes) {
         this.state = {
           ...this.state,
-          userSearchOptions: [personToChoice(filteredUserRes.person_view)],
+          userSearchOptions: [personToChoice(filteredUserRes.data.person_view)],
         };
       }
-
-      this.state = { ...this.state, loadingModlog: false };
-    } else {
-      this.refetch();
-    }
-  }
-
-  componentWillUnmount() {
-    if (isBrowser()) {
-      this.subscription?.unsubscribe();
     }
   }
 
   get combined() {
     const res = this.state.res;
-    const combined = res ? buildCombined(res) : [];
+    const combined = res.state == "success" ? buildCombined(res.data) : [];
 
     return (
       <tbody>
@@ -737,7 +703,10 @@ export class Modlog extends Component<
   }
 
   get amAdminOrMod(): boolean {
-    return amAdmin() || amMod(this.state.communityMods);
+    const amMod_ =
+      this.state.communityRes.state == "success" &&
+      amMod(this.state.communityRes.data.moderators);
+    return amAdmin() || amMod_;
   }
 
   modOrAdminText(person?: Person): string {
@@ -755,14 +724,12 @@ export class Modlog extends Component<
 
   render() {
     const {
-      communityName,
-      loadingModlog,
       loadingModSearch,
       loadingUserSearch,
       userSearchOptions,
       modSearchOptions,
     } = this.state;
-    const { actionType, page, modId, userId } = getModlogQueryParams();
+    const { actionType, modId, userId } = getModlogQueryParams();
 
     return (
       <div className="container-lg">
@@ -785,14 +752,17 @@ export class Modlog extends Component<
               #<strong>#</strong>#
             </T>
           </div>
+          {this.state.communityRes.state === "success" && (
             <h5>
-            {communityName && (
+              <Link
-              <Link className="text-body" to={`/c/${communityName}`}>
+                className="text-body"
-                /c/{communityName}{" "}
+                to={`/c/${this.state.communityRes.data.community_view.community.name}`}
+              >
+                /c/{this.state.communityRes.data.community_view.community.name}{" "}
               </Link>
-            )}
               <span>{i18n.t("modlog")}</span>
             </h5>
+          )}
           <div className="form-row">
             <select
               value={actionType}
@@ -841,12 +811,24 @@ export class Modlog extends Component<
               />
             )}
           </div>
-          <div className="table-responsive">
+          {this.renderModlogTable()}
-            {loadingModlog ? (
+        </div>
+      </div>
+    );
+  }
+
+  renderModlogTable() {
+    switch (this.state.res.state) {
+      case "loading":
+        return (
           <h5>
             <Spinner large />
           </h5>
-            ) : (
+        );
+      case "success": {
+        const page = getModlogQueryParams().page;
+        return (
+          <div className="table-responsive">
             <table id="modlog_table" className="table table-sm table-hover">
               <thead className="pointer">
                 <tr>
@@ -857,13 +839,12 @@ export class Modlog extends Component<
               </thead>
               {this.combined}
             </table>
-            )}
             <Paginator page={page} onChange={this.handlePageChange} />
           </div>
-        </div>
-      </div>
         );
       }
+    }
+  }
 
   handleFilterActionChange(i: Modlog, event: any) {
     i.updateUrl({
@@ -918,7 +899,7 @@ export class Modlog extends Component<
     });
   });
 
-  updateUrl({ actionType, modId, page, userId }: Partial<ModlogProps>) {
+  async updateUrl({ actionType, modId, page, userId }: Partial<ModlogProps>) {
     const {
       page: urlPage,
       actionType: urlActionType,
@@ -941,21 +922,18 @@ export class Modlog extends Component<
       )}`
     );
 
-    this.setState({
+    await this.refetch();
-      loadingModlog: true,
-      res: undefined,
-    });
-
-    this.refetch();
   }
 
-  refetch() {
+  async refetch() {
-    const auth = myAuth(false);
+    const auth = myAuth();
     const { actionType, page, modId, userId } = getModlogQueryParams();
     const { communityId: urlCommunityId } = this.props.match.params;
     const communityId = getIdFromString(urlCommunityId);
 
-    const modlogForm: GetModlog = {
+    this.setState({ res: { state: "loading" } });
+    this.setState({
+      res: await HttpService.client.getModlog({
         community_id: communityId,
         page,
         limit: fetchLimit,
@@ -966,17 +944,17 @@ export class Modlog extends Component<
           ? modId ?? undefined
           : undefined,
         auth,
-    };
+      }),
-
+    });
-    WebSocketService.Instance.send(wsClient.getModlog(modlogForm));
 
     if (communityId) {
-      const communityForm: GetCommunity = {
+      this.setState({ communityRes: { state: "loading" } });
+      this.setState({
+        communityRes: await HttpService.client.getCommunity({
           id: communityId,
           auth,
-      };
+        }),
-
+      });
-      WebSocketService.Instance.send(wsClient.getCommunity(communityForm));
     }
   }
 
@@ -986,9 +964,11 @@ export class Modlog extends Component<
     query: { modId: urlModId, page, userId: urlUserId, actionType },
     auth,
     site,
-  }: InitialFetchRequest<QueryParams<ModlogProps>>): Promise<any>[] {
+  }: InitialFetchRequest<QueryParams<ModlogProps>>): Promise<
+    RequestState<any>
+  >[] {
     const pathSplit = path.split("/");
-    const promises: Promise<any>[] = [];
+    const promises: Promise<RequestState<any>>[] = [];
     const communityId = getIdFromString(pathSplit[2]);
     const modId = !site.site_view.local_site.hide_modlog_mod_names
       ? getIdFromString(urlModId)
@@ -1014,7 +994,7 @@ export class Modlog extends Component<
       };
       promises.push(client.getCommunity(communityForm));
     } else {
-      promises.push(Promise.resolve());
+      promises.push(Promise.resolve({ state: "empty" }));
     }
 
     if (modId) {
@@ -1025,7 +1005,7 @@ export class Modlog extends Component<
 
       promises.push(client.getPersonDetails(getPersonForm));
     } else {
-      promises.push(Promise.resolve());
+      promises.push(Promise.resolve({ state: "empty" }));
     }
 
     if (userId) {
@@ -1036,43 +1016,9 @@ export class Modlog extends Component<
 
       promises.push(client.getPersonDetails(getPersonForm));
     } else {
-      promises.push(Promise.resolve());
+      promises.push(Promise.resolve({ state: "empty" }));
     }
 
     return promises;
   }
-
-  parseMessage(msg: any) {
-    const op = wsUserOp(msg);
-    console.log(msg);
-
-    if (msg.error) {
-      toast(i18n.t(msg.error), "danger");
-    } else {
-      switch (op) {
-        case UserOperation.GetModlog: {
-          const res = wsJsonToRes<GetModlogResponse>(msg);
-          window.scrollTo(0, 0);
-          this.setState({ res, loadingModlog: false });
-
-          break;
-        }
-
-        case UserOperation.GetCommunity: {
-          const {
-            moderators,
-            community_view: {
-              community: { name },
-            },
-          } = wsJsonToRes<GetCommunityResponse>(msg);
-          this.setState({
-            communityMods: moderators,
-            communityName: name,
-          });
-
-          break;
-        }
-      }
-    }
-  }
 }

src/shared/components/person/password-change.tsx

@@ -1,59 +1,35 @@
 import { Component, linkEvent } from "inferno";
-import {
+import { GetSiteResponse, LoginResponse } from "lemmy-js-client";
-  GetSiteResponse,
-  LoginResponse,
-  PasswordChangeAfterReset,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
-} from "lemmy-js-client";
-import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
-import { UserService, WebSocketService } from "../../services";
+import { HttpService, UserService } from "../../services";
-import {
+import { RequestState } from "../../services/HttpService";
-  capitalizeFirstLetter,
+import { capitalizeFirstLetter, myAuth, setIsoData } from "../../utils";
-  isBrowser,
-  setIsoData,
-  toast,
-  wsClient,
-  wsSubscribe,
-} from "../../utils";
 import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
 
 interface State {
+  passwordChangeRes: RequestState<LoginResponse>;
   form: {
     token: string;
     password?: string;
     password_verify?: string;
   };
-  loading: boolean;
   siteRes: GetSiteResponse;
 }
 
 export class PasswordChange extends Component<any, State> {
   private isoData = setIsoData(this.context);
-  private subscription?: Subscription;
 
   state: State = {
+    passwordChangeRes: { state: "empty" },
+    siteRes: this.isoData.site_res,
     form: {
       token: this.props.match.params.token,
     },
-    loading: false,
-    siteRes: this.isoData.site_res,
   };
 
   constructor(props: any, context: any) {
     super(props, context);
-
-    this.parseMessage = this.parseMessage.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
-  }
-
-  componentWillUnmount() {
-    if (isBrowser()) {
-      this.subscription?.unsubscribe();
-    }
   }
 
   get documentTitle(): string {
@@ -117,7 +93,7 @@ export class PasswordChange extends Component<any, State> {
         <div className="form-group row">
           <div className="col-sm-10">
             <button type="submit" className="btn btn-secondary">
-              {this.state.loading ? (
+              {this.state.passwordChangeRes.state == "loading" ? (
                 <Spinner />
               ) : (
                 capitalizeFirstLetter(i18n.t("save"))
@@ -139,36 +115,33 @@ export class PasswordChange extends Component<any, State> {
     i.setState(i.state);
   }
 
-  handlePasswordChangeSubmit(i: PasswordChange, event: any) {
+  async handlePasswordChangeSubmit(i: PasswordChange, event: any) {
     event.preventDefault();
-    i.setState({ loading: true });
+    i.setState({ passwordChangeRes: { state: "loading" } });
 
     const password = i.state.form.password;
     const password_verify = i.state.form.password_verify;
 
     if (password && password_verify) {
-      const form: PasswordChangeAfterReset = {
+      i.setState({
+        passwordChangeRes: await HttpService.client.passwordChangeAfterReset({
           token: i.state.form.token,
           password,
           password_verify,
-      };
+        }),
+      });
 
-      WebSocketService.Instance.send(wsClient.passwordChange(form));
+      if (i.state.passwordChangeRes.state === "success") {
-    }
+        const data = i.state.passwordChangeRes.data;
-  }
-
-  parseMessage(msg: any) {
-    const op = wsUserOp(msg);
-    console.log(msg);
-    if (msg.error) {
-      toast(i18n.t(msg.error), "danger");
-      this.setState({ loading: false });
-      return;
-    } else if (op == UserOperation.PasswordChangeAfterReset) {
-      const data = wsJsonToRes<LoginResponse>(msg);
         UserService.Instance.login(data);
-      this.props.history.push("/");
+
-      location.reload();
+        const site = await HttpService.client.getSite({ auth: myAuth() });
+        if (site.state === "success") {
+          UserService.Instance.myUserInfo = site.data.my_user;
+        }
+
+        this.props.history.replace("/");
+      }
     }
   }
 }

src/shared/components/person/person-details.tsx

@@ -1,11 +1,40 @@
 import { Component } from "inferno";
 import {
+  AddAdmin,
+  AddModToCommunity,
+  BanFromCommunity,
+  BanPerson,
+  BlockPerson,
+  CommentId,
   CommentView,
+  CreateComment,
+  CreateCommentLike,
+  CreateCommentReport,
+  CreatePostLike,
+  CreatePostReport,
+  DeleteComment,
+  DeletePost,
+  DistinguishComment,
+  EditComment,
+  EditPost,
+  FeaturePost,
+  GetComments,
   GetPersonDetailsResponse,
   Language,
+  LockPost,
+  MarkCommentReplyAsRead,
+  MarkPersonMentionAsRead,
   PersonView,
   PostView,
+  PurgeComment,
+  PurgePerson,
+  PurgePost,
+  RemoveComment,
+  RemovePost,
+  SaveComment,
+  SavePost,
   SortType,
+  TransferCommunity,
 } from "lemmy-js-client";
 import { CommentViewType, PersonDetailsView } from "../../interfaces";
 import { commentsToFlatNodes, setupTippy } from "../../utils";
@@ -15,6 +44,7 @@ import { PostListing } from "../post/post-listing";
 
 interface PersonDetailsProps {
   personRes: GetPersonDetailsResponse;
+  finished: Map<CommentId, boolean | undefined>;
   admins: PersonView[];
   allLanguages: Language[];
   siteLanguages: number[];
@@ -25,6 +55,34 @@ interface PersonDetailsProps {
   enableNsfw: boolean;
   view: PersonDetailsView;
   onPageChange(page: number): number | any;
+  onSaveComment(form: SaveComment): void;
+  onCommentReplyRead(form: MarkCommentReplyAsRead): void;
+  onPersonMentionRead(form: MarkPersonMentionAsRead): void;
+  onCreateComment(form: CreateComment): void;
+  onEditComment(form: EditComment): void;
+  onCommentVote(form: CreateCommentLike): void;
+  onBlockPerson(form: BlockPerson): void;
+  onDeleteComment(form: DeleteComment): void;
+  onRemoveComment(form: RemoveComment): void;
+  onDistinguishComment(form: DistinguishComment): void;
+  onAddModToCommunity(form: AddModToCommunity): void;
+  onAddAdmin(form: AddAdmin): void;
+  onBanPersonFromCommunity(form: BanFromCommunity): void;
+  onBanPerson(form: BanPerson): void;
+  onTransferCommunity(form: TransferCommunity): void;
+  onFetchChildren?(form: GetComments): void;
+  onCommentReport(form: CreateCommentReport): void;
+  onPurgePerson(form: PurgePerson): void;
+  onPurgeComment(form: PurgeComment): void;
+  onPostEdit(form: EditPost): void;
+  onPostVote(form: CreatePostLike): void;
+  onPostReport(form: CreatePostReport): void;
+  onLockPost(form: LockPost): void;
+  onDeletePost(form: DeletePost): void;
+  onRemovePost(form: RemovePost): void;
+  onSavePost(form: SavePost): void;
+  onFeaturePost(form: FeaturePost): void;
+  onPurgePost(form: PurgePost): void;
 }
 
 enum ItemEnum {
@@ -93,6 +151,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
             key={i.id}
             nodes={[{ comment_view: c, children: [], depth: 0 }]}
             viewType={CommentViewType.Flat}
+            finished={this.props.finished}
             admins={this.props.admins}
             noBorder
             noIndent
@@ -101,6 +160,25 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
             enableDownvotes={this.props.enableDownvotes}
             allLanguages={this.props.allLanguages}
             siteLanguages={this.props.siteLanguages}
+            onCommentReplyRead={this.props.onCommentReplyRead}
+            onPersonMentionRead={this.props.onPersonMentionRead}
+            onCreateComment={this.props.onCreateComment}
+            onEditComment={this.props.onEditComment}
+            onCommentVote={this.props.onCommentVote}
+            onBlockPerson={this.props.onBlockPerson}
+            onSaveComment={this.props.onSaveComment}
+            onDeleteComment={this.props.onDeleteComment}
+            onRemoveComment={this.props.onRemoveComment}
+            onDistinguishComment={this.props.onDistinguishComment}
+            onAddModToCommunity={this.props.onAddModToCommunity}
+            onAddAdmin={this.props.onAddAdmin}
+            onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
+            onBanPerson={this.props.onBanPerson}
+            onTransferCommunity={this.props.onTransferCommunity}
+            onFetchChildren={this.props.onFetchChildren}
+            onCommentReport={this.props.onCommentReport}
+            onPurgePerson={this.props.onPurgePerson}
+            onPurgeComment={this.props.onPurgeComment}
           />
         );
       }
@@ -116,6 +194,22 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
             enableNsfw={this.props.enableNsfw}
             allLanguages={this.props.allLanguages}
             siteLanguages={this.props.siteLanguages}
+            onPostEdit={this.props.onPostEdit}
+            onPostVote={this.props.onPostVote}
+            onPostReport={this.props.onPostReport}
+            onBlockPerson={this.props.onBlockPerson}
+            onLockPost={this.props.onLockPost}
+            onDeletePost={this.props.onDeletePost}
+            onRemovePost={this.props.onRemovePost}
+            onSavePost={this.props.onSavePost}
+            onFeaturePost={this.props.onFeaturePost}
+            onPurgePerson={this.props.onPurgePerson}
+            onPurgePost={this.props.onPurgePost}
+            onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
+            onBanPerson={this.props.onBanPerson}
+            onAddModToCommunity={this.props.onAddModToCommunity}
+            onAddAdmin={this.props.onAddAdmin}
+            onTransferCommunity={this.props.onTransferCommunity}
           />
         );
       }
@@ -167,12 +261,32 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
           nodes={commentsToFlatNodes(this.props.personRes.comments)}
           viewType={CommentViewType.Flat}
           admins={this.props.admins}
+          finished={this.props.finished}
           noIndent
           showCommunity
           showContext
           enableDownvotes={this.props.enableDownvotes}
           allLanguages={this.props.allLanguages}
           siteLanguages={this.props.siteLanguages}
+          onCommentReplyRead={this.props.onCommentReplyRead}
+          onPersonMentionRead={this.props.onPersonMentionRead}
+          onCreateComment={this.props.onCreateComment}
+          onEditComment={this.props.onEditComment}
+          onCommentVote={this.props.onCommentVote}
+          onBlockPerson={this.props.onBlockPerson}
+          onSaveComment={this.props.onSaveComment}
+          onDeleteComment={this.props.onDeleteComment}
+          onRemoveComment={this.props.onRemoveComment}
+          onDistinguishComment={this.props.onDistinguishComment}
+          onAddModToCommunity={this.props.onAddModToCommunity}
+          onAddAdmin={this.props.onAddAdmin}
+          onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
+          onBanPerson={this.props.onBanPerson}
+          onTransferCommunity={this.props.onTransferCommunity}
+          onFetchChildren={this.props.onFetchChildren}
+          onCommentReport={this.props.onCommentReport}
+          onPurgePerson={this.props.onPurgePerson}
+          onPurgeComment={this.props.onPurgeComment}
         />
       </div>
     );
@@ -191,6 +305,22 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
               enableNsfw={this.props.enableNsfw}
               allLanguages={this.props.allLanguages}
               siteLanguages={this.props.siteLanguages}
+              onPostEdit={this.props.onPostEdit}
+              onPostVote={this.props.onPostVote}
+              onPostReport={this.props.onPostReport}
+              onBlockPerson={this.props.onBlockPerson}
+              onLockPost={this.props.onLockPost}
+              onDeletePost={this.props.onDeletePost}
+              onRemovePost={this.props.onRemovePost}
+              onSavePost={this.props.onSavePost}
+              onFeaturePost={this.props.onFeaturePost}
+              onPurgePerson={this.props.onPurgePerson}
+              onPurgePost={this.props.onPurgePost}
+              onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
+              onBanPerson={this.props.onBanPerson}
+              onAddModToCommunity={this.props.onAddModToCommunity}
+              onAddAdmin={this.props.onAddAdmin}
+              onTransferCommunity={this.props.onTransferCommunity}
             />
             <hr className="my-3" />
           </>

src/shared/components/person/profile.tsx

@@ -4,41 +4,66 @@ import { Component, linkEvent } from "inferno";
 import { Link } from "inferno-router";
 import { RouteComponentProps } from "inferno-router/dist/Route";
 import {
-  AddAdminResponse,
+  AddAdmin,
+  AddModToCommunity,
+  BanFromCommunity,
+  BanFromCommunityResponse,
   BanPerson,
   BanPersonResponse,
   BlockPerson,
-  BlockPersonResponse,
+  CommentId,
+  CommentReplyResponse,
   CommentResponse,
   Community,
   CommunityModeratorView,
+  CreateComment,
+  CreateCommentLike,
+  CreateCommentReport,
+  CreatePostLike,
+  CreatePostReport,
+  DeleteComment,
+  DeletePost,
+  DistinguishComment,
+  EditComment,
+  EditPost,
+  FeaturePost,
   GetPersonDetails,
   GetPersonDetailsResponse,
   GetSiteResponse,
+  LockPost,
+  MarkCommentReplyAsRead,
+  MarkPersonMentionAsRead,
+  PersonView,
   PostResponse,
+  PurgeComment,
   PurgeItemResponse,
+  PurgePerson,
+  PurgePost,
+  RemoveComment,
+  RemovePost,
+  SaveComment,
+  SavePost,
   SortType,
-  UserOperation,
+  TransferCommunity,
-  wsJsonToRes,
-  wsUserOp,
 } from "lemmy-js-client";
 import moment from "moment";
-import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
 import { InitialFetchRequest, PersonDetailsView } from "../../interfaces";
-import { UserService, WebSocketService } from "../../services";
+import { UserService } from "../../services";
+import { FirstLoadService } from "../../services/FirstLoadService";
+import { HttpService, RequestState } from "../../services/HttpService";
 import {
   QueryParams,
   canMod,
   capitalizeFirstLetter,
-  createCommentLikeRes,
+  editComment,
-  createPostLikeFindRes,
+  editPost,
-  editCommentRes,
+  editWith,
-  editPostFindRes,
   enableDownvotes,
   enableNsfw,
   fetchLimit,
   futureDaysToUnixTime,
+  getCommentParentId,
   getPageFromString,
   getQueryParams,
   getQueryString,
@@ -46,17 +71,15 @@ import {
   isBanned,
   mdToHtml,
   myAuth,
+  myAuthRequired,
   numToSI,
   relTags,
   restoreScrollPosition,
-  saveCommentRes,
   saveScrollPosition,
   setIsoData,
   setupTippy,
   toast,
   updatePersonBlock,
-  wsClient,
-  wsSubscribe,
 } from "../../utils";
 import { BannerIconHeader } from "../common/banner-icon-header";
 import { HtmlTags } from "../common/html-tags";
@@ -68,14 +91,15 @@ import { PersonDetails } from "./person-details";
 import { PersonListing } from "./person-listing";
 
 interface ProfileState {
-  personRes?: GetPersonDetailsResponse;
+  personRes: RequestState<GetPersonDetailsResponse>;
-  loading: boolean;
   personBlocked: boolean;
   banReason?: string;
   banExpireDays?: number;
   showBanDialog: boolean;
   removeData: boolean;
   siteRes: GetSiteResponse;
+  finished: Map<CommentId, boolean | undefined>;
+  isIsomorphic: boolean;
 }
 
 interface ProfileProps {
@@ -102,26 +126,6 @@ function getViewFromProps(view?: string): PersonDetailsView {
     : PersonDetailsView.Overview;
 }
 
-function toggleBlockPerson(recipientId: number, block: boolean) {
-  const auth = myAuth();
-
-  if (auth) {
-    const blockUserForm: BlockPerson = {
-      person_id: recipientId,
-      block,
-      auth,
-    };
-
-    WebSocketService.Instance.send(wsClient.blockPerson(blockUserForm));
-  }
-}
-
-const handleUnblockPerson = (personId: number) =>
-  toggleBlockPerson(personId, false);
-
-const handleBlockPerson = (personId: number) =>
-  toggleBlockPerson(personId, true);
-
 const getCommunitiesListing = (
   translationKey: NoOptionI18nKeys,
   communityViews?: { community: Community }[]
@@ -153,13 +157,14 @@ export class Profile extends Component<
   ProfileState
 > {
   private isoData = setIsoData(this.context);
-  private subscription?: Subscription;
   state: ProfileState = {
-    loading: true,
+    personRes: { state: "empty" },
     personBlocked: false,
     siteRes: this.isoData.site_res,
     showBanDialog: false,
     removeData: false,
+    finished: new Map(),
+    isIsomorphic: false,
   };
 
   constructor(props: RouteComponentProps<{ username: string }>, context: any) {
@@ -168,51 +173,95 @@ export class Profile extends Component<
     this.handleSortChange = this.handleSortChange.bind(this);
     this.handlePageChange = this.handlePageChange.bind(this);
 
-    this.parseMessage = this.parseMessage.bind(this);
+    this.handleBlockPerson = this.handleBlockPerson.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
+    this.handleUnblockPerson = this.handleUnblockPerson.bind(this);
+
+    this.handleCreateComment = this.handleCreateComment.bind(this);
+    this.handleEditComment = this.handleEditComment.bind(this);
+    this.handleSaveComment = this.handleSaveComment.bind(this);
+    this.handleBlockPersonAlt = this.handleBlockPersonAlt.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) {
       this.state = {
         ...this.state,
-        personRes: this.isoData.routeData[0] as GetPersonDetailsResponse,
+        personRes: this.isoData.routeData[0],
-        loading: false,
+        isIsomorphic: true,
       };
-    } else {
-      this.fetchUserData();
     }
   }
 
-  fetchUserData() {
+  async componentDidMount() {
+    if (!this.state.isIsomorphic) {
+      await this.fetchUserData();
+    }
+    setupTippy();
+  }
+
+  componentWillUnmount() {
+    saveScrollPosition(this.context);
+  }
+
+  async fetchUserData() {
     const { page, sort, view } = getProfileQueryParams();
 
-    const form: GetPersonDetails = {
+    this.setState({ personRes: { state: "empty" } });
+    this.setState({
+      personRes: await HttpService.client.getPersonDetails({
         username: this.props.match.params.username,
         sort,
         saved_only: view === PersonDetailsView.Saved,
         page,
         limit: fetchLimit,
-      auth: myAuth(false),
+        auth: myAuth(),
-    };
+      }),
-
+    });
-    WebSocketService.Instance.send(wsClient.getPersonDetails(form));
+    restoreScrollPosition(this.context);
+    this.setPersonBlock();
   }
 
   get amCurrentUser() {
+    if (this.state.personRes.state === "success") {
       return (
         UserService.Instance.myUserInfo?.local_user_view.person.id ===
-      this.state.personRes?.person_view.person.id
+        this.state.personRes.data.person_view.person.id
       );
+    } else {
+      return false;
+    }
   }
 
   setPersonBlock() {
     const mui = UserService.Instance.myUserInfo;
     const res = this.state.personRes;
 
-    if (mui && res) {
+    if (mui && res.state === "success") {
       this.setState({
         personBlocked: mui.person_blocks.some(
-          ({ target: { id } }) => id === res.person_view.person.id
+          ({ target: { id } }) => id === res.data.person_view.person.id
         ),
       });
     }
@@ -223,7 +272,9 @@ export class Profile extends Component<
     path,
     query: { page, sort, view: urlView },
     auth,
-  }: InitialFetchRequest<QueryParams<ProfileProps>>): Promise<any>[] {
+  }: InitialFetchRequest<QueryParams<ProfileProps>>): Promise<
+    RequestState<any>
+  >[] {
     const pathSplit = path.split("/");
 
     const username = pathSplit[2];
@@ -241,35 +292,28 @@ export class Profile extends Component<
     return [client.getPersonDetails(form)];
   }
 
-  componentDidMount() {
-    this.setPersonBlock();
-    setupTippy();
-  }
-
-  componentWillUnmount() {
-    this.subscription?.unsubscribe();
-    saveScrollPosition(this.context);
-  }
-
   get documentTitle(): string {
+    const siteName = this.state.siteRes.site_view.site.name;
     const res = this.state.personRes;
-    return res
+    return res.state == "success"
-      ? `@${res.person_view.person.name} - ${this.state.siteRes.site_view.site.name}`
+      ? `@${res.data.person_view.person.name} - ${siteName}`
-      : "";
+      : siteName;
   }
 
-  render() {
+  renderPersonRes() {
-    const { personRes, loading, siteRes } = this.state;
+    switch (this.state.personRes.state) {
-    const { page, sort, view } = getProfileQueryParams();
+      case "loading":
-
         return (
-      <div className="container-lg">
-        {loading ? (
           <h5>
             <Spinner large />
           </h5>
-        ) : (
+        );
-          personRes && (
+      case "success": {
+        const siteRes = this.state.siteRes;
+        const personRes = this.state.personRes.data;
+        const { page, sort, view } = getProfileQueryParams();
+
+        return (
           <div className="row">
             <div className="col-12 col-md-8">
               <HtmlTags
@@ -279,7 +323,7 @@ export class Profile extends Component<
                 image={personRes.person_view.person.avatar}
               />
 
-                {this.userInfo}
+              {this.userInfo(personRes.person_view)}
 
               <hr />
 
@@ -291,12 +335,41 @@ export class Profile extends Component<
                 sort={sort}
                 page={page}
                 limit={fetchLimit}
+                finished={this.state.finished}
                 enableDownvotes={enableDownvotes(siteRes)}
                 enableNsfw={enableNsfw(siteRes)}
                 view={view}
                 onPageChange={this.handlePageChange}
                 allLanguages={siteRes.all_languages}
                 siteLanguages={siteRes.discussion_languages}
+                // TODO all the forms here
+                onSaveComment={this.handleSaveComment}
+                onBlockPerson={this.handleBlockPersonAlt}
+                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}
+                onPostEdit={this.handlePostEdit}
+                onPostVote={this.handlePostVote}
+                onPostReport={this.handlePostReport}
+                onLockPost={this.handleLockPost}
+                onDeletePost={this.handleDeletePost}
+                onRemovePost={this.handleRemovePost}
+                onSavePost={this.handleSavePost}
+                onPurgePost={this.handlePurgePost}
+                onFeaturePost={this.handleFeaturePost}
               />
             </div>
 
@@ -305,11 +378,14 @@ export class Profile extends Component<
               {this.amCurrentUser && <Follows />}
             </div>
           </div>
-          )
-        )}
-      </div>
         );
       }
+    }
+  }
+
+  render() {
+    return <div className="container-lg">{this.renderPersonRes()}</div>;
+  }
 
   get viewRadios() {
     return (
@@ -366,8 +442,7 @@ export class Profile extends Component<
     );
   }
 
-  get userInfo() {
+  userInfo(pv: PersonView) {
-    const pv = this.state.personRes?.person_view;
     const {
       personBlocked,
       siteRes: { admins },
@@ -422,7 +497,7 @@ export class Profile extends Component<
                     )}
                   </ul>
                 </div>
-                {this.banDialog}
+                {this.banDialog(pv)}
                 <div className="flex-grow-1 unselectable pointer mx-2"></div>
                 {!this.amCurrentUser && UserService.Instance.myUserInfo && (
                   <>
@@ -448,7 +523,10 @@ export class Profile extends Component<
                         className={
                           "d-flex align-self-start btn btn-secondary mr-2"
                         }
-                        onClick={linkEvent(pv.person.id, handleUnblockPerson)}
+                        onClick={linkEvent(
+                          pv.person.id,
+                          this.handleUnblockPerson
+                        )}
                       >
                         {i18n.t("unblock_user")}
                       </button>
@@ -457,7 +535,10 @@ export class Profile extends Component<
                         className={
                           "d-flex align-self-start btn btn-secondary mr-2"
                         }
-                        onClick={linkEvent(pv.person.id, handleBlockPerson)}
+                        onClick={linkEvent(
+                          pv.person.id,
+                          this.handleBlockPerson
+                        )}
                       >
                         {i18n.t("block_user")}
                       </button>
@@ -544,14 +625,11 @@ export class Profile extends Component<
     );
   }
 
-  get banDialog() {
+  banDialog(pv: PersonView) {
-    const pv = this.state.personRes?.person_view;
     const { showBanDialog } = this.state;
 
     return (
-      pv && (
+      showBanDialog && (
-        <>
-          {showBanDialog && (
         <form onSubmit={linkEvent(this, this.handleModBanSubmit)}>
           <div className="form-group row col-12">
             <label className="col-form-label" htmlFor="profile-ban-reason">
@@ -618,13 +696,11 @@ export class Profile extends Component<
             </button>
           </div>
         </form>
-          )}
-        </>
       )
     );
   }
 
-  updateUrl({ page, sort, view }: Partial<ProfileProps>) {
+  async updateUrl({ page, sort, view }: Partial<ProfileProps>) {
     const {
       page: urlPage,
       sort: urlSort,
@@ -640,9 +716,7 @@ export class Profile extends Component<
     const { username } = this.props.match.params;
 
     this.props.history.push(`/u/${username}${getQueryString(queryParams)}`);
-
+    await this.fetchUserData();
-    this.setState({ loading: true });
-    this.fetchUserData();
   }
 
   handlePageChange(page: number) {
@@ -676,19 +750,18 @@ export class Profile extends Component<
     i.setState({ removeData: event.target.checked });
   }
 
-  handleModBanSubmitCancel(i: Profile, event?: any) {
+  handleModBanSubmitCancel(i: Profile) {
-    event.preventDefault();
     i.setState({ showBanDialog: false });
   }
 
-  handleModBanSubmit(i: Profile, event?: any) {
+  async handleModBanSubmit(i: Profile, event: any) {
-    if (event) event.preventDefault();
+    event.preventDefault();
-    const { personRes, removeData, banReason, banExpireDays } = i.state;
+    const { removeData, banReason, banExpireDays } = i.state;
 
-    const person = personRes?.person_view.person;
+    const personRes = i.state.personRes;
-    const auth = myAuth();
 
-    if (person && auth) {
+    if (personRes.state == "success") {
+      const person = personRes.data.person_view.person;
       const ban = !person.banned;
 
       // If its an unban, restore all their data
@@ -696,154 +769,281 @@ export class Profile extends Component<
         i.setState({ removeData: false });
       }
 
-      const form: BanPerson = {
+      const res = await HttpService.client.banPerson({
         person_id: person.id,
         ban,
         remove_data: removeData,
         reason: banReason,
         expires: futureDaysToUnixTime(banExpireDays),
-        auth,
+        auth: myAuthRequired(),
-      };
+      });
-      WebSocketService.Instance.send(wsClient.banPerson(form));
+      // TODO
-
+      this.updateBan(res);
       i.setState({ showBanDialog: false });
     }
   }
 
-  parseMessage(msg: any) {
+  async toggleBlockPerson(recipientId: number, block: boolean) {
-    const op = wsUserOp(msg);
+    const res = await HttpService.client.blockPerson({
-    console.log(msg);
+      person_id: recipientId,
-
+      block,
-    if (msg.error) {
+      auth: myAuthRequired(),
-      toast(i18n.t(msg.error), "danger");
+    });
-
+    if (res.state == "success") {
-      if (msg.error === "couldnt_find_that_username_or_email") {
+      updatePersonBlock(res.data);
-        this.context.router.history.push("/");
     }
-    } else if (msg.reconnect) {
-      this.fetchUserData();
-    } else {
-      switch (op) {
-        case UserOperation.GetPersonDetails: {
-          // Since the PersonDetails contains posts/comments as well as some general user info we listen here as well
-          // and set the parent state if it is not set or differs
-          // TODO this might need to get abstracted
-          const data = wsJsonToRes<GetPersonDetailsResponse>(msg);
-          this.setState({ personRes: data, loading: false });
-          this.setPersonBlock();
-          restoreScrollPosition(this.context);
-
-          break;
   }
 
-        case UserOperation.AddAdmin: {
+  handleUnblockPerson(personId: number) {
-          const { admins } = wsJsonToRes<AddAdminResponse>(msg);
+    this.toggleBlockPerson(personId, false);
-          this.setState(s => ((s.siteRes.admins = admins), s));
-
-          break;
   }
 
-        case UserOperation.CreateCommentLike: {
+  handleBlockPerson(personId: number) {
-          const { comment_view } = wsJsonToRes<CommentResponse>(msg);
+    this.toggleBlockPerson(personId, true);
-          createCommentLikeRes(comment_view, this.state.personRes?.comments);
-          this.setState(this.state);
-
-          break;
   }
 
-        case UserOperation.EditComment:
+  async handleAddModToCommunity(form: AddModToCommunity) {
-        case UserOperation.DeleteComment:
+    // TODO not sure what to do here
-        case UserOperation.RemoveComment: {
+    await HttpService.client.addModToCommunity(form);
-          const { comment_view } = wsJsonToRes<CommentResponse>(msg);
-          editCommentRes(comment_view, this.state.personRes?.comments);
-          this.setState(this.state);
-
-          break;
   }
 
-        case UserOperation.CreateComment: {
+  async handlePurgePerson(form: PurgePerson) {
-          const {
+    const purgePersonRes = await HttpService.client.purgePerson(form);
-            comment_view: {
+    this.purgeItem(purgePersonRes);
-              creator: { id },
-            },
-          } = wsJsonToRes<CommentResponse>(msg);
-          const mui = UserService.Instance.myUserInfo;
-
-          if (id === mui?.local_user_view.person.id) {
-            toast(i18n.t("reply_sent"));
   }
 
-          break;
+  async handlePurgeComment(form: PurgeComment) {
+    const purgeCommentRes = await HttpService.client.purgeComment(form);
+    this.purgeItem(purgeCommentRes);
   }
 
-        case UserOperation.SaveComment: {
+  async handlePurgePost(form: PurgePost) {
-          const { comment_view } = wsJsonToRes<CommentResponse>(msg);
+    const purgeRes = await HttpService.client.purgePost(form);
-          saveCommentRes(comment_view, this.state.personRes?.comments);
+    this.purgeItem(purgeRes);
-          this.setState(this.state);
-
-          break;
   }
 
-        case UserOperation.EditPost:
+  async handleBlockPersonAlt(form: BlockPerson) {
-        case UserOperation.DeletePost:
+    const blockPersonRes = await HttpService.client.blockPerson(form);
-        case UserOperation.RemovePost:
+    if (blockPersonRes.state === "success") {
-        case UserOperation.LockPost:
+      updatePersonBlock(blockPersonRes.data);
-        case UserOperation.FeaturePost:
+    }
-        case UserOperation.SavePost: {
-          const { post_view } = wsJsonToRes<PostResponse>(msg);
-          editPostFindRes(post_view, this.state.personRes?.posts);
-          this.setState(this.state);
-
-          break;
   }
 
-        case UserOperation.CreatePostLike: {
+  async handleCreateComment(form: CreateComment) {
-          const { post_view } = wsJsonToRes<PostResponse>(msg);
+    const createCommentRes = await HttpService.client.createComment(form);
-          createPostLikeFindRes(post_view, this.state.personRes?.posts);
+    this.createAndUpdateComments(createCommentRes);
-          this.setState(this.state);
 
-          break;
+    return createCommentRes;
   }
 
-        case UserOperation.BanPerson: {
+  async handleEditComment(form: EditComment) {
-          const data = wsJsonToRes<BanPersonResponse>(msg);
+    const editCommentRes = await HttpService.client.editComment(form);
-          const res = this.state.personRes;
+    this.findAndUpdateComment(editCommentRes);
-          res?.comments
-            .filter(c => c.creator.id === data.person_view.person.id)
-            .forEach(c => (c.creator.banned = data.banned));
-          res?.posts
-            .filter(c => c.creator.id === data.person_view.person.id)
-            .forEach(c => (c.creator.banned = data.banned));
-          const pv = res?.person_view;
 
-          if (pv?.person.id === data.person_view.person.id) {
+    return editCommentRes;
-            pv.person.banned = data.banned;
-          }
-          this.setState(this.state);
-
-          break;
   }
 
-        case UserOperation.BlockPerson: {
+  async handleDeleteComment(form: DeleteComment) {
-          const data = wsJsonToRes<BlockPersonResponse>(msg);
+    const deleteCommentRes = await HttpService.client.deleteComment(form);
-          updatePersonBlock(data);
+    this.findAndUpdateComment(deleteCommentRes);
-          this.setPersonBlock();
-
-          break;
   }
 
-        case UserOperation.PurgePerson:
+  async handleDeletePost(form: DeletePost) {
-        case UserOperation.PurgePost:
+    const deleteRes = await HttpService.client.deletePost(form);
-        case UserOperation.PurgeComment:
+    this.findAndUpdatePost(deleteRes);
-        case UserOperation.PurgeCommunity: {
+  }
-          const { success } = wsJsonToRes<PurgeItemResponse>(msg);
 
-          if (success) {
+  async handleRemovePost(form: RemovePost) {
+    const removeRes = await HttpService.client.removePost(form);
+    this.findAndUpdatePost(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.findAndUpdatePost(saveRes);
+  }
+
+  async handleFeaturePost(form: FeaturePost) {
+    const featureRes = await HttpService.client.featurePost(form);
+    this.findAndUpdatePost(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.findAndUpdatePost(voteRes);
+  }
+
+  async handlePostEdit(form: EditPost) {
+    const res = await HttpService.client.editPost(form);
+    this.findAndUpdatePost(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.findAndUpdatePost(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) {
+    await HttpService.client.transferCommunity(form);
+    toast(i18n.t("transfer_community"));
+  }
+
+  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.updateBanFromCommunity(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.personRes.state == "success") {
+          s.personRes.data.posts
+            .filter(c => c.creator.id === banRes.data.person_view.person.id)
+            .forEach(
+              c => (c.creator_banned_from_community = banRes.data.banned)
+            );
+
+          s.personRes.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;
+      });
+    }
+  }
+
+  updateBan(banRes: RequestState<BanPersonResponse>) {
+    // Maybe not necessary
+    if (banRes.state == "success") {
+      this.setState(s => {
+        if (s.personRes.state == "success") {
+          s.personRes.data.posts
+            .filter(c => c.creator.id == banRes.data.person_view.person.id)
+            .forEach(c => (c.creator.banned = banRes.data.banned));
+          s.personRes.data.comments
+            .filter(c => c.creator.id == banRes.data.person_view.person.id)
+            .forEach(c => (c.creator.banned = banRes.data.banned));
+        }
+        return s;
+      });
+    }
+  }
+
+  purgeItem(purgeRes: RequestState<PurgeItemResponse>) {
+    if (purgeRes.state == "success") {
       toast(i18n.t("purge_success"));
       this.context.router.history.push(`/`);
     }
   }
+
+  findAndUpdateComment(res: RequestState<CommentResponse>) {
+    this.setState(s => {
+      if (s.personRes.state == "success" && res.state == "success") {
+        s.personRes.data.comments = editComment(
+          res.data.comment_view,
+          s.personRes.data.comments
+        );
+        s.finished.set(res.data.comment_view.comment.id, true);
       }
+      return s;
+    });
   }
+
+  createAndUpdateComments(res: RequestState<CommentResponse>) {
+    this.setState(s => {
+      if (s.personRes.state == "success" && res.state == "success") {
+        s.personRes.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;
+    });
+  }
+
+  findAndUpdateCommentReply(res: RequestState<CommentReplyResponse>) {
+    this.setState(s => {
+      if (s.personRes.state == "success" && res.state == "success") {
+        s.personRes.data.comments = editWith(
+          res.data.comment_reply_view,
+          s.personRes.data.comments
+        );
+      }
+      return s;
+    });
+  }
+
+  findAndUpdatePost(res: RequestState<PostResponse>) {
+    this.setState(s => {
+      if (s.personRes.state == "success" && res.state == "success") {
+        s.personRes.data.posts = editPost(
+          res.data.post_view,
+          s.personRes.data.posts
+        );
+      }
+      return s;
+    });
   }
 }

src/shared/components/person/registration-applications.tsx

@@ -1,27 +1,22 @@
 import { Component, linkEvent } from "inferno";
 import {
+  ApproveRegistrationApplication,
   GetSiteResponse,
   ListRegistrationApplications,
   ListRegistrationApplicationsResponse,
-  RegistrationApplicationResponse,
+  RegistrationApplicationView,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
 } from "lemmy-js-client";
-import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
 import { InitialFetchRequest } from "../../interfaces";
-import { UserService, WebSocketService } from "../../services";
+import { UserService } from "../../services";
+import { FirstLoadService } from "../../services/FirstLoadService";
+import { HttpService, RequestState } from "../../services/HttpService";
 import {
+  editRegistrationApplication,
   fetchLimit,
-  isBrowser,
+  myAuthRequired,
-  myAuth,
   setIsoData,
   setupTippy,
-  toast,
-  updateRegistrationApplicationRes,
-  wsClient,
-  wsSubscribe,
 } from "../../utils";
 import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
@@ -34,11 +29,11 @@ enum UnreadOrAll {
 }
 
 interface RegistrationApplicationsState {
-  listRegistrationApplicationsResponse?: ListRegistrationApplicationsResponse;
+  appsRes: RequestState<ListRegistrationApplicationsResponse>;
   siteRes: GetSiteResponse;
   unreadOrAll: UnreadOrAll;
   page: number;
-  loading: boolean;
+  isIsomorphic: boolean;
 }
 
 export class RegistrationApplications extends Component<
@@ -46,45 +41,37 @@ export class RegistrationApplications extends Component<
   RegistrationApplicationsState
 > {
   private isoData = setIsoData(this.context);
-  private subscription?: Subscription;
   state: RegistrationApplicationsState = {
+    appsRes: { state: "empty" },
     siteRes: this.isoData.site_res,
     unreadOrAll: UnreadOrAll.Unread,
     page: 1,
-    loading: true,
+    isIsomorphic: false,
   };
 
   constructor(props: any, context: any) {
     super(props, context);
 
     this.handlePageChange = this.handlePageChange.bind(this);
-
+    this.handleApproveApplication = this.handleApproveApplication.bind(this);
-    this.parseMessage = this.parseMessage.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
 
     // Only fetch the data if coming from another route
-    if (this.isoData.path == this.context.router.route.match.url) {
+    if (FirstLoadService.isFirstLoad) {
       this.state = {
         ...this.state,
-        listRegistrationApplicationsResponse: this.isoData
+        appsRes: this.isoData.routeData[0],
-          .routeData[0] as ListRegistrationApplicationsResponse,
+        isIsomorphic: true,
-        loading: false,
       };
-    } else {
-      this.refetch();
     }
   }
 
-  componentDidMount() {
+  async componentDidMount() {
+    if (!this.state.isIsomorphic) {
+      await this.refetch();
+    }
     setupTippy();
   }
 
-  componentWillUnmount() {
-    if (isBrowser()) {
-      this.subscription?.unsubscribe();
-    }
-  }
-
   get documentTitle(): string {
     const mui = UserService.Instance.myUserInfo;
     return mui
@@ -94,14 +81,17 @@ export class RegistrationApplications extends Component<
       : "";
   }
 
-  render() {
+  renderApps() {
+    switch (this.state.appsRes.state) {
+      case "loading":
         return (
-      <div className="container-lg">
-        {this.state.loading ? (
           <h5>
             <Spinner large />
           </h5>
-        ) : (
+        );
+      case "success": {
+        const apps = this.state.appsRes.data.registration_applications;
+        return (
           <div className="row">
             <div className="col-12">
               <HtmlTags
@@ -110,17 +100,21 @@ export class RegistrationApplications extends Component<
               />
               <h5 className="mb-2">{i18n.t("registration_applications")}</h5>
               {this.selects()}
-              {this.applicationList()}
+              {this.applicationList(apps)}
               <Paginator
                 page={this.state.page}
                 onChange={this.handlePageChange}
               />
             </div>
           </div>
-        )}
-      </div>
         );
       }
+    }
+  }
+
+  render() {
+    return <div className="container-lg">{this.renderApps()}</div>;
+  }
 
   unreadOrAllRadios() {
     return (
@@ -163,22 +157,20 @@ export class RegistrationApplications extends Component<
     );
   }
 
-  applicationList() {
+  applicationList(apps: RegistrationApplicationView[]) {
-    const res = this.state.listRegistrationApplicationsResponse;
     return (
-      res && (
       <div>
-          {res.registration_applications.map(ra => (
+        {apps.map(ra => (
           <>
             <hr />
             <RegistrationApplication
               key={ra.registration_application.id}
               application={ra}
+              onApproveApplication={this.handleApproveApplication}
             />
           </>
         ))}
       </div>
-      )
     );
   }
 
@@ -192,10 +184,12 @@ export class RegistrationApplications extends Component<
     this.refetch();
   }
 
-  static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
+  static fetchInitialData({
-    const promises: Promise<any>[] = [];
+    auth,
+    client,
+  }: InitialFetchRequest): Promise<any>[] {
+    const promises: Promise<RequestState<any>>[] = [];
 
-    const auth = req.auth;
     if (auth) {
       const form: ListRegistrationApplications = {
         unread_only: true,
@@ -203,54 +197,41 @@ export class RegistrationApplications extends Component<
         limit: fetchLimit,
         auth,
       };
-      promises.push(req.client.listRegistrationApplications(form));
+      promises.push(client.listRegistrationApplications(form));
+    } else {
+      promises.push(Promise.resolve({ state: "empty" }));
     }
 
     return promises;
   }
 
-  refetch() {
+  async refetch() {
     const unread_only = this.state.unreadOrAll == UnreadOrAll.Unread;
-    const auth = myAuth();
+    this.setState({
-    if (auth) {
+      appsRes: { state: "loading" },
-      const form: ListRegistrationApplications = {
+    });
+    this.setState({
+      appsRes: await HttpService.client.listRegistrationApplications({
         unread_only: unread_only,
         page: this.state.page,
         limit: fetchLimit,
-        auth,
+        auth: myAuthRequired(),
-      };
+      }),
-      WebSocketService.Instance.send(
+    });
-        wsClient.listRegistrationApplications(form)
-      );
-    }
   }
 
-  parseMessage(msg: any) {
+  async handleApproveApplication(form: ApproveRegistrationApplication) {
-    const op = wsUserOp(msg);
+    const approveRes = await HttpService.client.approveRegistrationApplication(
-    console.log(msg);
+      form
-    if (msg.error) {
+    );
-      toast(i18n.t(msg.error), "danger");
+    this.setState(s => {
-      return;
+      if (s.appsRes.state == "success" && approveRes.state == "success") {
-    } else if (msg.reconnect) {
+        s.appsRes.data.registration_applications = editRegistrationApplication(
-      this.refetch();
+          approveRes.data.registration_application,
-    } else if (op == UserOperation.ListRegistrationApplications) {
+          s.appsRes.data.registration_applications
-      const data = wsJsonToRes<ListRegistrationApplicationsResponse>(msg);
-      this.setState({
-        listRegistrationApplicationsResponse: data,
-        loading: false,
-      });
-      window.scrollTo(0, 0);
-    } else if (op == UserOperation.ApproveRegistrationApplication) {
-      const data = wsJsonToRes<RegistrationApplicationResponse>(msg);
-      updateRegistrationApplicationRes(
-        data.registration_application,
-        this.state.listRegistrationApplicationsResponse
-          ?.registration_applications
         );
-      const uacs = UserService.Instance.unreadApplicationCountSub;
-      // Minor bug, where if the application switches from deny to approve, the count will still go down
-      uacs.next(uacs.getValue() - 1);
-      this.setState(this.state);
       }
+      return s;
+    });
   }
 }

src/shared/components/person/reports.tsx

@@ -13,27 +13,23 @@ import {
   PostReportView,
   PrivateMessageReportResponse,
   PrivateMessageReportView,
-  UserOperation,
+  ResolveCommentReport,
-  wsJsonToRes,
+  ResolvePostReport,
-  wsUserOp,
+  ResolvePrivateMessageReport,
 } from "lemmy-js-client";
-import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
 import { InitialFetchRequest } from "../../interfaces";
-import { UserService, WebSocketService } from "../../services";
+import { HttpService, UserService } from "../../services";
+import { FirstLoadService } from "../../services/FirstLoadService";
+import { RequestState } from "../../services/HttpService";
 import {
   amAdmin,
+  editCommentReport,
+  editPostReport,
+  editPrivateMessageReport,
   fetchLimit,
-  isBrowser,
+  myAuthRequired,
-  myAuth,
   setIsoData,
-  setupTippy,
-  toast,
-  updateCommentReportRes,
-  updatePostReportRes,
-  updatePrivateMessageReportRes,
-  wsClient,
-  wsSubscribe,
 } from "../../utils";
 import { CommentReport } from "../comment/comment-report";
 import { HtmlTags } from "../common/html-tags";
@@ -68,66 +64,62 @@ type ItemType = {
 };
 
 interface ReportsState {
-  listCommentReportsResponse?: ListCommentReportsResponse;
+  commentReportsRes: RequestState<ListCommentReportsResponse>;
-  listPostReportsResponse?: ListPostReportsResponse;
+  postReportsRes: RequestState<ListPostReportsResponse>;
-  listPrivateMessageReportsResponse?: ListPrivateMessageReportsResponse;
+  messageReportsRes: RequestState<ListPrivateMessageReportsResponse>;
   unreadOrAll: UnreadOrAll;
   messageType: MessageType;
-  combined: ItemType[];
   siteRes: GetSiteResponse;
   page: number;
-  loading: boolean;
+  isIsomorphic: boolean;
 }
 
 export class Reports extends Component<any, ReportsState> {
   private isoData = setIsoData(this.context);
-  private subscription?: Subscription;
   state: ReportsState = {
+    commentReportsRes: { state: "empty" },
+    postReportsRes: { state: "empty" },
+    messageReportsRes: { state: "empty" },
     unreadOrAll: UnreadOrAll.Unread,
     messageType: MessageType.All,
-    combined: [],
     page: 1,
     siteRes: this.isoData.site_res,
-    loading: true,
+    isIsomorphic: false,
   };
 
   constructor(props: any, context: any) {
     super(props, context);
 
     this.handlePageChange = this.handlePageChange.bind(this);
-
+    this.handleResolveCommentReport =
-    this.parseMessage = this.parseMessage.bind(this);
+      this.handleResolveCommentReport.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
+    this.handleResolvePostReport = this.handleResolvePostReport.bind(this);
+    this.handleResolvePrivateMessageReport =
+      this.handleResolvePrivateMessageReport.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 [commentReportsRes, postReportsRes, messageReportsRes] =
+        this.isoData.routeData;
       this.state = {
         ...this.state,
-        listCommentReportsResponse: this.isoData
+        commentReportsRes,
-          .routeData[0] as ListCommentReportsResponse,
+        postReportsRes,
-        listPostReportsResponse: this.isoData
+        isIsomorphic: true,
-          .routeData[1] as ListPostReportsResponse,
       };
+
       if (amAdmin()) {
         this.state = {
           ...this.state,
-          listPrivateMessageReportsResponse: this.isoData
+          messageReportsRes,
-            .routeData[2] as ListPrivateMessageReportsResponse,
         };
       }
-      this.state = {
-        ...this.state,
-        combined: this.buildCombined(),
-        loading: false,
-      };
-    } else {
-      this.refetch();
     }
   }
 
-  componentWillUnmount() {
+  async componentDidMount() {
-    if (isBrowser()) {
+    if (!this.state.isIsomorphic) {
-      this.subscription?.unsubscribe();
+      await this.refetch();
     }
   }
 
@@ -143,11 +135,6 @@ export class Reports extends Component<any, ReportsState> {
   render() {
     return (
       <div className="container-lg">
-        {this.state.loading ? (
-          <h5>
-            <Spinner large />
-          </h5>
-        ) : (
         <div className="row">
           <div className="col-12">
             <HtmlTags
@@ -156,24 +143,38 @@ export class Reports extends Component<any, ReportsState> {
             />
             <h5 className="mb-2">{i18n.t("reports")}</h5>
             {this.selects()}
-              {this.state.messageType == MessageType.All && this.all()}
+            {this.section}
-              {this.state.messageType == MessageType.CommentReport &&
-                this.commentReports()}
-              {this.state.messageType == MessageType.PostReport &&
-                this.postReports()}
-              {this.state.messageType == MessageType.PrivateMessageReport &&
-                this.privateMessageReports()}
             <Paginator
               page={this.state.page}
               onChange={this.handlePageChange}
             />
           </div>
         </div>
-        )}
       </div>
     );
   }
 
+  get section() {
+    switch (this.state.messageType) {
+      case MessageType.All: {
+        return this.all();
+      }
+      case MessageType.CommentReport: {
+        return this.commentReports();
+      }
+      case MessageType.PostReport: {
+        return this.postReports();
+      }
+      case MessageType.PrivateMessageReport: {
+        return this.privateMessageReports();
+      }
+
+      default: {
+        return null;
+      }
+    }
+  }
+
   unreadOrAllRadios() {
     return (
       <div className="btn-group btn-group-toggle flex-wrap mb-2">
@@ -309,23 +310,25 @@ export class Reports extends Component<any, ReportsState> {
     };
   }
 
-  buildCombined(): ItemType[] {
+  get buildCombined(): ItemType[] {
-    // let comments: ItemType[] = this.state.listCommentReportsResponse
+    const commentRes = this.state.commentReportsRes;
-    //   .map(r => r.comment_reports)
-    //   .unwrapOr([])
-    //   .map(r => this.commentReportToItemType(r));
     const comments =
-      this.state.listCommentReportsResponse?.comment_reports.map(
+      commentRes.state == "success"
-        this.commentReportToItemType
+        ? commentRes.data.comment_reports.map(this.commentReportToItemType)
-      ) ?? [];
+        : [];
+
+    const postRes = this.state.postReportsRes;
     const posts =
-      this.state.listPostReportsResponse?.post_reports.map(
+      postRes.state == "success"
-        this.postReportToItemType
+        ? postRes.data.post_reports.map(this.postReportToItemType)
-      ) ?? [];
+        : [];
+    const pmRes = this.state.messageReportsRes;
     const privateMessages =
-      this.state.listPrivateMessageReportsResponse?.private_message_reports.map(
+      pmRes.state == "success"
+        ? pmRes.data.private_message_reports.map(
             this.privateMessageReportToItemType
-      ) ?? [];
+          )
+        : [];
 
     return [...comments, ...posts, ...privateMessages].sort((a, b) =>
       b.published.localeCompare(a.published)
@@ -336,15 +339,26 @@ export class Reports extends Component<any, ReportsState> {
     switch (i.type_) {
       case MessageEnum.CommentReport:
         return (
-          <CommentReport key={i.id} report={i.view as CommentReportView} />
+          <CommentReport
+            key={i.id}
+            report={i.view as CommentReportView}
+            onResolveReport={this.handleResolveCommentReport}
+          />
         );
       case MessageEnum.PostReport:
-        return <PostReport key={i.id} report={i.view as PostReportView} />;
+        return (
+          <PostReport
+            key={i.id}
+            report={i.view as PostReportView}
+            onResolveReport={this.handleResolvePostReport}
+          />
+        );
       case MessageEnum.PrivateMessageReport:
         return (
           <PrivateMessageReport
             key={i.id}
             report={i.view as PrivateMessageReportView}
+            onResolveReport={this.handleResolvePrivateMessageReport}
           />
         );
       default:
@@ -355,7 +369,7 @@ export class Reports extends Component<any, ReportsState> {
   all() {
     return (
       <div>
-        {this.state.combined.map(i => (
+        {this.buildCombined.map(i => (
           <>
             <hr />
             {this.renderItemType(i)}
@@ -366,42 +380,75 @@ export class Reports extends Component<any, ReportsState> {
   }
 
   commentReports() {
-    const reports = this.state.listCommentReportsResponse?.comment_reports;
+    const res = this.state.commentReportsRes;
+    switch (res.state) {
+      case "loading":
+        return (
+          <h5>
+            <Spinner large />
+          </h5>
+        );
+      case "success": {
+        const reports = res.data.comment_reports;
         return (
-      reports && (
           <div>
             {reports.map(cr => (
               <>
                 <hr />
-              <CommentReport key={cr.comment_report.id} report={cr} />
+                <CommentReport
+                  key={cr.comment_report.id}
+                  report={cr}
+                  onResolveReport={this.handleResolveCommentReport}
+                />
               </>
             ))}
           </div>
-      )
         );
       }
+    }
+  }
 
   postReports() {
-    const reports = this.state.listPostReportsResponse?.post_reports;
+    const res = this.state.postReportsRes;
+    switch (res.state) {
+      case "loading":
+        return (
+          <h5>
+            <Spinner large />
+          </h5>
+        );
+      case "success": {
+        const reports = res.data.post_reports;
         return (
-      reports && (
           <div>
             {reports.map(pr => (
               <>
                 <hr />
-              <PostReport key={pr.post_report.id} report={pr} />
+                <PostReport
+                  key={pr.post_report.id}
+                  report={pr}
+                  onResolveReport={this.handleResolvePostReport}
+                />
               </>
             ))}
           </div>
-      )
         );
       }
+    }
+  }
 
   privateMessageReports() {
-    const reports =
+    const res = this.state.messageReportsRes;
-      this.state.listPrivateMessageReportsResponse?.private_message_reports;
+    switch (res.state) {
+      case "loading":
+        return (
+          <h5>
+            <Spinner large />
+          </h5>
+        );
+      case "success": {
+        const reports = res.data.private_message_reports;
         return (
-      reports && (
           <div>
             {reports.map(pmr => (
               <>
@@ -409,36 +456,40 @@ export class Reports extends Component<any, ReportsState> {
                 <PrivateMessageReport
                   key={pmr.private_message_report.id}
                   report={pmr}
+                  onResolveReport={this.handleResolvePrivateMessageReport}
                 />
               </>
             ))}
           </div>
-      )
         );
       }
+    }
+  }
 
-  handlePageChange(page: number) {
+  async handlePageChange(page: number) {
     this.setState({ page });
-    this.refetch();
+    await this.refetch();
   }
 
-  handleUnreadOrAllChange(i: Reports, event: any) {
+  async handleUnreadOrAllChange(i: Reports, event: any) {
     i.setState({ unreadOrAll: Number(event.target.value), page: 1 });
-    i.refetch();
+    await i.refetch();
   }
 
-  handleMessageTypeChange(i: Reports, event: any) {
+  async handleMessageTypeChange(i: Reports, event: any) {
     i.setState({ messageType: Number(event.target.value), page: 1 });
-    i.refetch();
+    await i.refetch();
   }
 
-  static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
+  static fetchInitialData({
-    const promises: Promise<any>[] = [];
+    auth,
+    client,
+  }: InitialFetchRequest): Promise<any>[] {
+    const promises: Promise<RequestState<any>>[] = [];
 
     const unresolved_only = true;
     const page = 1;
     const limit = fetchLimit;
-    const auth = req.auth;
 
     if (auth) {
       const commentReportsForm: ListCommentReports = {
@@ -447,7 +498,7 @@ export class Reports extends Component<any, ReportsState> {
         limit,
         auth,
       };
-      promises.push(req.client.listCommentReports(commentReportsForm));
+      promises.push(client.listCommentReports(commentReportsForm));
 
       const postReportsForm: ListPostReports = {
         unresolved_only,
@@ -455,7 +506,7 @@ export class Reports extends Component<any, ReportsState> {
         limit,
         auth,
       };
-      promises.push(req.client.listPostReports(postReportsForm));
+      promises.push(client.listPostReports(postReportsForm));
 
       if (amAdmin()) {
         const privateMessageReportsForm: ListPrivateMessageReports = {
@@ -465,120 +516,109 @@ export class Reports extends Component<any, ReportsState> {
           auth,
         };
         promises.push(
-          req.client.listPrivateMessageReports(privateMessageReportsForm)
+          client.listPrivateMessageReports(privateMessageReportsForm)
         );
+      } else {
+        promises.push(Promise.resolve({ state: "empty" }));
       }
+    } else {
+      promises.push(
+        Promise.resolve({ state: "empty" }),
+        Promise.resolve({ state: "empty" }),
+        Promise.resolve({ state: "empty" })
+      );
     }
 
     return promises;
   }
 
-  refetch() {
+  async refetch() {
     const unresolved_only = this.state.unreadOrAll == UnreadOrAll.Unread;
     const page = this.state.page;
     const limit = fetchLimit;
-    const auth = myAuth();
+    const auth = myAuthRequired();
-    if (auth) {
-      const commentReportsForm: ListCommentReports = {
-        unresolved_only,
-        page,
-        limit,
-        auth,
-      };
-      WebSocketService.Instance.send(
-        wsClient.listCommentReports(commentReportsForm)
-      );
 
-      const postReportsForm: ListPostReports = {
+    this.setState({
+      commentReportsRes: { state: "loading" },
+      postReportsRes: { state: "loading" },
+      messageReportsRes: { state: "loading" },
+    });
+
+    const form:
+      | ListCommentReports
+      | ListPostReports
+      | ListPrivateMessageReports = {
       unresolved_only,
       page,
       limit,
       auth,
     };
-      WebSocketService.Instance.send(wsClient.listPostReports(postReportsForm));
+
+    this.setState({
+      commentReportsRes: await HttpService.client.listCommentReports(form),
+      postReportsRes: await HttpService.client.listPostReports(form),
+    });
 
     if (amAdmin()) {
-        const privateMessageReportsForm: ListPrivateMessageReports = {
+      this.setState({
-          unresolved_only,
+        messageReportsRes: await HttpService.client.listPrivateMessageReports(
-          page,
+          form
-          limit,
+        ),
-          auth,
+      });
-        };
-        WebSocketService.Instance.send(
-          wsClient.listPrivateMessageReports(privateMessageReportsForm)
-        );
-      }
     }
   }
 
-  parseMessage(msg: any) {
+  async handleResolveCommentReport(form: ResolveCommentReport) {
-    const op = wsUserOp(msg);
+    const res = await HttpService.client.resolveCommentReport(form);
-    console.log(msg);
+    this.findAndUpdateCommentReport(res);
-    if (msg.error) {
+  }
-      toast(i18n.t(msg.error), "danger");
+
-      return;
+  async handleResolvePostReport(form: ResolvePostReport) {
-    } else if (msg.reconnect) {
+    const res = await HttpService.client.resolvePostReport(form);
-      this.refetch();
+    this.findAndUpdatePostReport(res);
-    } else if (op == UserOperation.ListCommentReports) {
+  }
-      const data = wsJsonToRes<ListCommentReportsResponse>(msg);
+
-      this.setState({ listCommentReportsResponse: data });
+  async handleResolvePrivateMessageReport(form: ResolvePrivateMessageReport) {
-      this.setState({ combined: this.buildCombined(), loading: false });
+    const res = await HttpService.client.resolvePrivateMessageReport(form);
-      // this.sendUnreadCount();
+    this.findAndUpdatePrivateMessageReport(res);
-      window.scrollTo(0, 0);
+  }
-      setupTippy();
+
-    } else if (op == UserOperation.ListPostReports) {
+  findAndUpdateCommentReport(res: RequestState<CommentReportResponse>) {
-      const data = wsJsonToRes<ListPostReportsResponse>(msg);
+    this.setState(s => {
-      this.setState({ listPostReportsResponse: data });
+      if (s.commentReportsRes.state == "success" && res.state == "success") {
-      this.setState({ combined: this.buildCombined(), loading: false });
+        s.commentReportsRes.data.comment_reports = editCommentReport(
-      // this.sendUnreadCount();
+          res.data.comment_report_view,
-      window.scrollTo(0, 0);
+          s.commentReportsRes.data.comment_reports
-      setupTippy();
-    } else if (op == UserOperation.ListPrivateMessageReports) {
-      const data = wsJsonToRes<ListPrivateMessageReportsResponse>(msg);
-      this.setState({ listPrivateMessageReportsResponse: data });
-      this.setState({ combined: this.buildCombined(), loading: false });
-      // this.sendUnreadCount();
-      window.scrollTo(0, 0);
-      setupTippy();
-    } else if (op == UserOperation.ResolvePostReport) {
-      const data = wsJsonToRes<PostReportResponse>(msg);
-      updatePostReportRes(
-        data.post_report_view,
-        this.state.listPostReportsResponse?.post_reports
         );
-      const urcs = UserService.Instance.unreadReportCountSub;
-      if (data.post_report_view.post_report.resolved) {
-        urcs.next(urcs.getValue() - 1);
-      } else {
-        urcs.next(urcs.getValue() + 1);
       }
-      this.setState(this.state);
+      return s;
-    } else if (op == UserOperation.ResolveCommentReport) {
+    });
-      const data = wsJsonToRes<CommentReportResponse>(msg);
+  }
-      updateCommentReportRes(
+
-        data.comment_report_view,
+  findAndUpdatePostReport(res: RequestState<PostReportResponse>) {
-        this.state.listCommentReportsResponse?.comment_reports
+    this.setState(s => {
+      if (s.postReportsRes.state == "success" && res.state == "success") {
+        s.postReportsRes.data.post_reports = editPostReport(
+          res.data.post_report_view,
+          s.postReportsRes.data.post_reports
         );
-      const urcs = UserService.Instance.unreadReportCountSub;
-      if (data.comment_report_view.comment_report.resolved) {
-        urcs.next(urcs.getValue() - 1);
-      } else {
-        urcs.next(urcs.getValue() + 1);
       }
-      this.setState(this.state);
+      return s;
-    } else if (op == UserOperation.ResolvePrivateMessageReport) {
+    });
-      const data = wsJsonToRes<PrivateMessageReportResponse>(msg);
+  }
-      updatePrivateMessageReportRes(
+
-        data.private_message_report_view,
+  findAndUpdatePrivateMessageReport(
-        this.state.listPrivateMessageReportsResponse?.private_message_reports
+    res: RequestState<PrivateMessageReportResponse>
+  ) {
+    this.setState(s => {
+      if (s.messageReportsRes.state == "success" && res.state == "success") {
+        s.messageReportsRes.data.private_message_reports =
+          editPrivateMessageReport(
+            res.data.private_message_report_view,
+            s.messageReportsRes.data.private_message_reports
           );
-      const urcs = UserService.Instance.unreadReportCountSub;
-      if (data.private_message_report_view.private_message_report.resolved) {
-        urcs.next(urcs.getValue() - 1);
-      } else {
-        urcs.next(urcs.getValue() + 1);
-      }
-      this.setState(this.state);
       }
+      return s;
+    });
   }
 }

src/shared/components/person/settings.tsx

@@ -1,26 +1,19 @@
 import { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
 import {
-  BlockCommunity,
   BlockCommunityResponse,
-  BlockPerson,
   BlockPersonResponse,
-  ChangePassword,
   CommunityBlockView,
-  DeleteAccount,
+  DeleteAccountResponse,
   GetSiteResponse,
   ListingType,
   LoginResponse,
   PersonBlockView,
-  SaveUserSettings,
   SortType,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
 } from "lemmy-js-client";
-import { Subscription } from "rxjs";
 import { i18n, languages } from "../../i18next";
-import { UserService, WebSocketService } from "../../services";
+import { UserService } from "../../services";
+import { HttpService, RequestState } from "../../services/HttpService";
 import {
   Choice,
   capitalizeFirstLetter,
@@ -34,6 +27,7 @@ import {
   fetchUsers,
   getLanguages,
   myAuth,
+  myAuthRequired,
   personToChoice,
   relTags,
   setIsoData,
@@ -43,8 +37,6 @@ import {
   toast,
   updateCommunityBlock,
   updatePersonBlock,
-  wsClient,
-  wsSubscribe,
 } from "../../utils";
 import { HtmlTags } from "../common/html-tags";
 import { Icon, Spinner } from "../common/icon";
@@ -59,6 +51,9 @@ import { CommunityLink } from "../community/community-link";
 import { PersonListing } from "./person-listing";
 
 interface SettingsState {
+  saveRes: RequestState<LoginResponse>;
+  changePasswordRes: RequestState<LoginResponse>;
+  deleteAccountRes: RequestState<DeleteAccountResponse>;
   // TODO redo these forms
   saveUserSettingsForm: {
     show_nsfw?: boolean;
@@ -94,9 +89,6 @@ interface SettingsState {
   communityBlocks: CommunityBlockView[];
   currentTab: string;
   themeList: string[];
-  saveUserSettingsLoading: boolean;
-  changePasswordLoading: boolean;
-  deleteAccountLoading: boolean;
   deleteAccountShowConfirm: boolean;
   siteRes: GetSiteResponse;
   searchCommunityLoading: boolean;
@@ -143,13 +135,12 @@ const Filter = ({
 
 export class Settings extends Component<any, SettingsState> {
   private isoData = setIsoData(this.context);
-  private subscription?: Subscription;
   state: SettingsState = {
+    saveRes: { state: "empty" },
+    deleteAccountRes: { state: "empty" },
+    changePasswordRes: { state: "empty" },
     saveUserSettingsForm: {},
     changePasswordForm: {},
-    saveUserSettingsLoading: false,
-    changePasswordLoading: false,
-    deleteAccountLoading: false,
     deleteAccountShowConfirm: false,
     deleteAccountForm: {},
     personBlocks: [],
@@ -180,8 +171,8 @@ export class Settings extends Component<any, SettingsState> {
     this.userSettings = this.userSettings.bind(this);
     this.blockCards = this.blockCards.bind(this);
 
-    this.parseMessage = this.parseMessage.bind(this);
+    this.handleBlockPerson = this.handleBlockPerson.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
+    this.handleBlockCommunity = this.handleBlockCommunity.bind(this);
 
     const mui = UserService.Instance.myUserInfo;
     if (mui) {
@@ -245,10 +236,6 @@ export class Settings extends Component<any, SettingsState> {
     this.setState({ themeList: await fetchThemeList() });
   }
 
-  componentWillUnmount() {
-    this.subscription?.unsubscribe();
-  }
-
   get documentTitle(): string {
     return i18n.t("settings");
   }
@@ -375,7 +362,7 @@ export class Settings extends Component<any, SettingsState> {
           </div>
           <div className="form-group">
             <button type="submit" className="btn btn-block btn-secondary mr-4">
-              {this.state.changePasswordLoading ? (
+              {this.state.changePasswordRes.state === "loading" ? (
                 <Spinner />
               ) : (
                 capitalizeFirstLetter(i18n.t("save"))
@@ -791,7 +778,7 @@ export class Settings extends Component<any, SettingsState> {
           {this.totpSection()}
           <div className="form-group">
             <button type="submit" className="btn btn-block btn-secondary mr-4">
-              {this.state.saveUserSettingsLoading ? (
+              {this.state.saveRes.state === "loading" ? (
                 <Spinner />
               ) : (
                 capitalizeFirstLetter(i18n.t("save"))
@@ -830,7 +817,7 @@ export class Settings extends Component<any, SettingsState> {
                   disabled={!this.state.deleteAccountForm.password}
                   onClick={linkEvent(this, this.handleDeleteAccount)}
                 >
-                  {this.state.deleteAccountLoading ? (
+                  {this.state.deleteAccountRes.state === "loading" ? (
                     <Spinner />
                   ) : (
                     capitalizeFirstLetter(i18n.t("delete"))
@@ -911,9 +898,7 @@ export class Settings extends Component<any, SettingsState> {
     const searchPersonOptions: Choice[] = [];
 
     if (text.length > 0) {
-      searchPersonOptions.push(
+      searchPersonOptions.push(...(await fetchUsers(text)).map(personToChoice));
-        ...(await fetchUsers(text)).users.map(personToChoice)
-      );
     }
 
     this.setState({
@@ -929,7 +914,7 @@ export class Settings extends Component<any, SettingsState> {
 
     if (text.length > 0) {
       searchCommunityOptions.push(
-        ...(await fetchCommunities(text)).communities.map(communityToChoice)
+        ...(await fetchCommunities(text)).map(communityToChoice)
       );
     }
 
@@ -939,100 +924,107 @@ export class Settings extends Component<any, SettingsState> {
     });
   });
 
-  handleBlockPerson({ value }: Choice) {
+  async handleBlockPerson({ value }: Choice) {
-    const auth = myAuth();
+    if (value !== "0") {
-    if (auth && value !== "0") {
+      const res = await HttpService.client.blockPerson({
-      const blockUserForm: BlockPerson = {
         person_id: Number(value),
         block: true,
-        auth,
+        auth: myAuthRequired(),
-      };
+      });
-
+      this.personBlock(res);
-      WebSocketService.Instance.send(wsClient.blockPerson(blockUserForm));
     }
   }
 
-  handleUnblockPerson(i: { ctx: Settings; recipientId: number }) {
+  async handleUnblockPerson({
-    const auth = myAuth();
+    ctx,
-    if (auth) {
+    recipientId,
-      const blockUserForm: BlockPerson = {
+  }: {
-        person_id: i.recipientId,
+    ctx: Settings;
+    recipientId: number;
+  }) {
+    const res = await HttpService.client.blockPerson({
+      person_id: recipientId,
       block: false,
-        auth,
+      auth: myAuthRequired(),
-      };
+    });
-      WebSocketService.Instance.send(wsClient.blockPerson(blockUserForm));
+    ctx.personBlock(res);
-    }
   }
 
-  handleBlockCommunity({ value }: Choice) {
+  async handleBlockCommunity({ value }: Choice) {
-    const auth = myAuth();
+    if (value !== "0") {
-    if (auth && value !== "0") {
+      const res = await HttpService.client.blockCommunity({
-      const blockCommunityForm: BlockCommunity = {
         community_id: Number(value),
         block: true,
-        auth,
+        auth: myAuthRequired(),
-      };
+      });
-      WebSocketService.Instance.send(
+      this.communityBlock(res);
-        wsClient.blockCommunity(blockCommunityForm)
-      );
     }
   }
 
-  handleUnblockCommunity(i: { ctx: Settings; communityId: number }) {
+  async handleUnblockCommunity(i: { ctx: Settings; communityId: number }) {
     const auth = myAuth();
     if (auth) {
-      const blockCommunityForm: BlockCommunity = {
+      const res = await HttpService.client.blockCommunity({
         community_id: i.communityId,
         block: false,
-        auth,
+        auth: myAuthRequired(),
-      };
+      });
-      WebSocketService.Instance.send(
+      i.ctx.communityBlock(res);
-        wsClient.blockCommunity(blockCommunityForm)
-      );
     }
   }
 
   handleShowNsfwChange(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.show_nsfw = event.target.checked;
+    i.setState(
-    i.setState(i.state);
+      s => ((s.saveUserSettingsForm.show_nsfw = event.target.checked), s)
+    );
   }
 
   handleShowAvatarsChange(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.show_avatars = event.target.checked;
     const mui = UserService.Instance.myUserInfo;
     if (mui) {
       mui.local_user_view.local_user.show_avatars = event.target.checked;
     }
-    i.setState(i.state);
+    i.setState(
+      s => ((s.saveUserSettingsForm.show_avatars = event.target.checked), s)
+    );
   }
 
   handleBotAccount(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.bot_account = event.target.checked;
+    i.setState(
-    i.setState(i.state);
+      s => ((s.saveUserSettingsForm.bot_account = event.target.checked), s)
+    );
   }
 
   handleShowBotAccounts(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.show_bot_accounts = event.target.checked;
+    i.setState(
-    i.setState(i.state);
+      s => (
+        (s.saveUserSettingsForm.show_bot_accounts = event.target.checked), s
+      )
+    );
   }
 
   handleReadPosts(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.show_read_posts = event.target.checked;
+    i.setState(
-    i.setState(i.state);
+      s => ((s.saveUserSettingsForm.show_read_posts = event.target.checked), s)
+    );
   }
 
   handleShowNewPostNotifs(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.show_new_post_notifs = event.target.checked;
+    i.setState(
-    i.setState(i.state);
+      s => (
+        (s.saveUserSettingsForm.show_new_post_notifs = event.target.checked), s
+      )
+    );
   }
 
   handleShowScoresChange(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.show_scores = event.target.checked;
     const mui = UserService.Instance.myUserInfo;
     if (mui) {
       mui.local_user_view.local_user.show_scores = event.target.checked;
     }
-    i.setState(i.state);
+    i.setState(
+      s => ((s.saveUserSettingsForm.show_scores = event.target.checked), s)
+    );
   }
 
   handleGenerateTotp(i: Settings, event: any) {
@@ -1041,35 +1033,37 @@ export class Settings extends Component<any, SettingsState> {
     if (checked) {
       toast(i18n.t("two_factor_setup_instructions"));
     }
-    i.state.saveUserSettingsForm.generate_totp_2fa = checked;
+    i.setState(s => ((s.saveUserSettingsForm.generate_totp_2fa = checked), s));
-    i.setState(i.state);
   }
 
   handleRemoveTotp(i: Settings, event: any) {
     // Coerce true to undefined here, so it won't generate it.
     const checked: boolean | undefined = !event.target.checked && undefined;
-    i.state.saveUserSettingsForm.generate_totp_2fa = checked;
+    i.setState(s => ((s.saveUserSettingsForm.generate_totp_2fa = checked), s));
-    i.setState(i.state);
   }
 
   handleSendNotificationsToEmailChange(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.send_notifications_to_email =
+    i.setState(
-      event.target.checked;
+      s => (
-    i.setState(i.state);
+        (s.saveUserSettingsForm.send_notifications_to_email =
+          event.target.checked),
+        s
+      )
+    );
   }
 
   handleThemeChange(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.theme = event.target.value;
+    i.setState(s => ((s.saveUserSettingsForm.theme = event.target.value), s));
     setTheme(event.target.value, true);
-    i.setState(i.state);
   }
 
   handleInterfaceLangChange(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.interface_language = event.target.value;
+    i.setState(
+      s => ((s.saveUserSettingsForm.interface_language = event.target.value), s)
+    );
     i18n.changeLanguage(
       getLanguages(i.state.saveUserSettingsForm.interface_language).at(0)
     );
-    i.setState(i.state);
   }
 
   handleDiscussionLanguageChange(val: number[]) {
@@ -1089,8 +1083,7 @@ export class Settings extends Component<any, SettingsState> {
   }
 
   handleEmailChange(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.email = event.target.value;
+    i.setState(s => ((s.saveUserSettingsForm.email = event.target.value), s));
-    i.setState(i.state);
   }
 
   handleBioChange(val: string) {
@@ -1114,90 +1107,100 @@ export class Settings extends Component<any, SettingsState> {
   }
 
   handleDisplayNameChange(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.display_name = event.target.value;
+    i.setState(
-    i.setState(i.state);
+      s => ((s.saveUserSettingsForm.display_name = event.target.value), s)
+    );
   }
 
   handleMatrixUserIdChange(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.matrix_user_id = event.target.value;
+    i.setState(
-    i.setState(i.state);
+      s => ((s.saveUserSettingsForm.matrix_user_id = event.target.value), s)
+    );
   }
 
   handleNewPasswordChange(i: Settings, event: any) {
-    i.state.changePasswordForm.new_password = event.target.value;
+    const newPass: string | undefined =
-    if (i.state.changePasswordForm.new_password == "") {
+      event.target.value == "" ? undefined : event.target.value;
-      i.state.changePasswordForm.new_password = undefined;
+    i.setState(s => ((s.changePasswordForm.new_password = newPass), s));
-    }
-    i.setState(i.state);
   }
 
   handleNewPasswordVerifyChange(i: Settings, event: any) {
-    i.state.changePasswordForm.new_password_verify = event.target.value;
+    const newPassVerify: string | undefined =
-    if (i.state.changePasswordForm.new_password_verify == "") {
+      event.target.value == "" ? undefined : event.target.value;
-      i.state.changePasswordForm.new_password_verify = undefined;
+    i.setState(
-    }
+      s => ((s.changePasswordForm.new_password_verify = newPassVerify), s)
-    i.setState(i.state);
+    );
   }
 
   handleOldPasswordChange(i: Settings, event: any) {
-    i.state.changePasswordForm.old_password = event.target.value;
+    const oldPass: string | undefined =
-    if (i.state.changePasswordForm.old_password == "") {
+      event.target.value == "" ? undefined : event.target.value;
-      i.state.changePasswordForm.old_password = undefined;
+    i.setState(s => ((s.changePasswordForm.old_password = oldPass), s));
-    }
-    i.setState(i.state);
   }
 
-  handleSaveSettingsSubmit(i: Settings, event: any) {
+  async handleSaveSettingsSubmit(i: Settings, event: any) {
     event.preventDefault();
-    i.setState({ saveUserSettingsLoading: true });
+    i.setState({ saveRes: { state: "loading" } });
-    const auth = myAuth();
+
-    if (auth) {
+    const saveRes = await HttpService.client.saveUserSettings({
-      const form: SaveUserSettings = { ...i.state.saveUserSettingsForm, auth };
+      ...i.state.saveUserSettingsForm,
-      WebSocketService.Instance.send(wsClient.saveUserSettings(form));
+      auth: myAuthRequired(),
-    }
+    });
+    if (saveRes.state === "success") {
+      UserService.Instance.login(saveRes.data);
+      location.reload();
+      toast(i18n.t("saved"));
+      window.scrollTo(0, 0);
     }
 
-  handleChangePasswordSubmit(i: Settings, event: any) {
+    i.setState({ saveRes });
+  }
+
+  async handleChangePasswordSubmit(i: Settings, event: any) {
     event.preventDefault();
-    i.setState({ changePasswordLoading: true });
+    const { new_password, new_password_verify, old_password } =
-    const auth = myAuth();
+      i.state.changePasswordForm;
-    const pForm = i.state.changePasswordForm;
+
-    const new_password = pForm.new_password;
+    if (new_password && old_password && new_password_verify) {
-    const new_password_verify = pForm.new_password_verify;
+      i.setState({ changePasswordRes: { state: "loading" } });
-    const old_password = pForm.old_password;
+      const changePasswordRes = await HttpService.client.changePassword({
-    if (auth && new_password && old_password && new_password_verify) {
-      const form: ChangePassword = {
         new_password,
         new_password_verify,
         old_password,
-        auth,
+        auth: myAuthRequired(),
-      };
+      });
+      if (changePasswordRes.state === "success") {
+        UserService.Instance.login(changePasswordRes.data);
+        window.scrollTo(0, 0);
+        toast(i18n.t("password_changed"));
+      }
 
-      WebSocketService.Instance.send(wsClient.changePassword(form));
+      i.setState({ changePasswordRes });
     }
   }
 
-  handleDeleteAccountShowConfirmToggle(i: Settings, event: any) {
+  handleDeleteAccountShowConfirmToggle(i: Settings) {
-    event.preventDefault();
     i.setState({ deleteAccountShowConfirm: !i.state.deleteAccountShowConfirm });
   }
 
   handleDeleteAccountPasswordChange(i: Settings, event: any) {
-    i.state.deleteAccountForm.password = event.target.value;
+    i.setState(s => ((s.deleteAccountForm.password = event.target.value), s));
-    i.setState(i.state);
   }
 
-  handleDeleteAccount(i: Settings, event: any) {
+  async handleDeleteAccount(i: Settings) {
-    event.preventDefault();
-    i.setState({ deleteAccountLoading: true });
-    const auth = myAuth();
     const password = i.state.deleteAccountForm.password;
-    if (auth && password) {
+    if (password) {
-      const form: DeleteAccount = {
+      i.setState({ deleteAccountRes: { state: "loading" } });
+      const deleteAccountRes = await HttpService.client.deleteAccount({
         password,
-        auth,
+        auth: myAuthRequired(),
-      };
+      });
-      WebSocketService.Instance.send(wsClient.deleteAccount(form));
+      if (deleteAccountRes.state === "success") {
+        UserService.Instance.logout();
+        this.context.router.history.replace("/");
+      }
+
+      i.setState({ deleteAccountRes });
     }
   }
 
@@ -1205,44 +1208,19 @@ export class Settings extends Component<any, SettingsState> {
     i.ctx.setState({ currentTab: i.tab });
   }
 
-  parseMessage(msg: any) {
+  personBlock(res: RequestState<BlockPersonResponse>) {
-    const op = wsUserOp(msg);
+    if (res.state === "success") {
-    console.log(msg);
+      updatePersonBlock(res.data);
-    if (msg.error) {
-      this.setState({
-        saveUserSettingsLoading: false,
-        changePasswordLoading: false,
-        deleteAccountLoading: false,
-      });
-      toast(i18n.t(msg.error), "danger");
-      return;
-    } else if (op == UserOperation.SaveUserSettings) {
-      this.setState({ saveUserSettingsLoading: false });
-      toast(i18n.t("saved"));
-      window.scrollTo(0, 0);
-    } else if (op == UserOperation.ChangePassword) {
-      const data = wsJsonToRes<LoginResponse>(msg);
-      UserService.Instance.login(data);
-      this.setState({ changePasswordLoading: false });
-      window.scrollTo(0, 0);
-      toast(i18n.t("password_changed"));
-    } else if (op == UserOperation.DeleteAccount) {
-      this.setState({
-        deleteAccountLoading: false,
-        deleteAccountShowConfirm: false,
-      });
-      UserService.Instance.logout();
-      window.location.href = "/";
-    } else if (op == UserOperation.BlockPerson) {
-      const data = wsJsonToRes<BlockPersonResponse>(msg);
-      updatePersonBlock(data);
       const mui = UserService.Instance.myUserInfo;
       if (mui) {
         this.setState({ personBlocks: mui.person_blocks });
       }
-    } else if (op == UserOperation.BlockCommunity) {
+    }
-      const data = wsJsonToRes<BlockCommunityResponse>(msg);
+  }
-      updateCommunityBlock(data);
+
+  communityBlock(res: RequestState<BlockCommunityResponse>) {
+    if (res.state === "success") {
+      updateCommunityBlock(res.data);
       const mui = UserService.Instance.myUserInfo;
       if (mui) {
         this.setState({ communityBlocks: mui.community_blocks });

src/shared/components/person/verify-email.tsx

@@ -1,56 +1,47 @@
 import { Component } from "inferno";
-import {
+import { GetSiteResponse, VerifyEmailResponse } from "lemmy-js-client";
-  GetSiteResponse,
-  UserOperation,
-  VerifyEmail as VerifyEmailForm,
-  wsJsonToRes,
-  wsUserOp,
-} from "lemmy-js-client";
-import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
-import { WebSocketService } from "../../services";
+import { HttpService, RequestState } from "../../services/HttpService";
-import {
+import { setIsoData, toast } from "../../utils";
-  isBrowser,
-  setIsoData,
-  toast,
-  wsClient,
-  wsSubscribe,
-} from "../../utils";
 import { HtmlTags } from "../common/html-tags";
+import { Spinner } from "../common/icon";
 
 interface State {
-  verifyEmailForm: VerifyEmailForm;
+  verifyRes: RequestState<VerifyEmailResponse>;
   siteRes: GetSiteResponse;
 }
 
 export class VerifyEmail extends Component<any, State> {
   private isoData = setIsoData(this.context);
-  private subscription?: Subscription;
 
   state: State = {
-    verifyEmailForm: {
+    verifyRes: { state: "empty" },
-      token: this.props.match.params.token,
-    },
     siteRes: this.isoData.site_res,
   };
 
   constructor(props: any, context: any) {
     super(props, context);
-
-    this.parseMessage = this.parseMessage.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
   }
 
-  componentDidMount() {
+  async verify() {
-    WebSocketService.Instance.send(
+    this.setState({
-      wsClient.verifyEmail(this.state.verifyEmailForm)
+      verifyRes: { state: "loading" },
-    );
+    });
+
+    this.setState({
+      verifyRes: await HttpService.client.verifyEmail({
+        token: this.props.match.params.token,
+      }),
+    });
+
+    if (this.state.verifyRes.state == "success") {
+      toast(i18n.t("email_verified"));
+      this.props.history.push("/login");
+    }
   }
 
-  componentWillUnmount() {
+  async componentDidMount() {
-    if (isBrowser()) {
+    await this.verify();
-      this.subscription?.unsubscribe();
-    }
   }
 
   get documentTitle(): string {
@@ -69,26 +60,14 @@ export class VerifyEmail extends Component<any, State> {
         <div className="row">
           <div className="col-12 col-lg-6 offset-lg-3 mb-4">
             <h5>{i18n.t("verify_email")}</h5>
+            {this.state.verifyRes.state == "loading" && (
+              <h5>
+                <Spinner large />
+              </h5>
+            )}
           </div>
         </div>
       </div>
     );
   }
-
-  parseMessage(msg: any) {
-    const op = wsUserOp(msg);
-    console.log(msg);
-    if (msg.error) {
-      toast(i18n.t(msg.error), "danger");
-      this.setState(this.state);
-      this.props.history.push("/");
-      return;
-    } else if (op == UserOperation.VerifyEmail) {
-      const data = wsJsonToRes(msg);
-      if (data) {
-        toast(i18n.t("email_verified"));
-        this.props.history.push("/login");
-      }
-    }
-  }
 }

src/shared/components/post/create-post.tsx

@@ -1,18 +1,19 @@
 import { Component } from "inferno";
 import { RouteComponentProps } from "inferno-router/dist/Route";
 import {
+  CreatePost as CreatePostI,
   GetCommunity,
-  GetCommunityResponse,
   GetSiteResponse,
-  PostView,
+  ListCommunitiesResponse,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
 } from "lemmy-js-client";
-import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
 import { InitialFetchRequest, PostFormParams } from "../../interfaces";
-import { WebSocketService } from "../../services";
+import { FirstLoadService } from "../../services/FirstLoadService";
+import {
+  HttpService,
+  RequestState,
+  WrappedLemmyHttp,
+} from "../../services/HttpService";
 import {
   Choice,
   QueryParams,
@@ -20,12 +21,8 @@ import {
   enableNsfw,
   getIdFromString,
   getQueryParams,
-  isBrowser,
   myAuth,
   setIsoData,
-  toast,
-  wsClient,
-  wsSubscribe,
 } from "../../utils";
 import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
@@ -41,10 +38,16 @@ function getCreatePostQueryParams() {
   });
 }
 
+function fetchCommunitiesForOptions(client: WrappedLemmyHttp) {
+  return client.listCommunities({ limit: 30, sort: "TopMonth", type_: "All" });
+}
+
 interface CreatePostState {
   siteRes: GetSiteResponse;
   loading: boolean;
   selectedCommunityChoice?: Choice;
+  initialCommunitiesRes: RequestState<ListCommunitiesResponse>;
+  isIsomorphic: boolean;
 }
 
 export class CreatePost extends Component<
@@ -52,10 +55,11 @@ export class CreatePost extends Component<
   CreatePostState
 > {
   private isoData = setIsoData(this.context);
-  private subscription?: Subscription;
   state: CreatePostState = {
     siteRes: this.isoData.site_res,
     loading: true,
+    initialCommunitiesRes: { state: "empty" },
+    isIsomorphic: false,
   };
 
   constructor(props: RouteComponentProps<Record<string, never>>, context: any) {
@@ -65,19 +69,14 @@ export class CreatePost extends Component<
     this.handleSelectedCommunityChange =
       this.handleSelectedCommunityChange.bind(this);
 
-    this.parseMessage = this.parseMessage.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
-
     // Only fetch the data if coming from another route
-    if (this.isoData.path === this.context.router.route.match.url) {
+    if (FirstLoadService.isFirstLoad) {
-      const communityRes = this.isoData.routeData[0] as
+      const [communityRes, listCommunitiesRes] = this.isoData.routeData;
-        | GetCommunityResponse
-        | undefined;
 
-      if (communityRes) {
+      if (communityRes?.state === "success") {
         const communityChoice: Choice = {
-          label: communityRes.community_view.community.title,
+          label: communityRes.data.community_view.community.title,
-          value: communityRes.community_view.community.id.toString(),
+          value: communityRes.data.community_view.community.id.toString(),
         };
 
         this.state = {
@@ -89,31 +88,50 @@ export class CreatePost extends Component<
       this.state = {
         ...this.state,
         loading: false,
+        initialCommunitiesRes: listCommunitiesRes,
+        isIsomorphic: true,
       };
-    } else {
-      this.fetchCommunity();
     }
   }
 
-  fetchCommunity() {
+  async fetchCommunity() {
     const { communityId } = getCreatePostQueryParams();
-    const auth = myAuth(false);
+    const auth = myAuth();
 
     if (communityId) {
-      const form: GetCommunity = {
+      const res = await HttpService.client.getCommunity({
         id: communityId,
         auth,
-      };
+      });
-
+      if (res.state === "success") {
-      WebSocketService.Instance.send(wsClient.getCommunity(form));
+        this.setState({
+          selectedCommunityChoice: {
+            label: res.data.community_view.community.name,
+            value: res.data.community_view.community.id.toString(),
+          },
+          loading: false,
+        });
+      }
     }
   }
 
-  componentDidMount(): void {
+  async componentDidMount() {
+    // TODO test this
+    if (!this.state.isIsomorphic) {
       const { communityId } = getCreatePostQueryParams();
 
-    if (communityId?.toString() !== this.state.selectedCommunityChoice?.value) {
+      const initialCommunitiesRes = await fetchCommunitiesForOptions(
-      this.fetchCommunity();
+        HttpService.client
+      );
+
+      this.setState({
+        initialCommunitiesRes,
+      });
+
+      if (
+        communityId?.toString() !== this.state.selectedCommunityChoice?.value
+      ) {
+        await this.fetchCommunity();
       } else if (!communityId) {
         this.setState({
           selectedCommunityChoice: undefined,
@@ -121,11 +139,6 @@ export class CreatePost extends Component<
         });
       }
     }
-
-  componentWillUnmount() {
-    if (isBrowser()) {
-      this.subscription?.unsubscribe();
-    }
   }
 
   get documentTitle(): string {
@@ -164,6 +177,11 @@ export class CreatePost extends Component<
                 siteLanguages={this.state.siteRes.discussion_languages}
                 selectedCommunityChoice={selectedCommunityChoice}
                 onSelectCommunity={this.handleSelectedCommunityChange}
+                initialCommunities={
+                  this.state.initialCommunitiesRes.state === "success"
+                    ? this.state.initialCommunitiesRes.data.communities
+                    : []
+                }
               />
             </div>
           </div>
@@ -172,7 +190,7 @@ export class CreatePost extends Component<
     );
   }
 
-  updateUrl({ communityId }: Partial<CreatePostProps>) {
+  async updateUrl({ communityId }: Partial<CreatePostProps>) {
     const { communityId: urlCommunityId } = getCreatePostQueryParams();
 
     const locationState = this.props.history.location.state as
@@ -191,7 +209,7 @@ export class CreatePost extends Component<
 
     history.replaceState(locationState, "", url);
 
-    this.fetchCommunity();
+    await this.fetchCommunity();
   }
 
   handleSelectedCommunityChange(choice: Choice) {
@@ -200,16 +218,23 @@ export class CreatePost extends Component<
     });
   }
 
-  handlePostCreate(post_view: PostView) {
+  async handlePostCreate(form: CreatePostI) {
-    this.props.history.replace(`/post/${post_view.post.id}`);
+    const res = await HttpService.client.createPost(form);
+
+    if (res.state === "success") {
+      const postId = res.data.post_view.post.id;
+      this.props.history.replace(`/post/${postId}`);
+    }
   }
 
   static fetchInitialData({
     client,
     query: { communityId },
     auth,
-  }: InitialFetchRequest<QueryParams<CreatePostProps>>): Promise<any>[] {
+  }: InitialFetchRequest<QueryParams<CreatePostProps>>): Promise<
-    const promises: Promise<any>[] = [];
+    RequestState<any>
+  >[] {
+    const promises: Promise<RequestState<any>>[] = [];
 
     if (communityId) {
       const form: GetCommunity = {
@@ -219,31 +244,11 @@ export class CreatePost extends Component<
 
       promises.push(client.getCommunity(form));
     } else {
-      promises.push(Promise.resolve());
+      promises.push(Promise.resolve({ state: "empty" }));
     }
 
+    promises.push(fetchCommunitiesForOptions(client));
+
     return promises;
   }
-
-  parseMessage(msg: any) {
-    const op = wsUserOp(msg);
-    console.log(msg);
-    if (msg.error) {
-      toast(i18n.t(msg.error), "danger");
-      return;
-    }
-
-    if (op === UserOperation.GetCommunity) {
-      const {
-        community_view: {
-          community: { title, id },
-        },
-      } = wsJsonToRes<GetCommunityResponse>(msg);
-
-      this.setState({
-        selectedCommunityChoice: { label: title, value: id.toString() },
-        loading: false,
-      });
-    }
-  }
 }

src/shared/components/post/post-form.tsx

@@ -1,21 +1,18 @@
 import autosize from "autosize";
-import { Component, linkEvent } from "inferno";
+import { Component, InfernoNode, linkEvent } from "inferno";
 import {
+  CommunityView,
   CreatePost,
   EditPost,
+  GetSiteMetadataResponse,
   Language,
-  PostResponse,
   PostView,
-  Search,
   SearchResponse,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
 } from "lemmy-js-client";
-import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
 import { PostFormParams } from "../../interfaces";
-import { UserService, WebSocketService } from "../../services";
+import { UserService } from "../../services";
+import { HttpService, RequestState } from "../../services/HttpService";
 import {
   Choice,
   archiveTodayUrl,
@@ -24,21 +21,18 @@ import {
   debounce,
   fetchCommunities,
   getIdFromString,
-  getSiteMetadata,
   ghostArchiveUrl,
   isImage,
   myAuth,
+  myAuthRequired,
   pictrsDeleteToast,
   relTags,
   setupTippy,
   toast,
   trendingFetchLimit,
-  uploadImage,
   validTitle,
   validURL,
   webArchiveUrl,
-  wsClient,
-  wsSubscribe,
 } from "../../utils";
 import { Icon, Spinner } from "../common/icon";
 import { LanguageSelect } from "../common/language-select";
@@ -51,16 +45,18 @@ const MAX_POST_TITLE_LENGTH = 200;
 
 interface PostFormProps {
   post_view?: PostView; // If a post is given, that means this is an edit
+  crossPosts?: PostView[];
   allLanguages: Language[];
   siteLanguages: number[];
   params?: PostFormParams;
-  onCancel?(): any;
+  onCancel?(): void;
-  onCreate?(post: PostView): any;
+  onCreate?(form: CreatePost): void;
-  onEdit?(post: PostView): any;
+  onEdit?(form: EditPost): void;
   enableNsfw?: boolean;
   enableDownvotes?: boolean;
   selectedCommunityChoice?: Choice;
   onSelectCommunity?: (choice: Choice) => void;
+  initialCommunities?: CommunityView[];
 }
 
 interface PostFormState {
@@ -73,25 +69,27 @@ interface PostFormState {
     community_id?: number;
     honeypot?: string;
   };
-  suggestedTitle?: string;
-  suggestedPosts?: PostView[];
-  crossPosts?: PostView[];
   loading: boolean;
+  suggestedPostsRes: RequestState<SearchResponse>;
+  metadataRes: RequestState<GetSiteMetadataResponse>;
   imageLoading: boolean;
   communitySearchLoading: boolean;
   communitySearchOptions: Choice[];
   previewMode: boolean;
+  submitted: boolean;
 }
 
 export class PostForm extends Component<PostFormProps, PostFormState> {
-  private subscription?: Subscription;
   state: PostFormState = {
+    suggestedPostsRes: { state: "empty" },
+    metadataRes: { state: "empty" },
     form: {},
     loading: false,
     imageLoading: false,
     communitySearchLoading: false,
     previewMode: false,
     communitySearchOptions: [],
+    submitted: false,
   };
 
   constructor(props: PostFormProps, context: any) {
@@ -102,39 +100,52 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     this.handleLanguageChange = this.handleLanguageChange.bind(this);
     this.handleCommunitySelect = this.handleCommunitySelect.bind(this);
 
-    this.parseMessage = this.parseMessage.bind(this);
+    const { post_view, selectedCommunityChoice, params } = this.props;
-    this.subscription = wsSubscribe(this.parseMessage);
 
     // Means its an edit
-    const pv = this.props.post_view;
+    if (post_view) {
-    if (pv) {
       this.state = {
         ...this.state,
         form: {
-          body: pv.post.body,
+          body: post_view.post.body,
-          name: pv.post.name,
+          name: post_view.post.name,
-          community_id: pv.community.id,
+          community_id: post_view.community.id,
-          url: pv.post.url,
+          url: post_view.post.url,
-          nsfw: pv.post.nsfw,
+          nsfw: post_view.post.nsfw,
-          language_id: pv.post.language_id,
+          language_id: post_view.post.language_id,
         },
       };
-    }
+    } else if (selectedCommunityChoice) {
-
-    const selectedCommunityChoice = this.props.selectedCommunityChoice;
-
-    if (selectedCommunityChoice) {
       this.state = {
         ...this.state,
         form: {
           ...this.state.form,
           community_id: getIdFromString(selectedCommunityChoice.value),
         },
-        communitySearchOptions: [selectedCommunityChoice],
+        communitySearchOptions: [selectedCommunityChoice]
+          .concat(
+            this.props.initialCommunities?.map(
+              ({ community: { id, title } }) => ({
+                label: title,
+                value: id.toString(),
+              })
+            ) ?? []
+          )
+          .filter(option => option.value !== selectedCommunityChoice.value),
+      };
+    } else {
+      this.state = {
+        ...this.state,
+        communitySearchOptions:
+          this.props.initialCommunities?.map(
+            ({ community: { id, title } }) => ({
+              label: title,
+              value: id.toString(),
+            })
+          ) ?? [],
       };
     }
 
-    const params = this.props.params;
     if (params) {
       this.state = {
         ...this.state,
@@ -155,54 +166,42 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     }
   }
 
-  componentDidUpdate() {
+  componentWillReceiveProps(
-    if (
+    nextProps: Readonly<{ children?: InfernoNode } & PostFormProps>
-      !this.state.loading &&
+  ): void {
-      (this.state.form.name || this.state.form.url || this.state.form.body)
+    if (this.props != nextProps) {
-    ) {
+      this.setState(
-      window.onbeforeunload = () => true;
+        s => (
-    } else {
+          (s.form.community_id = getIdFromString(
-      window.onbeforeunload = null;
+            nextProps.selectedCommunityChoice?.value
+          )),
+          s
+        )
+      );
     }
   }
 
-  componentWillUnmount() {
-    this.subscription?.unsubscribe();
-    /* this.choices && this.choices.destroy(); */
-    window.onbeforeunload = null;
-  }
-
-  static getDerivedStateFromProps(
-    { selectedCommunityChoice }: PostFormProps,
-    { form, ...restState }: PostFormState
-  ) {
-    return {
-      ...restState,
-      form: {
-        ...form,
-        community_id: getIdFromString(selectedCommunityChoice?.value),
-      },
-    };
-  }
-
   render() {
     const firstLang = this.state.form.language_id;
     const selectedLangs = firstLang ? Array.of(firstLang) : undefined;
 
     const url = this.state.form.url;
+
+    // TODO
+    // const promptCheck =
+    // !!this.state.form.name || !!this.state.form.url || !!this.state.form.body;
+    // <Prompt when={promptCheck} message={i18n.t("block_leaving")} />
     return (
-      <div>
+      <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
         <NavigationPrompt
           when={
-            !this.state.loading &&
             !!(
               this.state.form.name ||
               this.state.form.url ||
               this.state.form.body
-            )
+            ) && !this.state.submitted
           }
         />
-        <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
         <div className="form-group row">
           <label className="col-sm-2 col-form-label" htmlFor="post-url">
             {i18n.t("url")}
@@ -216,16 +215,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
               onInput={linkEvent(this, this.handlePostUrlChange)}
               onPaste={linkEvent(this, this.handleImageUploadPaste)}
             />
-              {this.state.suggestedTitle && (
+            {this.renderSuggestedTitleCopy()}
-                <div
-                  className="mt-1 text-muted small font-weight-bold pointer"
-                  role="button"
-                  onClick={linkEvent(this, this.copySuggestedTitle)}
-                >
-                  {i18n.t("copy_suggested_title", { title: "" })}{" "}
-                  {this.state.suggestedTitle}
-                </div>
-              )}
             <form>
               <label
                 htmlFor="file-upload"
@@ -279,18 +269,36 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             {url && isImage(url) && (
               <img src={url} className="img-fluid" alt="" />
             )}
-              {this.state.crossPosts && this.state.crossPosts.length > 0 && (
+            {this.props.crossPosts && this.props.crossPosts.length > 0 && (
               <>
                 <div className="my-1 text-muted small font-weight-bold">
                   {i18n.t("cross_posts")}
                 </div>
                 <PostListings
                   showCommunity
-                    posts={this.state.crossPosts}
+                  posts={this.props.crossPosts}
                   enableDownvotes={this.props.enableDownvotes}
                   enableNsfw={this.props.enableNsfw}
                   allLanguages={this.props.allLanguages}
                   siteLanguages={this.props.siteLanguages}
+                  viewOnly
+                  // All of these are unused, since its view only
+                  onPostEdit={() => {}}
+                  onPostVote={() => {}}
+                  onPostReport={() => {}}
+                  onBlockPerson={() => {}}
+                  onLockPost={() => {}}
+                  onDeletePost={() => {}}
+                  onRemovePost={() => {}}
+                  onSavePost={() => {}}
+                  onFeaturePost={() => {}}
+                  onPurgePerson={() => {}}
+                  onPurgePost={() => {}}
+                  onBanPersonFromCommunity={() => {}}
+                  onBanPerson={() => {}}
+                  onAddModToCommunity={() => {}}
+                  onAddAdmin={() => {}}
+                  onTransferCommunity={() => {}}
                 />
               </>
             )}
@@ -318,22 +326,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                 {i18n.t("invalid_post_title")}
               </div>
             )}
-              {this.state.suggestedPosts &&
+            {this.renderSuggestedPosts()}
-                this.state.suggestedPosts.length > 0 && (
-                  <>
-                    <div className="my-1 text-muted small font-weight-bold">
-                      {i18n.t("related_posts")}
-                    </div>
-                    <PostListings
-                      showCommunity
-                      posts={this.state.suggestedPosts}
-                      enableDownvotes={this.props.enableDownvotes}
-                      enableNsfw={this.props.enableNsfw}
-                      allLanguages={this.props.allLanguages}
-                      siteLanguages={this.props.siteLanguages}
-                    />
-                  </>
-                )}
           </div>
         </div>
 
@@ -345,15 +338,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
               onContentChange={this.handlePostBodyChange}
               allLanguages={this.props.allLanguages}
               siteLanguages={this.props.siteLanguages}
+              hideNavigationWarnings
             />
           </div>
         </div>
         {!this.props.post_view && (
           <div className="form-group row">
-              <label
+            <label className="col-sm-2 col-form-label" htmlFor="post-community">
-                className="col-sm-2 col-form-label"
-                htmlFor="post-community"
-              >
               {i18n.t("community")}
             </label>
             <div className="col-sm-10">
@@ -436,26 +427,95 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
           </div>
         </div>
       </form>
-      </div>
     );
   }
 
+  renderSuggestedTitleCopy() {
+    switch (this.state.metadataRes.state) {
+      case "loading":
+        return <Spinner />;
+      case "success": {
+        const suggestedTitle = this.state.metadataRes.data.metadata.title;
+
+        return (
+          suggestedTitle && (
+            <div
+              className="mt-1 text-muted small font-weight-bold pointer"
+              role="button"
+              onClick={linkEvent(
+                { i: this, suggestedTitle },
+                this.copySuggestedTitle
+              )}
+            >
+              {i18n.t("copy_suggested_title", { title: "" })} {suggestedTitle}
+            </div>
+          )
+        );
+      }
+    }
+  }
+
+  renderSuggestedPosts() {
+    switch (this.state.suggestedPostsRes.state) {
+      case "loading":
+        return <Spinner />;
+      case "success": {
+        const suggestedPosts = this.state.suggestedPostsRes.data.posts;
+
+        return (
+          suggestedPosts &&
+          suggestedPosts.length > 0 && (
+            <>
+              <div className="my-1 text-muted small font-weight-bold">
+                {i18n.t("related_posts")}
+              </div>
+              <PostListings
+                showCommunity
+                posts={suggestedPosts}
+                enableDownvotes={this.props.enableDownvotes}
+                enableNsfw={this.props.enableNsfw}
+                allLanguages={this.props.allLanguages}
+                siteLanguages={this.props.siteLanguages}
+                viewOnly
+                // All of these are unused, since its view only
+                onPostEdit={() => {}}
+                onPostVote={() => {}}
+                onPostReport={() => {}}
+                onBlockPerson={() => {}}
+                onLockPost={() => {}}
+                onDeletePost={() => {}}
+                onRemovePost={() => {}}
+                onSavePost={() => {}}
+                onFeaturePost={() => {}}
+                onPurgePerson={() => {}}
+                onPurgePost={() => {}}
+                onBanPersonFromCommunity={() => {}}
+                onBanPerson={() => {}}
+                onAddModToCommunity={() => {}}
+                onAddAdmin={() => {}}
+                onTransferCommunity={() => {}}
+              />
+            </>
+          )
+        );
+      }
+    }
+  }
+
   handlePostSubmit(i: PostForm, event: any) {
     event.preventDefault();
-
-    i.setState({ loading: true });
-
     // Coerce empty url string to undefined
-    if ((i.state.form.url ?? "blank") === "") {
+    if ((i.state.form.url ?? "") === "") {
       i.setState(s => ((s.form.url = undefined), s));
     }
+    i.setState({ loading: true, submitted: true });
+    const auth = myAuthRequired();
 
     const pForm = i.state.form;
     const pv = i.props.post_view;
-    const auth = myAuth();
+
-    if (auth) {
     if (pv) {
-        const form: EditPost = {
+      i.props.onEdit?.({
         name: pForm.name,
         url: pForm.url,
         body: pForm.body,
@@ -463,11 +523,9 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
         post_id: pv.post.id,
         language_id: pForm.language_id,
         auth,
-        };
+      });
-        WebSocketService.Instance.send(wsClient.editPost(form));
+    } else if (pForm.name && pForm.community_id) {
-      } else {
+      i.props.onCreate?.({
-        if (pForm.name && pForm.community_id) {
-          const form: CreatePost = {
         name: pForm.name,
         community_id: pForm.community_id,
         url: pForm.url,
@@ -476,20 +534,17 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
         language_id: pForm.language_id,
         honeypot: pForm.honeypot,
         auth,
-          };
+      });
-          WebSocketService.Instance.send(wsClient.createPost(form));
-        }
-      }
     }
   }
 
-  copySuggestedTitle(i: PostForm) {
+  copySuggestedTitle(d: { i: PostForm; suggestedTitle?: string }) {
-    const sTitle = i.state.suggestedTitle;
+    const sTitle = d.suggestedTitle;
     if (sTitle) {
-      i.setState(
+      d.i.setState(
         s => ((s.form.name = sTitle?.substring(0, MAX_POST_TITLE_LENGTH)), s)
       );
-      i.setState({ suggestedTitle: undefined });
+      d.i.setState({ suggestedPostsRes: { state: "empty" } });
       setTimeout(() => {
         const textarea: any = document.getElementById("post-title");
         autosize.update(textarea);
@@ -502,27 +557,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     i.fetchPageTitle();
   }
 
-  fetchPageTitle() {
+  async fetchPageTitle() {
     const url = this.state.form.url;
     if (url && validURL(url)) {
-      const form: Search = {
+      this.setState({ metadataRes: { state: "loading" } });
-        q: url,
+      this.setState({
-        type_: "Url",
+        metadataRes: await HttpService.client.getSiteMetadata({ url }),
-        sort: "TopAll",
-        listing_type: "All",
-        page: 1,
-        limit: trendingFetchLimit,
-        auth: myAuth(false),
-      };
-
-      WebSocketService.Instance.send(wsClient.search(form));
-
-      // Fetch the page title
-      getSiteMetadata(url).then(d => {
-        this.setState({ suggestedTitle: d.metadata.title });
       });
-    } else {
-      this.setState({ suggestedTitle: undefined, crossPosts: undefined });
     }
   }
 
@@ -531,10 +572,12 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     i.fetchSimilarPosts();
   }
 
-  fetchSimilarPosts() {
+  async fetchSimilarPosts() {
     const q = this.state.form.name;
     if (q && q !== "") {
-      const form: Search = {
+      this.setState({ suggestedPostsRes: { state: "loading" } });
+      this.setState({
+        suggestedPostsRes: await HttpService.client.search({
           q,
           type_: "Posts",
           sort: "TopAll",
@@ -542,12 +585,9 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
           community_id: this.state.form.community_id,
           page: 1,
           limit: trendingFetchLimit,
-        auth: myAuth(false),
+          auth: myAuth(),
-      };
+        }),
-
+      });
-      WebSocketService.Instance.send(wsClient.search(form));
-    } else {
-      this.setState({ suggestedPosts: undefined });
     }
   }
 
@@ -598,23 +638,21 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
 
     i.setState({ imageLoading: true });
 
-    uploadImage(file)
+    HttpService.client.uploadImage({ image: file }).then(res => {
-      .then(res => {
       console.log("pictrs upload:");
       console.log(res);
-        if (res.msg === "ok") {
+      if (res.state === "success") {
-          i.state.form.url = res.url;
+        if (res.data.msg === "ok") {
+          i.state.form.url = res.data.url;
+          pictrsDeleteToast(file.name, res.data.delete_url as string);
           i.setState({ imageLoading: false });
-          pictrsDeleteToast(file.name, res.delete_url as string);
         } else {
-          i.setState({ imageLoading: false });
           toast(JSON.stringify(res), "danger");
         }
-      })
+      } else if (res.state === "failed") {
-      .catch(error => {
+        console.error(res.msg);
-        i.setState({ imageLoading: false });
+        toast(res.msg, "danger");
-        console.error(error);
+      }
-        toast(error, "danger");
     });
   }
 
@@ -629,9 +667,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     }
 
     if (text.length > 0) {
-      newOptions.push(
+      newOptions.push(...(await fetchCommunities(text)).map(communityToChoice));
-        ...(await fetchCommunities(text)).communities.map(communityToChoice)
-      );
 
       this.setState({
         communitySearchOptions: newOptions,
@@ -648,35 +684,4 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
       this.props.onSelectCommunity(choice);
     }
   }
-
-  parseMessage(msg: any) {
-    const mui = UserService.Instance.myUserInfo;
-    const op = wsUserOp(msg);
-    console.log(msg);
-    if (msg.error) {
-      // Errors handled by top level pages
-      // toast(i18n.t(msg.error), "danger");
-      this.setState({ loading: false });
-      return;
-    } else if (op == UserOperation.CreatePost) {
-      const data = wsJsonToRes<PostResponse>(msg);
-      if (data.post_view.creator.id == mui?.local_user_view.person.id) {
-        this.props.onCreate?.(data.post_view);
-      }
-    } else if (op == UserOperation.EditPost) {
-      const data = wsJsonToRes<PostResponse>(msg);
-      if (data.post_view.creator.id == mui?.local_user_view.person.id) {
-        this.setState({ loading: false });
-        this.props.onEdit?.(data.post_view);
-      }
-    } else if (op == UserOperation.Search) {
-      const data = wsJsonToRes<SearchResponse>(msg);
-
-      if (data.type_ == "Posts") {
-        this.setState({ suggestedPosts: data.posts });
-      } else if (data.type_ == "Url") {
-        this.setState({ crossPosts: data.posts });
-      }
-    }
-  }
 }

src/shared/components/post/post-listings.tsx

@@ -1,7 +1,26 @@
 import { Component } from "inferno";
 import { T } from "inferno-i18next-dess";
 import { Link } from "inferno-router";
-import { Language, PostView } from "lemmy-js-client";
+import {
+  AddAdmin,
+  AddModToCommunity,
+  BanFromCommunity,
+  BanPerson,
+  BlockPerson,
+  CreatePostLike,
+  CreatePostReport,
+  DeletePost,
+  EditPost,
+  FeaturePost,
+  Language,
+  LockPost,
+  PostView,
+  PurgePerson,
+  PurgePost,
+  RemovePost,
+  SavePost,
+  TransferCommunity,
+} from "lemmy-js-client";
 import { i18n } from "../../i18next";
 import { PostListing } from "./post-listing";
 
@@ -13,6 +32,23 @@ interface PostListingsProps {
   removeDuplicates?: boolean;
   enableDownvotes?: boolean;
   enableNsfw?: boolean;
+  viewOnly?: boolean;
+  onPostEdit(form: EditPost): void;
+  onPostVote(form: CreatePostLike): void;
+  onPostReport(form: CreatePostReport): void;
+  onBlockPerson(form: BlockPerson): void;
+  onLockPost(form: LockPost): void;
+  onDeletePost(form: DeletePost): void;
+  onRemovePost(form: RemovePost): void;
+  onSavePost(form: SavePost): void;
+  onFeaturePost(form: FeaturePost): void;
+  onPurgePerson(form: PurgePerson): void;
+  onPurgePost(form: PurgePost): void;
+  onBanPersonFromCommunity(form: BanFromCommunity): void;
+  onBanPerson(form: BanPerson): void;
+  onAddModToCommunity(form: AddModToCommunity): void;
+  onAddAdmin(form: AddAdmin): void;
+  onTransferCommunity(form: TransferCommunity): void;
 }
 
 export class PostListings extends Component<PostListingsProps, any> {
@@ -36,12 +72,29 @@ export class PostListings extends Component<PostListingsProps, any> {
             <>
               <PostListing
                 post_view={post_view}
-                duplicates={this.duplicatesMap.get(post_view.post.id)}
+                crossPosts={this.duplicatesMap.get(post_view.post.id)}
                 showCommunity={this.props.showCommunity}
                 enableDownvotes={this.props.enableDownvotes}
                 enableNsfw={this.props.enableNsfw}
+                viewOnly={this.props.viewOnly}
                 allLanguages={this.props.allLanguages}
                 siteLanguages={this.props.siteLanguages}
+                onPostEdit={this.props.onPostEdit}
+                onPostVote={this.props.onPostVote}
+                onPostReport={this.props.onPostReport}
+                onBlockPerson={this.props.onBlockPerson}
+                onLockPost={this.props.onLockPost}
+                onDeletePost={this.props.onDeletePost}
+                onRemovePost={this.props.onRemovePost}
+                onSavePost={this.props.onSavePost}
+                onFeaturePost={this.props.onFeaturePost}
+                onPurgePerson={this.props.onPurgePerson}
+                onPurgePost={this.props.onPurgePost}
+                onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
+                onBanPerson={this.props.onBanPerson}
+                onAddModToCommunity={this.props.onAddModToCommunity}
+                onAddAdmin={this.props.onAddAdmin}
+                onTransferCommunity={this.props.onTransferCommunity}
               />
               <hr className="my-3" />
             </>
@@ -62,7 +115,7 @@ export class PostListings extends Component<PostListingsProps, any> {
 
   removeDuplicates(): PostView[] {
     // Must use a spread to clone the props, because splice will fail below otherwise.
-    const posts = [...this.props.posts];
+    const posts = [...this.props.posts].filter(empty => empty);
 
     // A map from post url to list of posts (dupes)
     const urlMap = new Map<string, PostView[]>();

src/shared/components/post/post-report.tsx

@@ -1,22 +1,38 @@
-import { Component, linkEvent } from "inferno";
+import { Component, InfernoNode, linkEvent } from "inferno";
 import { T } from "inferno-i18next-dess";
 import { PostReportView, PostView, ResolvePostReport } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { WebSocketService } from "../../services";
+import { myAuthRequired } from "../../utils";
-import { myAuth, wsClient } from "../../utils";
+import { Icon, Spinner } from "../common/icon";
-import { Icon } from "../common/icon";
 import { PersonListing } from "../person/person-listing";
 import { PostListing } from "./post-listing";
 
 interface PostReportProps {
   report: PostReportView;
+  onResolveReport(form: ResolvePostReport): void;
 }
 
-export class PostReport extends Component<PostReportProps, any> {
+interface PostReportState {
+  loading: boolean;
+}
+
+export class PostReport extends Component<PostReportProps, PostReportState> {
+  state: PostReportState = {
+    loading: false,
+  };
+
   constructor(props: any, context: any) {
     super(props, context);
   }
 
+  componentWillReceiveProps(
+    nextProps: Readonly<{ children?: InfernoNode } & PostReportProps>
+  ): void {
+    if (this.props != nextProps) {
+      this.setState({ loading: false });
+    }
+  }
+
   render() {
     const r = this.props.report;
     const resolver = r.resolver;
@@ -54,6 +70,23 @@ export class PostReport extends Component<PostReportProps, any> {
           allLanguages={[]}
           siteLanguages={[]}
           hideImage
+          // All of these are unused, since its view only
+          onPostEdit={() => {}}
+          onPostVote={() => {}}
+          onPostReport={() => {}}
+          onBlockPerson={() => {}}
+          onLockPost={() => {}}
+          onDeletePost={() => {}}
+          onRemovePost={() => {}}
+          onSavePost={() => {}}
+          onFeaturePost={() => {}}
+          onPurgePerson={() => {}}
+          onPurgePost={() => {}}
+          onBanPersonFromCommunity={() => {}}
+          onBanPerson={() => {}}
+          onAddModToCommunity={() => {}}
+          onAddAdmin={() => {}}
+          onTransferCommunity={() => {}}
         />
         <div>
           {i18n.t("reporter")}: <PersonListing person={r.creator} />
@@ -82,26 +115,27 @@ export class PostReport extends Component<PostReportProps, any> {
           data-tippy-content={tippyContent}
           aria-label={tippyContent}
         >
+          {this.state.loading ? (
+            <Spinner />
+          ) : (
             <Icon
               icon="check"
               classes={`icon-inline ${
                 r.post_report.resolved ? "text-success" : "text-danger"
               }`}
             />
+          )}
         </button>
       </div>
     );
   }
 
   handleResolveReport(i: PostReport) {
-    const auth = myAuth();
+    i.setState({ loading: true });
-    if (auth) {
+    i.props.onResolveReport({
-      const form: ResolvePostReport = {
       report_id: i.props.report.post_report.id,
       resolved: !i.props.report.post_report.resolved,
-        auth,
+      auth: myAuthRequired(),
-      };
+    });
-      WebSocketService.Instance.send(wsClient.resolvePostReport(form));
-    }
   }
 }

src/shared/components/private_message/create-private-message.tsx

@@ -1,24 +1,19 @@
 import { Component } from "inferno";
 import {
+  CreatePrivateMessage as CreatePrivateMessageI,
   GetPersonDetails,
   GetPersonDetailsResponse,
   GetSiteResponse,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
 } from "lemmy-js-client";
-import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
 import { InitialFetchRequest } from "../../interfaces";
-import { WebSocketService } from "../../services";
+import { FirstLoadService } from "../../services/FirstLoadService";
+import { HttpService, RequestState } from "../../services/HttpService";
 import {
   getRecipientIdFromProps,
-  isBrowser,
   myAuth,
   setIsoData,
   toast,
-  wsClient,
-  wsSubscribe,
 } from "../../utils";
 import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
@@ -26,9 +21,9 @@ import { PrivateMessageForm } from "./private-message-form";
 
 interface CreatePrivateMessageState {
   siteRes: GetSiteResponse;
-  recipientDetailsRes?: GetPersonDetailsResponse;
+  recipientRes: RequestState<GetPersonDetailsResponse>;
-  recipient_id: number;
+  recipientId: number;
-  loading: boolean;
+  isIsomorphic: boolean;
 }
 
 export class CreatePrivateMessage extends Component<
@@ -36,11 +31,11 @@ export class CreatePrivateMessage extends Component<
   CreatePrivateMessageState
 > {
   private isoData = setIsoData(this.context);
-  private subscription?: Subscription;
   state: CreatePrivateMessageState = {
     siteRes: this.isoData.site_res,
-    recipient_id: getRecipientIdFromProps(this.props),
+    recipientRes: { state: "empty" },
-    loading: true,
+    recipientId: getRecipientIdFromProps(this.props),
+    isIsomorphic: false,
   };
 
   constructor(props: any, context: any) {
@@ -48,33 +43,40 @@ export class CreatePrivateMessage extends Component<
     this.handlePrivateMessageCreate =
       this.handlePrivateMessageCreate.bind(this);
 
-    this.parseMessage = this.parseMessage.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
-
     // Only fetch the data if coming from another route
-    if (this.isoData.path == this.context.router.route.match.url) {
+    if (FirstLoadService.isFirstLoad) {
       this.state = {
         ...this.state,
-        recipientDetailsRes: this.isoData
+        recipientRes: this.isoData.routeData[0],
-          .routeData[0] as GetPersonDetailsResponse,
+        isIsomorphic: true,
-        loading: false,
       };
-    } else {
-      this.fetchPersonDetails();
     }
   }
 
-  fetchPersonDetails() {
+  async componentDidMount() {
-    const form: GetPersonDetails = {
+    if (!this.state.isIsomorphic) {
-      person_id: this.state.recipient_id,
+      await this.fetchPersonDetails();
+    }
+  }
+
+  async fetchPersonDetails() {
+    this.setState({
+      recipientRes: { state: "loading" },
+    });
+
+    this.setState({
+      recipientRes: await HttpService.client.getPersonDetails({
+        person_id: this.state.recipientId,
         sort: "New",
         saved_only: false,
-      auth: myAuth(false),
+        auth: myAuth(),
-    };
+      }),
-    WebSocketService.Instance.send(wsClient.getPersonDetails(form));
+    });
   }
 
-  static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
+  static fetchInitialData(
+    req: InitialFetchRequest
+  ): Promise<RequestState<any>>[] {
     const person_id = Number(req.path.split("/").pop());
     const form: GetPersonDetails = {
       person_id,
@@ -86,30 +88,25 @@ export class CreatePrivateMessage extends Component<
   }
 
   get documentTitle(): string {
-    const name_ = this.state.recipientDetailsRes?.person_view.person.name;
+    if (this.state.recipientRes.state == "success") {
-    return name_ ? `${i18n.t("create_private_message")} - ${name_}` : "";
+      const name_ = this.state.recipientRes.data.person_view.person.name;
-  }
+      return `${i18n.t("create_private_message")} - ${name_}`;
-
+    } else {
-  componentWillUnmount() {
+      return "";
-    if (isBrowser()) {
-      this.subscription?.unsubscribe();
     }
   }
 
-  render() {
+  renderRecipientRes() {
-    const res = this.state.recipientDetailsRes;
+    switch (this.state.recipientRes.state) {
+      case "loading":
         return (
-      <div className="container-lg">
-        <HtmlTags
-          title={this.documentTitle}
-          path={this.context.router.route.match.url}
-        />
-        {this.state.loading ? (
           <h5>
             <Spinner large />
           </h5>
-        ) : (
+        );
-          res && (
+      case "success": {
+        const res = this.state.recipientRes.data;
+        return (
           <div className="row">
             <div className="col-12 col-lg-6 offset-lg-3 mb-4">
               <h5>{i18n.t("create_private_message")}</h5>
@@ -119,29 +116,31 @@ export class CreatePrivateMessage extends Component<
               />
             </div>
           </div>
-          )
+        );
-        )}
+      }
+    }
+  }
+
+  render() {
+    return (
+      <div className="container-lg">
+        <HtmlTags
+          title={this.documentTitle}
+          path={this.context.router.route.match.url}
+        />
+        {this.renderRecipientRes()}
       </div>
     );
   }
 
-  handlePrivateMessageCreate() {
+  async handlePrivateMessageCreate(form: CreatePrivateMessageI) {
+    const res = await HttpService.client.createPrivateMessage(form);
+
+    if (res.state == "success") {
       toast(i18n.t("message_sent"));
 
       // Navigate to the front
       this.context.router.history.push("/");
     }
-
-  parseMessage(msg: any) {
-    const op = wsUserOp(msg);
-    console.log(msg);
-    if (msg.error) {
-      toast(i18n.t(msg.error), "danger");
-      this.setState({ loading: false });
-      return;
-    } else if (op == UserOperation.GetPersonDetails) {
-      const data = wsJsonToRes<GetPersonDetailsResponse>(msg);
-      this.setState({ recipientDetailsRes: data, loading: false });
-    }
   }
 }

src/shared/components/private_message/private-message-form.tsx

@@ -1,27 +1,17 @@
-import { Component, linkEvent } from "inferno";
+import { Component, InfernoNode, linkEvent } from "inferno";
 import { T } from "inferno-i18next-dess";
 import {
   CreatePrivateMessage,
   EditPrivateMessage,
   Person,
-  PrivateMessageResponse,
   PrivateMessageView,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
 } from "lemmy-js-client";
-import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
-import { WebSocketService } from "../../services";
 import {
   capitalizeFirstLetter,
-  isBrowser,
+  myAuthRequired,
-  myAuth,
   relTags,
   setupTippy,
-  toast,
-  wsClient,
-  wsSubscribe,
 } from "../../utils";
 import { Icon, Spinner } from "../common/icon";
 import { MarkdownTextArea } from "../common/markdown-textarea";
@@ -32,8 +22,8 @@ interface PrivateMessageFormProps {
   recipient: Person;
   privateMessageView?: PrivateMessageView; // If a pm is given, that means this is an edit
   onCancel?(): any;
-  onCreate?(message: PrivateMessageView): any;
+  onCreate?(form: CreatePrivateMessage): void;
-  onEdit?(message: PrivateMessageView): any;
+  onEdit?(form: EditPrivateMessage): void;
 }
 
 interface PrivateMessageFormState {
@@ -41,58 +31,54 @@ interface PrivateMessageFormState {
   loading: boolean;
   previewMode: boolean;
   showDisclaimer: boolean;
+  submitted: boolean;
 }
 
 export class PrivateMessageForm extends Component<
   PrivateMessageFormProps,
   PrivateMessageFormState
 > {
-  private subscription?: Subscription;
   state: PrivateMessageFormState = {
     loading: false,
     previewMode: false,
     showDisclaimer: false,
+    content: this.props.privateMessageView
+      ? this.props.privateMessageView.private_message.content
+      : undefined,
+    submitted: false,
   };
 
   constructor(props: any, context: any) {
     super(props, context);
 
     this.handleContentChange = this.handleContentChange.bind(this);
-
-    this.parseMessage = this.parseMessage.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
-
-    // Its an edit
-    if (this.props.privateMessageView) {
-      this.state.content =
-        this.props.privateMessageView.private_message.content;
-    }
   }
 
   componentDidMount() {
     setupTippy();
   }
 
-  componentDidUpdate() {
+  componentWillReceiveProps(
-    if (!this.state.loading && this.state.content) {
+    nextProps: Readonly<{ children?: InfernoNode } & PrivateMessageFormProps>
-      window.onbeforeunload = () => true;
+  ): void {
-    } else {
+    if (this.props != nextProps) {
-      window.onbeforeunload = null;
+      this.setState({ loading: false, content: undefined, previewMode: false });
-    }
-  }
-
-  componentWillUnmount() {
-    if (isBrowser()) {
-      this.subscription?.unsubscribe();
-      window.onbeforeunload = null;
     }
   }
+  // TODO
+  // <Prompt
+  //   when={!this.state.loading && this.state.content}
+  //   message={i18n.t("block_leaving")}
+  // />
 
   render() {
     return (
-      <div>
-        <NavigationPrompt when={!this.state.loading && !!this.state.content} />
       <form onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}>
+        <NavigationPrompt
+          when={
+            !this.state.loading && !!this.state.content && !this.state.submitted
+          }
+        />
         {!this.props.privateMessageView && (
           <div className="form-group row">
             <label className="col-sm-2 col-form-label">
@@ -122,6 +108,7 @@ export class PrivateMessageForm extends Component<
               onContentChange={this.handleContentChange}
               allLanguages={[]}
               siteLanguages={[]}
+              hideNavigationWarnings
             />
           </div>
         </div>
@@ -174,32 +161,27 @@ export class PrivateMessageForm extends Component<
           </div>
         </div>
       </form>
-      </div>
     );
   }
 
   handlePrivateMessageSubmit(i: PrivateMessageForm, event: any) {
     event.preventDefault();
+    i.setState({ loading: true, submitted: true });
     const pm = i.props.privateMessageView;
-    const auth = myAuth();
+    const auth = myAuthRequired();
-    const content = i.state.content;
+    const content = i.state.content ?? "";
-    if (auth && content) {
     if (pm) {
-        const form: EditPrivateMessage = {
+      i.props.onEdit?.({
         private_message_id: pm.private_message.id,
         content,
         auth,
-        };
+      });
-        WebSocketService.Instance.send(wsClient.editPrivateMessage(form));
     } else {
-        const form: CreatePrivateMessage = {
+      i.props.onCreate?.({
         content,
         recipient_id: i.props.recipient.id,
         auth,
-        };
+      });
-        WebSocketService.Instance.send(wsClient.createPrivateMessage(form));
-      }
-      i.setState({ loading: true });
     }
   }
 
@@ -219,25 +201,4 @@ export class PrivateMessageForm extends Component<
   handleShowDisclaimer(i: PrivateMessageForm) {
     i.setState({ showDisclaimer: !i.state.showDisclaimer });
   }
-
-  parseMessage(msg: any) {
-    const op = wsUserOp(msg);
-    console.log(msg);
-    if (msg.error) {
-      toast(i18n.t(msg.error), "danger");
-      this.setState({ loading: false });
-      return;
-    } else if (
-      op == UserOperation.EditPrivateMessage ||
-      op == UserOperation.DeletePrivateMessage ||
-      op == UserOperation.MarkPrivateMessageAsRead
-    ) {
-      const data = wsJsonToRes<PrivateMessageResponse>(msg);
-      this.setState({ loading: false });
-      this.props.onEdit?.(data.private_message_view);
-    } else if (op == UserOperation.CreatePrivateMessage) {
-      const data = wsJsonToRes<PrivateMessageResponse>(msg);
-      this.props.onCreate?.(data.private_message_view);
-    }
-  }
 }

src/shared/components/private_message/private-message-report.tsx

@@ -1,24 +1,40 @@
-import { Component, linkEvent } from "inferno";
+import { Component, InfernoNode, linkEvent } from "inferno";
 import { T } from "inferno-i18next-dess";
 import {
   PrivateMessageReportView,
   ResolvePrivateMessageReport,
 } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { WebSocketService } from "../../services";
+import { mdToHtml, myAuthRequired } from "../../utils";
-import { mdToHtml, myAuth, wsClient } from "../../utils";
+import { Icon, Spinner } from "../common/icon";
-import { Icon } from "../common/icon";
 import { PersonListing } from "../person/person-listing";
 
 interface Props {
   report: PrivateMessageReportView;
+  onResolveReport(form: ResolvePrivateMessageReport): void;
 }
 
-export class PrivateMessageReport extends Component<Props, any> {
+interface State {
+  loading: boolean;
+}
+
+export class PrivateMessageReport extends Component<Props, State> {
+  state: State = {
+    loading: false,
+  };
+
   constructor(props: any, context: any) {
     super(props, context);
   }
 
+  componentWillReceiveProps(
+    nextProps: Readonly<{ children?: InfernoNode } & Props>
+  ): void {
+    if (this.props != nextProps) {
+      this.setState({ loading: false });
+    }
+  }
+
   render() {
     const r = this.props.report;
     const pmr = r.private_message_report;
@@ -66,29 +82,28 @@ export class PrivateMessageReport extends Component<Props, any> {
           data-tippy-content={tippyContent}
           aria-label={tippyContent}
         >
+          {this.state.loading ? (
+            <Spinner />
+          ) : (
             <Icon
               icon="check"
               classes={`icon-inline ${
                 pmr.resolved ? "text-success" : "text-danger"
               }`}
             />
+          )}
         </button>
       </div>
     );
   }
 
   handleResolveReport(i: PrivateMessageReport) {
+    i.setState({ loading: true });
     const pmr = i.props.report.private_message_report;
-    const auth = myAuth();
+    i.props.onResolveReport({
-    if (auth) {
-      const form: ResolvePrivateMessageReport = {
       report_id: pmr.id,
       resolved: !pmr.resolved,
-        auth,
+      auth: myAuthRequired(),
-      };
+    });
-      WebSocketService.Instance.send(
-        wsClient.resolvePrivateMessageReport(form)
-      );
-    }
   }
 }

src/shared/components/private_message/private-message.tsx

@@ -1,15 +1,17 @@
-import { Component, linkEvent } from "inferno";
+import { Component, InfernoNode, linkEvent } from "inferno";
 import {
+  CreatePrivateMessage,
   CreatePrivateMessageReport,
   DeletePrivateMessage,
+  EditPrivateMessage,
   MarkPrivateMessageAsRead,
   Person,
   PrivateMessageView,
 } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { UserService, WebSocketService } from "../../services";
+import { UserService } from "../../services";
-import { mdToHtml, myAuth, toast, wsClient } from "../../utils";
+import { mdToHtml, myAuthRequired } from "../../utils";
-import { Icon } from "../common/icon";
+import { Icon, Spinner } from "../common/icon";
 import { MomentTime } from "../common/moment-time";
 import { PersonListing } from "../person/person-listing";
 import { PrivateMessageForm } from "./private-message-form";
@@ -21,10 +23,18 @@ interface PrivateMessageState {
   viewSource: boolean;
   showReportDialog: boolean;
   reportReason?: string;
+  deleteLoading: boolean;
+  readLoading: boolean;
+  reportLoading: boolean;
 }
 
 interface PrivateMessageProps {
   private_message_view: PrivateMessageView;
+  onDelete(form: DeletePrivateMessage): void;
+  onMarkRead(form: MarkPrivateMessageAsRead): void;
+  onReport(form: CreatePrivateMessageReport): void;
+  onCreate(form: CreatePrivateMessage): void;
+  onEdit(form: EditPrivateMessage): void;
 }
 
 export class PrivateMessage extends Component<
@@ -37,15 +47,14 @@ export class PrivateMessage extends Component<
     collapsed: false,
     viewSource: false,
     showReportDialog: false,
+    deleteLoading: false,
+    readLoading: false,
+    reportLoading: false,
   };
 
   constructor(props: any, context: any) {
     super(props, context);
-
     this.handleReplyCancel = this.handleReplyCancel.bind(this);
-    this.handlePrivateMessageCreate =
-      this.handlePrivateMessageCreate.bind(this);
-    this.handlePrivateMessageEdit = this.handlePrivateMessageEdit.bind(this);
   }
 
   get mine(): boolean {
@@ -55,6 +64,23 @@ export class PrivateMessage extends Component<
     );
   }
 
+  componentWillReceiveProps(
+    nextProps: Readonly<{ children?: InfernoNode } & PrivateMessageProps>
+  ): void {
+    if (this.props != nextProps) {
+      this.setState({
+        showReply: false,
+        showEdit: false,
+        collapsed: false,
+        viewSource: false,
+        showReportDialog: false,
+        deleteLoading: false,
+        readLoading: false,
+        reportLoading: false,
+      });
+    }
+  }
+
   render() {
     const message_view = this.props.private_message_view;
     const otherPerson: Person = this.mine
@@ -98,8 +124,7 @@ export class PrivateMessage extends Component<
             <PrivateMessageForm
               recipient={otherPerson}
               privateMessageView={message_view}
-              onEdit={this.handlePrivateMessageEdit}
+              onEdit={this.props.onEdit}
-              onCreate={this.handlePrivateMessageCreate}
               onCancel={this.handleReplyCancel}
             />
           )}
@@ -131,12 +156,17 @@ export class PrivateMessage extends Component<
                             : i18n.t("mark_as_read")
                         }
                       >
+                        {this.state.readLoading ? (
+                          <Spinner />
+                        ) : (
                           <Icon
                             icon="check"
                             classes={`icon-inline ${
-                            message_view.private_message.read && "text-success"
+                              message_view.private_message.read &&
+                              "text-success"
                             }`}
                           />
+                        )}
                       </button>
                     </li>
                     <li className="list-inline-item">{this.reportButton}</li>
@@ -179,6 +209,9 @@ export class PrivateMessage extends Component<
                             : i18n.t("restore")
                         }
                       >
+                        {this.state.deleteLoading ? (
+                          <Spinner />
+                        ) : (
                           <Icon
                             icon="trash"
                             classes={`icon-inline ${
@@ -186,6 +219,7 @@ export class PrivateMessage extends Component<
                               "text-danger"
                             }`}
                           />
+                        )}
                       </button>
                     </li>
                   </>
@@ -231,14 +265,14 @@ export class PrivateMessage extends Component<
               className="btn btn-secondary"
               aria-label={i18n.t("create_report")}
             >
-              {i18n.t("create_report")}
+              {this.state.reportLoading ? <Spinner /> : i18n.t("create_report")}
             </button>
           </form>
         )}
         {this.state.showReply && (
           <PrivateMessageForm
             recipient={otherPerson}
-            onCreate={this.handlePrivateMessageCreate}
+            onCreate={this.props.onCreate}
           />
         )}
         {/* A collapsed clearfix */}
@@ -275,15 +309,12 @@ export class PrivateMessage extends Component<
   }
 
   handleDeleteClick(i: PrivateMessage) {
-    const auth = myAuth();
+    i.setState({ deleteLoading: true });
-    if (auth) {
+    i.props.onDelete({
-      const form: DeletePrivateMessage = {
       private_message_id: i.props.private_message_view.private_message.id,
       deleted: !i.props.private_message_view.private_message.deleted,
-        auth,
+      auth: myAuthRequired(),
-      };
+    });
-      WebSocketService.Instance.send(wsClient.deletePrivateMessage(form));
-    }
   }
 
   handleReplyCancel() {
@@ -291,15 +322,12 @@ export class PrivateMessage extends Component<
   }
 
   handleMarkRead(i: PrivateMessage) {
-    const auth = myAuth();
+    i.setState({ readLoading: true });
-    if (auth) {
+    i.props.onMarkRead({
-      const form: MarkPrivateMessageAsRead = {
       private_message_id: i.props.private_message_view.private_message.id,
       read: !i.props.private_message_view.private_message.read,
-        auth,
+      auth: myAuthRequired(),
-      };
+    });
-      WebSocketService.Instance.send(wsClient.markPrivateMessageAsRead(form));
-    }
   }
 
   handleMessageCollapse(i: PrivateMessage) {
@@ -320,31 +348,11 @@ export class PrivateMessage extends Component<
 
   handleReportSubmit(i: PrivateMessage, event: any) {
     event.preventDefault();
-    const auth = myAuth();
+    i.setState({ reportLoading: true });
-    const reason = i.state.reportReason;
+    i.props.onReport({
-    if (auth && reason) {
-      const form: CreatePrivateMessageReport = {
       private_message_id: i.props.private_message_view.private_message.id,
-        reason,
+      reason: i.state.reportReason ?? "",
-        auth,
+      auth: myAuthRequired(),
-      };
+    });
-      WebSocketService.Instance.send(wsClient.createPrivateMessageReport(form));
-
-      i.setState({ showReportDialog: false });
-    }
-  }
-
-  handlePrivateMessageEdit() {
-    this.setState({ showEdit: false });
-  }
-
-  handlePrivateMessageCreate(message: PrivateMessageView) {
-    if (
-      message.creator.id ==
-      UserService.Instance.myUserInfo?.local_user_view.person.id
-    ) {
-      this.setState({ showReply: false });
-      toast(i18n.t("message_sent"));
-    }
   }
 }

src/shared/components/search.tsx

@@ -1,7 +1,6 @@
 import type { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
 import {
-  CommentResponse,
   CommentView,
   CommunityView,
   GetCommunity,
@@ -13,7 +12,6 @@ import {
   ListCommunitiesResponse,
   ListingType,
   PersonView,
-  PostResponse,
   PostView,
   ResolveObject,
   ResolveObjectResponse,
@@ -21,22 +19,17 @@ import {
   SearchResponse,
   SearchType,
   SortType,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
 } from "lemmy-js-client";
-import { Subscription } from "rxjs";
 import { i18n } from "../i18next";
 import { CommentViewType, InitialFetchRequest } from "../interfaces";
-import { WebSocketService } from "../services";
+import { FirstLoadService } from "../services/FirstLoadService";
+import { HttpService, RequestState } from "../services/HttpService";
 import {
   Choice,
   QueryParams,
   capitalizeFirstLetter,
   commentsToFlatNodes,
   communityToChoice,
-  createCommentLikeRes,
-  createPostLikeFindRes,
   debounce,
   enableDownvotes,
   enableNsfw,
@@ -55,9 +48,6 @@ import {
   saveScrollPosition,
   setIsoData,
   showLocal,
-  toast,
-  wsClient,
-  wsSubscribe,
 } from "../utils";
 import { CommentNodes } from "./comment/comment-nodes";
 import { HtmlTags } from "./common/html-tags";
@@ -83,17 +73,18 @@ interface SearchProps {
 type FilterType = "creator" | "community";
 
 interface SearchState {
-  searchResponse?: SearchResponse;
+  searchRes: RequestState<SearchResponse>;
-  communities: CommunityView[];
+  resolveObjectRes: RequestState<ResolveObjectResponse>;
-  creatorDetails?: GetPersonDetailsResponse;
+  creatorDetailsRes: RequestState<GetPersonDetailsResponse>;
-  searchLoading: boolean;
+  communitiesRes: RequestState<ListCommunitiesResponse>;
-  searchCommunitiesLoading: boolean;
+  communityRes: RequestState<GetCommunityResponse>;
-  searchCreatorLoading: boolean;
   siteRes: GetSiteResponse;
   searchText?: string;
-  resolveObjectResponse?: ResolveObjectResponse;
   communitySearchOptions: Choice[];
   creatorSearchOptions: Choice[];
+  searchCreatorLoading: boolean;
+  searchCommunitiesLoading: boolean;
+  isIsomorphic: boolean;
 }
 
 interface Combined {
@@ -238,15 +229,18 @@ function getListing(
 
 export class Search extends Component<any, SearchState> {
   private isoData = setIsoData(this.context);
-  private subscription?: Subscription;
   state: SearchState = {
-    searchLoading: false,
+    resolveObjectRes: { state: "empty" },
+    creatorDetailsRes: { state: "empty" },
+    communitiesRes: { state: "empty" },
+    communityRes: { state: "empty" },
     siteRes: this.isoData.site_res,
-    communities: [],
-    searchCommunitiesLoading: false,
-    searchCreatorLoading: false,
     creatorSearchOptions: [],
     communitySearchOptions: [],
+    searchRes: { state: "empty" },
+    searchCreatorLoading: false,
+    searchCommunitiesLoading: false,
+    isIsomorphic: false,
   };
 
   constructor(props: any, context: any) {
@@ -259,9 +253,6 @@ export class Search extends Component<any, SearchState> {
       this.handleCommunityFilterChange.bind(this);
     this.handleCreatorFilterChange = this.handleCreatorFilterChange.bind(this);
 
-    this.parseMessage = this.parseMessage.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
-
     const { q } = getSearchQueryParams();
 
     this.state = {
@@ -270,71 +261,70 @@ export class Search extends Component<any, SearchState> {
     };
 
     // Only fetch the data if coming from another route
-    if (this.isoData.path === this.context.router.route.match.url) {
+    if (FirstLoadService.isFirstLoad) {
-      const communityRes = this.isoData.routeData[0] as
+      const [
-        | GetCommunityResponse
+        communityRes,
-        | undefined;
+        communitiesRes,
-      const communitiesRes = this.isoData.routeData[1] as
+        creatorDetailsRes,
-        | ListCommunitiesResponse
+        searchRes,
-        | undefined;
+        resolveObjectRes,
-      // This can be single or multiple communities given
+      ] = this.isoData.routeData;
-      if (communitiesRes) {
+
       this.state = {
         ...this.state,
-          communities: communitiesRes.communities,
+        communitiesRes,
+        communityRes,
+        creatorDetailsRes,
+        creatorSearchOptions:
+          creatorDetailsRes.state == "success"
+            ? [personToChoice(creatorDetailsRes.data.person_view)]
+            : [],
+        isIsomorphic: true,
       };
-      }
+
-      if (communityRes) {
+      if (communityRes.state === "success") {
         this.state = {
           ...this.state,
-          communities: [communityRes.community_view],
           communitySearchOptions: [
-            communityToChoice(communityRes.community_view),
+            communityToChoice(communityRes.data.community_view),
           ],
         };
       }
 
-      const creatorRes = this.isoData.routeData[2] as GetPersonDetailsResponse;
+      if (q) {
-
         this.state = {
           ...this.state,
-        creatorDetails: creatorRes,
+          searchRes,
-        creatorSearchOptions: creatorRes
+          resolveObjectRes,
-          ? [personToChoice(creatorRes.person_view)]
-          : [],
         };
-
-      if (q !== "") {
-        this.state = {
-          ...this.state,
-          searchResponse: this.isoData.routeData[3] as SearchResponse,
-          resolveObjectResponse: this.isoData
-            .routeData[4] as ResolveObjectResponse,
-          searchLoading: false,
-        };
-      } else {
-        this.search();
       }
-    } else {
+    }
-      const listCommunitiesForm: ListCommunities = {
+  }
+
+  async componentDidMount() {
+    if (!this.state.isIsomorphic) {
+      const promises = [this.fetchCommunities()];
+      if (this.state.searchText) {
+        promises.push(this.search());
+      }
+
+      await Promise.all(promises);
+    }
+  }
+
+  async fetchCommunities() {
+    this.setState({ communitiesRes: { state: "loading" } });
+    this.setState({
+      communitiesRes: await HttpService.client.listCommunities({
         type_: defaultListingType,
         sort: defaultSortType,
         limit: fetchLimit,
-        auth: myAuth(false),
+        auth: myAuth(),
-      };
+      }),
-
+    });
-      WebSocketService.Instance.send(
-        wsClient.listCommunities(listCommunitiesForm)
-      );
-
-      if (q) {
-        this.search();
-      }
-    }
   }
 
   componentWillUnmount() {
-    this.subscription?.unsubscribe();
     saveScrollPosition(this.context);
   }
 
@@ -342,8 +332,10 @@ export class Search extends Component<any, SearchState> {
     client,
     auth,
     query: { communityId, creatorId, q, type, sort, listingType, page },
-  }: InitialFetchRequest<QueryParams<SearchProps>>): Promise<any>[] {
+  }: InitialFetchRequest<QueryParams<SearchProps>>): Promise<
-    const promises: Promise<any>[] = [];
+    RequestState<any>
+  >[] {
+    const promises: Promise<RequestState<any>>[] = [];
 
     const community_id = getIdFromString(communityId);
     if (community_id) {
@@ -352,7 +344,7 @@ export class Search extends Component<any, SearchState> {
         auth,
       };
       promises.push(client.getCommunity(getCommunityForm));
-      promises.push(Promise.resolve());
+      promises.push(Promise.resolve({ state: "empty" }));
     } else {
       const listCommunitiesForm: ListCommunities = {
         type_: defaultListingType,
@@ -360,7 +352,7 @@ export class Search extends Component<any, SearchState> {
         limit: fetchLimit,
         auth,
       };
-      promises.push(Promise.resolve());
+      promises.push(Promise.resolve({ state: "empty" }));
       promises.push(client.listCommunities(listCommunitiesForm));
     }
 
@@ -372,7 +364,7 @@ export class Search extends Component<any, SearchState> {
       };
       promises.push(client.getPersonDetails(getCreatorForm));
     } else {
-      promises.push(Promise.resolve());
+      promises.push(Promise.resolve({ state: "empty" }));
     }
 
     const query = getSearchQueryFromQuery(q);
@@ -400,8 +392,8 @@ export class Search extends Component<any, SearchState> {
           promises.push(client.resolveObject(resolveObjectForm));
         }
       } else {
-        promises.push(Promise.resolve());
+        promises.push(Promise.resolve({ state: "empty" }));
-        promises.push(Promise.resolve());
+        promises.push(Promise.resolve({ state: "empty" }));
       }
     }
 
@@ -427,7 +419,8 @@ export class Search extends Component<any, SearchState> {
         {this.selects}
         {this.searchForm}
         {this.displayResults(type)}
-        {this.resultsCount === 0 && !this.state.searchLoading && (
+        {this.resultsCount === 0 &&
+          this.state.searchRes.state === "success" && (
             <span>{i18n.t("no_results")}</span>
           )}
         <Paginator page={page} onChange={this.handlePageChange} />
@@ -470,7 +463,7 @@ export class Search extends Component<any, SearchState> {
           minLength={1}
         />
         <button type="submit" className="btn btn-secondary mr-2 mb-2">
-          {this.state.searchLoading ? (
+          {this.state.searchRes.state == "loading" ? (
             <Spinner />
           ) : (
             <span>{i18n.t("search")}</span>
@@ -488,8 +481,13 @@ export class Search extends Component<any, SearchState> {
       creatorSearchOptions,
       searchCommunitiesLoading,
       searchCreatorLoading,
+      communitiesRes,
     } = this.state;
 
+    const hasCommunities =
+      communitiesRes.state == "success" &&
+      communitiesRes.data.communities.length > 0;
+
     return (
       <div className="mb-2">
         <select
@@ -524,14 +522,14 @@ export class Search extends Component<any, SearchState> {
           />
         </span>
         <div className="form-row">
-          {this.state.communities.length > 0 && (
+          {hasCommunities && (
             <Filter
               filterType="community"
               onChange={this.handleCommunityFilterChange}
               onSearch={this.handleCommunitySearch}
               options={communitySearchOptions}
-              loading={searchCommunitiesLoading}
               value={communityId}
+              loading={searchCommunitiesLoading}
             />
           )}
           <Filter
@@ -539,8 +537,8 @@ export class Search extends Component<any, SearchState> {
             onChange={this.handleCreatorFilterChange}
             onSearch={this.handleCreatorSearch}
             options={creatorSearchOptions}
-            loading={searchCreatorLoading}
             value={creatorId}
+            loading={searchCreatorLoading}
           />
         </div>
       </div>
@@ -549,11 +547,14 @@ export class Search extends Component<any, SearchState> {
 
   buildCombined(): Combined[] {
     const combined: Combined[] = [];
-    const { resolveObjectResponse, searchResponse } = this.state;
+    const {
+      resolveObjectRes: resolveObjectResponse,
+      searchRes: searchResponse,
+    } = this.state;
 
     // Push the possible resolve / federated objects first
-    if (resolveObjectResponse) {
+    if (resolveObjectResponse.state == "success") {
-      const { comment, post, community, person } = resolveObjectResponse;
+      const { comment, post, community, person } = resolveObjectResponse.data;
 
       if (comment) {
         combined.push(commentViewToCombined(comment));
@@ -570,8 +571,8 @@ export class Search extends Component<any, SearchState> {
     }
 
     // Push the search results
-    if (searchResponse) {
+    if (searchResponse.state === "success") {
-      const { comments, posts, communities, users } = searchResponse;
+      const { comments, posts, communities, users } = searchResponse.data;
 
       combined.push(
         ...[
@@ -622,6 +623,23 @@ export class Search extends Component<any, SearchState> {
                   allLanguages={this.state.siteRes.all_languages}
                   siteLanguages={this.state.siteRes.discussion_languages}
                   viewOnly
+                  // All of these are unused, since its view only
+                  onPostEdit={() => {}}
+                  onPostVote={() => {}}
+                  onPostReport={() => {}}
+                  onBlockPerson={() => {}}
+                  onLockPost={() => {}}
+                  onDeletePost={() => {}}
+                  onRemovePost={() => {}}
+                  onSavePost={() => {}}
+                  onFeaturePost={() => {}}
+                  onPurgePerson={() => {}}
+                  onPurgePost={() => {}}
+                  onBanPersonFromCommunity={() => {}}
+                  onBanPerson={() => {}}
+                  onAddModToCommunity={() => {}}
+                  onAddAdmin={() => {}}
+                  onTransferCommunity={() => {}}
                 />
               )}
               {i.type_ === "comments" && (
@@ -641,6 +659,26 @@ export class Search extends Component<any, SearchState> {
                   enableDownvotes={enableDownvotes(this.state.siteRes)}
                   allLanguages={this.state.siteRes.all_languages}
                   siteLanguages={this.state.siteRes.discussion_languages}
+                  // All of these are unused, since its viewonly
+                  finished={new Map()}
+                  onSaveComment={() => {}}
+                  onBlockPerson={() => {}}
+                  onDeleteComment={() => {}}
+                  onRemoveComment={() => {}}
+                  onCommentVote={() => {}}
+                  onCommentReport={() => {}}
+                  onDistinguishComment={() => {}}
+                  onAddModToCommunity={() => {}}
+                  onAddAdmin={() => {}}
+                  onTransferCommunity={() => {}}
+                  onPurgeComment={() => {}}
+                  onPurgePerson={() => {}}
+                  onCommentReplyRead={() => {}}
+                  onPersonMentionRead={() => {}}
+                  onBanPersonFromCommunity={() => {}}
+                  onBanPerson={() => {}}
+                  onCreateComment={() => Promise.resolve({ state: "empty" })}
+                  onEditComment={() => Promise.resolve({ state: "empty" })}
                 />
               )}
               {i.type_ === "communities" && (
@@ -657,11 +695,19 @@ export class Search extends Component<any, SearchState> {
   }
 
   get comments() {
-    const { searchResponse, resolveObjectResponse, siteRes } = this.state;
+    const {
-    const comments = searchResponse?.comments ?? [];
+      searchRes: searchResponse,
+      resolveObjectRes: resolveObjectResponse,
+      siteRes,
+    } = this.state;
+    const comments =
+      searchResponse.state === "success" ? searchResponse.data.comments : [];
 
-    if (resolveObjectResponse?.comment) {
+    if (
-      comments.unshift(resolveObjectResponse?.comment);
+      resolveObjectResponse.state === "success" &&
+      resolveObjectResponse.data.comment
+    ) {
+      comments.unshift(resolveObjectResponse.data.comment);
     }
 
     return (
@@ -674,16 +720,44 @@ export class Search extends Component<any, SearchState> {
         enableDownvotes={enableDownvotes(siteRes)}
         allLanguages={siteRes.all_languages}
         siteLanguages={siteRes.discussion_languages}
+        // All of these are unused, since its viewonly
+        finished={new Map()}
+        onSaveComment={() => {}}
+        onBlockPerson={() => {}}
+        onDeleteComment={() => {}}
+        onRemoveComment={() => {}}
+        onCommentVote={() => {}}
+        onCommentReport={() => {}}
+        onDistinguishComment={() => {}}
+        onAddModToCommunity={() => {}}
+        onAddAdmin={() => {}}
+        onTransferCommunity={() => {}}
+        onPurgeComment={() => {}}
+        onPurgePerson={() => {}}
+        onCommentReplyRead={() => {}}
+        onPersonMentionRead={() => {}}
+        onBanPersonFromCommunity={() => {}}
+        onBanPerson={() => {}}
+        onCreateComment={() => Promise.resolve({ state: "empty" })}
+        onEditComment={() => Promise.resolve({ state: "empty" })}
       />
     );
   }
 
   get posts() {
-    const { searchResponse, resolveObjectResponse, siteRes } = this.state;
+    const {
-    const posts = searchResponse?.posts ?? [];
+      searchRes: searchResponse,
+      resolveObjectRes: resolveObjectResponse,
+      siteRes,
+    } = this.state;
+    const posts =
+      searchResponse.state === "success" ? searchResponse.data.posts : [];
 
-    if (resolveObjectResponse?.post) {
+    if (
-      posts.unshift(resolveObjectResponse.post);
+      resolveObjectResponse.state === "success" &&
+      resolveObjectResponse.data.post
+    ) {
+      posts.unshift(resolveObjectResponse.data.post);
     }
 
     return (
@@ -699,6 +773,23 @@ export class Search extends Component<any, SearchState> {
                 allLanguages={siteRes.all_languages}
                 siteLanguages={siteRes.discussion_languages}
                 viewOnly
+                // All of these are unused, since its view only
+                onPostEdit={() => {}}
+                onPostVote={() => {}}
+                onPostReport={() => {}}
+                onBlockPerson={() => {}}
+                onLockPost={() => {}}
+                onDeletePost={() => {}}
+                onRemovePost={() => {}}
+                onSavePost={() => {}}
+                onFeaturePost={() => {}}
+                onPurgePerson={() => {}}
+                onPurgePost={() => {}}
+                onBanPersonFromCommunity={() => {}}
+                onBanPerson={() => {}}
+                onAddModToCommunity={() => {}}
+                onAddAdmin={() => {}}
+                onTransferCommunity={() => {}}
               />
             </div>
           </div>
@@ -708,11 +799,18 @@ export class Search extends Component<any, SearchState> {
   }
 
   get communities() {
-    const { searchResponse, resolveObjectResponse } = this.state;
+    const {
-    const communities = searchResponse?.communities ?? [];
+      searchRes: searchResponse,
+      resolveObjectRes: resolveObjectResponse,
+    } = this.state;
+    const communities =
+      searchResponse.state === "success" ? searchResponse.data.communities : [];
 
-    if (resolveObjectResponse?.community) {
+    if (
-      communities.unshift(resolveObjectResponse.community);
+      resolveObjectResponse.state === "success" &&
+      resolveObjectResponse.data.community
+    ) {
+      communities.unshift(resolveObjectResponse.data.community);
     }
 
     return (
@@ -727,11 +825,18 @@ export class Search extends Component<any, SearchState> {
   }
 
   get users() {
-    const { searchResponse, resolveObjectResponse } = this.state;
+    const {
-    const users = searchResponse?.users ?? [];
+      searchRes: searchResponse,
+      resolveObjectRes: resolveObjectResponse,
+    } = this.state;
+    const users =
+      searchResponse.state === "success" ? searchResponse.data.users : [];
 
-    if (resolveObjectResponse?.person) {
+    if (
-      users.unshift(resolveObjectResponse.person);
+      resolveObjectResponse.state === "success" &&
+      resolveObjectResponse.data.person
+    ) {
+      users.unshift(resolveObjectResponse.data.person);
     }
 
     return (
@@ -746,20 +851,22 @@ export class Search extends Component<any, SearchState> {
   }
 
   get resultsCount(): number {
-    const { searchResponse: r, resolveObjectResponse: resolveRes } = this.state;
+    const { searchRes: r, resolveObjectRes: resolveRes } = this.state;
 
-    const searchCount = r
+    const searchCount =
-      ? r.posts.length +
+      r.state === "success"
-        r.comments.length +
+        ? r.data.posts.length +
-        r.communities.length +
+          r.data.comments.length +
-        r.users.length
+          r.data.communities.length +
+          r.data.users.length
         : 0;
 
-    const resObjCount = resolveRes
+    const resObjCount =
-      ? resolveRes.post ||
+      resolveRes.state === "success"
-        resolveRes.person ||
+        ? resolveRes.data.post ||
-        resolveRes.community ||
+          resolveRes.data.person ||
-        resolveRes.comment
+          resolveRes.data.community ||
+          resolveRes.data.comment
           ? 1
           : 0
         : 0;
@@ -767,14 +874,16 @@ export class Search extends Component<any, SearchState> {
     return resObjCount + searchCount;
   }
 
-  search() {
+  async search() {
-    const auth = myAuth(false);
+    const auth = myAuth();
     const { searchText: q } = this.state;
     const { communityId, creatorId, type, sort, listingType, page } =
       getSearchQueryParams();
 
-    if (q && q !== "") {
+    if (q) {
-      const form: SearchForm = {
+      this.setState({ searchRes: { state: "loading" } });
+      this.setState({
+        searchRes: await HttpService.client.search({
           q,
           community_id: communityId ?? undefined,
           creator_id: creatorId ?? undefined,
@@ -784,37 +893,30 @@ export class Search extends Component<any, SearchState> {
           page,
           limit: fetchLimit,
           auth,
-      };
+        }),
+      });
+      window.scrollTo(0, 0);
+      restoreScrollPosition(this.context);
 
       if (auth) {
-        const resolveObjectForm: ResolveObject = {
+        this.setState({ resolveObjectRes: { state: "loading" } });
+        this.setState({
+          resolveObjectRes: await HttpService.client.resolveObject({
             q,
             auth,
-        };
+          }),
-        WebSocketService.Instance.send(
-          wsClient.resolveObject(resolveObjectForm)
-        );
-      }
-
-      this.setState({
-        searchResponse: undefined,
-        resolveObjectResponse: undefined,
-        searchLoading: true,
         });
-
+      }
-      WebSocketService.Instance.send(wsClient.search(form));
     }
   }
 
   handleCreatorSearch = debounce(async (text: string) => {
     const { creatorId } = getSearchQueryParams();
     const { creatorSearchOptions } = this.state;
-    this.setState({
-      searchCreatorLoading: true,
-    });
-
     const newOptions: Choice[] = [];
 
+    this.setState({ searchCreatorLoading: true });
+
     const selectedChoice = creatorSearchOptions.find(
       choice => getIdFromString(choice.value) === creatorId
     );
@@ -824,7 +926,7 @@ export class Search extends Component<any, SearchState> {
     }
 
     if (text.length > 0) {
-      newOptions.push(...(await fetchUsers(text)).users.map(personToChoice));
+      newOptions.push(...(await fetchUsers(text)).map(personToChoice));
     }
 
     this.setState({
@@ -851,9 +953,7 @@ export class Search extends Component<any, SearchState> {
     }
 
     if (text.length > 0) {
-      newOptions.push(
+      newOptions.push(...(await fetchCommunities(text)).map(communityToChoice));
-        ...(await fetchCommunities(text)).communities.map(communityToChoice)
-      );
     }
 
     this.setState({
@@ -913,7 +1013,7 @@ export class Search extends Component<any, SearchState> {
     i.setState({ searchText: event.target.value });
   }
 
-  updateUrl({
+  async updateUrl({
     q,
     type,
     listingType,
@@ -950,71 +1050,6 @@ export class Search extends Component<any, SearchState> {
 
     this.props.history.push(`/search${getQueryString(queryParams)}`);
 
-    this.search();
+    await this.search();
-  }
-
-  parseMessage(msg: any) {
-    console.log(msg);
-    const op = wsUserOp(msg);
-    if (msg.error) {
-      if (msg.error === "couldnt_find_object") {
-        this.setState({
-          resolveObjectResponse: {},
-        });
-        this.checkFinishedLoading();
-      } else {
-        toast(i18n.t(msg.error), "danger");
-      }
-    } else {
-      switch (op) {
-        case UserOperation.Search: {
-          const searchResponse = wsJsonToRes<SearchResponse>(msg);
-          this.setState({ searchResponse });
-          window.scrollTo(0, 0);
-          this.checkFinishedLoading();
-          restoreScrollPosition(this.context);
-
-          break;
-        }
-
-        case UserOperation.CreateCommentLike: {
-          const { comment_view } = wsJsonToRes<CommentResponse>(msg);
-          createCommentLikeRes(
-            comment_view,
-            this.state.searchResponse?.comments
-          );
-
-          break;
-        }
-
-        case UserOperation.CreatePostLike: {
-          const { post_view } = wsJsonToRes<PostResponse>(msg);
-          createPostLikeFindRes(post_view, this.state.searchResponse?.posts);
-
-          break;
-        }
-
-        case UserOperation.ListCommunities: {
-          const { communities } = wsJsonToRes<ListCommunitiesResponse>(msg);
-          this.setState({ communities });
-
-          break;
-        }
-
-        case UserOperation.ResolveObject: {
-          const resolveObjectResponse = wsJsonToRes<ResolveObjectResponse>(msg);
-          this.setState({ resolveObjectResponse });
-          this.checkFinishedLoading();
-
-          break;
-        }
-      }
-    }
-  }
-
-  checkFinishedLoading() {
-    if (this.state.searchResponse || this.state.resolveObjectResponse) {
-      this.setState({ searchLoading: false });
-    }
   }
 }

src/shared/env.ts

@@ -34,12 +34,6 @@ function getHost() {
   return isBrowser() ? getExternalHost() : getInternalHost();
 }
 
-function getWsHost() {
-  return isBrowser()
-    ? window.lemmyConfig?.wsHost ?? getHost()
-    : process.env.LEMMY_UI_LEMMY_WS_HOST ?? getExternalHost();
-}
-
 function getBaseLocal(s = "") {
   return `http${s}://${getHost()}`;
 }
@@ -47,18 +41,20 @@ function getBaseLocal(s = "") {
 export function getHttpBaseInternal() {
   return getBaseLocal(); // Don't use secure here
 }
+
+export function getHttpBaseExternal() {
+  return `http${getSecure()}://${getExternalHost()}`;
+}
+
 export function getHttpBase() {
   return getBaseLocal(getSecure());
 }
-export function getWsUri() {
+
-  return `ws${getSecure()}://${getWsHost()}/api/v3/ws`;
-}
 export function isHttps() {
   return getSecure() === "s";
 }
 
 console.log(`httpbase: ${getHttpBase()}`);
-console.log(`wsUri: ${getWsUri()}`);
 console.log(`isHttps: ${isHttps()}`);
 
 // This is for html tags, don't include port

src/shared/interfaces.ts

@@ -1,5 +1,6 @@
-import { CommentView, GetSiteResponse, LemmyHttp } from "lemmy-js-client";
+import { CommentView, GetSiteResponse } from "lemmy-js-client";
 import type { ParsedQs } from "qs";
+import { RequestState, WrappedLemmyHttp } from "./services/HttpService";
 import { ErrorPageData } from "./utils";
 
 /**
@@ -7,7 +8,7 @@ import { ErrorPageData } from "./utils";
  */
 export interface IsoData {
   path: string;
-  routeData: any[];
+  routeData: RequestState<any>[];
   site_res: GetSiteResponse;
   errorPageData?: ErrorPageData;
 }
@@ -28,7 +29,7 @@ declare global {
 
 export interface InitialFetchRequest<T extends ParsedQs = ParsedQs> {
   auth?: string;
-  client: LemmyHttp;
+  client: WrappedLemmyHttp;
   path: string;
   query: T;
   site: GetSiteResponse;
@@ -69,6 +70,11 @@ export enum PurgeType {
   Comment,
 }
 
+export enum VoteType {
+  Upvote,
+  Downvote,
+}
+
 export interface CommentNodeI {
   comment_view: CommentView;
   children: Array<CommentNodeI>;

src/shared/routes.ts

@@ -22,10 +22,11 @@ import { Post } from "./components/post/post";
 import { CreatePrivateMessage } from "./components/private_message/create-private-message";
 import { Search } from "./components/search";
 import { InitialFetchRequest } from "./interfaces";
+import { RequestState } from "./services/HttpService";
 
 interface IRoutePropsWithFetch extends IRouteProps {
   // TODO Make sure this one is good.
-  fetchInitialData?(req: InitialFetchRequest): Promise<any>[];
+  fetchInitialData?(req: InitialFetchRequest): Promise<RequestState<any>>[];
 }
 
 export const routes: IRoutePropsWithFetch[] = [

src/shared/services/FirstLoadService.ts

@@ -0,0 +1,25 @@
+export class FirstLoadService {
+  #isFirstLoad: boolean;
+  static #instance: FirstLoadService;
+
+  private constructor() {
+    this.#isFirstLoad = true;
+  }
+
+  get isFirstLoad() {
+    const isFirst = this.#isFirstLoad;
+    if (isFirst) {
+      this.#isFirstLoad = false;
+    }
+
+    return isFirst;
+  }
+
+  static get #Instance() {
+    return this.#instance ?? (this.#instance = new this());
+  }
+
+  static get isFirstLoad() {
+    return this.#Instance.isFirstLoad;
+  }
+}

src/shared/services/HistoryService.ts

@@ -0,0 +1,18 @@
+import { History, createBrowserHistory } from "history";
+
+export class HistoryService {
+  static #_instance: HistoryService;
+  #history: History;
+
+  private constructor() {
+    this.#history = createBrowserHistory();
+  }
+
+  static get #Instance() {
+    return this.#_instance ?? (this.#_instance = new this());
+  }
+
+  public static get history() {
+    return this.#Instance.#history;
+  }
+}

src/shared/services/HttpService.ts

@@ -0,0 +1,96 @@
+import { LemmyHttp } from "lemmy-js-client";
+import { getHttpBase } from "../../shared/env";
+import { i18n } from "../../shared/i18next";
+import { toast } from "../../shared/utils";
+
+type EmptyRequestState = {
+  state: "empty";
+};
+
+type LoadingRequestState = {
+  state: "loading";
+};
+
+type FailedRequestState = {
+  state: "failed";
+  msg: string;
+};
+
+type SuccessRequestState<T> = {
+  state: "success";
+  data: T;
+};
+
+/**
+ * Shows the state of an API request.
+ *
+ * Can be empty, loading, failed, or success
+ */
+export type RequestState<T> =
+  | EmptyRequestState
+  | LoadingRequestState
+  | FailedRequestState
+  | SuccessRequestState<T>;
+
+export type WrappedLemmyHttp = {
+  [K in keyof LemmyHttp]: LemmyHttp[K] extends (...args: any[]) => any
+    ? ReturnType<LemmyHttp[K]> extends Promise<infer U>
+      ? (...args: Parameters<LemmyHttp[K]>) => Promise<RequestState<U>>
+      : (
+          ...args: Parameters<LemmyHttp[K]>
+        ) => Promise<RequestState<LemmyHttp[K]>>
+    : LemmyHttp[K];
+};
+
+class WrappedLemmyHttpClient {
+  #client: LemmyHttp;
+
+  constructor(client: LemmyHttp) {
+    this.#client = client;
+
+    for (const key of Object.getOwnPropertyNames(
+      Object.getPrototypeOf(this.#client)
+    )) {
+      if (key !== "constructor") {
+        WrappedLemmyHttpClient.prototype[key] = async (...args) => {
+          try {
+            const res = await this.#client[key](...args);
+
+            return {
+              data: res,
+              state: "success",
+            };
+          } catch (error) {
+            console.error(`API error: ${error}`);
+            toast(i18n.t(error), "danger");
+            return {
+              state: "failed",
+              msg: error,
+            };
+          }
+        };
+      }
+    }
+  }
+}
+
+export function wrapClient(client: LemmyHttp) {
+  return new WrappedLemmyHttpClient(client) as unknown as WrappedLemmyHttp; // unfortunately, this verbose cast is necessary
+}
+
+export class HttpService {
+  static #_instance: HttpService;
+  #client: WrappedLemmyHttp;
+
+  private constructor() {
+    this.#client = wrapClient(new LemmyHttp(getHttpBase()));
+  }
+
+  static get #Instance() {
+    return this.#_instance ?? (this.#_instance = new this());
+  }
+
+  public static get client() {
+    return this.#Instance.#client;
+  }
+}

src/shared/services/UserService.ts

@@ -2,7 +2,6 @@
 import IsomorphicCookie from "isomorphic-cookie";
 import jwt_decode from "jwt-decode";
 import { LoginResponse, MyUserInfo } from "lemmy-js-client";
-import { BehaviorSubject } from "rxjs";
 import { isHttps } from "../env";
 import { i18n } from "../i18next";
 import { isAuthPath, isBrowser, toast } from "../utils";
@@ -19,18 +18,12 @@ interface JwtInfo {
 }
 
 export class UserService {
-  private static _instance: UserService;
+  static #instance: UserService;
   public myUserInfo?: MyUserInfo;
   public jwtInfo?: JwtInfo;
-  public unreadInboxCountSub: BehaviorSubject<number> =
-    new BehaviorSubject<number>(0);
-  public unreadReportCountSub: BehaviorSubject<number> =
-    new BehaviorSubject<number>(0);
-  public unreadApplicationCountSub: BehaviorSubject<number> =
-    new BehaviorSubject<number>(0);
 
   private constructor() {
-    this.setJwtInfo();
+    this.#setJwtInfo();
   }
 
   public login(res: LoginResponse) {
@@ -39,7 +32,7 @@ export class UserService {
     if (res.jwt) {
       toast(i18n.t("logged_in"));
       IsomorphicCookie.save("jwt", res.jwt, { expires, secure: isHttps() });
-      this.setJwtInfo();
+      this.#setJwtInfo();
     }
   }
 
@@ -55,7 +48,7 @@ export class UserService {
     }
   }
 
-  public auth(throwErr = true): string | undefined {
+  public auth(throwErr = false): string | undefined {
     const jwt = this.jwtInfo?.jwt;
     if (jwt) {
       return jwt;
@@ -70,7 +63,7 @@ export class UserService {
     }
   }
 
-  private setJwtInfo() {
+  #setJwtInfo() {
     const jwt: string | undefined = IsomorphicCookie.load("jwt");
 
     if (jwt) {
@@ -79,6 +72,6 @@ export class UserService {
   }
 
   public static get Instance() {
-    return this._instance || (this._instance = new this());
+    return this.#instance || (this.#instance = new this());
   }
 }

src/shared/services/WebSocketService.ts

@@ -1,68 +0,0 @@
-import { Observable } from "rxjs";
-import { share } from "rxjs/operators";
-import {
-  ExponentialBackoff,
-  LRUBuffer,
-  Websocket as WS,
-  WebsocketBuilder,
-} from "websocket-ts";
-import { getWsUri } from "../env";
-import { isBrowser } from "../utils";
-
-export class WebSocketService {
-  private static _instance: WebSocketService;
-  private ws: WS;
-  public subject: Observable<any>;
-
-  private constructor() {
-    let firstConnect = true;
-
-    this.subject = new Observable((obs: any) => {
-      this.ws = new WebsocketBuilder(getWsUri())
-        .onMessage((_i, e) => {
-          try {
-            obs.next(JSON.parse(e.data.toString()));
-          } catch (err) {
-            console.error(err);
-          }
-        })
-        .onOpen(() => {
-          console.log(`Connected to ${getWsUri()}`);
-
-          if (!firstConnect) {
-            const res = {
-              reconnect: true,
-            };
-            obs.next(res);
-          }
-          firstConnect = false;
-        })
-        .onRetry(() => {
-          console.log("Retrying websocket connection...");
-        })
-        .onClose(() => {
-          console.error("Websocket closed.");
-        })
-        .withBackoff(new ExponentialBackoff(100, 7))
-        .withBuffer(new LRUBuffer(1000))
-        .build();
-    }).pipe(share());
-
-    if (isBrowser()) {
-      window.onunload = () => {
-        this.ws.close();
-
-        // Clears out scroll positions.
-        sessionStorage.clear();
-      };
-    }
-  }
-
-  public send(data: string) {
-    this.ws.send(data);
-  }
-
-  public static get Instance() {
-    return this._instance || (this._instance = new this());
-  }
-}

src/shared/services/index.ts

@@ -1,2 +1,2 @@
+export { HttpService } from "./HttpService";
 export { UserService } from "./UserService";
-export { WebSocketService } from "./WebSocketService";

src/shared/utils.ts

@@ -3,7 +3,9 @@ import emojiShortName from "emoji-short-name";
 import {
   BlockCommunityResponse,
   BlockPersonResponse,
+  CommentAggregates,
   Comment as CommentI,
+  CommentReplyView,
   CommentReportView,
   CommentSortType,
   CommentView,
@@ -14,9 +16,9 @@ import {
   GetSiteResponse,
   Language,
   LemmyHttp,
-  LemmyWebsocket,
   MyUserInfo,
   Person,
+  PersonMentionView,
   PersonView,
   PostReportView,
   PostView,
@@ -24,8 +26,8 @@ import {
   PrivateMessageView,
   RegistrationApplicationView,
   Search,
+  SearchType,
   SortType,
-  UploadImageResponse,
 } from "lemmy-js-client";
 import { default as MarkdownIt } from "markdown-it";
 import markdown_it_container from "markdown-it-container";
@@ -37,22 +39,18 @@ import markdown_it_sup from "markdown-it-sup";
 import Renderer from "markdown-it/lib/renderer";
 import Token from "markdown-it/lib/token";
 import moment from "moment";
-import { Subscription } from "rxjs";
-import { delay, retryWhen, take } from "rxjs/operators";
 import tippy from "tippy.js";
 import Toastify from "toastify-js";
 import { getHttpBase } from "./env";
 import { i18n, languages } from "./i18next";
-import { CommentNodeI, DataType, IsoData } from "./interfaces";
+import { CommentNodeI, DataType, IsoData, VoteType } from "./interfaces";
-import { UserService, WebSocketService } from "./services";
+import { HttpService, UserService } from "./services";
 
 let Tribute: any;
 if (isBrowser()) {
   Tribute = require("tributejs");
 }
 
-export const wsClient = new LemmyWebsocket();
-
 export const favIconUrl = "/static/assets/icons/favicon.svg";
 export const favIconPngUrl = "/static/assets/icons/apple-touch-icon.png";
 // TODO
@@ -206,12 +204,10 @@ export function hotRank(score: number, timeStr: string): number {
 }
 
 export function mdToHtml(text: string) {
-  // restore '>' character to fix quotes
   return { __html: md.render(text) };
 }
 
 export function mdToHtmlNoImages(text: string) {
-  // restore '>' character to fix quotes
   return { __html: mdNoImages.render(text) };
 }
 
@@ -561,86 +557,6 @@ export function pictrsDeleteToast(filename: string, deleteUrl: string) {
   }
 }
 
-interface NotifyInfo {
-  name: string;
-  icon?: string;
-  link: string;
-  body?: string;
-}
-
-export function messageToastify(info: NotifyInfo, router: any) {
-  if (isBrowser()) {
-    const htmlBody = info.body ? md.render(info.body) : "";
-    const backgroundColor = `var(--light)`;
-
-    const toast = Toastify({
-      text: `${htmlBody}<br />${info.name}`,
-      avatar: info.icon,
-      backgroundColor: backgroundColor,
-      className: "text-dark",
-      close: true,
-      gravity: "top",
-      position: "right",
-      duration: 5000,
-      escapeMarkup: false,
-      onClick: () => {
-        if (toast) {
-          toast.hideToast();
-          router.history.push(info.link);
-        }
-      },
-    });
-    toast.showToast();
-  }
-}
-
-export function notifyPost(post_view: PostView, router: any) {
-  const info: NotifyInfo = {
-    name: post_view.community.name,
-    icon: post_view.community.icon,
-    link: `/post/${post_view.post.id}`,
-    body: post_view.post.name,
-  };
-  notify(info, router);
-}
-
-export function notifyComment(comment_view: CommentView, router: any) {
-  const info: NotifyInfo = {
-    name: comment_view.creator.name,
-    icon: comment_view.creator.avatar,
-    link: `/comment/${comment_view.comment.id}`,
-    body: comment_view.comment.content,
-  };
-  notify(info, router);
-}
-
-export function notifyPrivateMessage(pmv: PrivateMessageView, router: any) {
-  const info: NotifyInfo = {
-    name: pmv.creator.name,
-    icon: pmv.creator.avatar,
-    link: `/inbox`,
-    body: pmv.private_message.content,
-  };
-  notify(info, router);
-}
-
-function notify(info: NotifyInfo, router: any) {
-  messageToastify(info, router);
-
-  if (Notification.permission !== "granted") Notification.requestPermission();
-  else {
-    var notification = new Notification(info.name, {
-      ...{ body: info.body },
-      ...(info.icon && { icon: info.icon }),
-    });
-
-    notification.onclick = (ev: Event): any => {
-      ev.preventDefault();
-      router.history.push(info.link);
-    };
-  }
-}
-
 export function setupTribute() {
   return new Tribute({
     noMatchTemplate: function () {
@@ -877,15 +793,12 @@ interface PersonTribute {
 }
 
 async function personSearch(text: string): Promise<PersonTribute[]> {
-  const users = (await fetchUsers(text)).users;
+  const usersResponse = await fetchUsers(text);
-  const persons: PersonTribute[] = users.map(pv => {
+
-    const tribute: PersonTribute = {
+  return usersResponse.map(pv => ({
     key: `@${pv.person.name}@${hostname(pv.person.actor_id)}`,
     view: pv,
-    };
+  }));
-    return tribute;
-  });
-  return persons;
 }
 
 interface CommunityTribute {
@@ -894,15 +807,12 @@ interface CommunityTribute {
 }
 
 async function communitySearch(text: string): Promise<CommunityTribute[]> {
-  const comms = (await fetchCommunities(text)).communities;
+  const communitiesResponse = await fetchCommunities(text);
-  const communities: CommunityTribute[] = comms.map(cv => {
+
-    const tribute: CommunityTribute = {
+  return communitiesResponse.map(cv => ({
     key: `!${cv.community.name}@${hostname(cv.community.actor_id)}`,
     view: cv,
-    };
+  }));
-    return tribute;
-  });
-  return communities;
 }
 
 export function getRecipientIdFromProps(props: any): number {
@@ -921,42 +831,128 @@ export function getCommentIdFromProps(props: any): number | undefined {
   return id ? Number(id) : undefined;
 }
 
-export function editCommentRes(data: CommentView, comments?: CommentView[]) {
+type ImmutableListKey =
-  const found = comments?.find(c => c.comment.id == data.comment.id);
+  | "comment"
-  if (found) {
+  | "comment_reply"
-    found.comment.content = data.comment.content;
+  | "person_mention"
-    found.comment.distinguished = data.comment.distinguished;
+  | "community"
-    found.comment.updated = data.comment.updated;
+  | "private_message"
-    found.comment.removed = data.comment.removed;
+  | "post"
-    found.comment.deleted = data.comment.deleted;
+  | "post_report"
-    found.counts.upvotes = data.counts.upvotes;
+  | "comment_report"
-    found.counts.downvotes = data.counts.downvotes;
+  | "private_message_report"
-    found.counts.score = data.counts.score;
+  | "registration_application";
-  }
+
+function editListImmutable<
+  T extends { [key in F]: { id: number } },
+  F extends ImmutableListKey
+>(fieldName: F, data: T, list: T[]): T[] {
+  return [
+    ...list.map(c => (c[fieldName].id === data[fieldName].id ? data : c)),
+  ];
 }
 
-export function saveCommentRes(data: CommentView, comments?: CommentView[]) {
+export function editComment(
-  const found = comments?.find(c => c.comment.id == data.comment.id);
+  data: CommentView,
-  if (found) {
+  comments: CommentView[]
-    found.saved = data.saved;
+): CommentView[] {
-  }
+  return editListImmutable("comment", data, comments);
+}
+
+export function editCommentReply(
+  data: CommentReplyView,
+  replies: CommentReplyView[]
+): CommentReplyView[] {
+  return editListImmutable("comment_reply", data, replies);
+}
+
+interface WithComment {
+  comment: CommentI;
+  counts: CommentAggregates;
+  my_vote?: number;
+  saved: boolean;
+}
+
+export function editMention(
+  data: PersonMentionView,
+  comments: PersonMentionView[]
+): PersonMentionView[] {
+  return editListImmutable("person_mention", data, comments);
+}
+
+export function editCommunity(
+  data: CommunityView,
+  communities: CommunityView[]
+): CommunityView[] {
+  return editListImmutable("community", data, communities);
+}
+
+export function editPrivateMessage(
+  data: PrivateMessageView,
+  messages: PrivateMessageView[]
+): PrivateMessageView[] {
+  return editListImmutable("private_message", data, messages);
+}
+
+export function editPost(data: PostView, posts: PostView[]): PostView[] {
+  return editListImmutable("post", data, posts);
+}
+
+export function editPostReport(
+  data: PostReportView,
+  reports: PostReportView[]
+) {
+  return editListImmutable("post_report", data, reports);
+}
+
+export function editCommentReport(
+  data: CommentReportView,
+  reports: CommentReportView[]
+): CommentReportView[] {
+  return editListImmutable("comment_report", data, reports);
+}
+
+export function editPrivateMessageReport(
+  data: PrivateMessageReportView,
+  reports: PrivateMessageReportView[]
+): PrivateMessageReportView[] {
+  return editListImmutable("private_message_report", data, reports);
+}
+
+export function editRegistrationApplication(
+  data: RegistrationApplicationView,
+  apps: RegistrationApplicationView[]
+): RegistrationApplicationView[] {
+  return editListImmutable("registration_application", data, apps);
+}
+
+export function editWith<D extends WithComment, L extends WithComment>(
+  { comment, counts, saved, my_vote }: D,
+  list: L[]
+) {
+  return [
+    ...list.map(c =>
+      c.comment.id === comment.id
+        ? { ...c, comment, counts, saved, my_vote }
+        : c
+    ),
+  ];
 }
 
 export function updatePersonBlock(
   data: BlockPersonResponse,
   myUserInfo: MyUserInfo | undefined = UserService.Instance.myUserInfo
 ) {
-  const mui = myUserInfo;
+  if (myUserInfo) {
-  if (mui) {
     if (data.blocked) {
-      mui.person_blocks.push({
+      myUserInfo.person_blocks.push({
-        person: mui.local_user_view.person,
+        person: myUserInfo.local_user_view.person,
         target: data.person_view.person,
       });
       toast(`${i18n.t("blocked")} ${data.person_view.person.name}`);
     } else {
-      mui.person_blocks = mui.person_blocks.filter(
+      myUserInfo.person_blocks = myUserInfo.person_blocks.filter(
-        i => i.target.id != data.person_view.person.id
+        i => i.target.id !== data.person_view.person.id
       );
       toast(`${i18n.t("unblocked")} ${data.person_view.person.name}`);
     }
@@ -967,127 +963,22 @@ export function updateCommunityBlock(
   data: BlockCommunityResponse,
   myUserInfo: MyUserInfo | undefined = UserService.Instance.myUserInfo
 ) {
-  const mui = myUserInfo;
+  if (myUserInfo) {
-  if (mui) {
     if (data.blocked) {
-      mui.community_blocks.push({
+      myUserInfo.community_blocks.push({
-        person: mui.local_user_view.person,
+        person: myUserInfo.local_user_view.person,
         community: data.community_view.community,
       });
       toast(`${i18n.t("blocked")} ${data.community_view.community.name}`);
     } else {
-      mui.community_blocks = mui.community_blocks.filter(
+      myUserInfo.community_blocks = myUserInfo.community_blocks.filter(
-        i => i.community.id != data.community_view.community.id
+        i => i.community.id !== data.community_view.community.id
       );
       toast(`${i18n.t("unblocked")} ${data.community_view.community.name}`);
     }
   }
 }
 
-export function createCommentLikeRes(
-  data: CommentView,
-  comments?: CommentView[]
-) {
-  const found = comments?.find(c => c.comment.id === data.comment.id);
-  if (found) {
-    found.counts.score = data.counts.score;
-    found.counts.upvotes = data.counts.upvotes;
-    found.counts.downvotes = data.counts.downvotes;
-    if (data.my_vote !== null) {
-      found.my_vote = data.my_vote;
-    }
-  }
-}
-
-export function createPostLikeFindRes(data: PostView, posts?: PostView[]) {
-  const found = posts?.find(p => p.post.id == data.post.id);
-  if (found) {
-    createPostLikeRes(data, found);
-  }
-}
-
-export function createPostLikeRes(data: PostView, post_view?: PostView) {
-  if (post_view) {
-    post_view.counts.score = data.counts.score;
-    post_view.counts.upvotes = data.counts.upvotes;
-    post_view.counts.downvotes = data.counts.downvotes;
-    if (data.my_vote !== null) {
-      post_view.my_vote = data.my_vote;
-    }
-  }
-}
-
-export function editPostFindRes(data: PostView, posts?: PostView[]) {
-  const found = posts?.find(p => p.post.id == data.post.id);
-  if (found) {
-    editPostRes(data, found);
-  }
-}
-
-export function editPostRes(data: PostView, post: PostView) {
-  if (post) {
-    post.post.url = data.post.url;
-    post.post.name = data.post.name;
-    post.post.nsfw = data.post.nsfw;
-    post.post.deleted = data.post.deleted;
-    post.post.removed = data.post.removed;
-    post.post.featured_community = data.post.featured_community;
-    post.post.featured_local = data.post.featured_local;
-    post.post.body = data.post.body;
-    post.post.locked = data.post.locked;
-    post.saved = data.saved;
-  }
-}
-
-// TODO possible to make these generic?
-export function updatePostReportRes(
-  data: PostReportView,
-  reports?: PostReportView[]
-) {
-  const found = reports?.find(p => p.post_report.id == data.post_report.id);
-  if (found) {
-    found.post_report = data.post_report;
-  }
-}
-
-export function updateCommentReportRes(
-  data: CommentReportView,
-  reports?: CommentReportView[]
-) {
-  const found = reports?.find(
-    c => c.comment_report.id == data.comment_report.id
-  );
-  if (found) {
-    found.comment_report = data.comment_report;
-  }
-}
-
-export function updatePrivateMessageReportRes(
-  data: PrivateMessageReportView,
-  reports?: PrivateMessageReportView[]
-) {
-  const found = reports?.find(
-    c => c.private_message_report.id == data.private_message_report.id
-  );
-  if (found) {
-    found.private_message_report = data.private_message_report;
-  }
-}
-
-export function updateRegistrationApplicationRes(
-  data: RegistrationApplicationView,
-  applications?: RegistrationApplicationView[]
-) {
-  const found = applications?.find(
-    ra => ra.registration_application.id == data.registration_application.id
-  );
-  if (found) {
-    found.registration_application = data.registration_application;
-    found.admin = data.admin;
-    found.creator_local_user = data.creator_local_user;
-  }
-}
-
 export function commentsToFlatNodes(comments: CommentView[]): CommentNodeI[] {
   const nodes: CommentNodeI[] = [];
   for (const comment of comments) {
@@ -1180,6 +1071,7 @@ export function getDepthFromComment(comment?: CommentI): number | undefined {
   return len ? len - 2 : undefined;
 }
 
+// TODO make immutable
 export function insertCommentIntoTree(
   tree: CommentNodeI[],
   cv: CommentView,
@@ -1276,20 +1168,6 @@ export function setIsoData(context: any): IsoData {
   } else return context.router.staticContext;
 }
 
-export function wsSubscribe(parseMessage: any): Subscription | undefined {
-  if (isBrowser()) {
-    return WebSocketService.Instance.subject
-      .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
-      .subscribe(
-        msg => parseMessage(msg),
-        err => console.error(err),
-        () => console.log("complete")
-      );
-  } else {
-    return undefined;
-  }
-}
-
 moment.updateLocale("en", {
   relativeTime: {
     future: "in %s",
@@ -1353,32 +1231,30 @@ export function personToChoice(pvs: PersonView): Choice {
   };
 }
 
-export async function fetchCommunities(q: string) {
+function fetchSearchResults(q: string, type_: SearchType) {
   const form: Search = {
     q,
-    type_: "Communities",
+    type_,
     sort: "TopAll",
     listing_type: "All",
     page: 1,
     limit: fetchLimit,
-    auth: myAuth(false),
+    auth: myAuth(),
   };
-  const client = new LemmyHttp(getHttpBase());
+
-  return client.search(form);
+  return HttpService.client.search(form);
+}
+
+export async function fetchCommunities(q: string) {
+  const res = await fetchSearchResults(q, "Communities");
+
+  return res.state === "success" ? res.data.communities : [];
 }
 
 export async function fetchUsers(q: string) {
-  const form: Search = {
+  const res = await fetchSearchResults(q, "Users");
-    q,
+
-    type_: "Users",
+  return res.state === "success" ? res.data.users : [];
-    sort: "TopAll",
-    listing_type: "All",
-    page: 1,
-    limit: fetchLimit,
-    auth: myAuth(false),
-  };
-  const client = new LemmyHttp(getHttpBase());
-  return client.search(form);
 }
 
 export function communitySelectName(cv: CommunityView): string {
@@ -1398,7 +1274,7 @@ export function initializeSite(site?: GetSiteResponse) {
   UserService.Instance.myUserInfo = site?.my_user;
   i18n.changeLanguage(getLanguages()[0]);
   if (site) {
-    setupEmojiDataModel(site.custom_emojis);
+    setupEmojiDataModel(site.custom_emojis ?? []);
   }
   setupMarkdown();
 }
@@ -1429,8 +1305,12 @@ export function isBanned(ps: Person): boolean {
   }
 }
 
-export function myAuth(throwErr = true): string | undefined {
+export function myAuth(): string | undefined {
-  return UserService.Instance.auth(throwErr);
+  return UserService.Instance.auth();
+}
+
+export function myAuthRequired(): string {
+  return UserService.Instance.auth(true) ?? "";
 }
 
 export function enableDownvotes(siteRes: GetSiteResponse): boolean {
@@ -1528,12 +1408,6 @@ export function selectableLanguages(
   }
 }
 
-export function uploadImage(image: File): Promise<UploadImageResponse> {
-  const client = new LemmyHttp(getHttpBase());
-
-  return client.uploadImage({ image });
-}
-
 interface EmojiMartCategory {
   id: string;
   name: string;
@@ -1594,7 +1468,7 @@ export function getQueryString<T extends Record<string, string | undefined>>(
 }
 
 export function isAuthPath(pathname: string) {
-  return /create_.*|inbox|settings|setup|admin|reports|registration_applications/g.test(
+  return /create_.*|inbox|settings|admin|reports|registration_applications/g.test(
     pathname
   );
 }
@@ -1608,3 +1482,11 @@ export function share(shareData: ShareData) {
     navigator.share(shareData);
   }
 }
+
+export function newVote(voteType: VoteType, myVote?: number): number {
+  if (voteType == VoteType.Upvote) {
+    return myVote == 1 ? 0 : 1;
+  } else {
+    return myVote == -1 ? 0 : -1;
+  }
+}

webpack.config.js

@@ -69,10 +69,10 @@ const createServerConfig = (_env, mode) => {
   });
 
   if (mode === "development") {
-    config.cache = {
+    // config.cache = {
-      type: "filesystem",
+    //   type: "filesystem",
-      name: "server",
+    //   name: "server",
-    };
+    // };
 
     config.plugins.push(
       new RunNodeWebpackPlugin({
@@ -94,7 +94,7 @@ const createClientConfig = (_env, mode) => {
     plugins: [
       ...base.plugins,
       new ServiceWorkerPlugin({
-        enableInDevelopment: true,
+        enableInDevelopment: mode !== "development", // this may seem counterintuitive, but it is correct
         workbox: {
           modifyURLPrefix: {
             "/": "/static/",
@@ -149,10 +149,10 @@ const createClientConfig = (_env, mode) => {
   });
 
   if (mode === "development") {
-    config.cache = {
+    // config.cache = {
-      type: "filesystem",
+    //   type: "filesystem",
-      name: "client",
+    //   name: "client",
-    };
+    // };
   }
 
   return config;