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