LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-22 12:21:13 +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,
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>

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

@ -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}`;

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

@ -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 d-none d-lg-table-cell">
{cv.counts.posts}
<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.comments}
{numToSI(cv.counts.posts)}
</td>
<td class="text-right d-none d-lg-table-cell">
{numToSI(cv.counts.comments)}
</td>
<td class="text-right">
{cv.subscribed ? (

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

@ -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">

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

@ -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">

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

@ -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>

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

@ -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}`;

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

@ -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>,
];
}

2
src/shared/utils.ts
View file

@ -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);
}