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";
10 interface SiteSidebarProps {
13 counts?: SiteAggregates;
14 admins?: PersonView[];
17 interface SiteSidebarState {
21 export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
22 state: SiteSidebarState = {
26 constructor(props: any, context: any) {
27 super(props, context);
32 <div className="card border-secondary mb-3">
33 <div className="card-body">
35 <div className="mb-2">{this.siteName()}</div>
36 {!this.state.collapsed && (
38 <BannerIconHeader banner={this.props.site.banner} />
50 <h5 className="mb-0 d-inline">
51 {this.props.site.name}
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")}
58 {this.state.collapsed ? (
59 <Icon icon="plus-square" classes="icon-inline" />
61 <Icon icon="minus-square" classes="icon-inline" />
69 const site = this.props.site;
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)}
80 siteSidebar(sidebar: string) {
82 <div className="md-div" dangerouslySetInnerHTML={mdToHtml(sidebar)} />
86 admins(admins: PersonView[]) {
88 <ul className="mt-1 list-inline small mb-0">
89 <li className="list-inline-item">{i18n.t("admins")}:</li>
91 <li key={av.person.id} className="list-inline-item">
92 <PersonListing person={av.person} />
99 badges(siteAggregates: SiteAggregates) {
100 const counts = siteAggregates;
102 <ul className="my-2 list-inline">
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),
110 {i18n.t("number_of_users", {
111 count: Number(counts.users_active_day),
112 formattedCount: numToSI(counts.users_active_day),
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),
123 {i18n.t("number_of_users", {
124 count: Number(counts.users_active_week),
125 formattedCount: numToSI(counts.users_active_week),
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),
136 {i18n.t("number_of_users", {
137 count: Number(counts.users_active_month),
138 formattedCount: numToSI(counts.users_active_month),
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),
149 {i18n.t("number_of_users", {
150 count: Number(counts.users_active_half_year),
151 formattedCount: numToSI(counts.users_active_half_year),
153 / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
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),
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),
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),
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),
179 <li className="list-inline-item">
180 <Link className="badge badge-primary" to="/modlog">
188 handleCollapseSidebar(i: SiteSidebar) {
189 i.setState({ collapsed: !i.state.collapsed });