From 9b181d79b1a69d82825d60a886b885f3e0908249 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Sat, 18 Sep 2021 12:18:53 -0400 Subject: [PATCH] Use a number simplifier for counts. Fixes #407 --- src/shared/components/app/navbar.tsx | 5 ++-- .../components/comment/comment-node.tsx | 15 ++++++++--- .../components/community/communities.tsx | 15 +++++++---- src/shared/components/community/sidebar.tsx | 27 ++++++++++++++++--- src/shared/components/home/home.tsx | 21 +++++++++++++-- src/shared/components/person/profile.tsx | 7 ++++- src/shared/components/post/post-listing.tsx | 14 +++++++--- src/shared/components/search.tsx | 3 +++ src/shared/utils.ts | 2 +- 9 files changed, 88 insertions(+), 21 deletions(-) diff --git a/src/shared/components/app/navbar.tsx b/src/shared/components/app/navbar.tsx index 06304a8c..6f204691 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 { "unread_messages" )}`} > - {this.state.unreadCount} + {numToSI(this.state.unreadCount)} )} @@ -309,7 +310,7 @@ export class Navbar extends Component { "unread_messages" )}`} > - {this.state.unreadCount} + {numToSI(this.state.unreadCount)} )} diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx index 10078667..cb7818a9 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 { 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)} • @@ -293,7 +295,9 @@ export class CommentNode extends Component { {showScores() && this.state.upvotes !== this.state.score && ( - {this.state.upvotes} + + {numToSI(this.state.upvotes)} + )} {this.props.enableDownvotes && ( @@ -310,7 +314,9 @@ export class CommentNode extends Component { {showScores() && this.state.upvotes !== this.state.score && ( - {this.state.downvotes} + + {numToSI(this.state.downvotes)} + )} )} @@ -1289,14 +1295,17 @@ export class CommentNode extends Component { 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 aa34be35..1cb74e26 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 { - {cv.counts.subscribers} - {cv.counts.users_active_month} - - {cv.counts.posts} + + {numToSI(cv.counts.subscribers)} + + + {numToSI(cv.counts.users_active_month)} - {cv.counts.comments} + {numToSI(cv.counts.posts)} + + + {numToSI(cv.counts.comments)} {cv.subscribed ? ( diff --git a/src/shared/components/community/sidebar.tsx b/src/shared/components/community/sidebar.tsx index c0cb9919..d4a5bc51 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 { return (
  • - {i18n.t("number_online", { count: this.props.online })} + {i18n.t("number_online", { + count: this.props.online, + formattedCount: numToSI(this.props.online), + })}
  • {i18n.t("number_of_users", { count: counts.users_active_day, + formattedCount: numToSI(counts.users_active_day), })}{" "} / {i18n.t("day")}
    • @@ -160,10 +171,12 @@ export class Sidebar extends Component { 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")} @@ -171,10 +184,12 @@ export class Sidebar extends Component { 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")} @@ -182,28 +197,34 @@ export class Sidebar extends Component { 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 })}
  • {i18n.t("number_of_subscribers", { count: counts.subscribers, + formattedCount: numToSI(counts.subscribers), })}
  • {i18n.t("number_of_posts", { count: counts.posts, + formattedCount: numToSI(counts.posts), })}
  • {i18n.t("number_of_comments", { count: counts.comments, + formattedCount: numToSI(counts.comments), })}
  • diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx index d06bf011..a22a9593 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 { return (
    • - {i18n.t("number_online", { count: this.state.siteRes.online })} + {i18n.t("number_online", { + count: this.state.siteRes.online, + formattedCount: numToSI(this.state.siteRes.online), + })}
    • {i18n.t("number_of_users", { count: counts.users_active_day, + formattedCount: numToSI(counts.users_active_day), })}{" "} / {i18n.t("day")}
      • @@ -520,10 +526,12 @@ export class Home extends Component { 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")} @@ -531,10 +539,12 @@ export class Home extends Component { 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")} @@ -542,33 +552,40 @@ export class Home extends Component { 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 })}
    • {i18n.t("number_of_users", { count: counts.users, + formattedCount: numToSI(counts.users), })}
    • {i18n.t("number_of_communities", { count: counts.communities, + formattedCount: numToSI(counts.communities), })}
    • {i18n.t("number_of_posts", { count: counts.posts, + formattedCount: numToSI(counts.posts), })}
    • {i18n.t("number_of_comments", { count: counts.comments, + formattedCount: numToSI(counts.comments), })}
    • diff --git a/src/shared/components/person/profile.tsx b/src/shared/components/person/profile.tsx index 5289b688..1dcd8e5d 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 {
      • - {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), + })}
      • {i18n.t("number_of_comments", { count: pv.counts.comment_count, + formattedCount: numToSI(pv.counts.comment_count), })}
      diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx index 9c6da376..49825b39 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 { class={`unselectable pointer font-weight-bold text-muted px-1`} data-tippy-content={this.pointsTippy} > - {this.state.score} + {numToSI(this.state.score)}
      ) : (
      @@ -475,12 +476,14 @@ export class PostListing extends Component { 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`} > {i18n.t("number_of_comments", { count: post_view.counts.comments, + formattedCount: numToSI(post_view.counts.comments), })} @@ -494,7 +497,7 @@ export class PostListing extends Component { > - {this.state.downvotes} + {numToSI(this.state.downvotes)} )} @@ -532,7 +535,7 @@ export class PostListing extends Component { aria-label={i18n.t("upvote")} > - {this.state.upvotes} + {numToSI(this.state.upvotes)} ) : ( ) : ( @@ -1571,14 +1574,17 @@ export class PostListing extends Component { 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 4a1c8521..b70b12b0 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 { {` - ${i18n.t("number_of_subscribers", { count: community_view.counts.subscribers, + formattedCount: numToSI(community_view.counts.subscribers), })} `} @@ -662,6 +664,7 @@ export class Search extends Component { , {` - ${i18n.t("number_of_comments", { count: person_view.counts.comment_count, + formattedCount: numToSI(person_view.counts.comment_count), })}`}, ]; } diff --git a/src/shared/utils.ts b/src/shared/utils.ts index ab2e8985..e0e37979 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); }