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

   1 import { Component } from "inferno";
   2 import {
   3   CommentView,
   4   GetPersonDetailsResponse,
   5   Language,
   6   PersonView,
   7   PostView,
   8   SortType,
   9 } from "lemmy-js-client";
  10 import { CommentViewType, PersonDetailsView } from "../../interfaces";
  11 import { commentsToFlatNodes, setupTippy } from "../../utils";
  12 import { CommentNodes } from "../comment/comment-nodes";
  13 import { Paginator } from "../common/paginator";
  14 import { PostListing } from "../post/post-listing";
  15
  16 interface PersonDetailsProps {
  17   personRes: GetPersonDetailsResponse;
  18   admins: PersonView[];
  19   allLanguages: Language[];
  20   siteLanguages: number[];
  21   page: number;
  22   limit: number;
  23   sort: SortType;
  24   enableDownvotes: boolean;
  25   enableNsfw: boolean;
  26   view: PersonDetailsView;
  27   onPageChange(page: number): number | any;
  28 }
  29
  30 enum ItemEnum {
  31   Comment,
  32   Post,
  33 }
  34 type ItemType = {
  35   id: number;
  36   type_: ItemEnum;
  37   view: CommentView | PostView;
  38   published: string;
  39   score: number;
  40 };
  41
  42 export class PersonDetails extends Component<PersonDetailsProps, any> {
  43   constructor(props: any, context: any) {
  44     super(props, context);
  45     this.handlePageChange = this.handlePageChange.bind(this);
  46   }
  47
  48   componentDidMount() {
  49     setupTippy();
  50   }
  51
  52   // TODO wut?
  53   // componentDidUpdate(lastProps: UserDetailsProps) {
  54   //   for (const key of Object.keys(lastProps)) {
  55   //     if (lastProps[key] !== this.props[key]) {
  56   //       this.fetchUserData();
  57   //       break;
  58   //     }
  59   //   }
  60   // }
  61
  62   render() {
  63     return (
  64       <div>
  65         {this.viewSelector(this.props.view)}
  66
  67         <Paginator page={this.props.page} onChange={this.handlePageChange} />
  68       </div>
  69     );
  70   }
  71
  72   viewSelector(view: PersonDetailsView) {
  73     if (
  74       view === PersonDetailsView.Overview ||
  75       view === PersonDetailsView.Saved
  76     ) {
  77       return this.overview();
  78     } else if (view === PersonDetailsView.Comments) {
  79       return this.comments();
  80     } else if (view === PersonDetailsView.Posts) {
  81       return this.posts();
  82     } else {
  83       return null;
  84     }
  85   }
  86
  87   renderItemType(i: ItemType) {
  88     switch (i.type_) {
  89       case ItemEnum.Comment: {
  90         let c = i.view as CommentView;
  91         return (
  92           <CommentNodes
  93             key={i.id}
  94             nodes={[{ comment_view: c, children: [], depth: 0 }]}
  95             viewType={CommentViewType.Flat}
  96             admins={this.props.admins}
  97             noBorder
  98             noIndent
  99             showCommunity
 100             showContext
 101             enableDownvotes={this.props.enableDownvotes}
 102             allLanguages={this.props.allLanguages}
 103             siteLanguages={this.props.siteLanguages}
 104           />
 105         );
 106       }
 107       case ItemEnum.Post: {
 108         let p = i.view as PostView;
 109         return (
 110           <PostListing
 111             key={i.id}
 112             post_view={p}
 113             admins={this.props.admins}
 114             showCommunity
 115             enableDownvotes={this.props.enableDownvotes}
 116             enableNsfw={this.props.enableNsfw}
 117             allLanguages={this.props.allLanguages}
 118             siteLanguages={this.props.siteLanguages}
 119           />
 120         );
 121       }
 122       default:
 123         return <div />;
 124     }
 125   }
 126
 127   overview() {
 128     let id = 0;
 129     let comments: ItemType[] = this.props.personRes.comments.map(r => ({
 130       id: id++,
 131       type_: ItemEnum.Comment,
 132       view: r,
 133       published: r.comment.published,
 134       score: r.counts.score,
 135     }));
 136     let posts: ItemType[] = this.props.personRes.posts.map(r => ({
 137       id: id++,
 138       type_: ItemEnum.Post,
 139       view: r,
 140       published: r.post.published,
 141       score: r.counts.score,
 142     }));
 143
 144     let combined = [...comments, ...posts];
 145
 146     // Sort it
 147     if (this.props.sort === "New") {
 148       combined.sort((a, b) => b.published.localeCompare(a.published));
 149     } else {
 150       combined.sort((a, b) => Number(b.score - a.score));
 151     }
 152
 153     return (
 154       <div>
 155         {combined.map(i => [
 156           this.renderItemType(i),
 157           <hr key={i.type_} className="my-3" />,
 158         ])}
 159       </div>
 160     );
 161   }
 162
 163   comments() {
 164     return (
 165       <div>
 166         <CommentNodes
 167           nodes={commentsToFlatNodes(this.props.personRes.comments)}
 168           viewType={CommentViewType.Flat}
 169           admins={this.props.admins}
 170           noIndent
 171           showCommunity
 172           showContext
 173           enableDownvotes={this.props.enableDownvotes}
 174           allLanguages={this.props.allLanguages}
 175           siteLanguages={this.props.siteLanguages}
 176         />
 177       </div>
 178     );
 179   }
 180
 181   posts() {
 182     return (
 183       <div>
 184         {this.props.personRes.posts.map(post => (
 185           <>
 186             <PostListing
 187               post_view={post}
 188               admins={this.props.admins}
 189               showCommunity
 190               enableDownvotes={this.props.enableDownvotes}
 191               enableNsfw={this.props.enableNsfw}
 192               allLanguages={this.props.allLanguages}
 193               siteLanguages={this.props.siteLanguages}
 194             />
 195             <hr className="my-3" />
 196           </>
 197         ))}
 198       </div>
 199     );
 200   }
 201
 202   handlePageChange(val: number) {
 203     this.props.onPageChange(val);
 204   }
 205 }