src/shared/components/common/badges.tsx

   1 import { numToSI } from "@utils/helpers";
   2 import { Link } from "inferno-router";
   3 import {
   4   CommunityAggregates,
   5   CommunityId,
   6   SiteAggregates,
   7 } from "lemmy-js-client";
   8 import { I18NextService } from "../../services";
   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={I18NextService.i18n.t(
  33           "active_users_in_the_last_day",
  34           {
  35             count: Number(counts.users_active_day),
  36             formattedCount: numToSI(counts.users_active_day),
  37           },
  38         )}
  39       >
  40         {I18NextService.i18n.t("number_of_users", {
  41           count: Number(counts.users_active_day),
  42           formattedCount: numToSI(counts.users_active_day),
  43         })}{" "}
  44         / {I18NextService.i18n.t("day")}
  45       </li>
  46       <li
  47         className="list-inline-item badge text-bg-secondary pointer"
  48         data-tippy-content={I18NextService.i18n.t(
  49           "active_users_in_the_last_week",
  50           {
  51             count: Number(counts.users_active_week),
  52             formattedCount: numToSI(counts.users_active_week),
  53           },
  54         )}
  55       >
  56         {I18NextService.i18n.t("number_of_users", {
  57           count: Number(counts.users_active_week),
  58           formattedCount: numToSI(counts.users_active_week),
  59         })}{" "}
  60         / {I18NextService.i18n.t("week")}
  61       </li>
  62       <li
  63         className="list-inline-item badge text-bg-secondary pointer"
  64         data-tippy-content={I18NextService.i18n.t(
  65           "active_users_in_the_last_month",
  66           {
  67             count: Number(counts.users_active_month),
  68             formattedCount: numToSI(counts.users_active_month),
  69           },
  70         )}
  71       >
  72         {I18NextService.i18n.t("number_of_users", {
  73           count: Number(counts.users_active_month),
  74           formattedCount: numToSI(counts.users_active_month),
  75         })}{" "}
  76         / {I18NextService.i18n.t("month")}
  77       </li>
  78       <li
  79         className="list-inline-item badge text-bg-secondary pointer"
  80         data-tippy-content={I18NextService.i18n.t(
  81           "active_users_in_the_last_six_months",
  82           {
  83             count: Number(counts.users_active_half_year),
  84             formattedCount: numToSI(counts.users_active_half_year),
  85           },
  86         )}
  87       >
  88         {I18NextService.i18n.t("number_of_users", {
  89           count: Number(counts.users_active_half_year),
  90           formattedCount: numToSI(counts.users_active_half_year),
  91         })}{" "}
  92         /{" "}
  93         {I18NextService.i18n.t("number_of_months", {
  94           count: 6,
  95           formattedCount: 6,
  96         })}
  97       </li>
  98       {isSiteAggregates(counts) && (
  99         <>
 100           <li className="list-inline-item badge text-bg-secondary">
 101             {I18NextService.i18n.t("number_of_users", {
 102               count: Number(counts.users),
 103               formattedCount: numToSI(counts.users),
 104             })}
 105           </li>
 106           <li className="list-inline-item badge text-bg-secondary">
 107             {I18NextService.i18n.t("number_of_communities", {
 108               count: Number(counts.communities),
 109               formattedCount: numToSI(counts.communities),
 110             })}
 111           </li>
 112         </>
 113       )}
 114       {isCommunityAggregates(counts) && (
 115         <li className="list-inline-item badge text-bg-secondary">
 116           {I18NextService.i18n.t("number_of_subscribers", {
 117             count: Number(counts.subscribers),
 118             formattedCount: numToSI(counts.subscribers),
 119           })}
 120         </li>
 121       )}
 122       <li className="list-inline-item badge text-bg-secondary">
 123         {I18NextService.i18n.t("number_of_posts", {
 124           count: Number(counts.posts),
 125           formattedCount: numToSI(counts.posts),
 126         })}
 127       </li>
 128       <li className="list-inline-item badge text-bg-secondary">
 129         {I18NextService.i18n.t("number_of_comments", {
 130           count: Number(counts.comments),
 131           formattedCount: numToSI(counts.comments),
 132         })}
 133       </li>
 134       <li className="list-inline-item">
 135         <Link
 136           className="badge text-bg-primary"
 137           to={`/modlog${communityId ? `/${communityId}` : ""}`}
 138         >
 139           {I18NextService.i18n.t("modlog")}
 140         </Link>
 141       </li>
 142     </ul>
 143   );
 144 };