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

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