src/shared/components/user-details.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { i18n } from '../i18next';
   3 import { Post, Comment, SortType, UserDetailsResponse } from 'lemmy-js-client';
   4 import { UserDetailsView } from '../interfaces';
   5 import { commentsToFlatNodes, setupTippy } from '../utils';
   6 import { PostListing } from './post-listing';
   7 import { CommentNodes } from './comment-nodes';
   8
   9 interface UserDetailsProps {
  10   userRes: UserDetailsResponse;
  11   page: number;
  12   limit: number;
  13   sort: SortType;
  14   enableDownvotes: boolean;
  15   enableNsfw: boolean;
  16   view: UserDetailsView;
  17   onPageChange(page: number): number | any;
  18 }
  19
  20 interface UserDetailsState {}
  21
  22 export class UserDetails extends Component<UserDetailsProps, UserDetailsState> {
  23   constructor(props: any, context: any) {
  24     super(props, context);
  25   }
  26
  27   // TODO needed here?
  28   componentDidMount() {
  29     setupTippy();
  30   }
  31
  32   // TODO wut?
  33   // componentDidUpdate(lastProps: UserDetailsProps) {
  34   //   for (const key of Object.keys(lastProps)) {
  35   //     if (lastProps[key] !== this.props[key]) {
  36   //       this.fetchUserData();
  37   //       break;
  38   //     }
  39   //   }
  40   // }
  41
  42   render() {
  43     return (
  44       <div>
  45         {this.viewSelector(this.props.view)}
  46         {this.paginator()}
  47       </div>
  48     );
  49   }
  50
  51   viewSelector(view: UserDetailsView) {
  52     if (view === UserDetailsView.Overview || view === UserDetailsView.Saved) {
  53       return this.overview();
  54     } else if (view === UserDetailsView.Comments) {
  55       return this.comments();
  56     } else if (view === UserDetailsView.Posts) {
  57       return this.posts();
  58     } else {
  59       return null;
  60     }
  61   }
  62
  63   overview() {
  64     const comments = this.props.userRes.comments.map((c: Comment) => {
  65       return { type: 'comments', data: c };
  66     });
  67     const posts = this.props.userRes.posts.map((p: Post) => {
  68       return { type: 'posts', data: p };
  69     });
  70
  71     const combined: { type: string; data: Comment | Post }[] = [
  72       ...comments,
  73       ...posts,
  74     ];
  75
  76     // Sort it
  77     if (this.props.sort === SortType.New) {
  78       combined.sort((a, b) => b.data.published.localeCompare(a.data.published));
  79     } else {
  80       combined.sort((a, b) => b.data.score - a.data.score);
  81     }
  82
  83     return (
  84       <div>
  85         {combined.map(i => (
  86           <>
  87             <div>
  88               {i.type === 'posts' ? (
  89                 <PostListing
  90                   communities={[]}
  91                   key={(i.data as Post).id}
  92                   post={i.data as Post}
  93                   admins={this.props.userRes.admins}
  94                   showCommunity
  95                   enableDownvotes={this.props.enableDownvotes}
  96                   enableNsfw={this.props.enableNsfw}
  97                 />
  98               ) : (
  99                 <CommentNodes
 100                   key={(i.data as Comment).id}
 101                   nodes={[{ comment: i.data as Comment }]}
 102                   admins={this.props.userRes.admins}
 103                   noBorder
 104                   noIndent
 105                   showCommunity
 106                   showContext
 107                   enableDownvotes={this.props.enableDownvotes}
 108                 />
 109               )}
 110             </div>
 111             <hr class="my-3" />
 112           </>
 113         ))}
 114       </div>
 115     );
 116   }
 117
 118   comments() {
 119     return (
 120       <div>
 121         <CommentNodes
 122           nodes={commentsToFlatNodes(this.props.userRes.comments)}
 123           admins={this.props.userRes.admins}
 124           noIndent
 125           showCommunity
 126           showContext
 127           enableDownvotes={this.props.enableDownvotes}
 128         />
 129       </div>
 130     );
 131   }
 132
 133   posts() {
 134     return (
 135       <div>
 136         {this.props.userRes.posts.map(post => (
 137           <>
 138             <PostListing
 139               communities={[]}
 140               post={post}
 141               admins={this.props.userRes.admins}
 142               showCommunity
 143               enableDownvotes={this.props.enableDownvotes}
 144               enableNsfw={this.props.enableNsfw}
 145             />
 146             <hr class="my-3" />
 147           </>
 148         ))}
 149       </div>
 150     );
 151   }
 152
 153   paginator() {
 154     return (
 155       <div class="my-2">
 156         {this.props.page > 1 && (
 157           <button
 158             class="btn btn-secondary mr-1"
 159             onClick={linkEvent(this, this.prevPage)}
 160           >
 161             {i18n.t('prev')}
 162           </button>
 163         )}
 164         {this.props.userRes.comments.length + this.props.userRes.posts.length >
 165           0 && (
 166           <button
 167             class="btn btn-secondary"
 168             onClick={linkEvent(this, this.nextPage)}
 169           >
 170             {i18n.t('next')}
 171           </button>
 172         )}
 173       </div>
 174     );
 175   }
 176
 177   nextPage(i: UserDetails) {
 178     i.props.onPageChange(i.props.page + 1);
 179   }
 180
 181   prevPage(i: UserDetails) {
 182     i.props.onPageChange(i.props.page - 1);
 183   }
 184 }