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[];
18 interface SiteSidebarState {
22 export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
23 state: SiteSidebarState = {
27 constructor(props: any, context: any) {
28 super(props, context);
33 <div id="sidebarInfo" className="card border-secondary mb-3">
34 <div className="card-body">
36 <div className="mb-2">{this.siteName()}</div>
37 {!this.state.collapsed && (
39 <BannerIconHeader banner={this.props.site.banner} />
51 <h5 className="mb-0 d-inline">
52 {this.props.site.name}
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")}
59 {this.state.collapsed ? (
60 <Icon icon="plus-square" classes="icon-inline" />
62 <Icon icon="minus-square" classes="icon-inline" />
70 const site = this.props.site;
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)}
81 siteSidebar(sidebar: string) {
83 <div className="md-div" dangerouslySetInnerHTML={mdToHtml(sidebar)} />
87 admins(admins: PersonView[]) {
89 <ul className="mt-1 list-inline small mb-0">
90 <li className="list-inline-item">{i18n.t("admins")}:</li>
92 <li key={av.person.id} className="list-inline-item">
93 <PersonListing person={av.person} />
100 badges(siteAggregates: SiteAggregates) {
101 const counts = siteAggregates;
102 const online = this.props.online ?? 1;
104 <ul className="my-2 list-inline">
105 <li className="list-inline-item badge badge-secondary">
106 {i18n.t("number_online", {
108 formattedCount: numToSI(online),
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),
118 {i18n.t("number_of_users", {
119 count: Number(counts.users_active_day),
120 formattedCount: numToSI(counts.users_active_day),
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),
131 {i18n.t("number_of_users", {
132 count: Number(counts.users_active_week),
133 formattedCount: numToSI(counts.users_active_week),
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),
144 {i18n.t("number_of_users", {
145 count: Number(counts.users_active_month),
146 formattedCount: numToSI(counts.users_active_month),
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),
157 {i18n.t("number_of_users", {
158 count: Number(counts.users_active_half_year),
159 formattedCount: numToSI(counts.users_active_half_year),
161 / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
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),
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),
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),
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),
187 <li className="list-inline-item">
188 <Link className="badge badge-primary" to="/modlog">
196 handleCollapseSidebar(i: SiteSidebar) {
197 i.setState({ collapsed: !i.state.collapsed });