LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-26 06:11:15 +00:00
Code Issues Projects Releases Wiki Activity

Use a number simplifier for counts. Fixes #407

Browse source
This commit is contained in:
Dessalines 2021-09-18 12:18:53 -04:00
parent 37bcc11916
commit 9b181d79b1
9 changed files with 88 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/shared/components/app/navbar.tsx
View file

@ -25,6 +25,7 @@ import {
isBrowser, isBrowser,
notifyComment, notifyComment,
notifyPrivateMessage, notifyPrivateMessage,
numToSI,
setTheme, setTheme,
showAvatars, showAvatars,
supportLemmyUrl, supportLemmyUrl,
@ -189,7 +190,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
"unread_messages" "unread_messages"
)}`} )}`}
> >
{this.state.unreadCount} {numToSI(this.state.unreadCount)}
</span> </span>
)} )}
</button> </button>
@ -309,7 +310,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
"unread_messages" "unread_messages"
)}`} )}`}
> >
{this.state.unreadCount} {numToSI(this.state.unreadCount)}
</span> </span>
)} )}
</Link> </Link>

15
src/shared/components/comment/comment-node.tsx
View file

@ -30,6 +30,7 @@ import {
getUnixTime, getUnixTime,
isMod, isMod,
mdToHtml, mdToHtml,
numToSI,
setupTippy, setupTippy,
showScores, showScores,
wsClient, wsClient,
@ -217,9 +218,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
class="mr-1 font-weight-bold" class="mr-1 font-weight-bold"
aria-label={i18n.t("number_of_points", { aria-label={i18n.t("number_of_points", {
count: this.state.score, count: this.state.score,
formattedCount: this.state.score,
})} })}
> >
{this.state.score} {numToSI(this.state.score)}
</span> </span>
</a> </a>
<span className="mr-1">•</span> <span className="mr-1">•</span>
@ -293,7 +295,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<Icon icon="arrow-up1" classes="icon-inline" /> <Icon icon="arrow-up1" classes="icon-inline" />
{showScores() && {showScores() &&
this.state.upvotes !== this.state.score && ( this.state.upvotes !== this.state.score && (
<span class="ml-1">{this.state.upvotes}</span> <span class="ml-1">
{numToSI(this.state.upvotes)}
</span>
)} )}
</button> </button>
{this.props.enableDownvotes && ( {this.props.enableDownvotes && (
@ -310,7 +314,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<Icon icon="arrow-down1" classes="icon-inline" /> <Icon icon="arrow-down1" classes="icon-inline" />
{showScores() && {showScores() &&
this.state.upvotes !== this.state.score && ( this.state.upvotes !== this.state.score && (
<span class="ml-1">{this.state.downvotes}</span> <span class="ml-1">
{numToSI(this.state.downvotes)}
</span>
)} )}
</button> </button>
)} )}
@ -1289,14 +1295,17 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
get pointsTippy(): string { get pointsTippy(): string {
let points = i18n.t("number_of_points", { let points = i18n.t("number_of_points", {
count: this.state.score, count: this.state.score,
formattedCount: this.state.score,
}); });
let upvotes = i18n.t("number_of_upvotes", { let upvotes = i18n.t("number_of_upvotes", {
count: this.state.upvotes, count: this.state.upvotes,
formattedCount: this.state.upvotes,
}); });
let downvotes = i18n.t("number_of_downvotes", { let downvotes = i18n.t("number_of_downvotes", {
count: this.state.downvotes, count: this.state.downvotes,
formattedCount: this.state.downvotes,
}); });
return `${points} • ${upvotes} • ${downvotes}`; return `${points} • ${upvotes} • ${downvotes}`;

15
src/shared/components/community/communities.tsx
View file

@ -19,6 +19,7 @@ import {
getListingTypeFromPropsNoDefault, getListingTypeFromPropsNoDefault,
getPageFromProps, getPageFromProps,
isBrowser, isBrowser,
numToSI,
setIsoData, setIsoData,
setOptionalAuth, setOptionalAuth,
showLocal, showLocal,
@ -160,13 +161,17 @@ export class Communities extends Component<any, CommunitiesState> {
<td> <td>
<CommunityLink community={cv.community} /> <CommunityLink community={cv.community} />
</td> </td>
<td class="text-right">{cv.counts.subscribers}</td> <td class="text-right">
<td class="text-right">{cv.counts.users_active_month}</td> {numToSI(cv.counts.subscribers)}
<td class="text-right d-none d-lg-table-cell"> </td>
{cv.counts.posts} <td class="text-right">
{numToSI(cv.counts.users_active_month)}
</td> </td>
<td class="text-right d-none d-lg-table-cell"> <td class="text-right d-none d-lg-table-cell">
{cv.counts.comments} {numToSI(cv.counts.posts)}
</td>
<td class="text-right d-none d-lg-table-cell">
{numToSI(cv.counts.comments)}
</td> </td>
<td class="text-right"> <td class="text-right">
{cv.subscribed ? ( {cv.subscribed ? (

27
src/shared/components/community/sidebar.tsx
View file

@ -11,7 +11,13 @@ import {
} from "lemmy-js-client"; } from "lemmy-js-client";
import { i18n } from "../../i18next"; import { i18n } from "../../i18next";
import { UserService, WebSocketService } from "../../services"; 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 { BannerIconHeader } from "../common/banner-icon-header";
import { Icon } from "../common/icon"; import { Icon } from "../common/icon";
import { CommunityForm } from "../community/community-form"; import { CommunityForm } from "../community/community-form";
@ -143,16 +149,21 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
return ( return (
<ul class="my-1 list-inline"> <ul class="my-1 list-inline">
<li className="list-inline-item badge badge-secondary"> <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>
<li <li
className="list-inline-item badge badge-secondary pointer" className="list-inline-item badge badge-secondary pointer"
data-tippy-content={`${i18n.t("number_of_users", { data-tippy-content={`${i18n.t("number_of_users", {
count: counts.users_active_day, count: counts.users_active_day,
formattedCount: counts.users_active_day,
})} ${i18n.t("active_in_the_last")} ${i18n.t("day")}`} })} ${i18n.t("active_in_the_last")} ${i18n.t("day")}`}
> >
{i18n.t("number_of_users", { {i18n.t("number_of_users", {
count: counts.users_active_day, count: counts.users_active_day,
formattedCount: numToSI(counts.users_active_day),
})}{" "} })}{" "}
/ {i18n.t("day")} / {i18n.t("day")}
</li> </li>
@ -160,10 +171,12 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
className="list-inline-item badge badge-secondary pointer" className="list-inline-item badge badge-secondary pointer"
data-tippy-content={`${i18n.t("number_of_users", { data-tippy-content={`${i18n.t("number_of_users", {
count: counts.users_active_week, count: counts.users_active_week,
formattedCount: counts.users_active_week,
})} ${i18n.t("active_in_the_last")} ${i18n.t("week")}`} })} ${i18n.t("active_in_the_last")} ${i18n.t("week")}`}
> >
{i18n.t("number_of_users", { {i18n.t("number_of_users", {
count: counts.users_active_week, count: counts.users_active_week,
formattedCount: numToSI(counts.users_active_week),
})}{" "} })}{" "}
/ {i18n.t("week")} / {i18n.t("week")}
</li> </li>
@ -171,10 +184,12 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
className="list-inline-item badge badge-secondary pointer" className="list-inline-item badge badge-secondary pointer"
data-tippy-content={`${i18n.t("number_of_users", { data-tippy-content={`${i18n.t("number_of_users", {
count: counts.users_active_month, count: counts.users_active_month,
formattedCount: counts.users_active_month,
})} ${i18n.t("active_in_the_last")} ${i18n.t("month")}`} })} ${i18n.t("active_in_the_last")} ${i18n.t("month")}`}
> >
{i18n.t("number_of_users", { {i18n.t("number_of_users", {
count: counts.users_active_month, count: counts.users_active_month,
formattedCount: numToSI(counts.users_active_month),
})}{" "} })}{" "}
/ {i18n.t("month")} / {i18n.t("month")}
</li> </li>
@ -182,28 +197,34 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
className="list-inline-item badge badge-secondary pointer" className="list-inline-item badge badge-secondary pointer"
data-tippy-content={`${i18n.t("number_of_users", { data-tippy-content={`${i18n.t("number_of_users", {
count: counts.users_active_half_year, count: counts.users_active_half_year,
formattedCount: counts.users_active_half_year,
})} ${i18n.t("active_in_the_last")} ${i18n.t("number_of_months", { })} ${i18n.t("active_in_the_last")} ${i18n.t("number_of_months", {
count: 6, count: 6,
formattedCount: 6,
})}`} })}`}
> >
{i18n.t("number_of_users", { {i18n.t("number_of_users", {
count: counts.users_active_half_year, 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>
<li className="list-inline-item badge badge-secondary"> <li className="list-inline-item badge badge-secondary">
{i18n.t("number_of_subscribers", { {i18n.t("number_of_subscribers", {
count: counts.subscribers, count: counts.subscribers,
formattedCount: numToSI(counts.subscribers),
})} })}
</li> </li>
<li className="list-inline-item badge badge-secondary"> <li className="list-inline-item badge badge-secondary">
{i18n.t("number_of_posts", { {i18n.t("number_of_posts", {
count: counts.posts, count: counts.posts,
formattedCount: numToSI(counts.posts),
})} })}
</li> </li>
<li className="list-inline-item badge badge-secondary"> <li className="list-inline-item badge badge-secondary">
{i18n.t("number_of_comments", { {i18n.t("number_of_comments", {
count: counts.comments, count: counts.comments,
formattedCount: numToSI(counts.comments),
})} })}
</li> </li>
<li className="list-inline-item"> <li className="list-inline-item">

21
src/shared/components/home/home.tsx
View file

@ -40,6 +40,7 @@ import {
getSortTypeFromProps, getSortTypeFromProps,
mdToHtml, mdToHtml,
notifyPost, notifyPost,
numToSI,
restoreScrollPosition, restoreScrollPosition,
saveCommentRes, saveCommentRes,
saveScrollPosition, saveScrollPosition,
@ -503,16 +504,21 @@ export class Home extends Component<any, HomeState> {
return ( return (
<ul class="my-2 list-inline"> <ul class="my-2 list-inline">
<li className="list-inline-item badge badge-secondary"> <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>
<li <li
className="list-inline-item badge badge-secondary pointer" className="list-inline-item badge badge-secondary pointer"
data-tippy-content={`${i18n.t("number_of_users", { data-tippy-content={`${i18n.t("number_of_users", {
count: counts.users_active_day, count: counts.users_active_day,
formattedCount: counts.users_active_day,
})} ${i18n.t("active_in_the_last")} ${i18n.t("day")}`} })} ${i18n.t("active_in_the_last")} ${i18n.t("day")}`}
> >
{i18n.t("number_of_users", { {i18n.t("number_of_users", {
count: counts.users_active_day, count: counts.users_active_day,
formattedCount: numToSI(counts.users_active_day),
})}{" "} })}{" "}
/ {i18n.t("day")} / {i18n.t("day")}
</li> </li>
@ -520,10 +526,12 @@ export class Home extends Component<any, HomeState> {
className="list-inline-item badge badge-secondary pointer" className="list-inline-item badge badge-secondary pointer"
data-tippy-content={`${i18n.t("number_of_users", { data-tippy-content={`${i18n.t("number_of_users", {
count: counts.users_active_week, count: counts.users_active_week,
formattedCount: counts.users_active_week,
})} ${i18n.t("active_in_the_last")} ${i18n.t("week")}`} })} ${i18n.t("active_in_the_last")} ${i18n.t("week")}`}
> >
{i18n.t("number_of_users", { {i18n.t("number_of_users", {
count: counts.users_active_week, count: counts.users_active_week,
formattedCount: numToSI(counts.users_active_week),
})}{" "} })}{" "}
/ {i18n.t("week")} / {i18n.t("week")}
</li> </li>
@ -531,10 +539,12 @@ export class Home extends Component<any, HomeState> {
className="list-inline-item badge badge-secondary pointer" className="list-inline-item badge badge-secondary pointer"
data-tippy-content={`${i18n.t("number_of_users", { data-tippy-content={`${i18n.t("number_of_users", {
count: counts.users_active_month, count: counts.users_active_month,
formattedCount: counts.users_active_month,
})} ${i18n.t("active_in_the_last")} ${i18n.t("month")}`} })} ${i18n.t("active_in_the_last")} ${i18n.t("month")}`}
> >
{i18n.t("number_of_users", { {i18n.t("number_of_users", {
count: counts.users_active_month, count: counts.users_active_month,
formattedCount: numToSI(counts.users_active_month),
})}{" "} })}{" "}
/ {i18n.t("month")} / {i18n.t("month")}
</li> </li>
@ -542,33 +552,40 @@ export class Home extends Component<any, HomeState> {
className="list-inline-item badge badge-secondary pointer" className="list-inline-item badge badge-secondary pointer"
data-tippy-content={`${i18n.t("number_of_users", { data-tippy-content={`${i18n.t("number_of_users", {
count: counts.users_active_half_year, count: counts.users_active_half_year,
formattedCount: counts.users_active_half_year,
})} ${i18n.t("active_in_the_last")} ${i18n.t("number_of_months", { })} ${i18n.t("active_in_the_last")} ${i18n.t("number_of_months", {
count: 6, count: 6,
formattedCount: 6,
})}`} })}`}
> >
{i18n.t("number_of_users", { {i18n.t("number_of_users", {
count: counts.users_active_half_year, 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>
<li className="list-inline-item badge badge-secondary"> <li className="list-inline-item badge badge-secondary">
{i18n.t("number_of_users", { {i18n.t("number_of_users", {
count: counts.users, count: counts.users,
formattedCount: numToSI(counts.users),
})} })}
</li> </li>
<li className="list-inline-item badge badge-secondary"> <li className="list-inline-item badge badge-secondary">
{i18n.t("number_of_communities", { {i18n.t("number_of_communities", {
count: counts.communities, count: counts.communities,
formattedCount: numToSI(counts.communities),
})} })}
</li> </li>
<li className="list-inline-item badge badge-secondary"> <li className="list-inline-item badge badge-secondary">
{i18n.t("number_of_posts", { {i18n.t("number_of_posts", {
count: counts.posts, count: counts.posts,
formattedCount: numToSI(counts.posts),
})} })}
</li> </li>
<li className="list-inline-item badge badge-secondary"> <li className="list-inline-item badge badge-secondary">
{i18n.t("number_of_comments", { {i18n.t("number_of_comments", {
count: counts.comments, count: counts.comments,
formattedCount: numToSI(counts.comments),
})} })}
</li> </li>
<li className="list-inline-item"> <li className="list-inline-item">

7
src/shared/components/person/profile.tsx
View file

@ -26,6 +26,7 @@ import {
fetchLimit, fetchLimit,
getUsernameFromProps, getUsernameFromProps,
mdToHtml, mdToHtml,
numToSI,
previewLines, previewLines,
restoreScrollPosition, restoreScrollPosition,
routeSortTypeToEnum, routeSortTypeToEnum,
@ -403,11 +404,15 @@ export class Profile extends Component<any, ProfileState> {
<div> <div>
<ul class="list-inline mb-2"> <ul class="list-inline mb-2">
<li className="list-inline-item badge badge-light"> <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>
<li className="list-inline-item badge badge-light"> <li className="list-inline-item badge badge-light">
{i18n.t("number_of_comments", { {i18n.t("number_of_comments", {
count: pv.counts.comment_count, count: pv.counts.comment_count,
formattedCount: numToSI(pv.counts.comment_count),
})} })}
</li> </li>
</ul> </ul>

14
src/shared/components/post/post-listing.tsx
View file

@ -32,6 +32,7 @@ import {
isVideo, isVideo,
md, md,
mdToHtml, mdToHtml,
numToSI,
previewLines, previewLines,
setupTippy, setupTippy,
showScores, showScores,
@ -356,7 +357,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
class={`unselectable pointer font-weight-bold text-muted px-1`} class={`unselectable pointer font-weight-bold text-muted px-1`}
data-tippy-content={this.pointsTippy} data-tippy-content={this.pointsTippy}
> >
{this.state.score} {numToSI(this.state.score)}
</div> </div>
) : ( ) : (
<div class="p-1"></div> <div class="p-1"></div>
@ -475,12 +476,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
className="text-muted small" className="text-muted small"
title={i18n.t("number_of_comments", { title={i18n.t("number_of_comments", {
count: post_view.counts.comments, count: post_view.counts.comments,
formattedCount: post_view.counts.comments,
})} })}
to={`/post/${post_view.post.id}?scrollToComments=true`} to={`/post/${post_view.post.id}?scrollToComments=true`}
> >
<Icon icon="message-square" classes="icon-inline mr-1" /> <Icon icon="message-square" classes="icon-inline mr-1" />
{i18n.t("number_of_comments", { {i18n.t("number_of_comments", {
count: post_view.counts.comments, count: post_view.counts.comments,
formattedCount: numToSI(post_view.counts.comments),
})} })}
</Link> </Link>
</button> </button>
@ -494,7 +497,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
> >
<small> <small>
<Icon icon="arrow-down1" classes="icon-inline mr-1" /> <Icon icon="arrow-down1" classes="icon-inline mr-1" />
<span>{this.state.downvotes}</span> <span>{numToSI(this.state.downvotes)}</span>
</small> </small>
</button> </button>
)} )}
@ -532,7 +535,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
aria-label={i18n.t("upvote")} aria-label={i18n.t("upvote")}
> >
<Icon icon="arrow-up1" classes="icon-inline small mr-2" /> <Icon icon="arrow-up1" classes="icon-inline small mr-2" />
{this.state.upvotes} {numToSI(this.state.upvotes)}
</button> </button>
) : ( ) : (
<button <button
@ -557,7 +560,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
> >
<Icon icon="arrow-down1" classes="icon-inline small mr-2" /> <Icon icon="arrow-down1" classes="icon-inline small mr-2" />
{this.state.downvotes !== 0 && ( {this.state.downvotes !== 0 && (
<span>{this.state.downvotes}</span> <span>{numToSI(this.state.downvotes)}</span>
)} )}
</button> </button>
) : ( ) : (
@ -1571,14 +1574,17 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
get pointsTippy(): string { get pointsTippy(): string {
let points = i18n.t("number_of_points", { let points = i18n.t("number_of_points", {
count: this.state.score, count: this.state.score,
formattedCount: this.state.score,
}); });
let upvotes = i18n.t("number_of_upvotes", { let upvotes = i18n.t("number_of_upvotes", {
count: this.state.upvotes, count: this.state.upvotes,
formattedCount: this.state.upvotes,
}); });
let downvotes = i18n.t("number_of_downvotes", { let downvotes = i18n.t("number_of_downvotes", {
count: this.state.downvotes, count: this.state.downvotes,
formattedCount: this.state.downvotes,
}); });
return `${points} • ${upvotes} • ${downvotes}`; return `${points} • ${upvotes} • ${downvotes}`;

3
src/shared/components/search.tsx
View file

@ -38,6 +38,7 @@ import {
fetchLimit, fetchLimit,
fetchUsers, fetchUsers,
isBrowser, isBrowser,
numToSI,
personSelectName, personSelectName,
personToChoice, personToChoice,
restoreScrollPosition, restoreScrollPosition,
@ -649,6 +650,7 @@ export class Search extends Component<any, SearchState> {
<span>{` - <span>{` -
${i18n.t("number_of_subscribers", { ${i18n.t("number_of_subscribers", {
count: community_view.counts.subscribers, count: community_view.counts.subscribers,
formattedCount: numToSI(community_view.counts.subscribers),
})} })}
`}</span> `}</span>
</> </>
@ -662,6 +664,7 @@ export class Search extends Component<any, SearchState> {
</span>, </span>,
<span>{` - ${i18n.t("number_of_comments", { <span>{` - ${i18n.t("number_of_comments", {
count: person_view.counts.comment_count, count: person_view.counts.comment_count,
formattedCount: numToSI(person_view.counts.comment_count),
})}`}</span>, })}`}</span>,
]; ];
} }

2
src/shared/utils.ts
View file

@ -1439,6 +1439,6 @@ const SHORTNUM_SI_FORMAT = new Intl.NumberFormat("en-US", {
compactDisplay: "short", compactDisplay: "short",
}); });
export function numToSI(value: any) { export function numToSI(value: number): string {
return SHORTNUM_SI_FORMAT.format(value); return SHORTNUM_SI_FORMAT.format(value);
} }