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

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