ui/src/components/user-listing.tsx

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