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

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