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("d-inline-flex align-items-baseline", {
  53               "text-muted": this.props.muted,
  54               "text-info": !this.props.muted,
  55             })}
  56             to={link}
  57           >
  58             {this.avatarAndName(displayName)}
  59           </Link>
  60         ) : (
  61           <a
  62             title={apubName}
  63             className={`d-inline-flex align-items-baseline ${
  64               this.props.muted ? "text-muted" : "text-info"
  65             }`}
  66             href={link}
  67             rel={relTags}
  68           >
  69             {this.avatarAndName(displayName)}
  70           </a>
  71         )}
  72
  73         {isCakeDay(person.published) && <CakeDay creatorName={apubName} />}
  74       </>
  75     );
  76   }
  77
  78   avatarAndName(displayName: string) {
  79     const avatar = this.props.person.avatar;
  80     return (
  81       <>
  82         {!this.props.hideAvatar &&
  83           !this.props.person.banned &&
  84           showAvatars() && (
  85             <PictrsImage
  86               src={avatar ?? "/static/assets/icons/icon-96x96.png"}
  87               icon
  88             />
  89           )}
  90         <span>{displayName}</span>
  91       </>
  92     );
  93   }
  94 }