src/shared/components/person/person-listing.tsx

   1 import { Component } from "inferno";
   2 import { Link } from "inferno-router";
   3 import { Person } from "lemmy-js-client";
   4 import { hostname, isCakeDay, relTags, showAvatars } from "../../utils";
   5 import { PictrsImage } from "../common/pictrs-image";
   6 import { CakeDay } from "./cake-day";
   7
   8 interface PersonListingProps {
   9   person: Person;
  10   realLink?: boolean;
  11   useApubName?: boolean;
  12   muted?: boolean;
  13   hideAvatar?: boolean;
  14   showApubName?: boolean;
  15 }
  16
  17 export class PersonListing extends Component<PersonListingProps, any> {
  18   constructor(props: any, context: any) {
  19     super(props, context);
  20   }
  21
  22   render() {
  23     let person = this.props.person;
  24     let local = person.local;
  25     let apubName: string, link: string;
  26
  27     if (local) {
  28       apubName = `@${person.name}`;
  29       link = `/u/${person.name}`;
  30     } else {
  31       let domain = hostname(person.actor_id);
  32       apubName = `@${person.name}@${domain}`;
  33       link = !this.props.realLink
  34         ? `/u/${person.name}@${domain}`
  35         : person.actor_id;
  36     }
  37
  38     let displayName = this.props.useApubName
  39       ? apubName
  40       : person.display_name ?? apubName;
  41
  42     if (this.props.showApubName && !local && person.display_name) {
  43       displayName = `${displayName} (${apubName})`;
  44     }
  45
  46     return (
  47       <>
  48         {!this.props.realLink ? (
  49           <Link
  50             title={apubName}
  51             className={this.props.muted ? "text-muted" : "text-info"}
  52             to={link}
  53           >
  54             {this.avatarAndName(displayName)}
  55           </Link>
  56         ) : (
  57           <a
  58             title={apubName}
  59             className={this.props.muted ? "text-muted" : "text-info"}
  60             href={link}
  61             rel={relTags}
  62           >
  63             {this.avatarAndName(displayName)}
  64           </a>
  65         )}
  66
  67         {isCakeDay(person.published) && <CakeDay creatorName={apubName} />}
  68       </>
  69     );
  70   }
  71
  72   avatarAndName(displayName: string) {
  73     let avatar = this.props.person.avatar;
  74     return (
  75       <>
  76         {avatar &&
  77           !this.props.hideAvatar &&
  78           !this.props.person.banned &&
  79           showAvatars() && <PictrsImage src={avatar} icon />}
  80         <span>{displayName}</span>
  81       </>
  82     );
  83   }
  84 }