src/shared/components/home/site-sidebar.tsx

   1 import { Component, linkEvent } from "inferno";
   2 import { PersonView, Site, SiteAggregates } from "lemmy-js-client";
   3 import { i18n } from "../../i18next";
   4 import { mdToHtml } from "../../utils";
   5 import { Badges } from "../common/badges";
   6 import { BannerIconHeader } from "../common/banner-icon-header";
   7 import { Icon } from "../common/icon";
   8 import { PersonListing } from "../person/person-listing";
   9
  10 interface SiteSidebarProps {
  11   site: Site;
  12   showLocal: boolean;
  13   counts?: SiteAggregates;
  14   admins?: PersonView[];
  15   isMobile?: boolean;
  16 }
  17
  18 interface SiteSidebarState {
  19   collapsed: boolean;
  20 }
  21
  22 export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
  23   state: SiteSidebarState = {
  24     collapsed: false,
  25   };
  26
  27   constructor(props: any, context: any) {
  28     super(props, context);
  29   }
  30
  31   render() {
  32     return (
  33       <div className="accordion">
  34         <section id="sidebarInfo" className="card border-secondary mb-3">
  35           <header
  36             className="card-header d-flex align-items-center"
  37             id="sidebarInfoHeader"
  38           >
  39             {this.siteName()}
  40             {!this.state.collapsed && (
  41               <BannerIconHeader banner={this.props.site.banner} />
  42             )}
  43           </header>
  44
  45           <div
  46             id="sidebarInfoBody"
  47             className="collapse show"
  48             aria-labelledby="sidebarInfoHeader"
  49           >
  50             <div className="card-body">{this.siteInfo()}</div>
  51           </div>
  52         </section>
  53       </div>
  54     );
  55   }
  56
  57   siteName() {
  58     return (
  59       <>
  60         <h5 className="mb-0 d-inline">{this.props.site.name}</h5>
  61         {!this.props.isMobile && (
  62           <button
  63             type="button"
  64             className="btn btn-sm"
  65             onClick={linkEvent(this, this.handleCollapseSidebar)}
  66             aria-label={
  67               this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
  68             }
  69             data-tippy-content={
  70               this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
  71             }
  72             data-bs-toggle="collapse"
  73             data-bs-target="#sidebarInfoBody"
  74             aria-expanded="true"
  75             aria-controls="sidebarInfoBody"
  76           >
  77             {this.state.collapsed ? (
  78               <Icon icon="plus-square" classes="icon-inline" />
  79             ) : (
  80               <Icon icon="minus-square" classes="icon-inline" />
  81             )}
  82           </button>
  83         )}
  84       </>
  85     );
  86   }
  87
  88   siteInfo() {
  89     const site = this.props.site;
  90     return (
  91       <div>
  92         {site.description && <h6>{site.description}</h6>}
  93         {site.sidebar && this.siteSidebar(site.sidebar)}
  94         {this.props.counts && <Badges counts={this.props.counts} />}
  95         {this.props.admins && this.admins(this.props.admins)}
  96       </div>
  97     );
  98   }
  99
 100   siteSidebar(sidebar: string) {
 101     return (
 102       <div className="md-div" dangerouslySetInnerHTML={mdToHtml(sidebar)} />
 103     );
 104   }
 105
 106   admins(admins: PersonView[]) {
 107     return (
 108       <ul className="mt-1 list-inline small mb-0">
 109         <li className="list-inline-item">{i18n.t("admins")}:</li>
 110         {admins.map(av => (
 111           <li key={av.person.id} className="list-inline-item">
 112             <PersonListing person={av.person} />
 113           </li>
 114         ))}
 115       </ul>
 116     );
 117   }
 118
 119   handleCollapseSidebar(i: SiteSidebar) {
 120     i.setState({ collapsed: !i.state.collapsed });
 121   }
 122 }