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                   key={(i.data as Post).id}
  91                   post={i.data as Post}
  92                   admins={this.props.userRes.admins}
  93                   showCommunity
  94                   enableDownvotes={this.props.enableDownvotes}
  95                   enableNsfw={this.props.enableNsfw}
  96                 />
  97               ) : (
  98                 <CommentNodes
  99                   key={(i.data as Comment).id}
 100                   nodes={[{ comment: i.data as Comment }]}
 101                   admins={this.props.userRes.admins}
 102                   noBorder
 103                   noIndent
 104                   showCommunity
 105                   showContext
 106                   enableDownvotes={this.props.enableDownvotes}
 107                 />
 108               )}
 109             </div>
 110             <hr class="my-3" />
 111           </>
 112         ))}
 113       </div>
 114     );
 115   }
 116
 117   comments() {
 118     return (
 119       <div>
 120         <CommentNodes
 121           nodes={commentsToFlatNodes(this.props.userRes.comments)}
 122           admins={this.props.userRes.admins}
 123           noIndent
 124           showCommunity
 125           showContext
 126           enableDownvotes={this.props.enableDownvotes}
 127         />
 128       </div>
 129     );
 130   }
 131
 132   posts() {
 133     return (
 134       <div>
 135         {this.props.userRes.posts.map(post => (
 136           <>
 137             <PostListing
 138               post={post}
 139               admins={this.props.userRes.admins}
 140               showCommunity
 141               enableDownvotes={this.props.enableDownvotes}
 142               enableNsfw={this.props.enableNsfw}
 143             />
 144             <hr class="my-3" />
 145           </>
 146         ))}
 147       </div>
 148     );
 149   }
 150
 151   paginator() {
 152     return (
 153       <div class="my-2">
 154         {this.props.page > 1 && (
 155           <button
 156             class="btn btn-secondary mr-1"
 157             onClick={linkEvent(this, this.prevPage)}
 158           >
 159             {i18n.t('prev')}
 160           </button>
 161         )}
 162         {this.props.userRes.comments.length + this.props.userRes.posts.length >
 163           0 && (
 164           <button
 165             class="btn btn-secondary"
 166             onClick={linkEvent(this, this.nextPage)}
 167           >
 168             {i18n.t('next')}
 169           </button>
 170         )}
 171       </div>
 172     );
 173   }
 174
 175   nextPage(i: UserDetails) {
 176     i.props.onPageChange(i.props.page + 1);
 177   }
 178
 179   prevPage(i: UserDetails) {
 180     i.props.onPageChange(i.props.page - 1);
 181   }
 182 }