src/shared/components/community/community.tsx

   1 import { None, Option, Some } from "@sniptt/monads";
   2 import { Component, linkEvent } from "inferno";
   3 import {
   4   AddModToCommunityResponse,
   5   BanFromCommunityResponse,
   6   BlockCommunityResponse,
   7   BlockPersonResponse,
   8   CommentReportResponse,
   9   CommentResponse,
  10   CommentView,
  11   CommunityResponse,
  12   GetComments,
  13   GetCommentsResponse,
  14   GetCommunity,
  15   GetCommunityResponse,
  16   GetPosts,
  17   GetPostsResponse,
  18   GetSiteResponse,
  19   ListingType,
  20   PostReportResponse,
  21   PostResponse,
  22   PostView,
  23   PurgeItemResponse,
  24   SortType,
  25   toOption,
  26   UserOperation,
  27   wsJsonToRes,
  28   wsUserOp,
  29 } from "lemmy-js-client";
  30 import { Subscription } from "rxjs";
  31 import { i18n } from "../../i18next";
  32 import {
  33   CommentViewType,
  34   DataType,
  35   InitialFetchRequest,
  36 } from "../../interfaces";
  37 import { UserService, WebSocketService } from "../../services";
  38 import {
  39   auth,
  40   commentsToFlatNodes,
  41   communityRSSUrl,
  42   createCommentLikeRes,
  43   createPostLikeFindRes,
  44   editCommentRes,
  45   editPostFindRes,
  46   enableDownvotes,
  47   enableNsfw,
  48   fetchLimit,
  49   getDataTypeFromProps,
  50   getPageFromProps,
  51   getSortTypeFromProps,
  52   notifyPost,
  53   postToCommentSortType,
  54   relTags,
  55   restoreScrollPosition,
  56   saveCommentRes,
  57   saveScrollPosition,
  58   setIsoData,
  59   setupTippy,
  60   showLocal,
  61   toast,
  62   updateCommunityBlock,
  63   updatePersonBlock,
  64   wsClient,
  65   wsSubscribe,
  66 } from "../../utils";
  67 import { CommentNodes } from "../comment/comment-nodes";
  68 import { BannerIconHeader } from "../common/banner-icon-header";
  69 import { DataTypeSelect } from "../common/data-type-select";
  70 import { HtmlTags } from "../common/html-tags";
  71 import { Icon, Spinner } from "../common/icon";
  72 import { Paginator } from "../common/paginator";
  73 import { SortSelect } from "../common/sort-select";
  74 import { Sidebar } from "../community/sidebar";
  75 import { SiteSidebar } from "../home/site-sidebar";
  76 import { PostListings } from "../post/post-listings";
  77 import { CommunityLink } from "./community-link";
  78
  79 interface State {
  80   communityRes: Option<GetCommunityResponse>;
  81   siteRes: GetSiteResponse;
  82   communityName: string;
  83   communityLoading: boolean;
  84   postsLoading: boolean;
  85   commentsLoading: boolean;
  86   posts: PostView[];
  87   comments: CommentView[];
  88   dataType: DataType;
  89   sort: SortType;
  90   page: number;
  91   showSidebarMobile: boolean;
  92 }
  93
  94 interface CommunityProps {
  95   dataType: DataType;
  96   sort: SortType;
  97   page: number;
  98 }
  99
 100 interface UrlParams {
 101   dataType?: string;
 102   sort?: SortType;
 103   page?: number;
 104 }
 105
 106 export class Community extends Component<any, State> {
 107   private isoData = setIsoData(
 108     this.context,
 109     GetCommunityResponse,
 110     GetPostsResponse,
 111     GetCommentsResponse
 112   );
 113   private subscription: Subscription;
 114   private emptyState: State = {
 115     communityRes: None,
 116     communityName: this.props.match.params.name,
 117     communityLoading: true,
 118     postsLoading: true,
 119     commentsLoading: true,
 120     posts: [],
 121     comments: [],
 122     dataType: getDataTypeFromProps(this.props),
 123     sort: getSortTypeFromProps(this.props),
 124     page: getPageFromProps(this.props),
 125     siteRes: this.isoData.site_res,
 126     showSidebarMobile: false,
 127   };
 128
 129   constructor(props: any, context: any) {
 130     super(props, context);
 131
 132     this.state = this.emptyState;
 133     this.handleSortChange = this.handleSortChange.bind(this);
 134     this.handleDataTypeChange = this.handleDataTypeChange.bind(this);
 135     this.handlePageChange = this.handlePageChange.bind(this);
 136
 137     this.parseMessage = this.parseMessage.bind(this);
 138     this.subscription = wsSubscribe(this.parseMessage);
 139
 140     // Only fetch the data if coming from another route
 141     if (this.isoData.path == this.context.router.route.match.url) {
 142       this.state.communityRes = Some(
 143         this.isoData.routeData[0] as GetCommunityResponse
 144       );
 145       let postsRes = Some(this.isoData.routeData[1] as GetPostsResponse);
 146       let commentsRes = Some(this.isoData.routeData[2] as GetCommentsResponse);
 147
 148       postsRes.match({
 149         some: pvs => (this.state.posts = pvs.posts),
 150         none: void 0,
 151       });
 152       commentsRes.match({
 153         some: cvs => (this.state.comments = cvs.comments),
 154         none: void 0,
 155       });
 156
 157       this.state.communityLoading = false;
 158       this.state.postsLoading = false;
 159       this.state.commentsLoading = false;
 160     } else {
 161       this.fetchCommunity();
 162       this.fetchData();
 163     }
 164   }
 165
 166   fetchCommunity() {
 167     let form = new GetCommunity({
 168       name: Some(this.state.communityName),
 169       id: None,
 170       auth: auth(false).ok(),
 171     });
 172     WebSocketService.Instance.send(wsClient.getCommunity(form));
 173   }
 174
 175   componentDidMount() {
 176     setupTippy();
 177   }
 178
 179   componentWillUnmount() {
 180     saveScrollPosition(this.context);
 181     this.subscription.unsubscribe();
 182   }
 183
 184   static getDerivedStateFromProps(props: any): CommunityProps {
 185     return {
 186       dataType: getDataTypeFromProps(props),
 187       sort: getSortTypeFromProps(props),
 188       page: getPageFromProps(props),
 189     };
 190   }
 191
 192   static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
 193     let pathSplit = req.path.split("/");
 194     let promises: Promise<any>[] = [];
 195
 196     let communityName = pathSplit[2];
 197     let communityForm = new GetCommunity({
 198       name: Some(communityName),
 199       id: None,
 200       auth: req.auth,
 201     });
 202     promises.push(req.client.getCommunity(communityForm));
 203
 204     let dataType: DataType = pathSplit[4]
 205       ? DataType[pathSplit[4]]
 206       : DataType.Post;
 207
 208     let sort: Option<SortType> = toOption(
 209       pathSplit[6]
 210         ? SortType[pathSplit[6]]
 211         : UserService.Instance.myUserInfo.match({
 212             some: mui =>
 213               Object.values(SortType)[
 214                 mui.local_user_view.local_user.default_sort_type
 215               ],
 216             none: SortType.Active,
 217           })
 218     );
 219
 220     let page = toOption(pathSplit[8] ? Number(pathSplit[8]) : 1);
 221
 222     if (dataType == DataType.Post) {
 223       let getPostsForm = new GetPosts({
 224         community_name: Some(communityName),
 225         community_id: None,
 226         page,
 227         limit: Some(fetchLimit),
 228         sort,
 229         type_: Some(ListingType.All),
 230         saved_only: Some(false),
 231         auth: req.auth,
 232       });
 233       promises.push(req.client.getPosts(getPostsForm));
 234       promises.push(Promise.resolve());
 235     } else {
 236       let getCommentsForm = new GetComments({
 237         community_name: Some(communityName),
 238         community_id: None,
 239         page,
 240         limit: Some(fetchLimit),
 241         max_depth: None,
 242         sort: sort.map(postToCommentSortType),
 243         type_: Some(ListingType.All),
 244         saved_only: Some(false),
 245         post_id: None,
 246         parent_id: None,
 247         auth: req.auth,
 248       });
 249       promises.push(Promise.resolve());
 250       promises.push(req.client.getComments(getCommentsForm));
 251     }
 252
 253     return promises;
 254   }
 255
 256   componentDidUpdate(_: any, lastState: State) {
 257     if (
 258       lastState.dataType !== this.state.dataType ||
 259       lastState.sort !== this.state.sort ||
 260       lastState.page !== this.state.page
 261     ) {
 262       this.setState({ postsLoading: true, commentsLoading: true });
 263       this.fetchData();
 264     }
 265   }
 266
 267   get documentTitle(): string {
 268     return this.state.communityRes.match({
 269       some: res =>
 270         this.state.siteRes.site_view.match({
 271           some: siteView =>
 272             `${res.community_view.community.title} - ${siteView.site.name}`,
 273           none: "",
 274         }),
 275       none: "",
 276     });
 277   }
 278
 279   render() {
 280     return (
 281       <div class="container">
 282         {this.state.communityLoading ? (
 283           <h5>
 284             <Spinner large />
 285           </h5>
 286         ) : (
 287           this.state.communityRes.match({
 288             some: res => (
 289               <>
 290                 <HtmlTags
 291                   title={this.documentTitle}
 292                   path={this.context.router.route.match.url}
 293                   description={res.community_view.community.description}
 294                   image={res.community_view.community.icon}
 295                 />
 296
 297                 <div class="row">
 298                   <div class="col-12 col-md-8">
 299                     {this.communityInfo()}
 300                     <div class="d-block d-md-none">
 301                       <button
 302                         class="btn btn-secondary d-inline-block mb-2 mr-3"
 303                         onClick={linkEvent(this, this.handleShowSidebarMobile)}
 304                       >
 305                         {i18n.t("sidebar")}{" "}
 306                         <Icon
 307                           icon={
 308                             this.state.showSidebarMobile
 309                               ? `minus-square`
 310                               : `plus-square`
 311                           }
 312                           classes="icon-inline"
 313                         />
 314                       </button>
 315                       {this.state.showSidebarMobile && (
 316                         <>
 317                           <Sidebar
 318                             community_view={res.community_view}
 319                             moderators={res.moderators}
 320                             admins={this.state.siteRes.admins}
 321                             online={res.online}
 322                             enableNsfw={enableNsfw(this.state.siteRes)}
 323                           />
 324                           {!res.community_view.community.local &&
 325                             res.site.match({
 326                               some: site => (
 327                                 <SiteSidebar
 328                                   site={site}
 329                                   showLocal={showLocal(this.isoData)}
 330                                   admins={None}
 331                                   counts={None}
 332                                   online={None}
 333                                 />
 334                               ),
 335                               none: <></>,
 336                             })}
 337                         </>
 338                       )}
 339                     </div>
 340                     {this.selects()}
 341                     {this.listings()}
 342                     <Paginator
 343                       page={this.state.page}
 344                       onChange={this.handlePageChange}
 345                     />
 346                   </div>
 347                   <div class="d-none d-md-block col-md-4">
 348                     <Sidebar
 349                       community_view={res.community_view}
 350                       moderators={res.moderators}
 351                       admins={this.state.siteRes.admins}
 352                       online={res.online}
 353                       enableNsfw={enableNsfw(this.state.siteRes)}
 354                     />
 355                     {!res.community_view.community.local &&
 356                       res.site.match({
 357                         some: site => (
 358                           <SiteSidebar
 359                             site={site}
 360                             showLocal={showLocal(this.isoData)}
 361                             admins={None}
 362                             counts={None}
 363                             online={None}
 364                           />
 365                         ),
 366                         none: <></>,
 367                       })}
 368                   </div>
 369                 </div>
 370               </>
 371             ),
 372             none: <></>,
 373           })
 374         )}
 375       </div>
 376     );
 377   }
 378
 379   listings() {
 380     return this.state.dataType == DataType.Post ? (
 381       this.state.postsLoading ? (
 382         <h5>
 383           <Spinner large />
 384         </h5>
 385       ) : (
 386         <PostListings
 387           posts={this.state.posts}
 388           removeDuplicates
 389           enableDownvotes={enableDownvotes(this.state.siteRes)}
 390           enableNsfw={enableNsfw(this.state.siteRes)}
 391         />
 392       )
 393     ) : this.state.commentsLoading ? (
 394       <h5>
 395         <Spinner large />
 396       </h5>
 397     ) : (
 398       <CommentNodes
 399         nodes={commentsToFlatNodes(this.state.comments)}
 400         viewType={CommentViewType.Flat}
 401         noIndent
 402         showContext
 403         enableDownvotes={enableDownvotes(this.state.siteRes)}
 404         moderators={this.state.communityRes.map(r => r.moderators)}
 405         admins={Some(this.state.siteRes.admins)}
 406         maxCommentsShown={None}
 407       />
 408     );
 409   }
 410
 411   communityInfo() {
 412     return this.state.communityRes
 413       .map(r => r.community_view.community)
 414       .match({
 415         some: community => (
 416           <div class="mb-2">
 417             <BannerIconHeader banner={community.banner} icon={community.icon} />
 418             <h5 class="mb-0 overflow-wrap-anywhere">{community.title}</h5>
 419             <CommunityLink
 420               community={community}
 421               realLink
 422               useApubName
 423               muted
 424               hideAvatar
 425             />
 426           </div>
 427         ),
 428         none: <></>,
 429       });
 430   }
 431
 432   selects() {
 433     let communityRss = this.state.communityRes.map(r =>
 434       communityRSSUrl(r.community_view.community.actor_id, this.state.sort)
 435     );
 436     return (
 437       <div class="mb-3">
 438         <span class="mr-3">
 439           <DataTypeSelect
 440             type_={this.state.dataType}
 441             onChange={this.handleDataTypeChange}
 442           />
 443         </span>
 444         <span class="mr-2">
 445           <SortSelect sort={this.state.sort} onChange={this.handleSortChange} />
 446         </span>
 447         {communityRss.match({
 448           some: rss => (
 449             <>
 450               <a href={rss} title="RSS" rel={relTags}>
 451                 <Icon icon="rss" classes="text-muted small" />
 452               </a>
 453               <link rel="alternate" type="application/atom+xml" href={rss} />
 454             </>
 455           ),
 456           none: <></>,
 457         })}
 458       </div>
 459     );
 460   }
 461
 462   handlePageChange(page: number) {
 463     this.updateUrl({ page });
 464     window.scrollTo(0, 0);
 465   }
 466
 467   handleSortChange(val: SortType) {
 468     this.updateUrl({ sort: val, page: 1 });
 469     window.scrollTo(0, 0);
 470   }
 471
 472   handleDataTypeChange(val: DataType) {
 473     this.updateUrl({ dataType: DataType[val], page: 1 });
 474     window.scrollTo(0, 0);
 475   }
 476
 477   handleShowSidebarMobile(i: Community) {
 478     i.state.showSidebarMobile = !i.state.showSidebarMobile;
 479     i.setState(i.state);
 480   }
 481
 482   updateUrl(paramUpdates: UrlParams) {
 483     const dataTypeStr = paramUpdates.dataType || DataType[this.state.dataType];
 484     const sortStr = paramUpdates.sort || this.state.sort;
 485     const page = paramUpdates.page || this.state.page;
 486
 487     let typeView = `/c/${this.state.communityName}`;
 488
 489     this.props.history.push(
 490       `${typeView}/data_type/${dataTypeStr}/sort/${sortStr}/page/${page}`
 491     );
 492   }
 493
 494   fetchData() {
 495     if (this.state.dataType == DataType.Post) {
 496       let form = new GetPosts({
 497         page: Some(this.state.page),
 498         limit: Some(fetchLimit),
 499         sort: Some(this.state.sort),
 500         type_: Some(ListingType.All),
 501         community_name: Some(this.state.communityName),
 502         community_id: None,
 503         saved_only: Some(false),
 504         auth: auth(false).ok(),
 505       });
 506       WebSocketService.Instance.send(wsClient.getPosts(form));
 507     } else {
 508       let form = new GetComments({
 509         page: Some(this.state.page),
 510         limit: Some(fetchLimit),
 511         max_depth: None,
 512         sort: Some(postToCommentSortType(this.state.sort)),
 513         type_: Some(ListingType.All),
 514         community_name: Some(this.state.communityName),
 515         community_id: None,
 516         saved_only: Some(false),
 517         post_id: None,
 518         parent_id: None,
 519         auth: auth(false).ok(),
 520       });
 521       WebSocketService.Instance.send(wsClient.getComments(form));
 522     }
 523   }
 524
 525   parseMessage(msg: any) {
 526     let op = wsUserOp(msg);
 527     console.log(msg);
 528     if (msg.error) {
 529       toast(i18n.t(msg.error), "danger");
 530       this.context.router.history.push("/");
 531       return;
 532     } else if (msg.reconnect) {
 533       this.state.communityRes.match({
 534         some: res => {
 535           WebSocketService.Instance.send(
 536             wsClient.communityJoin({
 537               community_id: res.community_view.community.id,
 538             })
 539           );
 540         },
 541         none: void 0,
 542       });
 543       this.fetchData();
 544     } else if (op == UserOperation.GetCommunity) {
 545       let data = wsJsonToRes<GetCommunityResponse>(msg, GetCommunityResponse);
 546       this.state.communityRes = Some(data);
 547       this.state.communityLoading = false;
 548       this.setState(this.state);
 549       // TODO why is there no auth in this form?
 550       WebSocketService.Instance.send(
 551         wsClient.communityJoin({
 552           community_id: data.community_view.community.id,
 553         })
 554       );
 555     } else if (
 556       op == UserOperation.EditCommunity ||
 557       op == UserOperation.DeleteCommunity ||
 558       op == UserOperation.RemoveCommunity
 559     ) {
 560       let data = wsJsonToRes<CommunityResponse>(msg, CommunityResponse);
 561       this.state.communityRes.match({
 562         some: res => (res.community_view = data.community_view),
 563         none: void 0,
 564       });
 565       this.setState(this.state);
 566     } else if (op == UserOperation.FollowCommunity) {
 567       let data = wsJsonToRes<CommunityResponse>(msg, CommunityResponse);
 568       this.state.communityRes.match({
 569         some: res => {
 570           res.community_view.subscribed = data.community_view.subscribed;
 571           res.community_view.counts.subscribers =
 572             data.community_view.counts.subscribers;
 573         },
 574         none: void 0,
 575       });
 576       this.setState(this.state);
 577     } else if (op == UserOperation.GetPosts) {
 578       let data = wsJsonToRes<GetPostsResponse>(msg, GetPostsResponse);
 579       this.state.posts = data.posts;
 580       this.state.postsLoading = false;
 581       this.setState(this.state);
 582       restoreScrollPosition(this.context);
 583       setupTippy();
 584     } else if (
 585       op == UserOperation.EditPost ||
 586       op == UserOperation.DeletePost ||
 587       op == UserOperation.RemovePost ||
 588       op == UserOperation.LockPost ||
 589       op == UserOperation.StickyPost ||
 590       op == UserOperation.SavePost
 591     ) {
 592       let data = wsJsonToRes<PostResponse>(msg, PostResponse);
 593       editPostFindRes(data.post_view, this.state.posts);
 594       this.setState(this.state);
 595     } else if (op == UserOperation.CreatePost) {
 596       let data = wsJsonToRes<PostResponse>(msg, PostResponse);
 597       this.state.posts.unshift(data.post_view);
 598       if (
 599         UserService.Instance.myUserInfo
 600           .map(m => m.local_user_view.local_user.show_new_post_notifs)
 601           .unwrapOr(false)
 602       ) {
 603         notifyPost(data.post_view, this.context.router);
 604       }
 605       this.setState(this.state);
 606     } else if (op == UserOperation.CreatePostLike) {
 607       let data = wsJsonToRes<PostResponse>(msg, PostResponse);
 608       createPostLikeFindRes(data.post_view, this.state.posts);
 609       this.setState(this.state);
 610     } else if (op == UserOperation.AddModToCommunity) {
 611       let data = wsJsonToRes<AddModToCommunityResponse>(
 612         msg,
 613         AddModToCommunityResponse
 614       );
 615       this.state.communityRes.match({
 616         some: res => (res.moderators = data.moderators),
 617         none: void 0,
 618       });
 619       this.setState(this.state);
 620     } else if (op == UserOperation.BanFromCommunity) {
 621       let data = wsJsonToRes<BanFromCommunityResponse>(
 622         msg,
 623         BanFromCommunityResponse
 624       );
 625
 626       // TODO this might be incorrect
 627       this.state.posts
 628         .filter(p => p.creator.id == data.person_view.person.id)
 629         .forEach(p => (p.creator_banned_from_community = data.banned));
 630
 631       this.setState(this.state);
 632     } else if (op == UserOperation.GetComments) {
 633       let data = wsJsonToRes<GetCommentsResponse>(msg, GetCommentsResponse);
 634       this.state.comments = data.comments;
 635       this.state.commentsLoading = false;
 636       this.setState(this.state);
 637     } else if (
 638       op == UserOperation.EditComment ||
 639       op == UserOperation.DeleteComment ||
 640       op == UserOperation.RemoveComment
 641     ) {
 642       let data = wsJsonToRes<CommentResponse>(msg, CommentResponse);
 643       editCommentRes(data.comment_view, this.state.comments);
 644       this.setState(this.state);
 645     } else if (op == UserOperation.CreateComment) {
 646       let data = wsJsonToRes<CommentResponse>(msg, CommentResponse);
 647
 648       // Necessary since it might be a user reply
 649       if (data.form_id) {
 650         this.state.comments.unshift(data.comment_view);
 651         this.setState(this.state);
 652       }
 653     } else if (op == UserOperation.SaveComment) {
 654       let data = wsJsonToRes<CommentResponse>(msg, CommentResponse);
 655       saveCommentRes(data.comment_view, this.state.comments);
 656       this.setState(this.state);
 657     } else if (op == UserOperation.CreateCommentLike) {
 658       let data = wsJsonToRes<CommentResponse>(msg, CommentResponse);
 659       createCommentLikeRes(data.comment_view, this.state.comments);
 660       this.setState(this.state);
 661     } else if (op == UserOperation.BlockPerson) {
 662       let data = wsJsonToRes<BlockPersonResponse>(msg, BlockPersonResponse);
 663       updatePersonBlock(data);
 664     } else if (op == UserOperation.CreatePostReport) {
 665       let data = wsJsonToRes<PostReportResponse>(msg, PostReportResponse);
 666       if (data) {
 667         toast(i18n.t("report_created"));
 668       }
 669     } else if (op == UserOperation.CreateCommentReport) {
 670       let data = wsJsonToRes<CommentReportResponse>(msg, CommentReportResponse);
 671       if (data) {
 672         toast(i18n.t("report_created"));
 673       }
 674     } else if (op == UserOperation.PurgeCommunity) {
 675       let data = wsJsonToRes<PurgeItemResponse>(msg, PurgeItemResponse);
 676       if (data.success) {
 677         toast(i18n.t("purge_success"));
 678         this.context.router.history.push(`/`);
 679       }
 680     } else if (op == UserOperation.BlockCommunity) {
 681       let data = wsJsonToRes<BlockCommunityResponse>(
 682         msg,
 683         BlockCommunityResponse
 684       );
 685       this.state.communityRes.match({
 686         some: res => (res.community_view.blocked = data.blocked),
 687         none: void 0,
 688       });
 689       updateCommunityBlock(data);
 690       this.setState(this.state);
 691     }
 692   }
 693 }