src/shared/components/user-listing.tsx

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