Merge remote-tracking branch 'origin/main' into feat/add-badges-common-component

[lemmy-ui.git] / src / shared / components / home / site-sidebar.tsx

diff --git a/src/shared/components/home/site-sidebar.tsx b/src/shared/components/home/site-sidebar.tsx
index e321ae9f6b9b1218a6846d6e762fdf39302cd5d9..66a48ca11e095ec909343a4ba94a170c9eb3baca 100644 (file)
--- a/src/shared/components/home/site-sidebar.tsx
+++ b/src/shared/components/home/site-sidebar.tsx
@@ -1,9 +1,8 @@
-import { None, Option } from "@sniptt/monads";
 import { Component, linkEvent } from "inferno";
-import { Link } from "inferno-router";
-import { PersonViewSafe, Site, SiteAggregates } from "lemmy-js-client";
+import { PersonView, Site, SiteAggregates } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { mdToHtml, numToSI } from "../../utils";
+import { mdToHtml } from "../../utils";
+import { Badges } from "../common/badges";
 import { BannerIconHeader } from "../common/banner-icon-header";
 import { Icon } from "../common/icon";
 import { PersonListing } from "../person/person-listing";
@@ -11,9 +10,8 @@ import { PersonListing } from "../person/person-listing";
 interface SiteSidebarProps {
   site: Site;
   showLocal: boolean;
-  counts: Option<SiteAggregates>;
-  admins: Option<PersonViewSafe[]>;
-  online: Option<number>;
+  counts?: SiteAggregates;
+  admins?: PersonView[];
 }
 
 interface SiteSidebarState {
@@ -21,30 +19,29 @@ interface SiteSidebarState {
 }
 
 export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
-  private emptyState: SiteSidebarState = {
+  state: SiteSidebarState = {
     collapsed: false,
   };
 
   constructor(props: any, context: any) {
     super(props, context);
-    this.state = this.emptyState;
   }
 
   render() {
     return (
-      <div className="card border-secondary mb-3">
+      <section id="sidebarInfo" className="card border-secondary mb-3">
         <div className="card-body">
           <div>
             <div className="mb-2">{this.siteName()}</div>
             {!this.state.collapsed && (
               <>
-                <BannerIconHeader banner={this.props.site.banner} icon={None} />
+                <BannerIconHeader banner={this.props.site.banner} />
                 {this.siteInfo()}
               </>
             )}
           </div>
         </div>
-      </div>
+      </section>
     );
   }
 
@@ -69,25 +66,13 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
   }
 
   siteInfo() {
-    let site = this.props.site;
+    const site = this.props.site;
     return (
       <div>
-        {site.description.match({
-          some: description => <h6>{description}</h6>,
-          none: <></>,
-        })}
-        {site.sidebar.match({
-          some: sidebar => this.siteSidebar(sidebar),
-          none: <></>,
-        })}
-        {this.props.counts.match({
-          some: counts => this.badges(counts),
-          none: <></>,
-        })}
-        {this.props.admins.match({
-          some: admins => this.admins(admins),
-          none: <></>,
-        })}
+        {site.description && <h6>{site.description}</h6>}
+        {site.sidebar && this.siteSidebar(site.sidebar)}
+        {this.props.counts && <Badges counts={this.props.counts} />}
+        {this.props.admins && this.admins(this.props.admins)}
       </div>
     );
   }
@@ -98,7 +83,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
     );
   }
 
-  admins(admins: PersonViewSafe[]) {
+  admins(admins: PersonView[]) {
     return (
       <ul className="mt-1 list-inline small mb-0">
         <li className="list-inline-item">{i18n.t("admins")}:</li>
@@ -111,102 +96,6 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
     );
   }
 
-  badges(siteAggregates: SiteAggregates) {
-    let counts = siteAggregates;
-    let online = this.props.online.unwrapOr(1);
-    return (
-      <ul className="my-2 list-inline">
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_online", {
-            count: online,
-            formattedCount: numToSI(online),
-          })}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_day", {
-            count: counts.users_active_day,
-            formattedCount: numToSI(counts.users_active_day),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: counts.users_active_day,
-            formattedCount: numToSI(counts.users_active_day),
-          })}{" "}
-          / {i18n.t("day")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_week", {
-            count: counts.users_active_week,
-            formattedCount: counts.users_active_week,
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: counts.users_active_week,
-            formattedCount: numToSI(counts.users_active_week),
-          })}{" "}
-          / {i18n.t("week")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_month", {
-            count: counts.users_active_month,
-            formattedCount: counts.users_active_month,
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: counts.users_active_month,
-            formattedCount: numToSI(counts.users_active_month),
-          })}{" "}
-          / {i18n.t("month")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
-            count: counts.users_active_half_year,
-            formattedCount: counts.users_active_half_year,
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: counts.users_active_half_year,
-            formattedCount: numToSI(counts.users_active_half_year),
-          })}{" "}
-          / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_users", {
-            count: counts.users,
-            formattedCount: numToSI(counts.users),
-          })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_communities", {
-            count: counts.communities,
-            formattedCount: numToSI(counts.communities),
-          })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_posts", {
-            count: counts.posts,
-            formattedCount: numToSI(counts.posts),
-          })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_comments", {
-            count: counts.comments,
-            formattedCount: numToSI(counts.comments),
-          })}
-        </li>
-        <li className="list-inline-item">
-          <Link className="badge badge-primary" to="/modlog">
-            {i18n.t("modlog")}
-          </Link>
-        </li>
-      </ul>
-    );
-  }
-
   handleCollapseSidebar(i: SiteSidebar) {
     i.setState({ collapsed: !i.state.collapsed });
   }