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

   1 import classNames from "classnames";
   2 import { Component, linkEvent } from "inferno";
   3 import { PersonView, Site, SiteAggregates } from "lemmy-js-client";
   4 import { mdToHtml } from "../../markdown";
   5 import { I18NextService } from "../../services";
   6 import { Badges } from "../common/badges";
   7 import { BannerIconHeader } from "../common/banner-icon-header";
   8 import { Icon } from "../common/icon";
   9 import { PersonListing } from "../person/person-listing";
  10
  11 interface SiteSidebarProps {
  12   site: Site;
  13   showLocal: boolean;
  14   counts?: SiteAggregates;
  15   admins?: PersonView[];
  16   isMobile?: boolean;
  17 }
  18
  19 interface SiteSidebarState {
  20   collapsed: boolean;
  21 }
  22
  23 export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
  24   state: SiteSidebarState = {
  25     collapsed: false,
  26   };
  27
  28   constructor(props: any, context: any) {
  29     super(props, context);
  30   }
  31
  32   render() {
  33     return (
  34       <div className="site-sidebar accordion">
  35         <section id="sidebarInfo" className="card border-secondary mb-3">
  36           <header className="card-header" id="sidebarInfoHeader">
  37             {this.siteName()}
  38             {!this.state.collapsed && (
  39               <BannerIconHeader banner={this.props.site.banner} />
  40             )}
  41           </header>
  42
  43           {!this.state.collapsed && (
  44             <div id="sidebarInfoBody" aria-labelledby="sidebarInfoHeader">
  45               <div className="card-body">{this.siteInfo()}</div>
  46             </div>
  47           )}
  48         </section>
  49       </div>
  50     );
  51   }
  52
  53   siteName() {
  54     return (
  55       <div className={classNames({ "mb-2": !this.state.collapsed })}>
  56         <h5 className="mb-0 d-inline">{this.props.site.name}</h5>
  57         {!this.props.isMobile && (
  58           <button
  59             type="button"
  60             className="btn btn-sm"
  61             onClick={linkEvent(this, this.handleCollapseSidebar)}
  62             aria-label={
  63               this.state.collapsed
  64                 ? I18NextService.i18n.t("expand")
  65                 : I18NextService.i18n.t("collapse")
  66             }
  67             data-tippy-content={
  68               this.state.collapsed
  69                 ? I18NextService.i18n.t("expand")
  70                 : I18NextService.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       </div>
  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">{I18NextService.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 }