src/shared/components/common/badges.tsx

   1 import { Link } from "inferno-router";
   2 import {
   3   CommunityAggregates,
   4   CommunityId,
   5   SiteAggregates,
   6 } from "lemmy-js-client";
   7 import { i18n } from "../../i18next";
   8 import { numToSI } from "../../utils";
   9
  10 interface BadgesProps {
  11   counts: CommunityAggregates | SiteAggregates;
  12   communityId?: CommunityId;
  13 }
  14
  15 const isCommunityAggregates = (
  16   counts: CommunityAggregates | SiteAggregates
  17 ): counts is CommunityAggregates => {
  18   return "subscribers" in counts;
  19 };
  20
  21 const isSiteAggregates = (
  22   counts: CommunityAggregates | SiteAggregates
  23 ): counts is SiteAggregates => {
  24   return "communities" in counts;
  25 };
  26
  27 export const Badges = ({ counts, communityId }: BadgesProps) => {
  28   return (
  29     <ul className="badges my-1 list-inline">
  30       <li
  31         className="list-inline-item badge text-bg-secondary pointer"
  32         data-tippy-content={i18n.t("active_users_in_the_last_day", {
  33           count: Number(counts.users_active_day),
  34           formattedCount: numToSI(counts.users_active_day),
  35         })}
  36       >
  37         {i18n.t("number_of_users", {
  38           count: Number(counts.users_active_day),
  39           formattedCount: numToSI(counts.users_active_day),
  40         })}{" "}
  41         / {i18n.t("day")}
  42       </li>
  43       <li
  44         className="list-inline-item badge text-bg-secondary pointer"
  45         data-tippy-content={i18n.t("active_users_in_the_last_week", {
  46           count: Number(counts.users_active_week),
  47           formattedCount: numToSI(counts.users_active_week),
  48         })}
  49       >
  50         {i18n.t("number_of_users", {
  51           count: Number(counts.users_active_week),
  52           formattedCount: numToSI(counts.users_active_week),
  53         })}{" "}
  54         / {i18n.t("week")}
  55       </li>
  56       <li
  57         className="list-inline-item badge text-bg-secondary pointer"
  58         data-tippy-content={i18n.t("active_users_in_the_last_month", {
  59           count: Number(counts.users_active_month),
  60           formattedCount: numToSI(counts.users_active_month),
  61         })}
  62       >
  63         {i18n.t("number_of_users", {
  64           count: Number(counts.users_active_month),
  65           formattedCount: numToSI(counts.users_active_month),
  66         })}{" "}
  67         / {i18n.t("month")}
  68       </li>
  69       <li
  70         className="list-inline-item badge text-bg-secondary pointer"
  71         data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
  72           count: Number(counts.users_active_half_year),
  73           formattedCount: numToSI(counts.users_active_half_year),
  74         })}
  75       >
  76         {i18n.t("number_of_users", {
  77           count: Number(counts.users_active_half_year),
  78           formattedCount: numToSI(counts.users_active_half_year),
  79         })}{" "}
  80         / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
  81       </li>
  82       {isSiteAggregates(counts) && (
  83         <>
  84           <li className="list-inline-item badge text-bg-secondary">
  85             {i18n.t("number_of_users", {
  86               count: Number(counts.users),
  87               formattedCount: numToSI(counts.users),
  88             })}
  89           </li>
  90           <li className="list-inline-item badge text-bg-secondary">
  91             {i18n.t("number_of_communities", {
  92               count: Number(counts.communities),
  93               formattedCount: numToSI(counts.communities),
  94             })}
  95           </li>
  96         </>
  97       )}
  98       {isCommunityAggregates(counts) && (
  99         <li className="list-inline-item badge text-bg-secondary">
 100           {i18n.t("number_of_subscribers", {
 101             count: Number(counts.subscribers),
 102             formattedCount: numToSI(counts.subscribers),
 103           })}
 104         </li>
 105       )}
 106       <li className="list-inline-item badge text-bg-secondary">
 107         {i18n.t("number_of_posts", {
 108           count: Number(counts.posts),
 109           formattedCount: numToSI(counts.posts),
 110         })}
 111       </li>
 112       <li className="list-inline-item badge text-bg-secondary">
 113         {i18n.t("number_of_comments", {
 114           count: Number(counts.comments),
 115           formattedCount: numToSI(counts.comments),
 116         })}
 117       </li>
 118       <li className="list-inline-item">
 119         <Link
 120           className="badge text-bg-primary"
 121           to={`/modlog${communityId ? `/${communityId}` : ""}`}
 122         >
 123           {i18n.t("modlog")}
 124         </Link>
 125       </li>
 126     </ul>
 127   );
 128 };