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

   1 import { Component, linkEvent } from "inferno";
   2 import {
   3   ApproveRegistrationApplication,
   4   GetSiteResponse,
   5   ListRegistrationApplicationsResponse,
   6   RegistrationApplicationView,
   7 } from "lemmy-js-client";
   8 import { i18n } from "../../i18next";
   9 import { InitialFetchRequest } from "../../interfaces";
  10 import { UserService } from "../../services";
  11 import { FirstLoadService } from "../../services/FirstLoadService";
  12 import { HttpService, RequestState } from "../../services/HttpService";
  13 import {
  14   RouteDataResponse,
  15   editRegistrationApplication,
  16   fetchLimit,
  17   myAuthRequired,
  18   setIsoData,
  19   setupTippy,
  20 } from "../../utils";
  21 import { HtmlTags } from "../common/html-tags";
  22 import { Spinner } from "../common/icon";
  23 import { Paginator } from "../common/paginator";
  24 import { RegistrationApplication } from "../common/registration-application";
  25
  26 enum UnreadOrAll {
  27   Unread,
  28   All,
  29 }
  30
  31 type RegistrationApplicationsData = RouteDataResponse<{
  32   listRegistrationApplicationsResponse: ListRegistrationApplicationsResponse;
  33 }>;
  34
  35 interface RegistrationApplicationsState {
  36   appsRes: RequestState<ListRegistrationApplicationsResponse>;
  37   siteRes: GetSiteResponse;
  38   unreadOrAll: UnreadOrAll;
  39   page: number;
  40   isIsomorphic: boolean;
  41 }
  42
  43 export class RegistrationApplications extends Component<
  44   any,
  45   RegistrationApplicationsState
  46 > {
  47   private isoData = setIsoData<RegistrationApplicationsData>(this.context);
  48   state: RegistrationApplicationsState = {
  49     appsRes: { state: "empty" },
  50     siteRes: this.isoData.site_res,
  51     unreadOrAll: UnreadOrAll.Unread,
  52     page: 1,
  53     isIsomorphic: false,
  54   };
  55
  56   constructor(props: any, context: any) {
  57     super(props, context);
  58
  59     this.handlePageChange = this.handlePageChange.bind(this);
  60     this.handleApproveApplication = this.handleApproveApplication.bind(this);
  61
  62     // Only fetch the data if coming from another route
  63     if (FirstLoadService.isFirstLoad) {
  64       this.state = {
  65         ...this.state,
  66         appsRes: this.isoData.routeData.listRegistrationApplicationsResponse,
  67         isIsomorphic: true,
  68       };
  69     }
  70   }
  71
  72   async componentDidMount() {
  73     if (!this.state.isIsomorphic) {
  74       await this.refetch();
  75     }
  76     setupTippy();
  77   }
  78
  79   get documentTitle(): string {
  80     const mui = UserService.Instance.myUserInfo;
  81     return mui
  82       ? `@${mui.local_user_view.person.name} ${i18n.t(
  83           "registration_applications"
  84         )} - ${this.state.siteRes.site_view.site.name}`
  85       : "";
  86   }
  87
  88   renderApps() {
  89     switch (this.state.appsRes.state) {
  90       case "loading":
  91         return (
  92           <h5>
  93             <Spinner large />
  94           </h5>
  95         );
  96       case "success": {
  97         const apps = this.state.appsRes.data.registration_applications;
  98         return (
  99           <div className="row">
 100             <div className="col-12">
 101               <HtmlTags
 102                 title={this.documentTitle}
 103                 path={this.context.router.route.match.url}
 104               />
 105               <h5 className="mb-2">{i18n.t("registration_applications")}</h5>
 106               {this.selects()}
 107               {this.applicationList(apps)}
 108               <Paginator
 109                 page={this.state.page}
 110                 onChange={this.handlePageChange}
 111               />
 112             </div>
 113           </div>
 114         );
 115       }
 116     }
 117   }
 118
 119   render() {
 120     return (
 121       <div className="registration-applications container-lg">
 122         {this.renderApps()}
 123       </div>
 124     );
 125   }
 126
 127   unreadOrAllRadios() {
 128     return (
 129       <div className="btn-group btn-group-toggle flex-wrap mb-2">
 130         <label
 131           className={`btn btn-outline-secondary pointer
 132             ${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
 133           `}
 134         >
 135           <input
 136             type="radio"
 137             className="btn-check"
 138             value={UnreadOrAll.Unread}
 139             checked={this.state.unreadOrAll == UnreadOrAll.Unread}
 140             onChange={linkEvent(this, this.handleUnreadOrAllChange)}
 141           />
 142           {i18n.t("unread")}
 143         </label>
 144         <label
 145           className={`btn btn-outline-secondary pointer
 146             ${this.state.unreadOrAll == UnreadOrAll.All && "active"}
 147           `}
 148         >
 149           <input
 150             type="radio"
 151             className="btn-check"
 152             value={UnreadOrAll.All}
 153             checked={this.state.unreadOrAll == UnreadOrAll.All}
 154             onChange={linkEvent(this, this.handleUnreadOrAllChange)}
 155           />
 156           {i18n.t("all")}
 157         </label>
 158       </div>
 159     );
 160   }
 161
 162   selects() {
 163     return (
 164       <div className="mb-2">
 165         <span className="me-3">{this.unreadOrAllRadios()}</span>
 166       </div>
 167     );
 168   }
 169
 170   applicationList(apps: RegistrationApplicationView[]) {
 171     return (
 172       <div>
 173         {apps.map(ra => (
 174           <>
 175             <hr />
 176             <RegistrationApplication
 177               key={ra.registration_application.id}
 178               application={ra}
 179               onApproveApplication={this.handleApproveApplication}
 180             />
 181           </>
 182         ))}
 183       </div>
 184     );
 185   }
 186
 187   handleUnreadOrAllChange(i: RegistrationApplications, event: any) {
 188     i.setState({ unreadOrAll: Number(event.target.value), page: 1 });
 189     i.refetch();
 190   }
 191
 192   handlePageChange(page: number) {
 193     this.setState({ page });
 194     this.refetch();
 195   }
 196
 197   static async fetchInitialData({
 198     auth,
 199     client,
 200   }: InitialFetchRequest): Promise<RegistrationApplicationsData> {
 201     return {
 202       listRegistrationApplicationsResponse: auth
 203         ? await client.listRegistrationApplications({
 204             unread_only: true,
 205             page: 1,
 206             limit: fetchLimit,
 207             auth: auth as string,
 208           })
 209         : { state: "empty" },
 210     };
 211   }
 212
 213   async refetch() {
 214     const unread_only = this.state.unreadOrAll == UnreadOrAll.Unread;
 215     this.setState({
 216       appsRes: { state: "loading" },
 217     });
 218     this.setState({
 219       appsRes: await HttpService.client.listRegistrationApplications({
 220         unread_only: unread_only,
 221         page: this.state.page,
 222         limit: fetchLimit,
 223         auth: myAuthRequired(),
 224       }),
 225     });
 226   }
 227
 228   async handleApproveApplication(form: ApproveRegistrationApplication) {
 229     const approveRes = await HttpService.client.approveRegistrationApplication(
 230       form
 231     );
 232     this.setState(s => {
 233       if (s.appsRes.state == "success" && approveRes.state == "success") {
 234         s.appsRes.data.registration_applications = editRegistrationApplication(
 235           approveRes.data.registration_application,
 236           s.appsRes.data.registration_applications
 237         );
 238       }
 239       return s;
 240     });
 241   }
 242 }