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   // TODO wut?
 111   // componentDidUpdate(lastProps: UserDetailsProps) {
 112   //   for (const key of Object.keys(lastProps)) {
 113   //     if (lastProps[key] !== this.props[key]) {
 114   //       this.fetchUserData();
 115   //       break;
 116   //     }
 117   //   }
 118   // }
 119
 120   render() {
 121     return (
 122       <div>
 123         {this.viewSelector(this.props.view)}
 124
 125         <Paginator page={this.props.page} onChange={this.handlePageChange} />
 126       </div>
 127     );
 128   }
 129
 130   viewSelector(view: PersonDetailsView) {
 131     if (
 132       view === PersonDetailsView.Overview ||
 133       view === PersonDetailsView.Saved
 134     ) {
 135       return this.overview();
 136     } else if (view === PersonDetailsView.Comments) {
 137       return this.comments();
 138     } else if (view === PersonDetailsView.Posts) {
 139       return this.posts();
 140     } else {
 141       return null;
 142     }
 143   }
 144
 145   renderItemType(i: ItemType) {
 146     switch (i.type_) {
 147       case ItemEnum.Comment: {
 148         const c = i.view as CommentView;
 149         return (
 150           <CommentNodes
 151             key={i.id}
 152             nodes={[{ comment_view: c, children: [], depth: 0 }]}
 153             viewType={CommentViewType.Flat}
 154             finished={this.props.finished}
 155             admins={this.props.admins}
 156             noBorder
 157             noIndent
 158             showCommunity
 159             showContext
 160             enableDownvotes={this.props.enableDownvotes}
 161             allLanguages={this.props.allLanguages}
 162             siteLanguages={this.props.siteLanguages}
 163             onCommentReplyRead={this.props.onCommentReplyRead}
 164             onPersonMentionRead={this.props.onPersonMentionRead}
 165             onCreateComment={this.props.onCreateComment}
 166             onEditComment={this.props.onEditComment}
 167             onCommentVote={this.props.onCommentVote}
 168             onBlockPerson={this.props.onBlockPerson}
 169             onSaveComment={this.props.onSaveComment}
 170             onDeleteComment={this.props.onDeleteComment}
 171             onRemoveComment={this.props.onRemoveComment}
 172             onDistinguishComment={this.props.onDistinguishComment}
 173             onAddModToCommunity={this.props.onAddModToCommunity}
 174             onAddAdmin={this.props.onAddAdmin}
 175             onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
 176             onBanPerson={this.props.onBanPerson}
 177             onTransferCommunity={this.props.onTransferCommunity}
 178             onFetchChildren={this.props.onFetchChildren}
 179             onCommentReport={this.props.onCommentReport}
 180             onPurgePerson={this.props.onPurgePerson}
 181             onPurgeComment={this.props.onPurgeComment}
 182           />
 183         );
 184       }
 185       case ItemEnum.Post: {
 186         const p = i.view as PostView;
 187         return (
 188           <PostListing
 189             key={i.id}
 190             post_view={p}
 191             admins={this.props.admins}
 192             showCommunity
 193             enableDownvotes={this.props.enableDownvotes}
 194             enableNsfw={this.props.enableNsfw}
 195             allLanguages={this.props.allLanguages}
 196             siteLanguages={this.props.siteLanguages}
 197             onPostEdit={this.props.onPostEdit}
 198             onPostVote={this.props.onPostVote}
 199             onPostReport={this.props.onPostReport}
 200             onBlockPerson={this.props.onBlockPerson}
 201             onLockPost={this.props.onLockPost}
 202             onDeletePost={this.props.onDeletePost}
 203             onRemovePost={this.props.onRemovePost}
 204             onSavePost={this.props.onSavePost}
 205             onFeaturePost={this.props.onFeaturePost}
 206             onPurgePerson={this.props.onPurgePerson}
 207             onPurgePost={this.props.onPurgePost}
 208             onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
 209             onBanPerson={this.props.onBanPerson}
 210             onAddModToCommunity={this.props.onAddModToCommunity}
 211             onAddAdmin={this.props.onAddAdmin}
 212             onTransferCommunity={this.props.onTransferCommunity}
 213           />
 214         );
 215       }
 216       default:
 217         return <div />;
 218     }
 219   }
 220
 221   overview() {
 222     let id = 0;
 223     const comments: ItemType[] = this.props.personRes.comments.map(r => ({
 224       id: id++,
 225       type_: ItemEnum.Comment,
 226       view: r,
 227       published: r.comment.published,
 228       score: r.counts.score,
 229     }));
 230     const posts: ItemType[] = this.props.personRes.posts.map(r => ({
 231       id: id++,
 232       type_: ItemEnum.Post,
 233       view: r,
 234       published: r.post.published,
 235       score: r.counts.score,
 236     }));
 237
 238     const combined = [...comments, ...posts];
 239
 240     // Sort it
 241     if (this.props.sort === "New") {
 242       combined.sort((a, b) => b.published.localeCompare(a.published));
 243     } else {
 244       combined.sort((a, b) => Number(b.score - a.score));
 245     }
 246
 247     return (
 248       <div>
 249         {combined.map(i => [
 250           this.renderItemType(i),
 251           <hr key={i.type_} className="my-3" />,
 252         ])}
 253       </div>
 254     );
 255   }
 256
 257   comments() {
 258     return (
 259       <div>
 260         <CommentNodes
 261           nodes={commentsToFlatNodes(this.props.personRes.comments)}
 262           viewType={CommentViewType.Flat}
 263           admins={this.props.admins}
 264           finished={this.props.finished}
 265           noIndent
 266           showCommunity
 267           showContext
 268           enableDownvotes={this.props.enableDownvotes}
 269           allLanguages={this.props.allLanguages}
 270           siteLanguages={this.props.siteLanguages}
 271           onCommentReplyRead={this.props.onCommentReplyRead}
 272           onPersonMentionRead={this.props.onPersonMentionRead}
 273           onCreateComment={this.props.onCreateComment}
 274           onEditComment={this.props.onEditComment}
 275           onCommentVote={this.props.onCommentVote}
 276           onBlockPerson={this.props.onBlockPerson}
 277           onSaveComment={this.props.onSaveComment}
 278           onDeleteComment={this.props.onDeleteComment}
 279           onRemoveComment={this.props.onRemoveComment}
 280           onDistinguishComment={this.props.onDistinguishComment}
 281           onAddModToCommunity={this.props.onAddModToCommunity}
 282           onAddAdmin={this.props.onAddAdmin}
 283           onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
 284           onBanPerson={this.props.onBanPerson}
 285           onTransferCommunity={this.props.onTransferCommunity}
 286           onFetchChildren={this.props.onFetchChildren}
 287           onCommentReport={this.props.onCommentReport}
 288           onPurgePerson={this.props.onPurgePerson}
 289           onPurgeComment={this.props.onPurgeComment}
 290         />
 291       </div>
 292     );
 293   }
 294
 295   posts() {
 296     return (
 297       <div>
 298         {this.props.personRes.posts.map(post => (
 299           <>
 300             <PostListing
 301               post_view={post}
 302               admins={this.props.admins}
 303               showCommunity
 304               enableDownvotes={this.props.enableDownvotes}
 305               enableNsfw={this.props.enableNsfw}
 306               allLanguages={this.props.allLanguages}
 307               siteLanguages={this.props.siteLanguages}
 308               onPostEdit={this.props.onPostEdit}
 309               onPostVote={this.props.onPostVote}
 310               onPostReport={this.props.onPostReport}
 311               onBlockPerson={this.props.onBlockPerson}
 312               onLockPost={this.props.onLockPost}
 313               onDeletePost={this.props.onDeletePost}
 314               onRemovePost={this.props.onRemovePost}
 315               onSavePost={this.props.onSavePost}
 316               onFeaturePost={this.props.onFeaturePost}
 317               onPurgePerson={this.props.onPurgePerson}
 318               onPurgePost={this.props.onPurgePost}
 319               onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
 320               onBanPerson={this.props.onBanPerson}
 321               onAddModToCommunity={this.props.onAddModToCommunity}
 322               onAddAdmin={this.props.onAddAdmin}
 323               onTransferCommunity={this.props.onTransferCommunity}
 324             />
 325             <hr className="my-3" />
 326           </>
 327         ))}
 328       </div>
 329     );
 330   }
 331
 332   handlePageChange(val: number) {
 333     this.props.onPageChange(val);
 334   }
 335 }