ui/src/components/community-link.tsx

   1 import { Component } from 'inferno';
   2 import { Link } from 'inferno-router';
   3 import { Community } from 'lemmy-js-client';
   4 import { hostname, pictrsAvatarThumbnail, showAvatars } from '../utils';
   5
   6 interface CommunityOther {
   7   name: string;
   8   id?: number; // Necessary if its federated
   9   icon?: string;
  10   local?: boolean;
  11   actor_id?: string;
  12 }
  13
  14 interface CommunityLinkProps {
  15   community: Community | CommunityOther;
  16   realLink?: boolean;
  17   useApubName?: boolean;
  18   muted?: boolean;
  19   hideAvatar?: boolean;
  20 }
  21
  22 export class CommunityLink extends Component<CommunityLinkProps, any> {
  23   constructor(props: any, context: any) {
  24     super(props, context);
  25   }
  26
  27   render() {
  28     let community = this.props.community;
  29     let name_: string, link: string;
  30     let local = community.local == null ? true : community.local;
  31     if (local) {
  32       name_ = community.name;
  33       link = `/c/${community.name}`;
  34     } else {
  35       name_ = `${community.name}@${hostname(community.actor_id)}`;
  36       link = !this.props.realLink
  37         ? `/community/${community.id}`
  38         : community.actor_id;
  39     }
  40
  41     let apubName = `!${name_}`;
  42     let displayName = this.props.useApubName ? apubName : name_;
  43     return (
  44       <Link
  45         title={apubName}
  46         className={`${this.props.muted ? 'text-muted' : ''}`}
  47         to={link}
  48       >
  49         {!this.props.hideAvatar && community.icon && showAvatars() && (
  50           <img
  51             style="width: 2rem; height: 2rem;"
  52             src={pictrsAvatarThumbnail(community.icon)}
  53             class="rounded-circle mr-2"
  54           />
  55         )}
  56         <span>{displayName}</span>
  57       </Link>
  58     );
  59   }
  60 }