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   CreatePostLikeResponse,
  22 } from '../interfaces';
  23 import { WebSocketService, UserService } from '../services';
  24 import {
  25   msgOp,
  26   fetchLimit,
  27   routeSortTypeToEnum,
  28   capitalizeFirstLetter,
  29   themes,
  30   setTheme,
  31   languages,
  32   showAvatars,
  33   toast,
  34 } from '../utils';
  35 import { PostListing } from './post-listing';
  36 import { SortSelect } from './sort-select';
  37 import { ListingTypeSelect } from './listing-type-select';
  38 import { CommentNodes } from './comment-nodes';
  39 import { MomentTime } from './moment-time';
  40 import { i18n } from '../i18next';
  41 import { T } from 'inferno-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>
 248             <T i18nKey="view">#</T>
 249           </option>
 250           <option value={View.Overview}>
 251             <T i18nKey="overview">#</T>
 252           </option>
 253           <option value={View.Comments}>
 254             <T i18nKey="comments">#</T>
 255           </option>
 256           <option value={View.Posts}>
 257             <T i18nKey="posts">#</T>
 258           </option>
 259           <option value={View.Saved}>
 260             <T i18nKey="saved">#</T>
 261           </option>
 262         </select>
 263         <span class="ml-2">
 264           <SortSelect
 265             sort={this.state.sort}
 266             onChange={this.handleSortChange}
 267             hideHot
 268           />
 269         </span>
 270         <a
 271           href={`/feeds/u/${this.state.username}.xml?sort=${
 272             SortType[this.state.sort]
 273           }`}
 274           target="_blank"
 275         >
 276           <svg class="icon mx-2 text-muted small">
 277             <use xlinkHref="#icon-rss">#</use>
 278           </svg>
 279         </a>
 280       </div>
 281     );
 282   }
 283
 284   overview() {
 285     let combined: Array<{ type_: string; data: Comment | Post }> = [];
 286     let comments = this.state.comments.map(e => {
 287       return { type_: 'comments', data: e };
 288     });
 289     let posts = this.state.posts.map(e => {
 290       return { type_: 'posts', data: e };
 291     });
 292
 293     combined.push(...comments);
 294     combined.push(...posts);
 295
 296     // Sort it
 297     if (this.state.sort == SortType.New) {
 298       combined.sort((a, b) => b.data.published.localeCompare(a.data.published));
 299     } else {
 300       combined.sort((a, b) => b.data.score - a.data.score);
 301     }
 302
 303     return (
 304       <div>
 305         {combined.map(i => (
 306           <div>
 307             {i.type_ == 'posts' ? (
 308               <PostListing
 309                 post={i.data as Post}
 310                 admins={this.state.admins}
 311                 showCommunity
 312               />
 313             ) : (
 314               <CommentNodes
 315                 nodes={[{ comment: i.data as Comment }]}
 316                 admins={this.state.admins}
 317                 noIndent
 318               />
 319             )}
 320           </div>
 321         ))}
 322       </div>
 323     );
 324   }
 325
 326   comments() {
 327     return (
 328       <div>
 329         {this.state.comments.map(comment => (
 330           <CommentNodes
 331             nodes={[{ comment: comment }]}
 332             admins={this.state.admins}
 333             noIndent
 334           />
 335         ))}
 336       </div>
 337     );
 338   }
 339
 340   posts() {
 341     return (
 342       <div>
 343         {this.state.posts.map(post => (
 344           <PostListing post={post} admins={this.state.admins} showCommunity />
 345         ))}
 346       </div>
 347     );
 348   }
 349
 350   userInfo() {
 351     let user = this.state.user;
 352     return (
 353       <div>
 354         <div class="card border-secondary mb-3">
 355           <div class="card-body">
 356             <h5>
 357               <ul class="list-inline mb-0">
 358                 <li className="list-inline-item">{user.name}</li>
 359                 {user.banned && (
 360                   <li className="list-inline-item badge badge-danger">
 361                     <T i18nKey="banned">#</T>
 362                   </li>
 363                 )}
 364               </ul>
 365             </h5>
 366             <div>
 367               {i18n.t('joined')} <MomentTime data={user} />
 368             </div>
 369             <div class="table-responsive">
 370               <table class="table table-bordered table-sm mt-2 mb-0">
 371                 <tr>
 372                   <td>
 373                     <T
 374                       i18nKey="number_of_points"
 375                       interpolation={{ count: user.post_score }}
 376                     >
 377                       #
 378                     </T>
 379                   </td>
 380                   <td>
 381                     <T
 382                       i18nKey="number_of_posts"
 383                       interpolation={{ count: user.number_of_posts }}
 384                     >
 385                       #
 386                     </T>
 387                   </td>
 388                 </tr>
 389                 <tr>
 390                   <td>
 391                     <T
 392                       i18nKey="number_of_points"
 393                       interpolation={{ count: user.comment_score }}
 394                     >
 395                       #
 396                     </T>
 397                   </td>
 398                   <td>
 399                     <T
 400                       i18nKey="number_of_comments"
 401                       interpolation={{ count: user.number_of_comments }}
 402                     >
 403                       #
 404                     </T>
 405                   </td>
 406                 </tr>
 407               </table>
 408             </div>
 409             {this.isCurrentUser ? (
 410               <button
 411                 class="btn btn-block btn-secondary mt-3"
 412                 onClick={linkEvent(this, this.handleLogoutClick)}
 413               >
 414                 <T i18nKey="logout">#</T>
 415               </button>
 416             ) : (
 417               <>
 418                 <a
 419                   className={`btn btn-block btn-secondary mt-3 ${!this.state
 420                     .user.matrix_user_id && 'disabled'}`}
 421                   target="_blank"
 422                   href={`https://matrix.to/#/${this.state.user.matrix_user_id}`}
 423                 >
 424                   {i18n.t('send_secure_message')}
 425                 </a>
 426                 <Link
 427                   class="btn btn-block btn-secondary mt-3"
 428                   to={`/create_private_message?recipient_id=${this.state.user.id}`}
 429                 >
 430                   {i18n.t('send_message')}
 431                 </Link>
 432               </>
 433             )}
 434           </div>
 435         </div>
 436       </div>
 437     );
 438   }
 439
 440   userSettings() {
 441     return (
 442       <div>
 443         <div class="card border-secondary mb-3">
 444           <div class="card-body">
 445             <h5>
 446               <T i18nKey="settings">#</T>
 447             </h5>
 448             <form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}>
 449               <div class="form-group">
 450                 <label>
 451                   <T i18nKey="avatar">#</T>
 452                 </label>
 453                 <form class="d-inline">
 454                   <label
 455                     htmlFor="file-upload"
 456                     class="pointer ml-4 text-muted small font-weight-bold"
 457                   >
 458                     {!this.state.userSettingsForm.avatar ? (
 459                       <span class="btn btn-sm btn-secondary">
 460                         <T i18nKey="upload_avatar">#</T>
 461                       </span>
 462                     ) : (
 463                       <img
 464                         height="80"
 465                         width="80"
 466                         src={this.state.userSettingsForm.avatar}
 467                         class="rounded-circle"
 468                       />
 469                     )}
 470                   </label>
 471                   <input
 472                     id="file-upload"
 473                     type="file"
 474                     accept="image/*,video/*"
 475                     name="file"
 476                     class="d-none"
 477                     disabled={!UserService.Instance.user}
 478                     onChange={linkEvent(this, this.handleImageUpload)}
 479                   />
 480                 </form>
 481               </div>
 482               <div class="form-group">
 483                 <label>
 484                   <T i18nKey="language">#</T>
 485                 </label>
 486                 <select
 487                   value={this.state.userSettingsForm.lang}
 488                   onChange={linkEvent(this, this.handleUserSettingsLangChange)}
 489                   class="ml-2 custom-select custom-select-sm w-auto"
 490                 >
 491                   <option disabled>
 492                     <T i18nKey="language">#</T>
 493                   </option>
 494                   <option value="browser">
 495                     <T i18nKey="browser_default">#</T>
 496                   </option>
 497                   <option disabled>──</option>
 498                   {languages.map(lang => (
 499                     <option value={lang.code}>{lang.name}</option>
 500                   ))}
 501                 </select>
 502               </div>
 503               <div class="form-group">
 504                 <label>
 505                   <T i18nKey="theme">#</T>
 506                 </label>
 507                 <select
 508                   value={this.state.userSettingsForm.theme}
 509                   onChange={linkEvent(this, this.handleUserSettingsThemeChange)}
 510                   class="ml-2 custom-select custom-select-sm w-auto"
 511                 >
 512                   <option disabled>
 513                     <T i18nKey="theme">#</T>
 514                   </option>
 515                   {themes.map(theme => (
 516                     <option value={theme}>{theme}</option>
 517                   ))}
 518                 </select>
 519               </div>
 520               <form className="form-group">
 521                 <label>
 522                   <T i18nKey="sort_type" class="mr-2">
 523                     #
 524                   </T>
 525                 </label>
 526                 <ListingTypeSelect
 527                   type_={this.state.userSettingsForm.default_listing_type}
 528                   onChange={this.handleUserSettingsListingTypeChange}
 529                 />
 530               </form>
 531               <form className="form-group">
 532                 <label>
 533                   <T i18nKey="type" class="mr-2">
 534                     #
 535                   </T>
 536                 </label>
 537                 <SortSelect
 538                   sort={this.state.userSettingsForm.default_sort_type}
 539                   onChange={this.handleUserSettingsSortTypeChange}
 540                 />
 541               </form>
 542               <div class="form-group row">
 543                 <label class="col-lg-3 col-form-label">
 544                   <T i18nKey="email">#</T>
 545                 </label>
 546                 <div class="col-lg-9">
 547                   <input
 548                     type="email"
 549                     class="form-control"
 550                     placeholder={i18n.t('optional')}
 551                     value={this.state.userSettingsForm.email}
 552                     onInput={linkEvent(
 553                       this,
 554                       this.handleUserSettingsEmailChange
 555                     )}
 556                     minLength={3}
 557                   />
 558                 </div>
 559               </div>
 560               <div class="form-group row">
 561                 <label class="col-lg-5 col-form-label">
 562                   <a href="https://about.riot.im/" target="_blank">
 563                     {i18n.t('matrix_user_id')}
 564                   </a>
 565                 </label>
 566                 <div class="col-lg-7">
 567                   <input
 568                     type="text"
 569                     class="form-control"
 570                     placeholder="@user:example.com"
 571                     value={this.state.userSettingsForm.matrix_user_id}
 572                     onInput={linkEvent(
 573                       this,
 574                       this.handleUserSettingsMatrixUserIdChange
 575                     )}
 576                     minLength={3}
 577                   />
 578                 </div>
 579               </div>
 580               <div class="form-group row">
 581                 <label class="col-lg-5 col-form-label">
 582                   <T i18nKey="new_password">#</T>
 583                 </label>
 584                 <div class="col-lg-7">
 585                   <input
 586                     type="password"
 587                     class="form-control"
 588                     value={this.state.userSettingsForm.new_password}
 589                     onInput={linkEvent(
 590                       this,
 591                       this.handleUserSettingsNewPasswordChange
 592                     )}
 593                   />
 594                 </div>
 595               </div>
 596               <div class="form-group row">
 597                 <label class="col-lg-5 col-form-label">
 598                   <T i18nKey="verify_password">#</T>
 599                 </label>
 600                 <div class="col-lg-7">
 601                   <input
 602                     type="password"
 603                     class="form-control"
 604                     value={this.state.userSettingsForm.new_password_verify}
 605                     onInput={linkEvent(
 606                       this,
 607                       this.handleUserSettingsNewPasswordVerifyChange
 608                     )}
 609                   />
 610                 </div>
 611               </div>
 612               <div class="form-group row">
 613                 <label class="col-lg-5 col-form-label">
 614                   <T i18nKey="old_password">#</T>
 615                 </label>
 616                 <div class="col-lg-7">
 617                   <input
 618                     type="password"
 619                     class="form-control"
 620                     value={this.state.userSettingsForm.old_password}
 621                     onInput={linkEvent(
 622                       this,
 623                       this.handleUserSettingsOldPasswordChange
 624                     )}
 625                   />
 626                 </div>
 627               </div>
 628               {WebSocketService.Instance.site.enable_nsfw && (
 629                 <div class="form-group">
 630                   <div class="form-check">
 631                     <input
 632                       class="form-check-input"
 633                       type="checkbox"
 634                       checked={this.state.userSettingsForm.show_nsfw}
 635                       onChange={linkEvent(
 636                         this,
 637                         this.handleUserSettingsShowNsfwChange
 638                       )}
 639                     />
 640                     <label class="form-check-label">
 641                       <T i18nKey="show_nsfw">#</T>
 642                     </label>
 643                   </div>
 644                 </div>
 645               )}
 646               <div class="form-group">
 647                 <div class="form-check">
 648                   <input
 649                     class="form-check-input"
 650                     type="checkbox"
 651                     checked={this.state.userSettingsForm.show_avatars}
 652                     onChange={linkEvent(
 653                       this,
 654                       this.handleUserSettingsShowAvatarsChange
 655                     )}
 656                   />
 657                   <label class="form-check-label">
 658                     <T i18nKey="show_avatars">#</T>
 659                   </label>
 660                 </div>
 661               </div>
 662               <div class="form-group">
 663                 <div class="form-check">
 664                   <input
 665                     class="form-check-input"
 666                     type="checkbox"
 667                     disabled={!this.state.user.email}
 668                     checked={
 669                       this.state.userSettingsForm.send_notifications_to_email
 670                     }
 671                     onChange={linkEvent(
 672                       this,
 673                       this.handleUserSettingsSendNotificationsToEmailChange
 674                     )}
 675                   />
 676                   <label class="form-check-label">
 677                     <T i18nKey="send_notifications_to_email">#</T>
 678                   </label>
 679                 </div>
 680               </div>
 681               <div class="form-group">
 682                 <button type="submit" class="btn btn-block btn-secondary mr-4">
 683                   {this.state.userSettingsLoading ? (
 684                     <svg class="icon icon-spinner spin">
 685                       <use xlinkHref="#icon-spinner"></use>
 686                     </svg>
 687                   ) : (
 688                     capitalizeFirstLetter(i18n.t('save'))
 689                   )}
 690                 </button>
 691               </div>
 692               <hr />
 693               <div class="form-group mb-0">
 694                 <button
 695                   class="btn btn-block btn-danger"
 696                   onClick={linkEvent(
 697                     this,
 698                     this.handleDeleteAccountShowConfirmToggle
 699                   )}
 700                 >
 701                   <T i18nKey="delete_account">#</T>
 702                 </button>
 703                 {this.state.deleteAccountShowConfirm && (
 704                   <>
 705                     <div class="my-2 alert alert-danger" role="alert">
 706                       <T i18nKey="delete_account_confirm">#</T>
 707                     </div>
 708                     <input
 709                       type="password"
 710                       value={this.state.deleteAccountForm.password}
 711                       onInput={linkEvent(
 712                         this,
 713                         this.handleDeleteAccountPasswordChange
 714                       )}
 715                       class="form-control my-2"
 716                     />
 717                     <button
 718                       class="btn btn-danger mr-4"
 719                       disabled={!this.state.deleteAccountForm.password}
 720                       onClick={linkEvent(this, this.handleDeleteAccount)}
 721                     >
 722                       {this.state.deleteAccountLoading ? (
 723                         <svg class="icon icon-spinner spin">
 724                           <use xlinkHref="#icon-spinner"></use>
 725                         </svg>
 726                       ) : (
 727                         capitalizeFirstLetter(i18n.t('delete'))
 728                       )}
 729                     </button>
 730                     <button
 731                       class="btn btn-secondary"
 732                       onClick={linkEvent(
 733                         this,
 734                         this.handleDeleteAccountShowConfirmToggle
 735                       )}
 736                     >
 737                       <T i18nKey="cancel">#</T>
 738                     </button>
 739                   </>
 740                 )}
 741               </div>
 742             </form>
 743           </div>
 744         </div>
 745       </div>
 746     );
 747   }
 748
 749   moderates() {
 750     return (
 751       <div>
 752         {this.state.moderates.length > 0 && (
 753           <div class="card border-secondary mb-3">
 754             <div class="card-body">
 755               <h5>
 756                 <T i18nKey="moderates">#</T>
 757               </h5>
 758               <ul class="list-unstyled mb-0">
 759                 {this.state.moderates.map(community => (
 760                   <li>
 761                     <Link to={`/c/${community.community_name}`}>
 762                       {community.community_name}
 763                     </Link>
 764                   </li>
 765                 ))}
 766               </ul>
 767             </div>
 768           </div>
 769         )}
 770       </div>
 771     );
 772   }
 773
 774   follows() {
 775     return (
 776       <div>
 777         {this.state.follows.length > 0 && (
 778           <div class="card border-secondary mb-3">
 779             <div class="card-body">
 780               <h5>
 781                 <T i18nKey="subscribed">#</T>
 782               </h5>
 783               <ul class="list-unstyled mb-0">
 784                 {this.state.follows.map(community => (
 785                   <li>
 786                     <Link to={`/c/${community.community_name}`}>
 787                       {community.community_name}
 788                     </Link>
 789                   </li>
 790                 ))}
 791               </ul>
 792             </div>
 793           </div>
 794         )}
 795       </div>
 796     );
 797   }
 798
 799   paginator() {
 800     return (
 801       <div class="my-2">
 802         {this.state.page > 1 && (
 803           <button
 804             class="btn btn-sm btn-secondary mr-1"
 805             onClick={linkEvent(this, this.prevPage)}
 806           >
 807             <T i18nKey="prev">#</T>
 808           </button>
 809         )}
 810         <button
 811           class="btn btn-sm btn-secondary"
 812           onClick={linkEvent(this, this.nextPage)}
 813         >
 814           <T i18nKey="next">#</T>
 815         </button>
 816       </div>
 817     );
 818   }
 819
 820   updateUrl() {
 821     let viewStr = View[this.state.view].toLowerCase();
 822     let sortStr = SortType[this.state.sort].toLowerCase();
 823     this.props.history.push(
 824       `/u/${this.state.user.name}/view/${viewStr}/sort/${sortStr}/page/${this.state.page}`
 825     );
 826   }
 827
 828   nextPage(i: User) {
 829     i.state.page++;
 830     i.setState(i.state);
 831     i.updateUrl();
 832     i.refetch();
 833   }
 834
 835   prevPage(i: User) {
 836     i.state.page--;
 837     i.setState(i.state);
 838     i.updateUrl();
 839     i.refetch();
 840   }
 841
 842   refetch() {
 843     let form: GetUserDetailsForm = {
 844       user_id: this.state.user_id,
 845       username: this.state.username,
 846       sort: SortType[this.state.sort],
 847       saved_only: this.state.view == View.Saved,
 848       page: this.state.page,
 849       limit: fetchLimit,
 850     };
 851     WebSocketService.Instance.getUserDetails(form);
 852   }
 853
 854   handleSortChange(val: SortType) {
 855     this.state.sort = val;
 856     this.state.page = 1;
 857     this.setState(this.state);
 858     this.updateUrl();
 859     this.refetch();
 860   }
 861
 862   handleViewChange(i: User, event: any) {
 863     i.state.view = Number(event.target.value);
 864     i.state.page = 1;
 865     i.setState(i.state);
 866     i.updateUrl();
 867     i.refetch();
 868   }
 869
 870   handleUserSettingsShowNsfwChange(i: User, event: any) {
 871     i.state.userSettingsForm.show_nsfw = event.target.checked;
 872     i.setState(i.state);
 873   }
 874
 875   handleUserSettingsShowAvatarsChange(i: User, event: any) {
 876     i.state.userSettingsForm.show_avatars = event.target.checked;
 877     UserService.Instance.user.show_avatars = event.target.checked; // Just for instant updates
 878     i.setState(i.state);
 879   }
 880
 881   handleUserSettingsSendNotificationsToEmailChange(i: User, event: any) {
 882     i.state.userSettingsForm.send_notifications_to_email = event.target.checked;
 883     i.setState(i.state);
 884   }
 885
 886   handleUserSettingsThemeChange(i: User, event: any) {
 887     i.state.userSettingsForm.theme = event.target.value;
 888     setTheme(event.target.value);
 889     i.setState(i.state);
 890   }
 891
 892   handleUserSettingsLangChange(i: User, event: any) {
 893     i.state.userSettingsForm.lang = event.target.value;
 894     i18n.changeLanguage(i.state.userSettingsForm.lang);
 895     i.setState(i.state);
 896   }
 897
 898   handleUserSettingsSortTypeChange(val: SortType) {
 899     this.state.userSettingsForm.default_sort_type = val;
 900     this.setState(this.state);
 901   }
 902
 903   handleUserSettingsListingTypeChange(val: ListingType) {
 904     this.state.userSettingsForm.default_listing_type = val;
 905     this.setState(this.state);
 906   }
 907
 908   handleUserSettingsEmailChange(i: User, event: any) {
 909     i.state.userSettingsForm.email = event.target.value;
 910     if (i.state.userSettingsForm.email == '' && !i.state.user.email) {
 911       i.state.userSettingsForm.email = undefined;
 912     }
 913     i.setState(i.state);
 914   }
 915
 916   handleUserSettingsMatrixUserIdChange(i: User, event: any) {
 917     i.state.userSettingsForm.matrix_user_id = event.target.value;
 918     if (
 919       i.state.userSettingsForm.matrix_user_id == '' &&
 920       !i.state.user.matrix_user_id
 921     ) {
 922       i.state.userSettingsForm.matrix_user_id = undefined;
 923     }
 924     i.setState(i.state);
 925   }
 926
 927   handleUserSettingsNewPasswordChange(i: User, event: any) {
 928     i.state.userSettingsForm.new_password = event.target.value;
 929     if (i.state.userSettingsForm.new_password == '') {
 930       i.state.userSettingsForm.new_password = undefined;
 931     }
 932     i.setState(i.state);
 933   }
 934
 935   handleUserSettingsNewPasswordVerifyChange(i: User, event: any) {
 936     i.state.userSettingsForm.new_password_verify = event.target.value;
 937     if (i.state.userSettingsForm.new_password_verify == '') {
 938       i.state.userSettingsForm.new_password_verify = undefined;
 939     }
 940     i.setState(i.state);
 941   }
 942
 943   handleUserSettingsOldPasswordChange(i: User, event: any) {
 944     i.state.userSettingsForm.old_password = event.target.value;
 945     if (i.state.userSettingsForm.old_password == '') {
 946       i.state.userSettingsForm.old_password = undefined;
 947     }
 948     i.setState(i.state);
 949   }
 950
 951   handleImageUpload(i: User, event: any) {
 952     event.preventDefault();
 953     let file = event.target.files[0];
 954     const imageUploadUrl = `/pictshare/api/upload.php`;
 955     const formData = new FormData();
 956     formData.append('file', file);
 957
 958     i.state.avatarLoading = true;
 959     i.setState(i.state);
 960
 961     fetch(imageUploadUrl, {
 962       method: 'POST',
 963       body: formData,
 964     })
 965       .then(res => res.json())
 966       .then(res => {
 967         let url = `${window.location.origin}/pictshare/${res.url}`;
 968         if (res.filetype == 'mp4') {
 969           url += '/raw';
 970         }
 971         i.state.userSettingsForm.avatar = url;
 972         console.log(url);
 973         i.state.avatarLoading = false;
 974         i.setState(i.state);
 975       })
 976       .catch(error => {
 977         i.state.avatarLoading = false;
 978         i.setState(i.state);
 979         toast(error, 'danger');
 980       });
 981   }
 982
 983   handleUserSettingsSubmit(i: User, event: any) {
 984     event.preventDefault();
 985     i.state.userSettingsLoading = true;
 986     i.setState(i.state);
 987
 988     WebSocketService.Instance.saveUserSettings(i.state.userSettingsForm);
 989   }
 990
 991   handleDeleteAccountShowConfirmToggle(i: User, event: any) {
 992     event.preventDefault();
 993     i.state.deleteAccountShowConfirm = !i.state.deleteAccountShowConfirm;
 994     i.setState(i.state);
 995   }
 996
 997   handleDeleteAccountPasswordChange(i: User, event: any) {
 998     i.state.deleteAccountForm.password = event.target.value;
 999     i.setState(i.state);
1000   }
1001
1002   handleLogoutClick(i: User) {
1003     UserService.Instance.logout();
1004     i.context.router.history.push('/');
1005   }
1006
1007   handleDeleteAccount(i: User, event: any) {
1008     event.preventDefault();
1009     i.state.deleteAccountLoading = true;
1010     i.setState(i.state);
1011
1012     WebSocketService.Instance.deleteAccount(i.state.deleteAccountForm);
1013   }
1014
1015   parseMessage(msg: any) {
1016     console.log(msg);
1017     let op: UserOperation = msgOp(msg);
1018     if (msg.error) {
1019       toast(i18n.t(msg.error), 'danger');
1020       this.state.deleteAccountLoading = false;
1021       this.state.avatarLoading = false;
1022       this.state.userSettingsLoading = false;
1023       if (msg.error == 'couldnt_find_that_username_or_email') {
1024         this.context.router.history.push('/');
1025       }
1026       this.setState(this.state);
1027       return;
1028     } else if (op == UserOperation.GetUserDetails) {
1029       let res: UserDetailsResponse = msg;
1030       this.state.user = res.user;
1031       this.state.comments = res.comments;
1032       this.state.follows = res.follows;
1033       this.state.moderates = res.moderates;
1034       this.state.posts = res.posts;
1035       this.state.admins = res.admins;
1036       this.state.loading = false;
1037       if (this.isCurrentUser) {
1038         this.state.userSettingsForm.show_nsfw =
1039           UserService.Instance.user.show_nsfw;
1040         this.state.userSettingsForm.theme = UserService.Instance.user.theme
1041           ? UserService.Instance.user.theme
1042           : 'darkly';
1043         this.state.userSettingsForm.default_sort_type =
1044           UserService.Instance.user.default_sort_type;
1045         this.state.userSettingsForm.default_listing_type =
1046           UserService.Instance.user.default_listing_type;
1047         this.state.userSettingsForm.lang = UserService.Instance.user.lang;
1048         this.state.userSettingsForm.avatar = UserService.Instance.user.avatar;
1049         this.state.userSettingsForm.email = this.state.user.email;
1050         this.state.userSettingsForm.send_notifications_to_email = this.state.user.send_notifications_to_email;
1051         this.state.userSettingsForm.show_avatars =
1052           UserService.Instance.user.show_avatars;
1053         this.state.userSettingsForm.matrix_user_id = this.state.user.matrix_user_id;
1054       }
1055       document.title = `/u/${this.state.user.name} - ${WebSocketService.Instance.site.name}`;
1056       window.scrollTo(0, 0);
1057       this.setState(this.state);
1058     } else if (op == UserOperation.EditComment) {
1059       let res: CommentResponse = msg;
1060
1061       let found = this.state.comments.find(c => c.id == res.comment.id);
1062       found.content = res.comment.content;
1063       found.updated = res.comment.updated;
1064       found.removed = res.comment.removed;
1065       found.deleted = res.comment.deleted;
1066       found.upvotes = res.comment.upvotes;
1067       found.downvotes = res.comment.downvotes;
1068       found.score = res.comment.score;
1069
1070       this.setState(this.state);
1071     } else if (op == UserOperation.CreateComment) {
1072       // let res: CommentResponse = msg;
1073       toast(i18n.t('reply_sent'));
1074       // this.state.comments.unshift(res.comment); // TODO do this right
1075       // this.setState(this.state);
1076     } else if (op == UserOperation.SaveComment) {
1077       let res: CommentResponse = msg;
1078       let found = this.state.comments.find(c => c.id == res.comment.id);
1079       found.saved = res.comment.saved;
1080       this.setState(this.state);
1081     } else if (op == UserOperation.CreateCommentLike) {
1082       let res: CommentResponse = msg;
1083       let found: Comment = this.state.comments.find(
1084         c => c.id === res.comment.id
1085       );
1086       found.score = res.comment.score;
1087       found.upvotes = res.comment.upvotes;
1088       found.downvotes = res.comment.downvotes;
1089       if (res.comment.my_vote !== null) found.my_vote = res.comment.my_vote;
1090       this.setState(this.state);
1091     } else if (op == UserOperation.CreatePostLike) {
1092       let res: CreatePostLikeResponse = msg;
1093       let found = this.state.posts.find(c => c.id == res.post.id);
1094       found.my_vote = res.post.my_vote;
1095       found.score = res.post.score;
1096       found.upvotes = res.post.upvotes;
1097       found.downvotes = res.post.downvotes;
1098       this.setState(this.state);
1099     } else if (op == UserOperation.BanUser) {
1100       let res: BanUserResponse = msg;
1101       this.state.comments
1102         .filter(c => c.creator_id == res.user.id)
1103         .forEach(c => (c.banned = res.banned));
1104       this.state.posts
1105         .filter(c => c.creator_id == res.user.id)
1106         .forEach(c => (c.banned = res.banned));
1107       this.setState(this.state);
1108     } else if (op == UserOperation.AddAdmin) {
1109       let res: AddAdminResponse = msg;
1110       this.state.admins = res.admins;
1111       this.setState(this.state);
1112     } else if (op == UserOperation.SaveUserSettings) {
1113       this.state = this.emptyState;
1114       this.state.userSettingsLoading = false;
1115       this.setState(this.state);
1116       let res: LoginResponse = msg;
1117       UserService.Instance.login(res);
1118     } else if (op == UserOperation.DeleteAccount) {
1119       this.state.deleteAccountLoading = false;
1120       this.state.deleteAccountShowConfirm = false;
1121       this.setState(this.state);
1122       this.context.router.history.push('/');
1123     }
1124   }
1125 }