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