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 const isSiteAggregates = (
  22   counts: CommunityAggregates | SiteAggregates
  23 ): counts is SiteAggregates => {
  24   return "communities" in counts;
  25 };
  26
  27 export const Badges = ({ counts, community_view }: BadgesProps) => {
  28   return (
  29     <ul className="my-1 list-inline">
  30       <li
  31         className="list-inline-item badge badge-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 badge-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 badge-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 badge-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       {isCommunityAggregates(counts) && (
  83         <li className="list-inline-item badge badge-secondary">
  84           {i18n.t("number_of_subscribers", {
  85             count: Number(counts.subscribers),
  86             formattedCount: numToSI(counts.subscribers),
  87           })}
  88         </li>
  89       )}
  90       {isSiteAggregates(counts) && (
  91         <li className="list-inline-item badge badge-secondary">
  92           {i18n.t("number_of_communities", {
  93             count: Number(counts.communities),
  94             formattedCount: numToSI(counts.communities),
  95           })}
  96         </li>
  97       )}
  98       <li className="list-inline-item badge badge-secondary">
  99         {i18n.t("number_of_posts", {
 100           count: Number(counts.posts),
 101           formattedCount: numToSI(counts.posts),
 102         })}
 103       </li>
 104       <li className="list-inline-item badge badge-secondary">
 105         {i18n.t("number_of_comments", {
 106           count: Number(counts.comments),
 107           formattedCount: numToSI(counts.comments),
 108         })}
 109       </li>
 110       <li className="list-inline-item">
 111         <Link
 112           className="badge badge-primary"
 113           to={`/modlog${
 114             community_view ? `/${community_view.community.id}` : ""
 115           }`}
 116         >
 117           {i18n.t("modlog")}
 118         </Link>
 119       </li>
 120     </ul>
 121   );
 122 };