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 <div className="container-lg">{this.renderApps()}</div>;
 121   }
 122
 123   unreadOrAllRadios() {
 124     return (
 125       <div className="btn-group btn-group-toggle flex-wrap mb-2">
 126         <label
 127           className={`btn btn-outline-secondary pointer
 128             ${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
 129           `}
 130         >
 131           <input
 132             type="radio"
 133             value={UnreadOrAll.Unread}
 134             checked={this.state.unreadOrAll == UnreadOrAll.Unread}
 135             onChange={linkEvent(this, this.handleUnreadOrAllChange)}
 136           />
 137           {i18n.t("unread")}
 138         </label>
 139         <label
 140           className={`btn btn-outline-secondary pointer
 141             ${this.state.unreadOrAll == UnreadOrAll.All && "active"}
 142           `}
 143         >
 144           <input
 145             type="radio"
 146             value={UnreadOrAll.All}
 147             checked={this.state.unreadOrAll == UnreadOrAll.All}
 148             onChange={linkEvent(this, this.handleUnreadOrAllChange)}
 149           />
 150           {i18n.t("all")}
 151         </label>
 152       </div>
 153     );
 154   }
 155
 156   selects() {
 157     return (
 158       <div className="mb-2">
 159         <span className="mr-3">{this.unreadOrAllRadios()}</span>
 160       </div>
 161     );
 162   }
 163
 164   applicationList(apps: RegistrationApplicationView[]) {
 165     return (
 166       <div>
 167         {apps.map(ra => (
 168           <>
 169             <hr />
 170             <RegistrationApplication
 171               key={ra.registration_application.id}
 172               application={ra}
 173               onApproveApplication={this.handleApproveApplication}
 174             />
 175           </>
 176         ))}
 177       </div>
 178     );
 179   }
 180
 181   handleUnreadOrAllChange(i: RegistrationApplications, event: any) {
 182     i.setState({ unreadOrAll: Number(event.target.value), page: 1 });
 183     i.refetch();
 184   }
 185
 186   handlePageChange(page: number) {
 187     this.setState({ page });
 188     this.refetch();
 189   }
 190
 191   static async fetchInitialData({
 192     auth,
 193     client,
 194   }: InitialFetchRequest): Promise<RegistrationApplicationsData> {
 195     return {
 196       listRegistrationApplicationsResponse: auth
 197         ? await client.listRegistrationApplications({
 198             unread_only: true,
 199             page: 1,
 200             limit: fetchLimit,
 201             auth: auth as string,
 202           })
 203         : { state: "empty" },
 204     };
 205   }
 206
 207   async refetch() {
 208     const unread_only = this.state.unreadOrAll == UnreadOrAll.Unread;
 209     this.setState({
 210       appsRes: { state: "loading" },
 211     });
 212     this.setState({
 213       appsRes: await HttpService.client.listRegistrationApplications({
 214         unread_only: unread_only,
 215         page: this.state.page,
 216         limit: fetchLimit,
 217         auth: myAuthRequired(),
 218       }),
 219     });
 220   }
 221
 222   async handleApproveApplication(form: ApproveRegistrationApplication) {
 223     const approveRes = await HttpService.client.approveRegistrationApplication(
 224       form
 225     );
 226     this.setState(s => {
 227       if (s.appsRes.state == "success" && approveRes.state == "success") {
 228         s.appsRes.data.registration_applications = editRegistrationApplication(
 229           approveRes.data.registration_application,
 230           s.appsRes.data.registration_applications
 231         );
 232       }
 233       return s;
 234     });
 235   }
 236 }