From: Dessalines <dessalines@users.noreply.github.com>
Date: Sat, 18 Sep 2021 16:35:49 +0000 (-0400)
Subject: Si simplifier (#418)
X-Git-Url: http://these/git/%22https:/join-lemmy.org/static/%7BelementUrl%7D?a=commitdiff_plain;h=a2aac813cf7c43c2941b02b1a3464a5c0d03e569;p=lemmy-ui.git

Si simplifier (#418)

* Updating translations.

* Use a number simplifier for counts. Fixes #407
---

diff --git a/lemmy-translations b/lemmy-translations
index eee933b..183033e 160000
--- a/lemmy-translations
+++ b/lemmy-translations
@@ -1 +1 @@
-Subproject commit eee933bd87780e0e2a8700e9b8fe0047f14f428a
+Subproject commit 183033e0f796b450911e4e8f708ddd5969b12b77
diff --git a/src/shared/components/app/navbar.tsx b/src/shared/components/app/navbar.tsx
index 06304a8..6f20469 100644
--- a/src/shared/components/app/navbar.tsx
+++ b/src/shared/components/app/navbar.tsx
@@ -25,6 +25,7 @@ import {
   isBrowser,
   notifyComment,
   notifyPrivateMessage,
+  numToSI,
   setTheme,
   showAvatars,
   supportLemmyUrl,
@@ -189,7 +190,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                     "unread_messages"
                   )}`}
                 >
-                  {this.state.unreadCount}
+                  {numToSI(this.state.unreadCount)}
                 </span>
               )}
             </button>
@@ -309,7 +310,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                             "unread_messages"
                           )}`}
                         >
-                          {this.state.unreadCount}
+                          {numToSI(this.state.unreadCount)}
                         </span>
                       )}
                     </Link>
diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index 1007866..cb7818a 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -30,6 +30,7 @@ import {
   getUnixTime,
   isMod,
   mdToHtml,
+  numToSI,
   setupTippy,
   showScores,
   wsClient,
@@ -217,9 +218,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       class="mr-1 font-weight-bold"
                       aria-label={i18n.t("number_of_points", {
                         count: this.state.score,
+                        formattedCount: this.state.score,
                       })}
                     >
-                      {this.state.score}
+                      {numToSI(this.state.score)}
                     </span>
                   </a>
                   <span className="mr-1">•</span>
@@ -293,7 +295,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                         <Icon icon="arrow-up1" classes="icon-inline" />
                         {showScores() &&
                           this.state.upvotes !== this.state.score && (
-                            <span class="ml-1">{this.state.upvotes}</span>
+                            <span class="ml-1">
+                              {numToSI(this.state.upvotes)}
+                            </span>
                           )}
                       </button>
                       {this.props.enableDownvotes && (
@@ -310,7 +314,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                           <Icon icon="arrow-down1" classes="icon-inline" />
                           {showScores() &&
                             this.state.upvotes !== this.state.score && (
-                              <span class="ml-1">{this.state.downvotes}</span>
+                              <span class="ml-1">
+                                {numToSI(this.state.downvotes)}
+                              </span>
                             )}
                         </button>
                       )}
@@ -1289,14 +1295,17 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
   get pointsTippy(): string {
     let points = i18n.t("number_of_points", {
       count: this.state.score,
+      formattedCount: this.state.score,
     });
 
     let upvotes = i18n.t("number_of_upvotes", {
       count: this.state.upvotes,
+      formattedCount: this.state.upvotes,
     });
 
     let downvotes = i18n.t("number_of_downvotes", {
       count: this.state.downvotes,
+      formattedCount: this.state.downvotes,
     });
 
     return `${points} • ${upvotes} • ${downvotes}`;
diff --git a/src/shared/components/community/communities.tsx b/src/shared/components/community/communities.tsx
index aa34be3..1cb74e2 100644
--- a/src/shared/components/community/communities.tsx
+++ b/src/shared/components/community/communities.tsx
@@ -19,6 +19,7 @@ import {
   getListingTypeFromPropsNoDefault,
   getPageFromProps,
   isBrowser,
+  numToSI,
   setIsoData,
   setOptionalAuth,
   showLocal,
@@ -160,13 +161,17 @@ export class Communities extends Component<any, CommunitiesState> {
                       <td>
                         <CommunityLink community={cv.community} />
                       </td>
-                      <td class="text-right">{cv.counts.subscribers}</td>
-                      <td class="text-right">{cv.counts.users_active_month}</td>
+                      <td class="text-right">
+                        {numToSI(cv.counts.subscribers)}
+                      </td>
+                      <td class="text-right">
+                        {numToSI(cv.counts.users_active_month)}
+                      </td>
                       <td class="text-right d-none d-lg-table-cell">
-                        {cv.counts.posts}
+                        {numToSI(cv.counts.posts)}
                       </td>
                       <td class="text-right d-none d-lg-table-cell">
-                        {cv.counts.comments}
+                        {numToSI(cv.counts.comments)}
                       </td>
                       <td class="text-right">
                         {cv.subscribed ? (
diff --git a/src/shared/components/community/sidebar.tsx b/src/shared/components/community/sidebar.tsx
index c0cb991..d4a5bc5 100644
--- a/src/shared/components/community/sidebar.tsx
+++ b/src/shared/components/community/sidebar.tsx
@@ -11,7 +11,13 @@ import {
 } from "lemmy-js-client";
 import { i18n } from "../../i18next";
 import { UserService, WebSocketService } from "../../services";
-import { authField, getUnixTime, mdToHtml, wsClient } from "../../utils";
+import {
+  authField,
+  getUnixTime,
+  mdToHtml,
+  numToSI,
+  wsClient,
+} from "../../utils";
 import { BannerIconHeader } from "../common/banner-icon-header";
 import { Icon } from "../common/icon";
 import { CommunityForm } from "../community/community-form";
@@ -143,16 +149,21 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     return (
       <ul class="my-1 list-inline">
         <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_online", { count: this.props.online })}
+          {i18n.t("number_online", {
+            count: this.props.online,
+            formattedCount: numToSI(this.props.online),
+          })}
         </li>
         <li
           className="list-inline-item badge badge-secondary pointer"
           data-tippy-content={`${i18n.t("number_of_users", {
             count: counts.users_active_day,
+            formattedCount: counts.users_active_day,
           })} ${i18n.t("active_in_the_last")} ${i18n.t("day")}`}
         >
           {i18n.t("number_of_users", {
             count: counts.users_active_day,
+            formattedCount: numToSI(counts.users_active_day),
           })}{" "}
           / {i18n.t("day")}
         </li>
@@ -160,10 +171,12 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           className="list-inline-item badge badge-secondary pointer"
           data-tippy-content={`${i18n.t("number_of_users", {
             count: counts.users_active_week,
+            formattedCount: counts.users_active_week,
           })} ${i18n.t("active_in_the_last")} ${i18n.t("week")}`}
         >
           {i18n.t("number_of_users", {
             count: counts.users_active_week,
+            formattedCount: numToSI(counts.users_active_week),
           })}{" "}
           / {i18n.t("week")}
         </li>
@@ -171,10 +184,12 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           className="list-inline-item badge badge-secondary pointer"
           data-tippy-content={`${i18n.t("number_of_users", {
             count: counts.users_active_month,
+            formattedCount: counts.users_active_month,
           })} ${i18n.t("active_in_the_last")} ${i18n.t("month")}`}
         >
           {i18n.t("number_of_users", {
             count: counts.users_active_month,
+            formattedCount: numToSI(counts.users_active_month),
           })}{" "}
           / {i18n.t("month")}
         </li>
@@ -182,28 +197,34 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           className="list-inline-item badge badge-secondary pointer"
           data-tippy-content={`${i18n.t("number_of_users", {
             count: counts.users_active_half_year,
+            formattedCount: counts.users_active_half_year,
           })} ${i18n.t("active_in_the_last")} ${i18n.t("number_of_months", {
             count: 6,
+            formattedCount: 6,
           })}`}
         >
           {i18n.t("number_of_users", {
             count: counts.users_active_half_year,
+            formattedCount: numToSI(counts.users_active_half_year),
           })}{" "}
-          / {i18n.t("number_of_months", { count: 6 })}
+          / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
         </li>
         <li className="list-inline-item badge badge-secondary">
           {i18n.t("number_of_subscribers", {
             count: counts.subscribers,
+            formattedCount: numToSI(counts.subscribers),
           })}
         </li>
         <li className="list-inline-item badge badge-secondary">
           {i18n.t("number_of_posts", {
             count: counts.posts,
+            formattedCount: numToSI(counts.posts),
           })}
         </li>
         <li className="list-inline-item badge badge-secondary">
           {i18n.t("number_of_comments", {
             count: counts.comments,
+            formattedCount: numToSI(counts.comments),
           })}
         </li>
         <li className="list-inline-item">
diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index d06bf01..a22a959 100644
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -40,6 +40,7 @@ import {
   getSortTypeFromProps,
   mdToHtml,
   notifyPost,
+  numToSI,
   restoreScrollPosition,
   saveCommentRes,
   saveScrollPosition,
@@ -503,16 +504,21 @@ export class Home extends Component<any, HomeState> {
     return (
       <ul class="my-2 list-inline">
         <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_online", { count: this.state.siteRes.online })}
+          {i18n.t("number_online", {
+            count: this.state.siteRes.online,
+            formattedCount: numToSI(this.state.siteRes.online),
+          })}
         </li>
         <li
           className="list-inline-item badge badge-secondary pointer"
           data-tippy-content={`${i18n.t("number_of_users", {
             count: counts.users_active_day,
+            formattedCount: counts.users_active_day,
           })} ${i18n.t("active_in_the_last")} ${i18n.t("day")}`}
         >
           {i18n.t("number_of_users", {
             count: counts.users_active_day,
+            formattedCount: numToSI(counts.users_active_day),
           })}{" "}
           / {i18n.t("day")}
         </li>
@@ -520,10 +526,12 @@ export class Home extends Component<any, HomeState> {
           className="list-inline-item badge badge-secondary pointer"
           data-tippy-content={`${i18n.t("number_of_users", {
             count: counts.users_active_week,
+            formattedCount: counts.users_active_week,
           })} ${i18n.t("active_in_the_last")} ${i18n.t("week")}`}
         >
           {i18n.t("number_of_users", {
             count: counts.users_active_week,
+            formattedCount: numToSI(counts.users_active_week),
           })}{" "}
           / {i18n.t("week")}
         </li>
@@ -531,10 +539,12 @@ export class Home extends Component<any, HomeState> {
           className="list-inline-item badge badge-secondary pointer"
           data-tippy-content={`${i18n.t("number_of_users", {
             count: counts.users_active_month,
+            formattedCount: counts.users_active_month,
           })} ${i18n.t("active_in_the_last")} ${i18n.t("month")}`}
         >
           {i18n.t("number_of_users", {
             count: counts.users_active_month,
+            formattedCount: numToSI(counts.users_active_month),
           })}{" "}
           / {i18n.t("month")}
         </li>
@@ -542,33 +552,40 @@ export class Home extends Component<any, HomeState> {
           className="list-inline-item badge badge-secondary pointer"
           data-tippy-content={`${i18n.t("number_of_users", {
             count: counts.users_active_half_year,
+            formattedCount: counts.users_active_half_year,
           })} ${i18n.t("active_in_the_last")} ${i18n.t("number_of_months", {
             count: 6,
+            formattedCount: 6,
           })}`}
         >
           {i18n.t("number_of_users", {
             count: counts.users_active_half_year,
+            formattedCount: numToSI(counts.users_active_half_year),
           })}{" "}
-          / {i18n.t("number_of_months", { count: 6 })}
+          / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
         </li>
         <li className="list-inline-item badge badge-secondary">
           {i18n.t("number_of_users", {
             count: counts.users,
+            formattedCount: numToSI(counts.users),
           })}
         </li>
         <li className="list-inline-item badge badge-secondary">
           {i18n.t("number_of_communities", {
             count: counts.communities,
+            formattedCount: numToSI(counts.communities),
           })}
         </li>
         <li className="list-inline-item badge badge-secondary">
           {i18n.t("number_of_posts", {
             count: counts.posts,
+            formattedCount: numToSI(counts.posts),
           })}
         </li>
         <li className="list-inline-item badge badge-secondary">
           {i18n.t("number_of_comments", {
             count: counts.comments,
+            formattedCount: numToSI(counts.comments),
           })}
         </li>
         <li className="list-inline-item">
diff --git a/src/shared/components/person/profile.tsx b/src/shared/components/person/profile.tsx
index 5289b68..1dcd8e5 100644
--- a/src/shared/components/person/profile.tsx
+++ b/src/shared/components/person/profile.tsx
@@ -26,6 +26,7 @@ import {
   fetchLimit,
   getUsernameFromProps,
   mdToHtml,
+  numToSI,
   previewLines,
   restoreScrollPosition,
   routeSortTypeToEnum,
@@ -403,11 +404,15 @@ export class Profile extends Component<any, ProfileState> {
             <div>
               <ul class="list-inline mb-2">
                 <li className="list-inline-item badge badge-light">
-                  {i18n.t("number_of_posts", { count: pv.counts.post_count })}
+                  {i18n.t("number_of_posts", {
+                    count: pv.counts.post_count,
+                    formattedCount: numToSI(pv.counts.post_count),
+                  })}
                 </li>
                 <li className="list-inline-item badge badge-light">
                   {i18n.t("number_of_comments", {
                     count: pv.counts.comment_count,
+                    formattedCount: numToSI(pv.counts.comment_count),
                   })}
                 </li>
               </ul>
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 9c6da37..49825b3 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -32,6 +32,7 @@ import {
   isVideo,
   md,
   mdToHtml,
+  numToSI,
   previewLines,
   setupTippy,
   showScores,
@@ -356,7 +357,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             class={`unselectable pointer font-weight-bold text-muted px-1`}
             data-tippy-content={this.pointsTippy}
           >
-            {this.state.score}
+            {numToSI(this.state.score)}
           </div>
         ) : (
           <div class="p-1"></div>
@@ -475,12 +476,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             className="text-muted small"
             title={i18n.t("number_of_comments", {
               count: post_view.counts.comments,
+              formattedCount: post_view.counts.comments,
             })}
             to={`/post/${post_view.post.id}?scrollToComments=true`}
           >
             <Icon icon="message-square" classes="icon-inline mr-1" />
             {i18n.t("number_of_comments", {
               count: post_view.counts.comments,
+              formattedCount: numToSI(post_view.counts.comments),
             })}
           </Link>
         </button>
@@ -494,7 +497,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               >
                 <small>
                   <Icon icon="arrow-down1" classes="icon-inline mr-1" />
-                  <span>{this.state.downvotes}</span>
+                  <span>{numToSI(this.state.downvotes)}</span>
                 </small>
               </button>
             )}
@@ -532,7 +535,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                   aria-label={i18n.t("upvote")}
                 >
                   <Icon icon="arrow-up1" classes="icon-inline small mr-2" />
-                  {this.state.upvotes}
+                  {numToSI(this.state.upvotes)}
                 </button>
               ) : (
                 <button
@@ -557,7 +560,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                   >
                     <Icon icon="arrow-down1" classes="icon-inline small mr-2" />
                     {this.state.downvotes !== 0 && (
-                      <span>{this.state.downvotes}</span>
+                      <span>{numToSI(this.state.downvotes)}</span>
                     )}
                   </button>
                 ) : (
@@ -1571,14 +1574,17 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   get pointsTippy(): string {
     let points = i18n.t("number_of_points", {
       count: this.state.score,
+      formattedCount: this.state.score,
     });
 
     let upvotes = i18n.t("number_of_upvotes", {
       count: this.state.upvotes,
+      formattedCount: this.state.upvotes,
     });
 
     let downvotes = i18n.t("number_of_downvotes", {
       count: this.state.downvotes,
+      formattedCount: this.state.downvotes,
     });
 
     return `${points} • ${upvotes} • ${downvotes}`;
diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index 4a1c852..b70b12b 100644
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -38,6 +38,7 @@ import {
   fetchLimit,
   fetchUsers,
   isBrowser,
+  numToSI,
   personSelectName,
   personToChoice,
   restoreScrollPosition,
@@ -649,6 +650,7 @@ export class Search extends Component<any, SearchState> {
         <span>{` -
         ${i18n.t("number_of_subscribers", {
           count: community_view.counts.subscribers,
+          formattedCount: numToSI(community_view.counts.subscribers),
         })}
       `}</span>
       </>
@@ -662,6 +664,7 @@ export class Search extends Component<any, SearchState> {
       </span>,
       <span>{` - ${i18n.t("number_of_comments", {
         count: person_view.counts.comment_count,
+        formattedCount: numToSI(person_view.counts.comment_count),
       })}`}</span>,
     ];
   }
diff --git a/src/shared/utils.ts b/src/shared/utils.ts
index ab2e898..e0e3797 100644
--- a/src/shared/utils.ts
+++ b/src/shared/utils.ts
@@ -1439,6 +1439,6 @@ const SHORTNUM_SI_FORMAT = new Intl.NumberFormat("en-US", {
   compactDisplay: "short",
 });
 
-export function numToSI(value: any) {
+export function numToSI(value: number): string {
   return SHORTNUM_SI_FORMAT.format(value);
 }