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

   1 import { None, Some } from "@sniptt/monads/build";
   2 import { Component } from "inferno";
   3 import {
   4   CommentView,
   5   GetPersonDetailsResponse,
   6   Language,
   7   PersonViewSafe,
   8   PostView,
   9   SortType,
  10 } from "lemmy-js-client";
  11 import { CommentViewType, PersonDetailsView } from "../../interfaces";
  12 import { commentsToFlatNodes, setupTippy } from "../../utils";
  13 import { CommentNodes } from "../comment/comment-nodes";
  14 import { Paginator } from "../common/paginator";
  15 import { PostListing } from "../post/post-listing";
  16
  17 interface PersonDetailsProps {
  18   personRes: GetPersonDetailsResponse;
  19   admins: PersonViewSafe[];
  20   allLanguages: Language[];
  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={Some(this.props.admins)}
  97             moderators={None}
  98             maxCommentsShown={None}
  99             noBorder
 100             noIndent
 101             showCommunity
 102             showContext
 103             enableDownvotes={this.props.enableDownvotes}
 104             allLanguages={this.props.allLanguages}
 105           />
 106         );
 107       }
 108       case ItemEnum.Post: {
 109         let p = i.view as PostView;
 110         return (
 111           <PostListing
 112             key={i.id}
 113             post_view={p}
 114             admins={Some(this.props.admins)}
 115             duplicates={None}
 116             moderators={None}
 117             showCommunity
 118             enableDownvotes={this.props.enableDownvotes}
 119             enableNsfw={this.props.enableNsfw}
 120             allLanguages={this.props.allLanguages}
 121           />
 122         );
 123       }
 124       default:
 125         return <div />;
 126     }
 127   }
 128
 129   overview() {
 130     let id = 0;
 131     let comments: ItemType[] = this.props.personRes.comments.map(r => ({
 132       id: id++,
 133       type_: ItemEnum.Comment,
 134       view: r,
 135       published: r.comment.published,
 136       score: r.counts.score,
 137     }));
 138     let posts: ItemType[] = this.props.personRes.posts.map(r => ({
 139       id: id++,
 140       type_: ItemEnum.Post,
 141       view: r,
 142       published: r.post.published,
 143       score: r.counts.score,
 144     }));
 145
 146     let combined = [...comments, ...posts];
 147
 148     // Sort it
 149     if (this.props.sort === SortType.New) {
 150       combined.sort((a, b) => b.published.localeCompare(a.published));
 151     } else {
 152       combined.sort((a, b) => b.score - a.score);
 153     }
 154
 155     return (
 156       <div>
 157         {combined.map(i => [
 158           this.renderItemType(i),
 159           <hr key={i.type_} className="my-3" />,
 160         ])}
 161       </div>
 162     );
 163   }
 164
 165   comments() {
 166     return (
 167       <div>
 168         <CommentNodes
 169           nodes={commentsToFlatNodes(this.props.personRes.comments)}
 170           viewType={CommentViewType.Flat}
 171           admins={Some(this.props.admins)}
 172           moderators={None}
 173           maxCommentsShown={None}
 174           noIndent
 175           showCommunity
 176           showContext
 177           enableDownvotes={this.props.enableDownvotes}
 178           allLanguages={this.props.allLanguages}
 179         />
 180       </div>
 181     );
 182   }
 183
 184   posts() {
 185     return (
 186       <div>
 187         {this.props.personRes.posts.map(post => (
 188           <>
 189             <PostListing
 190               post_view={post}
 191               admins={Some(this.props.admins)}
 192               showCommunity
 193               duplicates={None}
 194               moderators={None}
 195               enableDownvotes={this.props.enableDownvotes}
 196               enableNsfw={this.props.enableNsfw}
 197               allLanguages={this.props.allLanguages}
 198             />
 199             <hr className="my-3" />
 200           </>
 201         ))}
 202       </div>
 203     );
 204   }
 205
 206   handlePageChange(val: number) {
 207     this.props.onPageChange(val);
 208   }
 209 }