ui/src/components/user-listing.tsx

   1 import { Component } from 'inferno';
   2 import { Link } from 'inferno-router';
   3 import { UserView } from 'lemmy-js-client';
   4 import {
   5   pictrsAvatarThumbnail,
   6   showAvatars,
   7   hostname,
   8   isCakeDay,
   9 } from '../utils';
  10 import { CakeDay } from './cake-day';
  11
  12 export interface UserOther {
  13   name: string;
  14   preferred_username?: string;
  15   id?: number; // Necessary if its federated
  16   avatar?: string;
  17   local?: boolean;
  18   actor_id?: string;
  19   published?: string;
  20 }
  21
  22 interface UserListingProps {
  23   user: UserView | UserOther;
  24   realLink?: boolean;
  25   useApubName?: boolean;
  26   muted?: boolean;
  27   hideAvatar?: boolean;
  28 }
  29
  30 export class UserListing extends Component<UserListingProps, any> {
  31   constructor(props: any, context: any) {
  32     super(props, context);
  33   }
  34
  35   render() {
  36     let user = this.props.user;
  37     let local = user.local == null ? true : user.local;
  38     let apubName: string, link: string;
  39
  40     if (local) {
  41       apubName = `@${user.name}`;
  42       link = `/u/${user.name}`;
  43     } else {
  44       apubName = `@${user.name}@${hostname(user.actor_id)}`;
  45       link = !this.props.realLink ? `/user/${user.id}` : user.actor_id;
  46     }
  47
  48     let displayName = this.props.useApubName
  49       ? apubName
  50       : user.preferred_username
  51       ? user.preferred_username
  52       : apubName;
  53
  54     return (
  55       <>
  56         <Link
  57           title={apubName}
  58           className={this.props.muted ? 'text-muted' : 'text-info'}
  59           to={link}
  60         >
  61           {!this.props.hideAvatar && user.avatar && showAvatars() && (
  62             <img
  63               style="width: 2rem; height: 2rem;"
  64               src={pictrsAvatarThumbnail(user.avatar)}
  65               class="rounded-circle mr-2"
  66             />
  67           )}
  68           <span>{displayName}</span>
  69         </Link>
  70
  71         {isCakeDay(user.published) && <CakeDay creatorName={apubName} />}
  72       </>
  73     );
  74   }
  75 }