ui/src/components/user.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { Link } from 'inferno-router';
   3 import { Subscription } from 'rxjs';
   4 import { retryWhen, delay, take } from 'rxjs/operators';
   5 import {
   6   UserOperation,
   7   Post,
   8   Comment,
   9   CommunityUser,
  10   GetUserDetailsForm,
  11   SortType,
  12   ListingType,
  13   UserDetailsResponse,
  14   UserView,
  15   CommentResponse,
  16   UserSettingsForm,
  17   LoginResponse,
  18   BanUserResponse,
  19   AddAdminResponse,
  20   DeleteAccountForm,
  21   PostResponse,
  22   WebSocketJsonResponse,
  23 } from '../interfaces';
  24 import { WebSocketService, UserService } from '../services';
  25 import {
  26   wsJsonToRes,
  27   fetchLimit,
  28   routeSortTypeToEnum,
  29   capitalizeFirstLetter,
  30   themes,
  31   setTheme,
  32   languages,
  33   showAvatars,
  34   toast,
  35 } from '../utils';
  36 import { PostListing } from './post-listing';
  37 import { SortSelect } from './sort-select';
  38 import { ListingTypeSelect } from './listing-type-select';
  39 import { CommentNodes } from './comment-nodes';
  40 import { MomentTime } from './moment-time';
  41 import { i18n } from '../i18next';
  42
  43 enum View {
  44   Overview,
  45   Comments,
  46   Posts,
  47   Saved,
  48 }
  49
  50 interface UserState {
  51   user: UserView;
  52   user_id: number;
  53   username: string;
  54   follows: Array<CommunityUser>;
  55   moderates: Array<CommunityUser>;
  56   comments: Array<Comment>;
  57   posts: Array<Post>;
  58   saved?: Array<Post>;
  59   admins: Array<UserView>;
  60   view: View;
  61   sort: SortType;
  62   page: number;
  63   loading: boolean;
  64   avatarLoading: boolean;
  65   userSettingsForm: UserSettingsForm;
  66   userSettingsLoading: boolean;
  67   deleteAccountLoading: boolean;
  68   deleteAccountShowConfirm: boolean;
  69   deleteAccountForm: DeleteAccountForm;
  70 }
  71
  72 export class User extends Component<any, UserState> {
  73   private subscription: Subscription;
  74   private emptyState: UserState = {
  75     user: {
  76       id: null,
  77       name: null,
  78       fedi_name: null,
  79       published: null,
  80       number_of_posts: null,
  81       post_score: null,
  82       number_of_comments: null,
  83       comment_score: null,
  84       banned: null,
  85       avatar: null,
  86       show_avatars: null,
  87       send_notifications_to_email: null,
  88     },
  89     user_id: null,
  90     username: null,
  91     follows: [],
  92     moderates: [],
  93     comments: [],
  94     posts: [],
  95     admins: [],
  96     loading: true,
  97     avatarLoading: false,
  98     view: this.getViewFromProps(this.props),
  99     sort: this.getSortTypeFromProps(this.props),
 100     page: this.getPageFromProps(this.props),
 101     userSettingsForm: {
 102       show_nsfw: null,
 103       theme: null,
 104       default_sort_type: null,
 105       default_listing_type: null,
 106       lang: null,
 107       show_avatars: null,
 108       send_notifications_to_email: null,
 109       auth: null,
 110     },
 111     userSettingsLoading: null,
 112     deleteAccountLoading: null,
 113     deleteAccountShowConfirm: false,
 114     deleteAccountForm: {
 115       password: null,
 116     },
 117   };
 118
 119   constructor(props: any, context: any) {
 120     super(props, context);
 121
 122     this.state = this.emptyState;
 123     this.handleSortChange = this.handleSortChange.bind(this);
 124     this.handleUserSettingsSortTypeChange = this.handleUserSettingsSortTypeChange.bind(
 125       this
 126     );
 127     this.handleUserSettingsListingTypeChange = this.handleUserSettingsListingTypeChange.bind(
 128       this
 129     );
 130
 131     this.state.user_id = Number(this.props.match.params.id);
 132     this.state.username = this.props.match.params.username;
 133
 134     this.subscription = WebSocketService.Instance.subject
 135       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
 136       .subscribe(
 137         msg => this.parseMessage(msg),
 138         err => console.error(err),
 139         () => console.log('complete')
 140       );
 141
 142     this.refetch();
 143   }
 144
 145   get isCurrentUser() {
 146     return (
 147       UserService.Instance.user &&
 148       UserService.Instance.user.id == this.state.user.id
 149     );
 150   }
 151
 152   getViewFromProps(props: any): View {
 153     return props.match.params.view
 154       ? View[capitalizeFirstLetter(props.match.params.view)]
 155       : View.Overview;
 156   }
 157
 158   getSortTypeFromProps(props: any): SortType {
 159     return props.match.params.sort
 160       ? routeSortTypeToEnum(props.match.params.sort)
 161       : SortType.New;
 162   }
 163
 164   getPageFromProps(props: any): number {
 165     return props.match.params.page ? Number(props.match.params.page) : 1;
 166   }
 167
 168   componentWillUnmount() {
 169     this.subscription.unsubscribe();
 170   }
 171
 172   // Necessary for back button for some reason
 173   componentWillReceiveProps(nextProps: any) {
 174     if (
 175       nextProps.history.action == 'POP' ||
 176       nextProps.history.action == 'PUSH'
 177     ) {
 178       this.state.view = this.getViewFromProps(nextProps);
 179       this.state.sort = this.getSortTypeFromProps(nextProps);
 180       this.state.page = this.getPageFromProps(nextProps);
 181       this.setState(this.state);
 182       this.refetch();
 183     }
 184   }
 185
 186   componentDidUpdate(lastProps: any, _lastState: UserState, _snapshot: any) {
 187     // Necessary if you are on a post and you click another post (same route)
 188     if (
 189       lastProps.location.pathname.split('/')[2] !==
 190       lastProps.history.location.pathname.split('/')[2]
 191     ) {
 192       // Couldnt get a refresh working. This does for now.
 193       location.reload();
 194     }
 195   }
 196
 197   render() {
 198     return (
 199       <div class="container">
 200         {this.state.loading ? (
 201           <h5>
 202             <svg class="icon icon-spinner spin">
 203               <use xlinkHref="#icon-spinner"></use>
 204             </svg>
 205           </h5>
 206         ) : (
 207           <div class="row">
 208             <div class="col-12 col-md-8">
 209               <h5>
 210                 {this.state.user.avatar && showAvatars() && (
 211                   <img
 212                     height="80"
 213                     width="80"
 214                     src={this.state.user.avatar}
 215                     class="rounded-circle mr-2"
 216                   />
 217                 )}
 218                 <span>/u/{this.state.user.name}</span>
 219               </h5>
 220               {this.selects()}
 221               {this.state.view == View.Overview && this.overview()}
 222               {this.state.view == View.Comments && this.comments()}
 223               {this.state.view == View.Posts && this.posts()}
 224               {this.state.view == View.Saved && this.overview()}
 225               {this.paginator()}
 226             </div>
 227             <div class="col-12 col-md-4">
 228               {this.userInfo()}
 229               {this.isCurrentUser && this.userSettings()}
 230               {this.moderates()}
 231               {this.follows()}
 232             </div>
 233           </div>
 234         )}
 235       </div>
 236     );
 237   }
 238
 239   selects() {
 240     return (
 241       <div className="mb-2">
 242         <select
 243           value={this.state.view}
 244           onChange={linkEvent(this, this.handleViewChange)}
 245           class="custom-select custom-select-sm w-auto"
 246         >
 247           <option disabled>{i18n.t('view')}</option>
 248           <option value={View.Overview}>{i18n.t('overview')}</option>
 249           <option value={View.Comments}>{i18n.t('comments')}</option>
 250           <option value={View.Posts}>{i18n.t('posts')}</option>
 251           <option value={View.Saved}>{i18n.t('saved')}</option>
 252         </select>
 253         <span class="ml-2">
 254           <SortSelect
 255             sort={this.state.sort}
 256             onChange={this.handleSortChange}
 257             hideHot
 258           />
 259         </span>
 260         <a
 261           href={`/feeds/u/${this.state.username}.xml?sort=${
 262             SortType[this.state.sort]
 263           }`}
 264           target="_blank"
 265         >
 266           <svg class="icon mx-2 text-muted small">
 267             <use xlinkHref="#icon-rss">#</use>
 268           </svg>
 269         </a>
 270       </div>
 271     );
 272   }
 273
 274   overview() {
 275     let combined: Array<{ type_: string; data: Comment | Post }> = [];
 276     let comments = this.state.comments.map(e => {
 277       return { type_: 'comments', data: e };
 278     });
 279     let posts = this.state.posts.map(e => {
 280       return { type_: 'posts', data: e };
 281     });
 282
 283     combined.push(...comments);
 284     combined.push(...posts);
 285
 286     // Sort it
 287     if (this.state.sort == SortType.New) {
 288       combined.sort((a, b) => b.data.published.localeCompare(a.data.published));
 289     } else {
 290       combined.sort((a, b) => b.data.score - a.data.score);
 291     }
 292
 293     return (
 294       <div>
 295         {combined.map(i => (
 296           <div>
 297             {i.type_ == 'posts' ? (
 298               <PostListing
 299                 post={i.data as Post}
 300                 admins={this.state.admins}
 301                 showCommunity
 302               />
 303             ) : (
 304               <CommentNodes
 305                 nodes={[{ comment: i.data as Comment }]}
 306                 admins={this.state.admins}
 307                 noIndent
 308               />
 309             )}
 310           </div>
 311         ))}
 312       </div>
 313     );
 314   }
 315
 316   comments() {
 317     return (
 318       <div>
 319         {this.state.comments.map(comment => (
 320           <CommentNodes
 321             nodes={[{ comment: comment }]}
 322             admins={this.state.admins}
 323             noIndent
 324           />
 325         ))}
 326       </div>
 327     );
 328   }
 329
 330   posts() {
 331     return (
 332       <div>
 333         {this.state.posts.map(post => (
 334           <PostListing post={post} admins={this.state.admins} showCommunity />
 335         ))}
 336       </div>
 337     );
 338   }
 339
 340   userInfo() {
 341     let user = this.state.user;
 342     return (
 343       <div>
 344         <div class="card border-secondary mb-3">
 345           <div class="card-body">
 346             <h5>
 347               <ul class="list-inline mb-0">
 348                 <li className="list-inline-item">{user.name}</li>
 349                 {user.banned && (
 350                   <li className="list-inline-item badge badge-danger">
 351                     {i18n.t('banned')}
 352                   </li>
 353                 )}
 354               </ul>
 355             </h5>
 356             <div>
 357               {i18n.t('joined')} <MomentTime data={user} />
 358             </div>
 359             <div class="table-responsive mt-1">
 360               <table class="table table-bordered table-sm mt-2 mb-0">
 361                 <tr>
 362                   <td class="text-center" colSpan={2}>
 363                     {i18n.t('number_of_points', {
 364                       count: user.post_score + user.comment_score,
 365                     })}
 366                   </td>
 367                 </tr>
 368                 <tr>
 369                   <td>
 370                     {i18n.t('number_of_points', { count: user.post_score })}
 371                   </td>
 372                   <td>
 373                     {i18n.t('number_of_posts', { count: user.number_of_posts })}
 374                   </td>
 375                 </tr>
 376                 <tr>
 377                   <td>
 378                     {i18n.t('number_of_points', { count: user.comment_score })}
 379                   </td>
 380                   <td>
 381                     {i18n.t('number_of_comments', {
 382                       count: user.number_of_comments,
 383                     })}
 384                   </td>
 385                 </tr>
 386               </table>
 387             </div>
 388             {this.isCurrentUser ? (
 389               <button
 390                 class="btn btn-block btn-secondary mt-3"
 391                 onClick={linkEvent(this, this.handleLogoutClick)}
 392               >
 393                 {i18n.t('logout')}
 394               </button>
 395             ) : (
 396               <>
 397                 <a
 398                   className={`btn btn-block btn-secondary mt-3 ${!this.state
 399                     .user.matrix_user_id && 'disabled'}`}
 400                   target="_blank"
 401                   href={`https://matrix.to/#/${this.state.user.matrix_user_id}`}
 402                 >
 403                   {i18n.t('send_secure_message')}
 404                 </a>
 405                 <Link
 406                   class="btn btn-block btn-secondary mt-3"
 407                   to={`/create_private_message?recipient_id=${this.state.user.id}`}
 408                 >
 409                   {i18n.t('send_message')}
 410                 </Link>
 411               </>
 412             )}
 413           </div>
 414         </div>
 415       </div>
 416     );
 417   }
 418
 419   userSettings() {
 420     return (
 421       <div>
 422         <div class="card border-secondary mb-3">
 423           <div class="card-body">
 424             <h5>{i18n.t('settings')}</h5>
 425             <form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}>
 426               <div class="form-group">
 427                 <label>{i18n.t('avatar')}</label>
 428                 <form class="d-inline">
 429                   <label
 430                     htmlFor="file-upload"
 431                     class="pointer ml-4 text-muted small font-weight-bold"
 432                   >
 433                     {!this.state.userSettingsForm.avatar ? (
 434                       <span class="btn btn-sm btn-secondary">
 435                         {i18n.t('upload_avatar')}
 436                       </span>
 437                     ) : (
 438                       <img
 439                         height="80"
 440                         width="80"
 441                         src={this.state.userSettingsForm.avatar}
 442                         class="rounded-circle"
 443                       />
 444                     )}
 445                   </label>
 446                   <input
 447                     id="file-upload"
 448                     type="file"
 449                     accept="image/*,video/*"
 450                     name="file"
 451                     class="d-none"
 452                     disabled={!UserService.Instance.user}
 453                     onChange={linkEvent(this, this.handleImageUpload)}
 454                   />
 455                 </form>
 456               </div>
 457               <div class="form-group">
 458                 <label>{i18n.t('language')}</label>
 459                 <select
 460                   value={this.state.userSettingsForm.lang}
 461                   onChange={linkEvent(this, this.handleUserSettingsLangChange)}
 462                   class="ml-2 custom-select custom-select-sm w-auto"
 463                 >
 464                   <option disabled>{i18n.t('language')}</option>
 465                   <option value="browser">{i18n.t('browser_default')}</option>
 466                   <option disabled>──</option>
 467                   {languages.map(lang => (
 468                     <option value={lang.code}>{lang.name}</option>
 469                   ))}
 470                 </select>
 471               </div>
 472               <div class="form-group">
 473                 <label>{i18n.t('theme')}</label>
 474                 <select
 475                   value={this.state.userSettingsForm.theme}
 476                   onChange={linkEvent(this, this.handleUserSettingsThemeChange)}
 477                   class="ml-2 custom-select custom-select-sm w-auto"
 478                 >
 479                   <option disabled>{i18n.t('theme')}</option>
 480                   {themes.map(theme => (
 481                     <option value={theme}>{theme}</option>
 482                   ))}
 483                 </select>
 484               </div>
 485               <form className="form-group">
 486                 <label>
 487                   <div class="mr-2">{i18n.t('sort_type')}</div>
 488                 </label>
 489                 <ListingTypeSelect
 490                   type_={this.state.userSettingsForm.default_listing_type}
 491                   onChange={this.handleUserSettingsListingTypeChange}
 492                 />
 493               </form>
 494               <form className="form-group">
 495                 <label>
 496                   <div class="mr-2">{i18n.t('type')}</div>
 497                 </label>
 498                 <SortSelect
 499                   sort={this.state.userSettingsForm.default_sort_type}
 500                   onChange={this.handleUserSettingsSortTypeChange}
 501                 />
 502               </form>
 503               <div class="form-group row">
 504                 <label class="col-lg-3 col-form-label" htmlFor="user-email">
 505                   {i18n.t('email')}
 506                 </label>
 507                 <div class="col-lg-9">
 508                   <input
 509                     type="email"
 510                     id="user-email"
 511                     class="form-control"
 512                     placeholder={i18n.t('optional')}
 513                     value={this.state.userSettingsForm.email}
 514                     onInput={linkEvent(
 515                       this,
 516                       this.handleUserSettingsEmailChange
 517                     )}
 518                     minLength={3}
 519                   />
 520                 </div>
 521               </div>
 522               <div class="form-group row">
 523                 <label class="col-lg-5 col-form-label">
 524                   <a href="https://about.riot.im/" target="_blank">
 525                     {i18n.t('matrix_user_id')}
 526                   </a>
 527                 </label>
 528                 <div class="col-lg-7">
 529                   <input
 530                     type="text"
 531                     class="form-control"
 532                     placeholder="@user:example.com"
 533                     value={this.state.userSettingsForm.matrix_user_id}
 534                     onInput={linkEvent(
 535                       this,
 536                       this.handleUserSettingsMatrixUserIdChange
 537                     )}
 538                     minLength={3}
 539                   />
 540                 </div>
 541               </div>
 542               <div class="form-group row">
 543                 <label class="col-lg-5 col-form-label" htmlFor="user-password">
 544                   {i18n.t('new_password')}
 545                 </label>
 546                 <div class="col-lg-7">
 547                   <input
 548                     type="password"
 549                     id="user-password"
 550                     class="form-control"
 551                     value={this.state.userSettingsForm.new_password}
 552                     onInput={linkEvent(
 553                       this,
 554                       this.handleUserSettingsNewPasswordChange
 555                     )}
 556                   />
 557                 </div>
 558               </div>
 559               <div class="form-group row">
 560                 <label
 561                   class="col-lg-5 col-form-label"
 562                   htmlFor="user-verify-password"
 563                 >
 564                   {i18n.t('verify_password')}
 565                 </label>
 566                 <div class="col-lg-7">
 567                   <input
 568                     type="password"
 569                     id="user-verify-password"
 570                     class="form-control"
 571                     value={this.state.userSettingsForm.new_password_verify}
 572                     onInput={linkEvent(
 573                       this,
 574                       this.handleUserSettingsNewPasswordVerifyChange
 575                     )}
 576                   />
 577                 </div>
 578               </div>
 579               <div class="form-group row">
 580                 <label
 581                   class="col-lg-5 col-form-label"
 582                   htmlFor="user-old-password"
 583                 >
 584                   {i18n.t('old_password')}
 585                 </label>
 586                 <div class="col-lg-7">
 587                   <input
 588                     type="password"
 589                     id="user-old-password"
 590                     class="form-control"
 591                     value={this.state.userSettingsForm.old_password}
 592                     onInput={linkEvent(
 593                       this,
 594                       this.handleUserSettingsOldPasswordChange
 595                     )}
 596                   />
 597                 </div>
 598               </div>
 599               {WebSocketService.Instance.site.enable_nsfw && (
 600                 <div class="form-group">
 601                   <div class="form-check">
 602                     <input
 603                       class="form-check-input"
 604                       id="user-show-nsfw"
 605                       type="checkbox"
 606                       checked={this.state.userSettingsForm.show_nsfw}
 607                       onChange={linkEvent(
 608                         this,
 609                         this.handleUserSettingsShowNsfwChange
 610                       )}
 611                     />
 612                     <label class="form-check-label" htmlFor="user-show-nsfw">
 613                       {i18n.t('show_nsfw')}
 614                     </label>
 615                   </div>
 616                 </div>
 617               )}
 618               <div class="form-group">
 619                 <div class="form-check">
 620                   <input
 621                     class="form-check-input"
 622                     id="user-show-avatars"
 623                     type="checkbox"
 624                     checked={this.state.userSettingsForm.show_avatars}
 625                     onChange={linkEvent(
 626                       this,
 627                       this.handleUserSettingsShowAvatarsChange
 628                     )}
 629                   />
 630                   <label class="form-check-label" htmlFor="user-show-avatars">
 631                     {i18n.t('show_avatars')}
 632                   </label>
 633                 </div>
 634               </div>
 635               <div class="form-group">
 636                 <div class="form-check">
 637                   <input
 638                     class="form-check-input"
 639                     id="user-send-notifications-to-email"
 640                     type="checkbox"
 641                     disabled={!this.state.user.email}
 642                     checked={
 643                       this.state.userSettingsForm.send_notifications_to_email
 644                     }
 645                     onChange={linkEvent(
 646                       this,
 647                       this.handleUserSettingsSendNotificationsToEmailChange
 648                     )}
 649                   />
 650                   <label
 651                     class="form-check-label"
 652                     htmlFor="user-send-notifications-to-email"
 653                   >
 654                     {i18n.t('send_notifications_to_email')}
 655                   </label>
 656                 </div>
 657               </div>
 658               <div class="form-group">
 659                 <button type="submit" class="btn btn-block btn-secondary mr-4">
 660                   {this.state.userSettingsLoading ? (
 661                     <svg class="icon icon-spinner spin">
 662                       <use xlinkHref="#icon-spinner"></use>
 663                     </svg>
 664                   ) : (
 665                     capitalizeFirstLetter(i18n.t('save'))
 666                   )}
 667                 </button>
 668               </div>
 669               <hr />
 670               <div class="form-group mb-0">
 671                 <button
 672                   class="btn btn-block btn-danger"
 673                   onClick={linkEvent(
 674                     this,
 675                     this.handleDeleteAccountShowConfirmToggle
 676                   )}
 677                 >
 678                   {i18n.t('delete_account')}
 679                 </button>
 680                 {this.state.deleteAccountShowConfirm && (
 681                   <>
 682                     <div class="my-2 alert alert-danger" role="alert">
 683                       {i18n.t('delete_account_confirm')}
 684                     </div>
 685                     <input
 686                       type="password"
 687                       value={this.state.deleteAccountForm.password}
 688                       onInput={linkEvent(
 689                         this,
 690                         this.handleDeleteAccountPasswordChange
 691                       )}
 692                       class="form-control my-2"
 693                     />
 694                     <button
 695                       class="btn btn-danger mr-4"
 696                       disabled={!this.state.deleteAccountForm.password}
 697                       onClick={linkEvent(this, this.handleDeleteAccount)}
 698                     >
 699                       {this.state.deleteAccountLoading ? (
 700                         <svg class="icon icon-spinner spin">
 701                           <use xlinkHref="#icon-spinner"></use>
 702                         </svg>
 703                       ) : (
 704                         capitalizeFirstLetter(i18n.t('delete'))
 705                       )}
 706                     </button>
 707                     <button
 708                       class="btn btn-secondary"
 709                       onClick={linkEvent(
 710                         this,
 711                         this.handleDeleteAccountShowConfirmToggle
 712                       )}
 713                     >
 714                       {i18n.t('cancel')}
 715                     </button>
 716                   </>
 717                 )}
 718               </div>
 719             </form>
 720           </div>
 721         </div>
 722       </div>
 723     );
 724   }
 725
 726   moderates() {
 727     return (
 728       <div>
 729         {this.state.moderates.length > 0 && (
 730           <div class="card border-secondary mb-3">
 731             <div class="card-body">
 732               <h5>{i18n.t('moderates')}</h5>
 733               <ul class="list-unstyled mb-0">
 734                 {this.state.moderates.map(community => (
 735                   <li>
 736                     <Link to={`/c/${community.community_name}`}>
 737                       {community.community_name}
 738                     </Link>
 739                   </li>
 740                 ))}
 741               </ul>
 742             </div>
 743           </div>
 744         )}
 745       </div>
 746     );
 747   }
 748
 749   follows() {
 750     return (
 751       <div>
 752         {this.state.follows.length > 0 && (
 753           <div class="card border-secondary mb-3">
 754             <div class="card-body">
 755               <h5>{i18n.t('subscribed')}</h5>
 756               <ul class="list-unstyled mb-0">
 757                 {this.state.follows.map(community => (
 758                   <li>
 759                     <Link to={`/c/${community.community_name}`}>
 760                       {community.community_name}
 761                     </Link>
 762                   </li>
 763                 ))}
 764               </ul>
 765             </div>
 766           </div>
 767         )}
 768       </div>
 769     );
 770   }
 771
 772   paginator() {
 773     return (
 774       <div class="my-2">
 775         {this.state.page > 1 && (
 776           <button
 777             class="btn btn-sm btn-secondary mr-1"
 778             onClick={linkEvent(this, this.prevPage)}
 779           >
 780             {i18n.t('prev')}
 781           </button>
 782         )}
 783         <button
 784           class="btn btn-sm btn-secondary"
 785           onClick={linkEvent(this, this.nextPage)}
 786         >
 787           {i18n.t('next')}
 788         </button>
 789       </div>
 790     );
 791   }
 792
 793   updateUrl() {
 794     let viewStr = View[this.state.view].toLowerCase();
 795     let sortStr = SortType[this.state.sort].toLowerCase();
 796     this.props.history.push(
 797       `/u/${this.state.user.name}/view/${viewStr}/sort/${sortStr}/page/${this.state.page}`
 798     );
 799   }
 800
 801   nextPage(i: User) {
 802     i.state.page++;
 803     i.setState(i.state);
 804     i.updateUrl();
 805     i.refetch();
 806   }
 807
 808   prevPage(i: User) {
 809     i.state.page--;
 810     i.setState(i.state);
 811     i.updateUrl();
 812     i.refetch();
 813   }
 814
 815   refetch() {
 816     let form: GetUserDetailsForm = {
 817       user_id: this.state.user_id,
 818       username: this.state.username,
 819       sort: SortType[this.state.sort],
 820       saved_only: this.state.view == View.Saved,
 821       page: this.state.page,
 822       limit: fetchLimit,
 823     };
 824     WebSocketService.Instance.getUserDetails(form);
 825   }
 826
 827   handleSortChange(val: SortType) {
 828     this.state.sort = val;
 829     this.state.page = 1;
 830     this.setState(this.state);
 831     this.updateUrl();
 832     this.refetch();
 833   }
 834
 835   handleViewChange(i: User, event: any) {
 836     i.state.view = Number(event.target.value);
 837     i.state.page = 1;
 838     i.setState(i.state);
 839     i.updateUrl();
 840     i.refetch();
 841   }
 842
 843   handleUserSettingsShowNsfwChange(i: User, event: any) {
 844     i.state.userSettingsForm.show_nsfw = event.target.checked;
 845     i.setState(i.state);
 846   }
 847
 848   handleUserSettingsShowAvatarsChange(i: User, event: any) {
 849     i.state.userSettingsForm.show_avatars = event.target.checked;
 850     UserService.Instance.user.show_avatars = event.target.checked; // Just for instant updates
 851     i.setState(i.state);
 852   }
 853
 854   handleUserSettingsSendNotificationsToEmailChange(i: User, event: any) {
 855     i.state.userSettingsForm.send_notifications_to_email = event.target.checked;
 856     i.setState(i.state);
 857   }
 858
 859   handleUserSettingsThemeChange(i: User, event: any) {
 860     i.state.userSettingsForm.theme = event.target.value;
 861     setTheme(event.target.value);
 862     i.setState(i.state);
 863   }
 864
 865   handleUserSettingsLangChange(i: User, event: any) {
 866     i.state.userSettingsForm.lang = event.target.value;
 867     i18n.changeLanguage(i.state.userSettingsForm.lang);
 868     i.setState(i.state);
 869   }
 870
 871   handleUserSettingsSortTypeChange(val: SortType) {
 872     this.state.userSettingsForm.default_sort_type = val;
 873     this.setState(this.state);
 874   }
 875
 876   handleUserSettingsListingTypeChange(val: ListingType) {
 877     this.state.userSettingsForm.default_listing_type = val;
 878     this.setState(this.state);
 879   }
 880
 881   handleUserSettingsEmailChange(i: User, event: any) {
 882     i.state.userSettingsForm.email = event.target.value;
 883     if (i.state.userSettingsForm.email == '' && !i.state.user.email) {
 884       i.state.userSettingsForm.email = undefined;
 885     }
 886     i.setState(i.state);
 887   }
 888
 889   handleUserSettingsMatrixUserIdChange(i: User, event: any) {
 890     i.state.userSettingsForm.matrix_user_id = event.target.value;
 891     if (
 892       i.state.userSettingsForm.matrix_user_id == '' &&
 893       !i.state.user.matrix_user_id
 894     ) {
 895       i.state.userSettingsForm.matrix_user_id = undefined;
 896     }
 897     i.setState(i.state);
 898   }
 899
 900   handleUserSettingsNewPasswordChange(i: User, event: any) {
 901     i.state.userSettingsForm.new_password = event.target.value;
 902     if (i.state.userSettingsForm.new_password == '') {
 903       i.state.userSettingsForm.new_password = undefined;
 904     }
 905     i.setState(i.state);
 906   }
 907
 908   handleUserSettingsNewPasswordVerifyChange(i: User, event: any) {
 909     i.state.userSettingsForm.new_password_verify = event.target.value;
 910     if (i.state.userSettingsForm.new_password_verify == '') {
 911       i.state.userSettingsForm.new_password_verify = undefined;
 912     }
 913     i.setState(i.state);
 914   }
 915
 916   handleUserSettingsOldPasswordChange(i: User, event: any) {
 917     i.state.userSettingsForm.old_password = event.target.value;
 918     if (i.state.userSettingsForm.old_password == '') {
 919       i.state.userSettingsForm.old_password = undefined;
 920     }
 921     i.setState(i.state);
 922   }
 923
 924   handleImageUpload(i: User, event: any) {
 925     event.preventDefault();
 926     let file = event.target.files[0];
 927     const imageUploadUrl = `/pictshare/api/upload.php`;
 928     const formData = new FormData();
 929     formData.append('file', file);
 930
 931     i.state.avatarLoading = true;
 932     i.setState(i.state);
 933
 934     fetch(imageUploadUrl, {
 935       method: 'POST',
 936       body: formData,
 937     })
 938       .then(res => res.json())
 939       .then(res => {
 940         let url = `${window.location.origin}/pictshare/${res.url}`;
 941         if (res.filetype == 'mp4') {
 942           url += '/raw';
 943         }
 944         i.state.userSettingsForm.avatar = url;
 945         console.log(url);
 946         i.state.avatarLoading = false;
 947         i.setState(i.state);
 948       })
 949       .catch(error => {
 950         i.state.avatarLoading = false;
 951         i.setState(i.state);
 952         toast(error, 'danger');
 953       });
 954   }
 955
 956   handleUserSettingsSubmit(i: User, event: any) {
 957     event.preventDefault();
 958     i.state.userSettingsLoading = true;
 959     i.setState(i.state);
 960
 961     WebSocketService.Instance.saveUserSettings(i.state.userSettingsForm);
 962   }
 963
 964   handleDeleteAccountShowConfirmToggle(i: User, event: any) {
 965     event.preventDefault();
 966     i.state.deleteAccountShowConfirm = !i.state.deleteAccountShowConfirm;
 967     i.setState(i.state);
 968   }
 969
 970   handleDeleteAccountPasswordChange(i: User, event: any) {
 971     i.state.deleteAccountForm.password = event.target.value;
 972     i.setState(i.state);
 973   }
 974
 975   handleLogoutClick(i: User) {
 976     UserService.Instance.logout();
 977     i.context.router.history.push('/');
 978   }
 979
 980   handleDeleteAccount(i: User, event: any) {
 981     event.preventDefault();
 982     i.state.deleteAccountLoading = true;
 983     i.setState(i.state);
 984
 985     WebSocketService.Instance.deleteAccount(i.state.deleteAccountForm);
 986   }
 987
 988   parseMessage(msg: WebSocketJsonResponse) {
 989     console.log(msg);
 990     let res = wsJsonToRes(msg);
 991     if (msg.error) {
 992       toast(i18n.t(msg.error), 'danger');
 993       this.state.deleteAccountLoading = false;
 994       this.state.avatarLoading = false;
 995       this.state.userSettingsLoading = false;
 996       if (msg.error == 'couldnt_find_that_username_or_email') {
 997         this.context.router.history.push('/');
 998       }
 999       this.setState(this.state);
1000       return;
1001     } else if (msg.reconnect) {
1002       this.refetch();
1003     } else if (res.op == UserOperation.GetUserDetails) {
1004       let data = res.data as UserDetailsResponse;
1005       this.state.user = data.user;
1006       this.state.comments = data.comments;
1007       this.state.follows = data.follows;
1008       this.state.moderates = data.moderates;
1009       this.state.posts = data.posts;
1010       this.state.admins = data.admins;
1011       this.state.loading = false;
1012       if (this.isCurrentUser) {
1013         this.state.userSettingsForm.show_nsfw =
1014           UserService.Instance.user.show_nsfw;
1015         this.state.userSettingsForm.theme = UserService.Instance.user.theme
1016           ? UserService.Instance.user.theme
1017           : 'darkly';
1018         this.state.userSettingsForm.default_sort_type =
1019           UserService.Instance.user.default_sort_type;
1020         this.state.userSettingsForm.default_listing_type =
1021           UserService.Instance.user.default_listing_type;
1022         this.state.userSettingsForm.lang = UserService.Instance.user.lang;
1023         this.state.userSettingsForm.avatar = UserService.Instance.user.avatar;
1024         this.state.userSettingsForm.email = this.state.user.email;
1025         this.state.userSettingsForm.send_notifications_to_email = this.state.user.send_notifications_to_email;
1026         this.state.userSettingsForm.show_avatars =
1027           UserService.Instance.user.show_avatars;
1028         this.state.userSettingsForm.matrix_user_id = this.state.user.matrix_user_id;
1029       }
1030       document.title = `/u/${this.state.user.name} - ${WebSocketService.Instance.site.name}`;
1031       window.scrollTo(0, 0);
1032       this.setState(this.state);
1033     } else if (res.op == UserOperation.EditComment) {
1034       let data = res.data as CommentResponse;
1035
1036       let found = this.state.comments.find(c => c.id == data.comment.id);
1037       if (found) {
1038         found.content = data.comment.content;
1039         found.updated = data.comment.updated;
1040         found.removed = data.comment.removed;
1041         found.deleted = data.comment.deleted;
1042         found.upvotes = data.comment.upvotes;
1043         found.downvotes = data.comment.downvotes;
1044         found.score = data.comment.score;
1045         this.setState(this.state);
1046       }
1047     } else if (res.op == UserOperation.CreateComment) {
1048       let data = res.data as CommentResponse;
1049       if (
1050         UserService.Instance.user &&
1051         data.comment.creator_id == UserService.Instance.user.id
1052       ) {
1053         toast(i18n.t('reply_sent'));
1054       }
1055     } else if (res.op == UserOperation.SaveComment) {
1056       let data = res.data as CommentResponse;
1057       let found = this.state.comments.find(c => c.id == data.comment.id);
1058       found.saved = data.comment.saved;
1059       this.setState(this.state);
1060     } else if (res.op == UserOperation.CreateCommentLike) {
1061       let data = res.data as CommentResponse;
1062       let found: Comment = this.state.comments.find(
1063         c => c.id === data.comment.id
1064       );
1065       found.score = data.comment.score;
1066       found.upvotes = data.comment.upvotes;
1067       found.downvotes = data.comment.downvotes;
1068       if (data.comment.my_vote !== null) found.my_vote = data.comment.my_vote;
1069       this.setState(this.state);
1070     } else if (res.op == UserOperation.CreatePostLike) {
1071       let data = res.data as PostResponse;
1072       let found = this.state.posts.find(c => c.id == data.post.id);
1073       found.my_vote = data.post.my_vote;
1074       found.score = data.post.score;
1075       found.upvotes = data.post.upvotes;
1076       found.downvotes = data.post.downvotes;
1077       this.setState(this.state);
1078     } else if (res.op == UserOperation.BanUser) {
1079       let data = res.data as BanUserResponse;
1080       this.state.comments
1081         .filter(c => c.creator_id == data.user.id)
1082         .forEach(c => (c.banned = data.banned));
1083       this.state.posts
1084         .filter(c => c.creator_id == data.user.id)
1085         .forEach(c => (c.banned = data.banned));
1086       this.setState(this.state);
1087     } else if (res.op == UserOperation.AddAdmin) {
1088       let data = res.data as AddAdminResponse;
1089       this.state.admins = data.admins;
1090       this.setState(this.state);
1091     } else if (res.op == UserOperation.SaveUserSettings) {
1092       let data = res.data as LoginResponse;
1093       this.state = this.emptyState;
1094       this.state.userSettingsLoading = false;
1095       this.setState(this.state);
1096       UserService.Instance.login(data);
1097     } else if (res.op == UserOperation.DeleteAccount) {
1098       this.state.deleteAccountLoading = false;
1099       this.state.deleteAccountShowConfirm = false;
1100       this.setState(this.state);
1101       this.context.router.history.push('/');
1102     }
1103   }
1104 }