src/shared/components/community/community-link.tsx

   1 import { Component } from "inferno";
   2 import { Link } from "inferno-router";
   3 import { Community } from "lemmy-js-client";
   4 import { hostname, relTags, showAvatars } from "../../utils";
   5 import { PictrsImage } from "../common/pictrs-image";
   6
   7 interface CommunityLinkProps {
   8   community: Community;
   9   realLink?: boolean;
  10   useApubName?: boolean;
  11   muted?: boolean;
  12   hideAvatar?: boolean;
  13 }
  14
  15 export class CommunityLink extends Component<CommunityLinkProps, any> {
  16   constructor(props: any, context: any) {
  17     super(props, context);
  18   }
  19
  20   render() {
  21     const community = this.props.community;
  22     let name_: string, title: string, link: string;
  23     const local = community.local == null ? true : community.local;
  24     if (local) {
  25       name_ = community.name;
  26       title = community.title;
  27       link = `/c/${community.name}`;
  28     } else {
  29       const domain = hostname(community.actor_id);
  30       name_ = `${community.name}@${domain}`;
  31       title = `${community.title}@${domain}`;
  32       link = !this.props.realLink ? `/c/${name_}` : community.actor_id;
  33     }
  34
  35     const apubName = `!${name_}`;
  36     const displayName = this.props.useApubName ? apubName : title;
  37     return !this.props.realLink ? (
  38       <Link
  39         title={apubName}
  40         className={`${this.props.muted ? "text-muted" : ""}`}
  41         to={link}
  42       >
  43         {this.avatarAndName(displayName)}
  44       </Link>
  45     ) : (
  46       <a
  47         title={apubName}
  48         className={`${this.props.muted ? "text-muted" : ""}`}
  49         href={link}
  50         rel={relTags}
  51       >
  52         {this.avatarAndName(displayName)}
  53       </a>
  54     );
  55   }
  56
  57   avatarAndName(displayName: string) {
  58     const icon = this.props.community.icon;
  59     return (
  60       <>
  61         {!this.props.hideAvatar &&
  62           !this.props.community.removed &&
  63           showAvatars() &&
  64           icon && <PictrsImage src={icon} icon />}
  65         <span className="overflow-wrap-anywhere">{displayName}</span>
  66       </>
  67     );
  68   }
  69 }