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