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

   1 import { Component } from "inferno";
   2 import { Link } from "inferno-router";
   3 import { PersonSafe } 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: PersonSafe;
  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 == null ? true : 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
  41       ? person.display_name
  42       : apubName;
  43
  44     if (this.props.showApubName && !local && person.display_name) {
  45       displayName = `${displayName} (${apubName})`;
  46     }
  47
  48     return (
  49       <>
  50         {!this.props.realLink ? (
  51           <Link
  52             title={apubName}
  53             className={this.props.muted ? "text-muted" : "text-info"}
  54             to={link}
  55           >
  56             {this.avatarAndName(displayName)}
  57           </Link>
  58         ) : (
  59           <a
  60             title={apubName}
  61             className={this.props.muted ? "text-muted" : "text-info"}
  62             href={link}
  63             rel={relTags}
  64           >
  65             {this.avatarAndName(displayName)}
  66           </a>
  67         )}
  68
  69         {isCakeDay(person.published) && <CakeDay creatorName={apubName} />}
  70       </>
  71     );
  72   }
  73
  74   avatarAndName(displayName: string) {
  75     let person = this.props.person;
  76     return (
  77       <>
  78         {!this.props.hideAvatar && person.avatar && showAvatars() && (
  79           <PictrsImage src={person.avatar} icon />
  80         )}
  81         <span>{displayName}</span>
  82       </>
  83     );
  84   }
  85 }