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 "../../markdown";
   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="site-sidebar 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           {!this.state.collapsed && (
  46             <div id="sidebarInfoBody" aria-labelledby="sidebarInfoHeader">
  47               <div className="card-body">{this.siteInfo()}</div>
  48             </div>
  49           )}
  50         </section>
  51       </div>
  52     );
  53   }
  54
  55   siteName() {
  56     return (
  57       <>
  58         <h5 className="mb-0 d-inline">{this.props.site.name}</h5>
  59         {!this.props.isMobile && (
  60           <button
  61             type="button"
  62             className="btn btn-sm"
  63             onClick={linkEvent(this, this.handleCollapseSidebar)}
  64             aria-label={
  65               this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
  66             }
  67             data-tippy-content={
  68               this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
  69             }
  70             data-bs-toggle="collapse"
  71             data-bs-target="#sidebarInfoBody"
  72             aria-expanded="true"
  73             aria-controls="sidebarInfoBody"
  74           >
  75             {this.state.collapsed ? (
  76               <Icon icon="plus-square" classes="icon-inline" />
  77             ) : (
  78               <Icon icon="minus-square" classes="icon-inline" />
  79             )}
  80           </button>
  81         )}
  82       </>
  83     );
  84   }
  85
  86   siteInfo() {
  87     const site = this.props.site;
  88     return (
  89       <div>
  90         {site.description && <h6>{site.description}</h6>}
  91         {site.sidebar && this.siteSidebar(site.sidebar)}
  92         {this.props.counts && <Badges counts={this.props.counts} />}
  93         {this.props.admins && this.admins(this.props.admins)}
  94       </div>
  95     );
  96   }
  97
  98   siteSidebar(sidebar: string) {
  99     return (
 100       <div className="md-div" dangerouslySetInnerHTML={mdToHtml(sidebar)} />
 101     );
 102   }
 103
 104   admins(admins: PersonView[]) {
 105     return (
 106       <ul className="mt-1 list-inline small mb-0">
 107         <li className="list-inline-item">{i18n.t("admins")}:</li>
 108         {admins.map(av => (
 109           <li key={av.person.id} className="list-inline-item">
 110             <PersonListing person={av.person} />
 111           </li>
 112         ))}
 113       </ul>
 114     );
 115   }
 116
 117   handleCollapseSidebar(i: SiteSidebar) {
 118     i.setState({ collapsed: !i.state.collapsed });
 119   }
 120 }