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

   1 import { Component } from "inferno";
   2 import {
   3   AddAdmin,
   4   AddModToCommunity,
   5   BanFromCommunity,
   6   BanPerson,
   7   BlockPerson,
   8   CommentId,
   9   CommentView,
  10   CreateComment,
  11   CreateCommentLike,
  12   CreateCommentReport,
  13   CreatePostLike,
  14   CreatePostReport,
  15   DeleteComment,
  16   DeletePost,
  17   DistinguishComment,
  18   EditComment,
  19   EditPost,
  20   FeaturePost,
  21   GetComments,
  22   GetPersonDetailsResponse,
  23   Language,
  24   LockPost,
  25   MarkCommentReplyAsRead,
  26   MarkPersonMentionAsRead,
  27   PersonView,
  28   PostView,
  29   PurgeComment,
  30   PurgePerson,
  31   PurgePost,
  32   RemoveComment,
  33   RemovePost,
  34   SaveComment,
  35   SavePost,
  36   SortType,
  37   TransferCommunity,
  38 } from "lemmy-js-client";
  39 import { CommentViewType, PersonDetailsView } from "../../interfaces";
  40 import { commentsToFlatNodes, setupTippy } from "../../utils";
  41 import { CommentNodes } from "../comment/comment-nodes";
  42 import { Paginator } from "../common/paginator";
  43 import { PostListing } from "../post/post-listing";
  44
  45 interface PersonDetailsProps {
  46   personRes: GetPersonDetailsResponse;
  47   finished: Map<CommentId, boolean | undefined>;
  48   admins: PersonView[];
  49   allLanguages: Language[];
  50   siteLanguages: number[];
  51   page: number;
  52   limit: number;
  53   sort: SortType;
  54   enableDownvotes: boolean;
  55   enableNsfw: boolean;
  56   view: PersonDetailsView;
  57   onPageChange(page: number): number | any;
  58   onSaveComment(form: SaveComment): void;
  59   onCommentReplyRead(form: MarkCommentReplyAsRead): void;
  60   onPersonMentionRead(form: MarkPersonMentionAsRead): void;
  61   onCreateComment(form: CreateComment): void;
  62   onEditComment(form: EditComment): void;
  63   onCommentVote(form: CreateCommentLike): void;
  64   onBlockPerson(form: BlockPerson): void;
  65   onDeleteComment(form: DeleteComment): void;
  66   onRemoveComment(form: RemoveComment): void;
  67   onDistinguishComment(form: DistinguishComment): void;
  68   onAddModToCommunity(form: AddModToCommunity): void;
  69   onAddAdmin(form: AddAdmin): void;
  70   onBanPersonFromCommunity(form: BanFromCommunity): void;
  71   onBanPerson(form: BanPerson): void;
  72   onTransferCommunity(form: TransferCommunity): void;
  73   onFetchChildren?(form: GetComments): void;
  74   onCommentReport(form: CreateCommentReport): void;
  75   onPurgePerson(form: PurgePerson): void;
  76   onPurgeComment(form: PurgeComment): void;
  77   onPostEdit(form: EditPost): void;
  78   onPostVote(form: CreatePostLike): void;
  79   onPostReport(form: CreatePostReport): void;
  80   onLockPost(form: LockPost): void;
  81   onDeletePost(form: DeletePost): void;
  82   onRemovePost(form: RemovePost): void;
  83   onSavePost(form: SavePost): void;
  84   onFeaturePost(form: FeaturePost): void;
  85   onPurgePost(form: PurgePost): void;
  86 }
  87
  88 enum ItemEnum {
  89   Comment,
  90   Post,
  91 }
  92 type ItemType = {
  93   id: number;
  94   type_: ItemEnum;
  95   view: CommentView | PostView;
  96   published: string;
  97   score: number;
  98 };
  99
 100 export class PersonDetails extends Component<PersonDetailsProps, any> {
 101   constructor(props: any, context: any) {
 102     super(props, context);
 103     this.handlePageChange = this.handlePageChange.bind(this);
 104   }
 105
 106   componentDidMount() {
 107     setupTippy();
 108   }
 109
 110   render() {
 111     return (
 112       <div className="person-details">
 113         {this.viewSelector(this.props.view)}
 114
 115         <Paginator page={this.props.page} onChange={this.handlePageChange} />
 116       </div>
 117     );
 118   }
 119
 120   viewSelector(view: PersonDetailsView) {
 121     if (
 122       view === PersonDetailsView.Overview ||
 123       view === PersonDetailsView.Saved
 124     ) {
 125       return this.overview();
 126     } else if (view === PersonDetailsView.Comments) {
 127       return this.comments();
 128     } else if (view === PersonDetailsView.Posts) {
 129       return this.posts();
 130     } else {
 131       return null;
 132     }
 133   }
 134
 135   renderItemType(i: ItemType) {
 136     switch (i.type_) {
 137       case ItemEnum.Comment: {
 138         const c = i.view as CommentView;
 139         return (
 140           <CommentNodes
 141             key={i.id}
 142             nodes={[{ comment_view: c, children: [], depth: 0 }]}
 143             viewType={CommentViewType.Flat}
 144             finished={this.props.finished}
 145             admins={this.props.admins}
 146             noBorder
 147             noIndent
 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 }