X-Git-Url: http://these/git/?a=blobdiff_plain;f=src%2Fshared%2Fcomponents%2Fperson%2Fregistration-applications.tsx;fp=src%2Fshared%2Fcomponents%2Fperson%2Fregistration-applications.tsx;h=be1eb2c11da0b976d43e4d7546f6485ce95d22d1;hb=9265fc58948341856513c06ba44e1a0c0d5a4241;hp=72ac5016a910fba17f0972249604afd5f5ae98fb;hpb=72b4d14b47dd8501597b15cc0cf5713ff86aaca9;p=lemmy-ui.git

diff --git a/src/shared/components/person/registration-applications.tsx b/src/shared/components/person/registration-applications.tsx
index 72ac501..be1eb2c 100644
--- a/src/shared/components/person/registration-applications.tsx
+++ b/src/shared/components/person/registration-applications.tsx
@@ -1,28 +1,22 @@
 import { Component, linkEvent } from "inferno";
 import {
+  ApproveRegistrationApplication,
   GetSiteResponse,
-  ListRegistrationApplications,
   ListRegistrationApplicationsResponse,
-  RegistrationApplicationResponse,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
+  RegistrationApplicationView,
 } 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 {
-  WithPromiseKeys,
+  RouteDataResponse,
+  editRegistrationApplication,
   fetchLimit,
-  isBrowser,
-  myAuth,
+  myAuthRequired,
   setIsoData,
   setupTippy,
-  toast,
-  updateRegistrationApplicationRes,
-  wsClient,
-  wsSubscribe,
 } from "../../utils";
 import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
@@ -34,16 +28,16 @@ enum UnreadOrAll {
   All,
 }
 
-interface RegistrationApplicationsData {
+type RegistrationApplicationsData = RouteDataResponse<{
   listRegistrationApplicationsResponse: ListRegistrationApplicationsResponse;
-}
+}>;
 
 interface RegistrationApplicationsState {
-  listRegistrationApplicationsResponse?: ListRegistrationApplicationsResponse;
+  appsRes: RequestState<ListRegistrationApplicationsResponse>;
   siteRes: GetSiteResponse;
   unreadOrAll: UnreadOrAll;
   page: number;
-  loading: boolean;
+  isIsomorphic: boolean;
 }
 
 export class RegistrationApplications extends Component<
@@ -51,47 +45,39 @@ export class RegistrationApplications extends Component<
   RegistrationApplicationsState
 > {
   private isoData = setIsoData<RegistrationApplicationsData>(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.parseMessage = this.parseMessage.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
+    this.handleApproveApplication = this.handleApproveApplication.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,
-        listRegistrationApplicationsResponse:
-          this.isoData.routeData.listRegistrationApplicationsResponse,
-        loading: false,
+        appsRes: this.isoData.routeData.listRegistrationApplicationsResponse,
+        isIsomorphic: true,
       };
-    } else {
-      this.refetch();
     }
   }
 
-  componentDidMount() {
-    setupTippy();
-  }
-
-  componentWillUnmount() {
-    if (isBrowser()) {
-      this.subscription?.unsubscribe();
+  async componentDidMount() {
+    if (!this.state.isIsomorphic) {
+      await this.refetch();
     }
+    setupTippy();
   }
 
   get documentTitle(): string {
-    let mui = UserService.Instance.myUserInfo;
+    const mui = UserService.Instance.myUserInfo;
     return mui
       ? `@${mui.local_user_view.person.name} ${i18n.t(
           "registration_applications"
@@ -99,14 +85,17 @@ export class RegistrationApplications extends Component<
       : "";
   }
 
-  render() {
-    return (
-      <div className="container-lg">
-        {this.state.loading ? (
+  renderApps() {
+    switch (this.state.appsRes.state) {
+      case "loading":
+        return (
           <h5>
             <Spinner large />
           </h5>
-        ) : (
+        );
+      case "success": {
+        const apps = this.state.appsRes.data.registration_applications;
+        return (
           <div className="row">
             <div className="col-12">
               <HtmlTags
@@ -115,16 +104,20 @@ 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() {
@@ -168,22 +161,20 @@ export class RegistrationApplications extends Component<
     );
   }
 
-  applicationList() {
-    let res = this.state.listRegistrationApplicationsResponse;
+  applicationList(apps: RegistrationApplicationView[]) {
     return (
-      res && (
-        <div>
-          {res.registration_applications.map(ra => (
-            <>
-              <hr />
-              <RegistrationApplication
-                key={ra.registration_application.id}
-                application={ra}
-              />
-            </>
-          ))}
-        </div>
-      )
+      <div>
+        {apps.map(ra => (
+          <>
+            <hr />
+            <RegistrationApplication
+              key={ra.registration_application.id}
+              application={ra}
+              onApproveApplication={this.handleApproveApplication}
+            />
+          </>
+        ))}
+      </div>
     );
   }
 
@@ -197,65 +188,49 @@ export class RegistrationApplications extends Component<
     this.refetch();
   }
 
-  static fetchInitialData({
+  static async fetchInitialData({
     auth,
     client,
-  }: InitialFetchRequest): WithPromiseKeys<RegistrationApplicationsData> {
-    const form: ListRegistrationApplications = {
-      unread_only: true,
-      page: 1,
-      limit: fetchLimit,
-      auth: auth as string,
-    };
-
+  }: InitialFetchRequest): Promise<RegistrationApplicationsData> {
     return {
-      listRegistrationApplicationsResponse:
-        client.listRegistrationApplications(form),
+      listRegistrationApplicationsResponse: auth
+        ? await client.listRegistrationApplications({
+            unread_only: true,
+            page: 1,
+            limit: fetchLimit,
+            auth: auth as string,
+          })
+        : { state: "empty" },
     };
   }
 
-  refetch() {
-    let unread_only = this.state.unreadOrAll == UnreadOrAll.Unread;
-    let auth = myAuth();
-    if (auth) {
-      let form: ListRegistrationApplications = {
+  async refetch() {
+    const unread_only = this.state.unreadOrAll == UnreadOrAll.Unread;
+    this.setState({
+      appsRes: { state: "loading" },
+    });
+    this.setState({
+      appsRes: await HttpService.client.listRegistrationApplications({
         unread_only: unread_only,
         page: this.state.page,
         limit: fetchLimit,
-        auth,
-      };
-      WebSocketService.Instance.send(
-        wsClient.listRegistrationApplications(form)
-      );
-    }
+        auth: myAuthRequired(),
+      }),
+    });
   }
 
-  parseMessage(msg: any) {
-    let op = wsUserOp(msg);
-    console.log(msg);
-    if (msg.error) {
-      toast(i18n.t(msg.error), "danger");
-      return;
-    } else if (msg.reconnect) {
-      this.refetch();
-    } else if (op == UserOperation.ListRegistrationApplications) {
-      let data = wsJsonToRes<ListRegistrationApplicationsResponse>(msg);
-      this.setState({
-        listRegistrationApplicationsResponse: data,
-        loading: false,
-      });
-      window.scrollTo(0, 0);
-    } else if (op == UserOperation.ApproveRegistrationApplication) {
-      let data = wsJsonToRes<RegistrationApplicationResponse>(msg);
-      updateRegistrationApplicationRes(
-        data.registration_application,
-        this.state.listRegistrationApplicationsResponse
-          ?.registration_applications
-      );
-      let 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);
-    }
+  async handleApproveApplication(form: ApproveRegistrationApplication) {
+    const approveRes = await HttpService.client.approveRegistrationApplication(
+      form
+    );
+    this.setState(s => {
+      if (s.appsRes.state == "success" && approveRes.state == "success") {
+        s.appsRes.data.registration_applications = editRegistrationApplication(
+          approveRes.data.registration_application,
+          s.appsRes.data.registration_applications
+        );
+      }
+      return s;
+    });
   }
 }