src/shared/components/common/badges.tsx

   1 import { Link } from "inferno-router";
   2 import {
   3   CommunityAggregates,
   4   CommunityView,
   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   community_view?: CommunityView;
  13 }
  14
  15 const isCommunityAggregates = (
  16   counts: CommunityAggregates | SiteAggregates
  17 ): counts is CommunityAggregates => {
  18   return "subscribers" in counts;
  19 };
  20
  21 export const Badges = ({ counts, community_view }: BadgesProps) => {
  22   return (
  23     <ul className="my-1 list-inline">
  24       <li
  25         className="list-inline-item badge badge-secondary pointer"
  26         data-tippy-content={i18n.t("active_users_in_the_last_day", {
  27           count: Number(counts.users_active_day),
  28           formattedCount: numToSI(counts.users_active_day),
  29         })}
  30       >
  31         {i18n.t("number_of_users", {
  32           count: Number(counts.users_active_day),
  33           formattedCount: numToSI(counts.users_active_day),
  34         })}{" "}
  35         / {i18n.t("day")}
  36       </li>
  37       <li
  38         className="list-inline-item badge badge-secondary pointer"
  39         data-tippy-content={i18n.t("active_users_in_the_last_week", {
  40           count: Number(counts.users_active_week),
  41           formattedCount: numToSI(counts.users_active_week),
  42         })}
  43       >
  44         {i18n.t("number_of_users", {
  45           count: Number(counts.users_active_week),
  46           formattedCount: numToSI(counts.users_active_week),
  47         })}{" "}
  48         / {i18n.t("week")}
  49       </li>
  50       <li
  51         className="list-inline-item badge badge-secondary pointer"
  52         data-tippy-content={i18n.t("active_users_in_the_last_month", {
  53           count: Number(counts.users_active_month),
  54           formattedCount: numToSI(counts.users_active_month),
  55         })}
  56       >
  57         {i18n.t("number_of_users", {
  58           count: Number(counts.users_active_month),
  59           formattedCount: numToSI(counts.users_active_month),
  60         })}{" "}
  61         / {i18n.t("month")}
  62       </li>
  63       <li
  64         className="list-inline-item badge badge-secondary pointer"
  65         data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
  66           count: Number(counts.users_active_half_year),
  67           formattedCount: numToSI(counts.users_active_half_year),
  68         })}
  69       >
  70         {i18n.t("number_of_users", {
  71           count: Number(counts.users_active_half_year),
  72           formattedCount: numToSI(counts.users_active_half_year),
  73         })}{" "}
  74         / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
  75       </li>
  76       {isCommunityAggregates(counts) && (
  77         <li className="list-inline-item badge badge-secondary">
  78           {i18n.t("number_of_subscribers", {
  79             count: Number(counts.subscribers),
  80             formattedCount: numToSI(counts.subscribers),
  81           })}
  82         </li>
  83       )}
  84       <li className="list-inline-item badge badge-secondary">
  85         {i18n.t("number_of_posts", {
  86           count: Number(counts.posts),
  87           formattedCount: numToSI(counts.posts),
  88         })}
  89       </li>
  90       <li className="list-inline-item badge badge-secondary">
  91         {i18n.t("number_of_comments", {
  92           count: Number(counts.comments),
  93           formattedCount: numToSI(counts.comments),
  94         })}
  95       </li>
  96       <li className="list-inline-item">
  97         <Link
  98           className="badge badge-primary"
  99           to={`/modlog/${!!community_view ?? community_view?.community.id}`}
 100         >
 101           {i18n.t("modlog")}
 102         </Link>
 103       </li>
 104     </ul>
 105   );
 106 };