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

   1 import { Component, linkEvent } from "inferno";
   2 import { Link } from "inferno-router";
   3 import { PersonView, Site, SiteAggregates } from "lemmy-js-client";
   4 import { i18n } from "../../i18next";
   5 import { mdToHtml, numToSI } from "../../utils";
   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 }
  16
  17 interface SiteSidebarState {
  18   collapsed: boolean;
  19 }
  20
  21 export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
  22   state: SiteSidebarState = {
  23     collapsed: false,
  24   };
  25
  26   constructor(props: any, context: any) {
  27     super(props, context);
  28   }
  29
  30   render() {
  31     return (
  32       <section id="sidebarInfo" className="card border-secondary mb-3">
  33         <div className="card-body">
  34           <div>
  35             <div className="mb-2">{this.siteName()}</div>
  36             {!this.state.collapsed && (
  37               <>
  38                 <BannerIconHeader banner={this.props.site.banner} />
  39                 {this.siteInfo()}
  40               </>
  41             )}
  42           </div>
  43         </div>
  44       </section>
  45     );
  46   }
  47
  48   siteName() {
  49     return (
  50       <h5 className="mb-0 d-inline">
  51         {this.props.site.name}
  52         <button
  53           className="btn btn-sm text-muted"
  54           onClick={linkEvent(this, this.handleCollapseSidebar)}
  55           aria-label={i18n.t("collapse")}
  56           data-tippy-content={i18n.t("collapse")}
  57         >
  58           {this.state.collapsed ? (
  59             <Icon icon="plus-square" classes="icon-inline" />
  60           ) : (
  61             <Icon icon="minus-square" classes="icon-inline" />
  62           )}
  63         </button>
  64       </h5>
  65     );
  66   }
  67
  68   siteInfo() {
  69     const site = this.props.site;
  70     return (
  71       <div>
  72         {site.description && <h6>{site.description}</h6>}
  73         {site.sidebar && this.siteSidebar(site.sidebar)}
  74         {this.props.counts && this.badges(this.props.counts)}
  75         {this.props.admins && this.admins(this.props.admins)}
  76       </div>
  77     );
  78   }
  79
  80   siteSidebar(sidebar: string) {
  81     return (
  82       <div className="md-div" dangerouslySetInnerHTML={mdToHtml(sidebar)} />
  83     );
  84   }
  85
  86   admins(admins: PersonView[]) {
  87     return (
  88       <ul className="mt-1 list-inline small mb-0">
  89         <li className="list-inline-item">{i18n.t("admins")}:</li>
  90         {admins.map(av => (
  91           <li key={av.person.id} className="list-inline-item">
  92             <PersonListing person={av.person} />
  93           </li>
  94         ))}
  95       </ul>
  96     );
  97   }
  98
  99   badges(siteAggregates: SiteAggregates) {
 100     const counts = siteAggregates;
 101     return (
 102       <ul className="my-2 list-inline">
 103         <li
 104           className="list-inline-item badge badge-secondary pointer"
 105           data-tippy-content={i18n.t("active_users_in_the_last_day", {
 106             count: Number(counts.users_active_day),
 107             formattedCount: numToSI(counts.users_active_day),
 108           })}
 109         >
 110           {i18n.t("number_of_users", {
 111             count: Number(counts.users_active_day),
 112             formattedCount: numToSI(counts.users_active_day),
 113           })}{" "}
 114           / {i18n.t("day")}
 115         </li>
 116         <li
 117           className="list-inline-item badge badge-secondary pointer"
 118           data-tippy-content={i18n.t("active_users_in_the_last_week", {
 119             count: Number(counts.users_active_week),
 120             formattedCount: numToSI(counts.users_active_week),
 121           })}
 122         >
 123           {i18n.t("number_of_users", {
 124             count: Number(counts.users_active_week),
 125             formattedCount: numToSI(counts.users_active_week),
 126           })}{" "}
 127           / {i18n.t("week")}
 128         </li>
 129         <li
 130           className="list-inline-item badge badge-secondary pointer"
 131           data-tippy-content={i18n.t("active_users_in_the_last_month", {
 132             count: Number(counts.users_active_month),
 133             formattedCount: numToSI(counts.users_active_month),
 134           })}
 135         >
 136           {i18n.t("number_of_users", {
 137             count: Number(counts.users_active_month),
 138             formattedCount: numToSI(counts.users_active_month),
 139           })}{" "}
 140           / {i18n.t("month")}
 141         </li>
 142         <li
 143           className="list-inline-item badge badge-secondary pointer"
 144           data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
 145             count: Number(counts.users_active_half_year),
 146             formattedCount: numToSI(counts.users_active_half_year),
 147           })}
 148         >
 149           {i18n.t("number_of_users", {
 150             count: Number(counts.users_active_half_year),
 151             formattedCount: numToSI(counts.users_active_half_year),
 152           })}{" "}
 153           / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
 154         </li>
 155         <li className="list-inline-item badge badge-secondary">
 156           {i18n.t("number_of_users", {
 157             count: Number(counts.users),
 158             formattedCount: numToSI(counts.users),
 159           })}
 160         </li>
 161         <li className="list-inline-item badge badge-secondary">
 162           {i18n.t("number_of_communities", {
 163             count: Number(counts.communities),
 164             formattedCount: numToSI(counts.communities),
 165           })}
 166         </li>
 167         <li className="list-inline-item badge badge-secondary">
 168           {i18n.t("number_of_posts", {
 169             count: Number(counts.posts),
 170             formattedCount: numToSI(counts.posts),
 171           })}
 172         </li>
 173         <li className="list-inline-item badge badge-secondary">
 174           {i18n.t("number_of_comments", {
 175             count: Number(counts.comments),
 176             formattedCount: numToSI(counts.comments),
 177           })}
 178         </li>
 179         <li className="list-inline-item">
 180           <Link className="badge badge-primary" to="/modlog">
 181             {i18n.t("modlog")}
 182           </Link>
 183         </li>
 184       </ul>
 185     );
 186   }
 187
 188   handleCollapseSidebar(i: SiteSidebar) {
 189     i.setState({ collapsed: !i.state.collapsed });
 190   }
 191 }