1 import { Component, linkEvent } from "inferno";
2 import { Link } from "inferno-router";
3 import { PersonViewSafe, Site, SiteAggregates } from "lemmy-js-client";
4 import { i18n } from "../../i18next";
5 import { UserService } from "../../services";
6 import { mdToHtml, numToSI } from "../../utils";
7 import { BannerIconHeader } from "../common/banner-icon-header";
8 import { Icon } from "../common/icon";
9 import { PersonListing } from "../person/person-listing";
10 import { SiteForm } from "./site-form";
12 interface SiteSidebarProps {
15 counts?: SiteAggregates;
16 admins?: PersonViewSafe[];
20 interface SiteSidebarState {
25 export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
26 private emptyState: SiteSidebarState = {
31 constructor(props: any, context: any) {
32 super(props, context);
33 this.state = this.emptyState;
34 this.handleEditCancel = this.handleEditCancel.bind(this);
35 this.handleEditSite = this.handleEditSite.bind(this);
39 let site = this.props.site;
41 <div class="card border-secondary mb-3">
42 <div class="card-body">
43 {!this.state.showEdit ? (
47 {this.props.admins && this.adminButtons()}
49 {!this.state.collapsed && (
51 <BannerIconHeader banner={site.banner} />
59 showLocal={this.props.showLocal}
60 onEdit={this.handleEditSite}
61 onCancel={this.handleEditCancel}
70 let site = this.props.site;
73 <h5 class="mb-0 d-inline">
76 class="btn btn-sm text-muted"
77 onClick={linkEvent(this, this.handleCollapseSidebar)}
78 aria-label={i18n.t("collapse")}
79 data-tippy-content={i18n.t("collapse")}
81 {this.state.collapsed ? (
82 <Icon icon="plus-square" classes="icon-inline" />
84 <Icon icon="minus-square" classes="icon-inline" />
93 let site = this.props.site;
96 {site.description && <h6>{site.description}</h6>}
97 {site.sidebar && this.siteSidebar()}
98 {this.props.counts && this.badges()}
99 {this.props.admins && this.admins()}
107 <ul class="list-inline mb-1 text-muted font-weight-bold">
108 <li className="list-inline-item-action">
110 class="btn btn-link d-inline-block text-muted"
111 onClick={linkEvent(this, this.handleEditClick)}
112 aria-label={i18n.t("edit")}
113 data-tippy-content={i18n.t("edit")}
115 <Icon icon="edit" classes="icon-inline" />
127 dangerouslySetInnerHTML={mdToHtml(this.props.site.sidebar)}
134 <ul class="mt-1 list-inline small mb-0">
135 <li class="list-inline-item">{i18n.t("admins")}:</li>
136 {this.props.admins?.map(av => (
137 <li class="list-inline-item">
138 <PersonListing person={av.person} />
146 let counts = this.props.counts;
147 let online = this.props.online;
149 <ul class="my-2 list-inline">
150 <li className="list-inline-item badge badge-secondary">
151 {i18n.t("number_online", {
153 formattedCount: numToSI(online),
157 className="list-inline-item badge badge-secondary pointer"
158 data-tippy-content={i18n.t("active_users_in_the_last_day", {
159 count: counts.users_active_day,
160 formattedCount: numToSI(counts.users_active_day),
163 {i18n.t("number_of_users", {
164 count: counts.users_active_day,
165 formattedCount: numToSI(counts.users_active_day),
170 className="list-inline-item badge badge-secondary pointer"
171 data-tippy-content={i18n.t("active_users_in_the_last_week", {
172 count: counts.users_active_week,
173 formattedCount: counts.users_active_week,
176 {i18n.t("number_of_users", {
177 count: counts.users_active_week,
178 formattedCount: numToSI(counts.users_active_week),
183 className="list-inline-item badge badge-secondary pointer"
184 data-tippy-content={i18n.t("active_users_in_the_last_month", {
185 count: counts.users_active_month,
186 formattedCount: counts.users_active_month,
189 {i18n.t("number_of_users", {
190 count: counts.users_active_month,
191 formattedCount: numToSI(counts.users_active_month),
196 className="list-inline-item badge badge-secondary pointer"
197 data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
198 count: counts.users_active_half_year,
199 formattedCount: counts.users_active_half_year,
202 {i18n.t("number_of_users", {
203 count: counts.users_active_half_year,
204 formattedCount: numToSI(counts.users_active_half_year),
206 / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
208 <li className="list-inline-item badge badge-secondary">
209 {i18n.t("number_of_users", {
211 formattedCount: numToSI(counts.users),
214 <li className="list-inline-item badge badge-secondary">
215 {i18n.t("number_of_communities", {
216 count: counts.communities,
217 formattedCount: numToSI(counts.communities),
220 <li className="list-inline-item badge badge-secondary">
221 {i18n.t("number_of_posts", {
223 formattedCount: numToSI(counts.posts),
226 <li className="list-inline-item badge badge-secondary">
227 {i18n.t("number_of_comments", {
228 count: counts.comments,
229 formattedCount: numToSI(counts.comments),
232 <li className="list-inline-item">
233 <Link className="badge badge-primary" to="/modlog">
241 get canAdmin(): boolean {
243 UserService.Instance.myUserInfo &&
245 .map(a => a.person.id)
246 .includes(UserService.Instance.myUserInfo.local_user_view.person.id)
250 handleCollapseSidebar(i: SiteSidebar) {
251 i.state.collapsed = !i.state.collapsed;
255 handleEditClick(i: SiteSidebar) {
256 i.state.showEdit = true;
261 this.state.showEdit = false;
262 this.setState(this.state);
266 this.state.showEdit = false;
267 this.setState(this.state);