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