diff --git a/src/shared/components/common/badges.tsx b/src/shared/components/common/badges.tsx
new file mode 100644
index 00000000..49c0888b
--- /dev/null
+++ b/src/shared/components/common/badges.tsx
@@ -0,0 +1,128 @@
+import { Link } from "inferno-router";
+import {
+ CommunityAggregates,
+ CommunityId,
+ SiteAggregates,
+} from "lemmy-js-client";
+import { i18n } from "../../i18next";
+import { numToSI } from "../../utils";
+
+interface BadgesProps {
+ counts: CommunityAggregates | SiteAggregates;
+ communityId?: CommunityId;
+}
+
+const isCommunityAggregates = (
+ counts: CommunityAggregates | SiteAggregates
+): counts is CommunityAggregates => {
+ return "subscribers" in counts;
+};
+
+const isSiteAggregates = (
+ counts: CommunityAggregates | SiteAggregates
+): counts is SiteAggregates => {
+ return "communities" in counts;
+};
+
+export const Badges = ({ counts, communityId }: BadgesProps) => {
+ return (
+
+ -
+ {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 })}
+
+ {isSiteAggregates(counts) && (
+ <>
+ -
+ {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),
+ })}
+
+ >
+ )}
+ {isCommunityAggregates(counts) && (
+ -
+ {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")}
+
+
+
+ );
+};
diff --git a/src/shared/components/community/sidebar.tsx b/src/shared/components/community/sidebar.tsx
index f4c74528..720e596f 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,10 @@ export class Sidebar extends Component {
@@ -233,93 +236,6 @@ export class Sidebar extends Component {
);
}
- badges() {
- const community_view = this.props.community_view;
- const counts = community_view.counts;
- return (
-
- -
- {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 (