src/shared/components/person/profile.tsx

   1 import { Component, linkEvent } from "inferno";
   2 import { Link } from "inferno-router";
   3 import {
   4   AddAdminResponse,
   5   BanPersonResponse,
   6   BlockPerson,
   7   BlockPersonResponse,
   8   CommentResponse,
   9   GetPersonDetails,
  10   GetPersonDetailsResponse,
  11   GetSiteResponse,
  12   PostResponse,
  13   SortType,
  14   UserOperation,
  15 } from "lemmy-js-client";
  16 import moment from "moment";
  17 import { Subscription } from "rxjs";
  18 import { i18n } from "../../i18next";
  19 import { InitialFetchRequest, PersonDetailsView } from "../../interfaces";
  20 import { UserService, WebSocketService } from "../../services";
  21 import {
  22   authField,
  23   createCommentLikeRes,
  24   createPostLikeFindRes,
  25   editCommentRes,
  26   editPostFindRes,
  27   fetchLimit,
  28   getUsernameFromProps,
  29   mdToHtml,
  30   numToSI,
  31   previewLines,
  32   restoreScrollPosition,
  33   routeSortTypeToEnum,
  34   saveCommentRes,
  35   saveScrollPosition,
  36   setIsoData,
  37   setOptionalAuth,
  38   setupTippy,
  39   toast,
  40   updatePersonBlock,
  41   wsClient,
  42   wsJsonToRes,
  43   wsSubscribe,
  44   wsUserOp,
  45 } from "../../utils";
  46 import { BannerIconHeader } from "../common/banner-icon-header";
  47 import { HtmlTags } from "../common/html-tags";
  48 import { Icon, Spinner } from "../common/icon";
  49 import { MomentTime } from "../common/moment-time";
  50 import { SortSelect } from "../common/sort-select";
  51 import { CommunityLink } from "../community/community-link";
  52 import { PersonDetails } from "./person-details";
  53 import { PersonListing } from "./person-listing";
  54
  55 interface ProfileState {
  56   personRes: GetPersonDetailsResponse;
  57   userName: string;
  58   view: PersonDetailsView;
  59   sort: SortType;
  60   page: number;
  61   loading: boolean;
  62   personBlocked: boolean;
  63   siteRes: GetSiteResponse;
  64 }
  65
  66 interface ProfileProps {
  67   view: PersonDetailsView;
  68   sort: SortType;
  69   page: number;
  70   person_id: number | null;
  71   username: string;
  72 }
  73
  74 interface UrlParams {
  75   view?: string;
  76   sort?: SortType;
  77   page?: number;
  78 }
  79
  80 export class Profile extends Component<any, ProfileState> {
  81   private isoData = setIsoData(this.context);
  82   private subscription: Subscription;
  83   private emptyState: ProfileState = {
  84     personRes: undefined,
  85     userName: getUsernameFromProps(this.props),
  86     loading: true,
  87     view: Profile.getViewFromProps(this.props.match.view),
  88     sort: Profile.getSortTypeFromProps(this.props.match.sort),
  89     page: Profile.getPageFromProps(this.props.match.page),
  90     personBlocked: false,
  91     siteRes: this.isoData.site_res,
  92   };
  93
  94   constructor(props: any, context: any) {
  95     super(props, context);
  96
  97     this.state = this.emptyState;
  98     this.handleSortChange = this.handleSortChange.bind(this);
  99     this.handlePageChange = this.handlePageChange.bind(this);
 100
 101     this.parseMessage = this.parseMessage.bind(this);
 102     this.subscription = wsSubscribe(this.parseMessage);
 103
 104     // Only fetch the data if coming from another route
 105     if (this.isoData.path == this.context.router.route.match.url) {
 106       this.state.personRes = this.isoData.routeData[0];
 107       this.state.loading = false;
 108     } else {
 109       this.fetchUserData();
 110     }
 111
 112     this.setPersonBlock();
 113   }
 114
 115   fetchUserData() {
 116     let form: GetPersonDetails = {
 117       username: this.state.userName,
 118       sort: this.state.sort,
 119       saved_only: this.state.view === PersonDetailsView.Saved,
 120       page: this.state.page,
 121       limit: fetchLimit,
 122       auth: authField(false),
 123     };
 124     WebSocketService.Instance.send(wsClient.getPersonDetails(form));
 125   }
 126
 127   get isCurrentUser() {
 128     return (
 129       UserService.Instance.myUserInfo?.local_user_view.person.id ==
 130       this.state.personRes.person_view.person.id
 131     );
 132   }
 133
 134   setPersonBlock() {
 135     this.state.personBlocked = UserService.Instance.myUserInfo?.person_blocks
 136       .map(a => a.target.id)
 137       .includes(this.state.personRes?.person_view.person.id);
 138   }
 139
 140   static getViewFromProps(view: string): PersonDetailsView {
 141     return view ? PersonDetailsView[view] : PersonDetailsView.Overview;
 142   }
 143
 144   static getSortTypeFromProps(sort: string): SortType {
 145     return sort ? routeSortTypeToEnum(sort) : SortType.New;
 146   }
 147
 148   static getPageFromProps(page: number): number {
 149     return page ? Number(page) : 1;
 150   }
 151
 152   static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
 153     let pathSplit = req.path.split("/");
 154     let promises: Promise<any>[] = [];
 155
 156     // It can be /u/me, or /username/1
 157     let idOrName = pathSplit[2];
 158     let person_id: number;
 159     let username: string;
 160     if (isNaN(Number(idOrName))) {
 161       username = idOrName;
 162     } else {
 163       person_id = Number(idOrName);
 164     }
 165
 166     let view = this.getViewFromProps(pathSplit[4]);
 167     let sort = this.getSortTypeFromProps(pathSplit[6]);
 168     let page = this.getPageFromProps(Number(pathSplit[8]));
 169
 170     let form: GetPersonDetails = {
 171       sort,
 172       saved_only: view === PersonDetailsView.Saved,
 173       page,
 174       limit: fetchLimit,
 175     };
 176     setOptionalAuth(form, req.auth);
 177     this.setIdOrName(form, person_id, username);
 178     promises.push(req.client.getPersonDetails(form));
 179     return promises;
 180   }
 181
 182   static setIdOrName(obj: any, id: number, name_: string) {
 183     if (id) {
 184       obj.person_id = id;
 185     } else {
 186       obj.username = name_;
 187     }
 188   }
 189
 190   componentDidMount() {
 191     setupTippy();
 192   }
 193
 194   componentWillUnmount() {
 195     this.subscription.unsubscribe();
 196     saveScrollPosition(this.context);
 197   }
 198
 199   static getDerivedStateFromProps(props: any): ProfileProps {
 200     return {
 201       view: this.getViewFromProps(props.match.params.view),
 202       sort: this.getSortTypeFromProps(props.match.params.sort),
 203       page: this.getPageFromProps(props.match.params.page),
 204       person_id: Number(props.match.params.id) || null,
 205       username: props.match.params.username,
 206     };
 207   }
 208
 209   componentDidUpdate(lastProps: any) {
 210     // Necessary if you are on a post and you click another post (same route)
 211     if (
 212       lastProps.location.pathname.split("/")[2] !==
 213       lastProps.history.location.pathname.split("/")[2]
 214     ) {
 215       // Couldnt get a refresh working. This does for now.
 216       location.reload();
 217     }
 218   }
 219
 220   get documentTitle(): string {
 221     return `@${this.state.personRes.person_view.person.name} - ${this.state.siteRes.site_view.site.name}`;
 222   }
 223
 224   get bioTag(): string {
 225     return this.state.personRes.person_view.person.bio
 226       ? previewLines(this.state.personRes.person_view.person.bio)
 227       : undefined;
 228   }
 229
 230   render() {
 231     return (
 232       <div class="container">
 233         {this.state.loading ? (
 234           <h5>
 235             <Spinner large />
 236           </h5>
 237         ) : (
 238           <div class="row">
 239             <div class="col-12 col-md-8">
 240               <>
 241                 <HtmlTags
 242                   title={this.documentTitle}
 243                   path={this.context.router.route.match.url}
 244                   description={this.bioTag}
 245                   image={this.state.personRes.person_view.person.avatar}
 246                 />
 247                 {this.userInfo()}
 248                 <hr />
 249               </>
 250               {!this.state.loading && this.selects()}
 251               <PersonDetails
 252                 personRes={this.state.personRes}
 253                 admins={this.state.siteRes.admins}
 254                 sort={this.state.sort}
 255                 page={this.state.page}
 256                 limit={fetchLimit}
 257                 enableDownvotes={
 258                   this.state.siteRes.site_view.site.enable_downvotes
 259                 }
 260                 enableNsfw={this.state.siteRes.site_view.site.enable_nsfw}
 261                 view={this.state.view}
 262                 onPageChange={this.handlePageChange}
 263               />
 264             </div>
 265
 266             {!this.state.loading && (
 267               <div class="col-12 col-md-4">
 268                 {this.moderates()}
 269                 {this.isCurrentUser && this.follows()}
 270               </div>
 271             )}
 272           </div>
 273         )}
 274       </div>
 275     );
 276   }
 277
 278   viewRadios() {
 279     return (
 280       <div class="btn-group btn-group-toggle flex-wrap mb-2">
 281         <label
 282           className={`btn btn-outline-secondary pointer
 283             ${this.state.view == PersonDetailsView.Overview && "active"}
 284           `}
 285         >
 286           <input
 287             type="radio"
 288             value={PersonDetailsView.Overview}
 289             checked={this.state.view === PersonDetailsView.Overview}
 290             onChange={linkEvent(this, this.handleViewChange)}
 291           />
 292           {i18n.t("overview")}
 293         </label>
 294         <label
 295           className={`btn btn-outline-secondary pointer
 296             ${this.state.view == PersonDetailsView.Comments && "active"}
 297           `}
 298         >
 299           <input
 300             type="radio"
 301             value={PersonDetailsView.Comments}
 302             checked={this.state.view == PersonDetailsView.Comments}
 303             onChange={linkEvent(this, this.handleViewChange)}
 304           />
 305           {i18n.t("comments")}
 306         </label>
 307         <label
 308           className={`btn btn-outline-secondary pointer
 309             ${this.state.view == PersonDetailsView.Posts && "active"}
 310           `}
 311         >
 312           <input
 313             type="radio"
 314             value={PersonDetailsView.Posts}
 315             checked={this.state.view == PersonDetailsView.Posts}
 316             onChange={linkEvent(this, this.handleViewChange)}
 317           />
 318           {i18n.t("posts")}
 319         </label>
 320         <label
 321           className={`btn btn-outline-secondary pointer
 322             ${this.state.view == PersonDetailsView.Saved && "active"}
 323           `}
 324         >
 325           <input
 326             type="radio"
 327             value={PersonDetailsView.Saved}
 328             checked={this.state.view == PersonDetailsView.Saved}
 329             onChange={linkEvent(this, this.handleViewChange)}
 330           />
 331           {i18n.t("saved")}
 332         </label>
 333       </div>
 334     );
 335   }
 336
 337   selects() {
 338     return (
 339       <div className="mb-2">
 340         <span class="mr-3">{this.viewRadios()}</span>
 341         <SortSelect
 342           sort={this.state.sort}
 343           onChange={this.handleSortChange}
 344           hideHot
 345           hideMostComments
 346         />
 347         <a
 348           href={`/feeds/u/${this.state.userName}.xml?sort=${this.state.sort}`}
 349           rel="noopener"
 350           title="RSS"
 351         >
 352           <Icon icon="rss" classes="text-muted small mx-2" />
 353         </a>
 354       </div>
 355     );
 356   }
 357   handleBlockPerson(personId: number) {
 358     if (personId != 0) {
 359       let blockUserForm: BlockPerson = {
 360         person_id: personId,
 361         block: true,
 362         auth: authField(),
 363       };
 364       WebSocketService.Instance.send(wsClient.blockPerson(blockUserForm));
 365     }
 366   }
 367   handleUnblockPerson(recipientId: number) {
 368     let blockUserForm: BlockPerson = {
 369       person_id: recipientId,
 370       block: false,
 371       auth: authField(),
 372     };
 373     WebSocketService.Instance.send(wsClient.blockPerson(blockUserForm));
 374   }
 375
 376   userInfo() {
 377     let pv = this.state.personRes?.person_view;
 378
 379     return (
 380       <div>
 381         <BannerIconHeader banner={pv.person.banner} icon={pv.person.avatar} />
 382         <div class="mb-3">
 383           <div class="">
 384             <div class="mb-0 d-flex flex-wrap">
 385               <div>
 386                 {pv.person.display_name && (
 387                   <h5 class="mb-0">{pv.person.display_name}</h5>
 388                 )}
 389                 <ul class="list-inline mb-2">
 390                   <li className="list-inline-item">
 391                     <PersonListing
 392                       person={pv.person}
 393                       realLink
 394                       useApubName
 395                       muted
 396                       hideAvatar
 397                     />
 398                   </li>
 399                   {pv.person.banned && (
 400                     <li className="list-inline-item badge badge-danger">
 401                       {i18n.t("banned")}
 402                     </li>
 403                   )}
 404                   {pv.person.admin && (
 405                     <li className="list-inline-item badge badge-light">
 406                       {i18n.t("admin")}
 407                     </li>
 408                   )}
 409                   {pv.person.bot_account && (
 410                     <li className="list-inline-item badge badge-light">
 411                       {i18n.t("bot_account").toLowerCase()}
 412                     </li>
 413                   )}
 414                 </ul>
 415               </div>
 416               <div className="flex-grow-1 unselectable pointer mx-2"></div>
 417               {!this.isCurrentUser && UserService.Instance.myUserInfo && (
 418                 <>
 419                   <a
 420                     className={`d-flex align-self-start btn btn-secondary mr-2 ${
 421                       !pv.person.matrix_user_id && "invisible"
 422                     }`}
 423                     rel="noopener"
 424                     href={`https://matrix.to/#/${pv.person.matrix_user_id}`}
 425                   >
 426                     {i18n.t("send_secure_message")}
 427                   </a>
 428                   <Link
 429                     className={"d-flex align-self-start btn btn-secondary mr-2"}
 430                     to={`/create_private_message/recipient/${pv.person.id}`}
 431                   >
 432                     {i18n.t("send_message")}
 433                   </Link>
 434                   {this.state.personBlocked ? (
 435                     <button
 436                       className={"d-flex align-self-start btn btn-secondary"}
 437                       onClick={linkEvent(
 438                         pv.person.id,
 439                         this.handleUnblockPerson
 440                       )}
 441                     >
 442                       {i18n.t("unblock_user")}
 443                     </button>
 444                   ) : (
 445                     <button
 446                       className={"d-flex align-self-start btn btn-secondary"}
 447                       onClick={linkEvent(pv.person.id, this.handleBlockPerson)}
 448                     >
 449                       {i18n.t("block_user")}
 450                     </button>
 451                   )}
 452                 </>
 453               )}
 454             </div>
 455             {pv.person.bio && (
 456               <div className="d-flex align-items-center mb-2">
 457                 <div
 458                   className="md-div"
 459                   dangerouslySetInnerHTML={mdToHtml(pv.person.bio)}
 460                 />
 461               </div>
 462             )}
 463             <div>
 464               <ul class="list-inline mb-2">
 465                 <li className="list-inline-item badge badge-light">
 466                   {i18n.t("number_of_posts", {
 467                     count: pv.counts.post_count,
 468                     formattedCount: numToSI(pv.counts.post_count),
 469                   })}
 470                 </li>
 471                 <li className="list-inline-item badge badge-light">
 472                   {i18n.t("number_of_comments", {
 473                     count: pv.counts.comment_count,
 474                     formattedCount: numToSI(pv.counts.comment_count),
 475                   })}
 476                 </li>
 477               </ul>
 478             </div>
 479             <div class="text-muted">
 480               {i18n.t("joined")}{" "}
 481               <MomentTime data={pv.person} showAgo ignoreUpdated />
 482             </div>
 483             <div className="d-flex align-items-center text-muted mb-2">
 484               <Icon icon="cake" />
 485               <span className="ml-2">
 486                 {i18n.t("cake_day_title")}{" "}
 487                 {moment.utc(pv.person.published).local().format("MMM DD, YYYY")}
 488               </span>
 489             </div>
 490           </div>
 491         </div>
 492       </div>
 493     );
 494   }
 495
 496   moderates() {
 497     return (
 498       <div>
 499         {this.state.personRes.moderates.length > 0 && (
 500           <div class="card border-secondary mb-3">
 501             <div class="card-body">
 502               <h5>{i18n.t("moderates")}</h5>
 503               <ul class="list-unstyled mb-0">
 504                 {this.state.personRes.moderates.map(cmv => (
 505                   <li>
 506                     <CommunityLink community={cmv.community} />
 507                   </li>
 508                 ))}
 509               </ul>
 510             </div>
 511           </div>
 512         )}
 513       </div>
 514     );
 515   }
 516
 517   follows() {
 518     let follows = UserService.Instance.myUserInfo.follows;
 519     return (
 520       <div>
 521         {follows.length > 0 && (
 522           <div class="card border-secondary mb-3">
 523             <div class="card-body">
 524               <h5>{i18n.t("subscribed")}</h5>
 525               <ul class="list-unstyled mb-0">
 526                 {follows.map(cfv => (
 527                   <li>
 528                     <CommunityLink community={cfv.community} />
 529                   </li>
 530                 ))}
 531               </ul>
 532             </div>
 533           </div>
 534         )}
 535       </div>
 536     );
 537   }
 538
 539   updateUrl(paramUpdates: UrlParams) {
 540     const page = paramUpdates.page || this.state.page;
 541     const viewStr = paramUpdates.view || PersonDetailsView[this.state.view];
 542     const sortStr = paramUpdates.sort || this.state.sort;
 543
 544     let typeView = `/u/${this.state.userName}`;
 545
 546     this.props.history.push(
 547       `${typeView}/view/${viewStr}/sort/${sortStr}/page/${page}`
 548     );
 549     this.state.loading = true;
 550     this.setState(this.state);
 551     this.fetchUserData();
 552   }
 553
 554   handlePageChange(page: number) {
 555     this.updateUrl({ page });
 556   }
 557
 558   handleSortChange(val: SortType) {
 559     this.updateUrl({ sort: val, page: 1 });
 560   }
 561
 562   handleViewChange(i: Profile, event: any) {
 563     i.updateUrl({
 564       view: PersonDetailsView[Number(event.target.value)],
 565       page: 1,
 566     });
 567   }
 568
 569   parseMessage(msg: any) {
 570     let op = wsUserOp(msg);
 571     console.log(msg);
 572     if (msg.error) {
 573       toast(i18n.t(msg.error), "danger");
 574       if (msg.error == "couldnt_find_that_username_or_email") {
 575         this.context.router.history.push("/");
 576       }
 577       return;
 578     } else if (msg.reconnect) {
 579       this.fetchUserData();
 580     } else if (op == UserOperation.GetPersonDetails) {
 581       // Since the PersonDetails contains posts/comments as well as some general user info we listen here as well
 582       // and set the parent state if it is not set or differs
 583       // TODO this might need to get abstracted
 584       let data = wsJsonToRes<GetPersonDetailsResponse>(msg).data;
 585       this.state.personRes = data;
 586       console.log(data);
 587       this.state.loading = false;
 588       this.setPersonBlock();
 589       this.setState(this.state);
 590       restoreScrollPosition(this.context);
 591     } else if (op == UserOperation.AddAdmin) {
 592       let data = wsJsonToRes<AddAdminResponse>(msg).data;
 593       this.state.siteRes.admins = data.admins;
 594       this.setState(this.state);
 595     } else if (op == UserOperation.CreateCommentLike) {
 596       let data = wsJsonToRes<CommentResponse>(msg).data;
 597       createCommentLikeRes(data.comment_view, this.state.personRes.comments);
 598       this.setState(this.state);
 599     } else if (
 600       op == UserOperation.EditComment ||
 601       op == UserOperation.DeleteComment ||
 602       op == UserOperation.RemoveComment
 603     ) {
 604       let data = wsJsonToRes<CommentResponse>(msg).data;
 605       editCommentRes(data.comment_view, this.state.personRes.comments);
 606       this.setState(this.state);
 607     } else if (op == UserOperation.CreateComment) {
 608       let data = wsJsonToRes<CommentResponse>(msg).data;
 609       if (
 610         UserService.Instance.myUserInfo &&
 611         data.comment_view.creator.id ==
 612           UserService.Instance.myUserInfo?.local_user_view.person.id
 613       ) {
 614         toast(i18n.t("reply_sent"));
 615       }
 616     } else if (op == UserOperation.SaveComment) {
 617       let data = wsJsonToRes<CommentResponse>(msg).data;
 618       saveCommentRes(data.comment_view, this.state.personRes.comments);
 619       this.setState(this.state);
 620     } else if (
 621       op == UserOperation.EditPost ||
 622       op == UserOperation.DeletePost ||
 623       op == UserOperation.RemovePost ||
 624       op == UserOperation.LockPost ||
 625       op == UserOperation.StickyPost ||
 626       op == UserOperation.SavePost
 627     ) {
 628       let data = wsJsonToRes<PostResponse>(msg).data;
 629       editPostFindRes(data.post_view, this.state.personRes.posts);
 630       this.setState(this.state);
 631     } else if (op == UserOperation.CreatePostLike) {
 632       let data = wsJsonToRes<PostResponse>(msg).data;
 633       createPostLikeFindRes(data.post_view, this.state.personRes.posts);
 634       this.setState(this.state);
 635     } else if (op == UserOperation.BanPerson) {
 636       let data = wsJsonToRes<BanPersonResponse>(msg).data;
 637       this.state.personRes.comments
 638         .filter(c => c.creator.id == data.person_view.person.id)
 639         .forEach(c => (c.creator.banned = data.banned));
 640       this.state.personRes.posts
 641         .filter(c => c.creator.id == data.person_view.person.id)
 642         .forEach(c => (c.creator.banned = data.banned));
 643       this.setState(this.state);
 644     } else if (op == UserOperation.BlockPerson) {
 645       let data = wsJsonToRes<BlockPersonResponse>(msg).data;
 646       updatePersonBlock(data);
 647       this.setPersonBlock();
 648       this.setState(this.state);
 649     }
 650   }
 651 }