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

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