From f8f1f49250dc26a2cb4b48bf707a684f0c75337a Mon Sep 17 00:00:00 2001 From: Jay Sitter Date: Fri, 16 Jun 2023 18:31:47 -0400 Subject: [PATCH] feat: Move Badges to common component --- src/shared/components/common/badges.tsx | 113 ++++++++++++++++++++ src/shared/components/community/sidebar.tsx | 101 ++--------------- src/shared/components/home/site-sidebar.tsx | 104 +----------------- 3 files changed, 124 insertions(+), 194 deletions(-) create mode 100644 src/shared/components/common/badges.tsx diff --git a/src/shared/components/common/badges.tsx b/src/shared/components/common/badges.tsx new file mode 100644 index 0000000..188d92c --- /dev/null +++ b/src/shared/components/common/badges.tsx @@ -0,0 +1,113 @@ +import { Link } from "inferno-router"; +import { + CommunityAggregates, + CommunityView, + SiteAggregates, +} from "lemmy-js-client"; +import { i18n } from "../../i18next"; +import { numToSI } from "../../utils"; + +interface BadgesProps { + counts: CommunityAggregates | SiteAggregates; + online: number; + community_view?: CommunityView; +} + +const isCommunityAggregates = ( + counts: CommunityAggregates | SiteAggregates +): counts is CommunityAggregates => { + return "subscribers" in counts; +}; + +export const Badges = ({ counts, community_view, online }: BadgesProps) => { + return ( + + ); +}; diff --git a/src/shared/components/community/sidebar.tsx b/src/shared/components/community/sidebar.tsx index 57400f4..7023d13 100644 --- a/src/shared/components/community/sidebar.tsx +++ b/src/shared/components/community/sidebar.tsx @@ -24,8 +24,8 @@ import { hostname, mdToHtml, myAuthRequired, - numToSI, } from "../../utils"; +import { Badges } from "../common/badges"; import { BannerIconHeader } from "../common/banner-icon-header"; import { Icon, PurgeWarning, Spinner } from "../common/icon"; import { CommunityForm } from "../community/community-form"; @@ -158,7 +158,11 @@ export class Sidebar extends Component {
{this.description()} - {this.badges()} + {this.mods()}
@@ -232,99 +236,6 @@ export class Sidebar extends Component { ); } - badges() { - const community_view = this.props.community_view; - const counts = community_view.counts; - return ( -
    -
  • - {i18n.t("number_online", { - count: this.props.online, - formattedCount: numToSI(this.props.online), - })} -
  • -
  • - {i18n.t("number_of_users", { - count: Number(counts.users_active_day), - formattedCount: numToSI(counts.users_active_day), - })}{" "} - / {i18n.t("day")} -
  • -
  • - {i18n.t("number_of_users", { - count: Number(counts.users_active_week), - formattedCount: numToSI(counts.users_active_week), - })}{" "} - / {i18n.t("week")} -
  • -
  • - {i18n.t("number_of_users", { - count: Number(counts.users_active_month), - formattedCount: numToSI(counts.users_active_month), - })}{" "} - / {i18n.t("month")} -
  • -
  • - {i18n.t("number_of_users", { - count: Number(counts.users_active_half_year), - formattedCount: numToSI(counts.users_active_half_year), - })}{" "} - / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })} -
  • -
  • - {i18n.t("number_of_subscribers", { - count: Number(counts.subscribers), - formattedCount: numToSI(counts.subscribers), - })} -
  • -
  • - {i18n.t("number_of_posts", { - count: Number(counts.posts), - formattedCount: numToSI(counts.posts), - })} -
  • -
  • - {i18n.t("number_of_comments", { - count: Number(counts.comments), - formattedCount: numToSI(counts.comments), - })} -
  • -
  • - - {i18n.t("modlog")} - -
  • -
- ); - } - mods() { return (
    diff --git a/src/shared/components/home/site-sidebar.tsx b/src/shared/components/home/site-sidebar.tsx index 051c3af..5f32e59 100644 --- a/src/shared/components/home/site-sidebar.tsx +++ b/src/shared/components/home/site-sidebar.tsx @@ -1,8 +1,8 @@ import { Component, linkEvent } from "inferno"; -import { Link } from "inferno-router"; 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"; @@ -72,7 +72,9 @@ export class SiteSidebar extends Component {
    {site.description &&
    {site.description}
    } {site.sidebar && this.siteSidebar(site.sidebar)} - {this.props.counts && this.badges(this.props.counts)} + {this.props.counts && ( + + )} {this.props.admins && this.admins(this.props.admins)}
    ); @@ -97,102 +99,6 @@ export class SiteSidebar extends Component { ); } - badges(siteAggregates: SiteAggregates) { - const counts = siteAggregates; - const online = this.props.online ?? 1; - return ( -
      -
    • - {i18n.t("number_online", { - count: online, - formattedCount: numToSI(online), - })} -
    • -
    • - {i18n.t("number_of_users", { - count: Number(counts.users_active_day), - formattedCount: numToSI(counts.users_active_day), - })}{" "} - / {i18n.t("day")} -
    • -
    • - {i18n.t("number_of_users", { - count: Number(counts.users_active_week), - formattedCount: numToSI(counts.users_active_week), - })}{" "} - / {i18n.t("week")} -
    • -
    • - {i18n.t("number_of_users", { - count: Number(counts.users_active_month), - formattedCount: numToSI(counts.users_active_month), - })}{" "} - / {i18n.t("month")} -
    • -
    • - {i18n.t("number_of_users", { - count: Number(counts.users_active_half_year), - formattedCount: numToSI(counts.users_active_half_year), - })}{" "} - / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })} -
    • -
    • - {i18n.t("number_of_users", { - count: Number(counts.users), - formattedCount: numToSI(counts.users), - })} -
    • -
    • - {i18n.t("number_of_communities", { - count: Number(counts.communities), - formattedCount: numToSI(counts.communities), - })} -
    • -
    • - {i18n.t("number_of_posts", { - count: Number(counts.posts), - formattedCount: numToSI(counts.posts), - })} -
    • -
    • - {i18n.t("number_of_comments", { - count: Number(counts.comments), - formattedCount: numToSI(counts.comments), - })} -
    • -
    • - - {i18n.t("modlog")} - -
    • -
    - ); - } - handleCollapseSidebar(i: SiteSidebar) { i.setState({ collapsed: !i.state.collapsed }); } -- 2.44.1