src/shared/components/person/person-details.tsx

   1 import { commentsToFlatNodes } from "@utils/app";
   2 import { Component } from "inferno";
   3 import {
   4   AddAdmin,
   5   AddModToCommunity,
   6   BanFromCommunity,
   7   BanPerson,
   8   BlockPerson,
   9   CommentId,
  10   CommentView,
  11   CreateComment,
  12   CreateCommentLike,
  13   CreateCommentReport,
  14   CreatePostLike,
  15   CreatePostReport,
  16   DeleteComment,
  17   DeletePost,
  18   DistinguishComment,
  19   EditComment,
  20   EditPost,
  21   FeaturePost,
  22   GetComments,
  23   GetPersonDetailsResponse,
  24   Language,
  25   LockPost,
  26   MarkCommentReplyAsRead,
  27   MarkPersonMentionAsRead,
  28   PersonView,
  29   PostView,
  30   PurgeComment,
  31   PurgePerson,
  32   PurgePost,
  33   RemoveComment,
  34   RemovePost,
  35   SaveComment,
  36   SavePost,
  37   SortType,
  38   TransferCommunity,
  39 } from "lemmy-js-client";
  40 import { CommentViewType, PersonDetailsView } from "../../interfaces";
  41 import { setupTippy } from "../../tippy";
  42 import { CommentNodes } from "../comment/comment-nodes";
  43 import { Paginator } from "../common/paginator";
  44 import { PostListing } from "../post/post-listing";
  45
  46 interface PersonDetailsProps {
  47   personRes: GetPersonDetailsResponse;
  48   finished: Map<CommentId, boolean | undefined>;
  49   admins: PersonView[];
  50   allLanguages: Language[];
  51   siteLanguages: number[];
  52   page: number;
  53   limit: number;
  54   sort: SortType;
  55   enableDownvotes: boolean;
  56   enableNsfw: boolean;
  57   view: PersonDetailsView;
  58   onPageChange(page: number): number | any;
  59   onSaveComment(form: SaveComment): void;
  60   onCommentReplyRead(form: MarkCommentReplyAsRead): void;
  61   onPersonMentionRead(form: MarkPersonMentionAsRead): void;
  62   onCreateComment(form: CreateComment): void;
  63   onEditComment(form: EditComment): void;
  64   onCommentVote(form: CreateCommentLike): void;
  65   onBlockPerson(form: BlockPerson): void;
  66   onDeleteComment(form: DeleteComment): void;
  67   onRemoveComment(form: RemoveComment): void;
  68   onDistinguishComment(form: DistinguishComment): void;
  69   onAddModToCommunity(form: AddModToCommunity): void;
  70   onAddAdmin(form: AddAdmin): void;
  71   onBanPersonFromCommunity(form: BanFromCommunity): void;
  72   onBanPerson(form: BanPerson): void;
  73   onTransferCommunity(form: TransferCommunity): void;
  74   onFetchChildren?(form: GetComments): void;
  75   onCommentReport(form: CreateCommentReport): void;
  76   onPurgePerson(form: PurgePerson): void;
  77   onPurgeComment(form: PurgeComment): void;
  78   onPostEdit(form: EditPost): void;
  79   onPostVote(form: CreatePostLike): void;
  80   onPostReport(form: CreatePostReport): void;
  81   onLockPost(form: LockPost): void;
  82   onDeletePost(form: DeletePost): void;
  83   onRemovePost(form: RemovePost): void;
  84   onSavePost(form: SavePost): void;
  85   onFeaturePost(form: FeaturePost): void;
  86   onPurgePost(form: PurgePost): void;
  87 }
  88
  89 enum ItemEnum {
  90   Comment,
  91   Post,
  92 }
  93 type ItemType = {
  94   id: number;
  95   type_: ItemEnum;
  96   view: CommentView | PostView;
  97   published: string;
  98   score: number;
  99 };
 100
 101 export class PersonDetails extends Component<PersonDetailsProps, any> {
 102   constructor(props: any, context: any) {
 103     super(props, context);
 104     this.handlePageChange = this.handlePageChange.bind(this);
 105   }
 106
 107   componentDidMount() {
 108     setupTippy();
 109   }
 110
 111   render() {
 112     return (
 113       <div className="person-details">
 114         {this.viewSelector(this.props.view)}
 115
 116         <Paginator page={this.props.page} onChange={this.handlePageChange} />
 117       </div>
 118     );
 119   }
 120
 121   viewSelector(view: PersonDetailsView) {
 122     if (
 123       view === PersonDetailsView.Overview ||
 124       view === PersonDetailsView.Saved
 125     ) {
 126       return this.overview();
 127     } else if (view === PersonDetailsView.Comments) {
 128       return this.comments();
 129     } else if (view === PersonDetailsView.Posts) {
 130       return this.posts();
 131     } else {
 132       return null;
 133     }
 134   }
 135
 136   renderItemType(i: ItemType) {
 137     switch (i.type_) {
 138       case ItemEnum.Comment: {
 139         const c = i.view as CommentView;
 140         return (
 141           <CommentNodes
 142             key={i.id}
 143             nodes={[{ comment_view: c, children: [], depth: 0 }]}
 144             viewType={CommentViewType.Flat}
 145             finished={this.props.finished}
 146             admins={this.props.admins}
 147             noBorder
 148             showCommunity
 149             showContext
 150             enableDownvotes={this.props.enableDownvotes}
 151             allLanguages={this.props.allLanguages}
 152             siteLanguages={this.props.siteLanguages}
 153             onCommentReplyRead={this.props.onCommentReplyRead}
 154             onPersonMentionRead={this.props.onPersonMentionRead}
 155             onCreateComment={this.props.onCreateComment}
 156             onEditComment={this.props.onEditComment}
 157             onCommentVote={this.props.onCommentVote}
 158             onBlockPerson={this.props.onBlockPerson}
 159             onSaveComment={this.props.onSaveComment}
 160             onDeleteComment={this.props.onDeleteComment}
 161             onRemoveComment={this.props.onRemoveComment}
 162             onDistinguishComment={this.props.onDistinguishComment}
 163             onAddModToCommunity={this.props.onAddModToCommunity}
 164             onAddAdmin={this.props.onAddAdmin}
 165             onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
 166             onBanPerson={this.props.onBanPerson}
 167             onTransferCommunity={this.props.onTransferCommunity}
 168             onFetchChildren={this.props.onFetchChildren}
 169             onCommentReport={this.props.onCommentReport}
 170             onPurgePerson={this.props.onPurgePerson}
 171             onPurgeComment={this.props.onPurgeComment}
 172           />
 173         );
 174       }
 175       case ItemEnum.Post: {
 176         const p = i.view as PostView;
 177         return (
 178           <PostListing
 179             key={i.id}
 180             post_view={p}
 181             admins={this.props.admins}
 182             showCommunity
 183             enableDownvotes={this.props.enableDownvotes}
 184             enableNsfw={this.props.enableNsfw}
 185             allLanguages={this.props.allLanguages}
 186             siteLanguages={this.props.siteLanguages}
 187             onPostEdit={this.props.onPostEdit}
 188             onPostVote={this.props.onPostVote}
 189             onPostReport={this.props.onPostReport}
 190             onBlockPerson={this.props.onBlockPerson}
 191             onLockPost={this.props.onLockPost}
 192             onDeletePost={this.props.onDeletePost}
 193             onRemovePost={this.props.onRemovePost}
 194             onSavePost={this.props.onSavePost}
 195             onFeaturePost={this.props.onFeaturePost}
 196             onPurgePerson={this.props.onPurgePerson}
 197             onPurgePost={this.props.onPurgePost}
 198             onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
 199             onBanPerson={this.props.onBanPerson}
 200             onAddModToCommunity={this.props.onAddModToCommunity}
 201             onAddAdmin={this.props.onAddAdmin}
 202             onTransferCommunity={this.props.onTransferCommunity}
 203           />
 204         );
 205       }
 206       default:
 207         return <div />;
 208     }
 209   }
 210
 211   overview() {
 212     let id = 0;
 213     const comments: ItemType[] = this.props.personRes.comments.map(r => ({
 214       id: id++,
 215       type_: ItemEnum.Comment,
 216       view: r,
 217       published: r.comment.published,
 218       score: r.counts.score,
 219     }));
 220     const posts: ItemType[] = this.props.personRes.posts.map(r => ({
 221       id: id++,
 222       type_: ItemEnum.Post,
 223       view: r,
 224       published: r.post.published,
 225       score: r.counts.score,
 226     }));
 227
 228     const combined = [...comments, ...posts];
 229
 230     // Sort it
 231     if (this.props.sort === "New") {
 232       combined.sort((a, b) => b.published.localeCompare(a.published));
 233     } else {
 234       combined.sort((a, b) => Number(b.score - a.score));
 235     }
 236
 237     return (
 238       <div>
 239         {combined.map(i => [
 240           this.renderItemType(i),
 241           <hr key={i.type_} className="my-3" />,
 242         ])}
 243       </div>
 244     );
 245   }
 246
 247   comments() {
 248     return (
 249       <div>
 250         <CommentNodes
 251           nodes={commentsToFlatNodes(this.props.personRes.comments)}
 252           viewType={CommentViewType.Flat}
 253           admins={this.props.admins}
 254           finished={this.props.finished}
 255           noIndent
 256           showCommunity
 257           showContext
 258           enableDownvotes={this.props.enableDownvotes}
 259           allLanguages={this.props.allLanguages}
 260           siteLanguages={this.props.siteLanguages}
 261           onCommentReplyRead={this.props.onCommentReplyRead}
 262           onPersonMentionRead={this.props.onPersonMentionRead}
 263           onCreateComment={this.props.onCreateComment}
 264           onEditComment={this.props.onEditComment}
 265           onCommentVote={this.props.onCommentVote}
 266           onBlockPerson={this.props.onBlockPerson}
 267           onSaveComment={this.props.onSaveComment}
 268           onDeleteComment={this.props.onDeleteComment}
 269           onRemoveComment={this.props.onRemoveComment}
 270           onDistinguishComment={this.props.onDistinguishComment}
 271           onAddModToCommunity={this.props.onAddModToCommunity}
 272           onAddAdmin={this.props.onAddAdmin}
 273           onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
 274           onBanPerson={this.props.onBanPerson}
 275           onTransferCommunity={this.props.onTransferCommunity}
 276           onFetchChildren={this.props.onFetchChildren}
 277           onCommentReport={this.props.onCommentReport}
 278           onPurgePerson={this.props.onPurgePerson}
 279           onPurgeComment={this.props.onPurgeComment}
 280         />
 281       </div>
 282     );
 283   }
 284
 285   posts() {
 286     return (
 287       <div>
 288         {this.props.personRes.posts.map(post => (
 289           <>
 290             <PostListing
 291               post_view={post}
 292               admins={this.props.admins}
 293               showCommunity
 294               enableDownvotes={this.props.enableDownvotes}
 295               enableNsfw={this.props.enableNsfw}
 296               allLanguages={this.props.allLanguages}
 297               siteLanguages={this.props.siteLanguages}
 298               onPostEdit={this.props.onPostEdit}
 299               onPostVote={this.props.onPostVote}
 300               onPostReport={this.props.onPostReport}
 301               onBlockPerson={this.props.onBlockPerson}
 302               onLockPost={this.props.onLockPost}
 303               onDeletePost={this.props.onDeletePost}
 304               onRemovePost={this.props.onRemovePost}
 305               onSavePost={this.props.onSavePost}
 306               onFeaturePost={this.props.onFeaturePost}
 307               onPurgePerson={this.props.onPurgePerson}
 308               onPurgePost={this.props.onPurgePost}
 309               onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
 310               onBanPerson={this.props.onBanPerson}
 311               onAddModToCommunity={this.props.onAddModToCommunity}
 312               onAddAdmin={this.props.onAddAdmin}
 313               onTransferCommunity={this.props.onTransferCommunity}
 314             />
 315             <hr className="my-3" />
 316           </>
 317         ))}
 318       </div>
 319     );
 320   }
 321
 322   handlePageChange(val: number) {
 323     this.props.onPageChange(val);
 324   }
 325 }