component classes v2

[lemmy-ui.git] / src / shared / components / common / registration-application.tsx

diff --git a/src/shared/components/common/registration-application.tsx b/src/shared/components/common/registration-application.tsx
index cac317eef1e49e5554f99a8eb16f34a6d4e0e1c7..d81af3b6b0908c4c5047389538ab81fcb8a88742 100644 (file)
--- a/src/shared/components/common/registration-application.tsx
+++ b/src/shared/components/common/registration-application.tsx
@@ -1,94 +1,102 @@
-import { None, Option, Some } from "@sniptt/monads";
-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 { auth, mdToHtml, wsClient } from "../../utils";
+import { mdToHtml, myAuthRequired } 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: Option<string>;
+  denyReason?: string;
   denyExpanded: boolean;
+  approveLoading: boolean;
+  denyLoading: boolean;
 }
 
 export class RegistrationApplication extends Component<
   RegistrationApplicationProps,
   RegistrationApplicationState
 > {
-  private emptyState: RegistrationApplicationState = {
+  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.state = this.emptyState;
     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() {
-    let a = this.props.application;
-    let ra = this.props.application.registration_application;
-    let accepted = a.creator_local_user.accepted_application;
+    const a = this.props.application;
+    const ra = this.props.application.registration_application;
+    const accepted = a.creator_local_user.accepted_application;
 
     return (
-      <div>
+      <div className="registration-application">
         <div>
           {i18n.t("applicant")}: <PersonListing person={a.creator} />
         </div>
         <div>
-          {i18n.t("created")}:{" "}
-          <MomentTime showAgo published={ra.published} updated={None} />
+          {i18n.t("created")}: <MomentTime showAgo published={ra.published} />
         </div>
         <div>{i18n.t("answer")}:</div>
         <div className="md-div" dangerouslySetInnerHTML={mdToHtml(ra.answer)} />
 
-        {a.admin.match({
-          some: admin => (
-            <div>
-              {accepted ? (
-                <T i18nKey="approved_by">
+        {a.admin && (
+          <div>
+            {accepted ? (
+              <T i18nKey="approved_by">
+                #
+                <PersonListing person={a.admin} />
+              </T>
+            ) : (
+              <div>
+                <T i18nKey="denied_by">
                   #
-                  <PersonListing person={admin} />
+                  <PersonListing person={a.admin} />
                 </T>
-              ) : (
-                <div>
-                  <T i18nKey="denied_by">
-                    #
-                    <PersonListing person={admin} />
-                  </T>
-                  {ra.deny_reason.match({
-                    some: deny_reason => (
-                      <div>
-                        {i18n.t("deny_reason")}:{" "}
-                        <div
-                          className="md-div d-inline-flex"
-                          dangerouslySetInnerHTML={mdToHtml(deny_reason)}
-                        />
-                      </div>
-                    ),
-                    none: <></>,
-                  })}
-                </div>
-              )}
-            </div>
-          ),
-          none: <></>,
-        })}
+                {ra.deny_reason && (
+                  <div>
+                    {i18n.t("deny_reason")}:{" "}
+                    <div
+                      className="md-div d-inline-flex"
+                      dangerouslySetInnerHTML={mdToHtml(ra.deny_reason)}
+                    />
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
 
         {this.state.denyExpanded && (
-          <div className="form-group row">
+          <div className="mb-3 row">
             <label className="col-sm-2 col-form-label">
               {i18n.t("deny_reason")}
             </label>
@@ -96,30 +104,29 @@ export class RegistrationApplication extends Component<
               <MarkdownTextArea
                 initialContent={this.state.denyReason}
                 onContentChange={this.handleDenyReasonChange}
-                placeholder={None}
-                buttonTitle={None}
-                maxLength={None}
                 hideNavigationWarnings
+                allLanguages={[]}
+                siteLanguages={[]}
               />
             </div>
           </div>
         )}
-        {(ra.admin_id.isNone() || (ra.admin_id.isSome() && !accepted)) && (
+        {(!ra.admin_id || (ra.admin_id && !accepted)) && (
           <button
-            className="btn btn-secondary mr-2 my-2"
+            className="btn btn-secondary me-2 my-2"
             onClick={linkEvent(this, this.handleApprove)}
             aria-label={i18n.t("approve")}
           >
-            {i18n.t("approve")}
+            {this.state.approveLoading ? <Spinner /> : i18n.t("approve")}
           </button>
         )}
-        {(ra.admin_id.isNone() || (ra.admin_id.isSome() && accepted)) && (
+        {(!ra.admin_id || (ra.admin_id && accepted)) && (
           <button
-            className="btn btn-secondary mr-2"
+            className="btn btn-secondary me-2"
             onClick={linkEvent(this, this.handleDeny)}
             aria-label={i18n.t("deny")}
           >
-            {i18n.t("deny")}
+            {this.state.denyLoading ? <Spinner /> : i18n.t("deny")}
           </button>
         )}
       </div>
@@ -127,36 +134,29 @@ export class RegistrationApplication extends Component<
   }
 
   handleApprove(i: RegistrationApplication) {
-    i.setState({ denyExpanded: false });
-    let form = new ApproveRegistrationApplication({
+    i.setState({ denyExpanded: false, approveLoading: true });
+    i.props.onApproveApplication({
       id: i.props.application.registration_application.id,
-      deny_reason: None,
       approve: true,
-      auth: auth().unwrap(),
+      auth: myAuthRequired(),
     });
-    WebSocketService.Instance.send(
-      wsClient.approveRegistrationApplication(form)
-    );
   }
 
   handleDeny(i: RegistrationApplication) {
     if (i.state.denyExpanded) {
-      i.setState({ denyExpanded: false });
-      let form = new ApproveRegistrationApplication({
+      i.setState({ denyExpanded: false, denyLoading: true });
+      i.props.onApproveApplication({
         id: i.props.application.registration_application.id,
         approve: false,
         deny_reason: i.state.denyReason,
-        auth: auth().unwrap(),
+        auth: myAuthRequired(),
       });
-      WebSocketService.Instance.send(
-        wsClient.approveRegistrationApplication(form)
-      );
     } else {
       i.setState({ denyExpanded: true });
     }
   }
 
   handleDenyReasonChange(val: string) {
-    this.setState({ denyReason: Some(val) });
+    this.setState({ denyReason: val });
   }
 }