Fix sub/view count not in compact form for some components

## Ticket
968 Truncate views/subs in other areas

## Changes
- Corrected logic for `minThresholdToApply`, which was ignoring the case of "no threshold", causing it to not be truncated in Channel Page. We want to always truncate there due to the smaller cards.

- Missed out handling `ClaimPreviewSubtitle`.
This commit is contained in:
infinite-persistence 2022-02-26 22:55:49 +08:00 committed by Thomas Zarebczan
parent 95654079f3
commit 5c91d55cbc
3 changed files with 12 additions and 6 deletions

View file

@ -1,6 +1,7 @@
import * as PAGES from 'constants/pages'; import * as PAGES from 'constants/pages';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { selectClaimForUri, makeSelectClaimIsPending } from 'redux/selectors/claims'; import { selectClaimForUri, makeSelectClaimIsPending } from 'redux/selectors/claims';
import { selectLanguage } from 'redux/selectors/settings';
import { doClearPublish, doPrepareEdit } from 'redux/actions/publish'; import { doClearPublish, doPrepareEdit } from 'redux/actions/publish';
import { push } from 'connected-react-router'; import { push } from 'connected-react-router';
import ClaimPreviewSubtitle from './view'; import ClaimPreviewSubtitle from './view';
@ -16,6 +17,7 @@ const select = (state, props) => {
pending: makeSelectClaimIsPending(props.uri)(state), pending: makeSelectClaimIsPending(props.uri)(state),
isLivestream, isLivestream,
subCount: isChannel ? selectSubCountForUri(state, claim.repost_url ? claim.canonical_url : props.uri) : 0, subCount: isChannel ? selectSubCountForUri(state, claim.repost_url ? claim.canonical_url : props.uri) : 0,
lang: selectLanguage(state),
}; };
}; };

View file

@ -6,28 +6,31 @@ import DateTime from 'component/dateTime';
import LivestreamDateTime from 'component/livestreamDateTime'; import LivestreamDateTime from 'component/livestreamDateTime';
import Button from 'component/button'; import Button from 'component/button';
import FileViewCountInline from 'component/fileViewCountInline'; import FileViewCountInline from 'component/fileViewCountInline';
import { toCompactNotation } from 'util/string';
import { parseURI } from 'util/lbryURI'; import { parseURI } from 'util/lbryURI';
type Props = { type Props = {
uri: string, uri: string,
type?: string,
showAtSign?: boolean,
// --- redux ---
claim: ?StreamClaim, claim: ?StreamClaim,
pending?: boolean, pending?: boolean,
type: string,
beginPublish: (?string) => void, beginPublish: (?string) => void,
isLivestream: boolean, isLivestream: boolean,
lang: string,
fetchSubCount: (string) => void, fetchSubCount: (string) => void,
subCount: number, subCount: number,
showAtSign?: boolean,
}; };
// previews used in channel overview and homepage (and other places?) // previews used in channel overview and homepage (and other places?)
function ClaimPreviewSubtitle(props: Props) { function ClaimPreviewSubtitle(props: Props) {
const { pending, uri, claim, type, beginPublish, isLivestream, fetchSubCount, subCount, showAtSign } = props; const { pending, uri, claim, type, beginPublish, isLivestream, fetchSubCount, subCount, showAtSign, lang } = props;
const isChannel = claim && claim.value_type === 'channel'; const isChannel = claim && claim.value_type === 'channel';
const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0; const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
const claimId = (claim && claim.claim_id) || '0'; const claimId = (claim && claim.claim_id) || '0';
const formattedSubCount = Number(subCount).toLocaleString(); const formattedSubCount = toCompactNotation(subCount, lang, 10000);
React.useEffect(() => { React.useEffect(() => {
if (isChannel) { if (isChannel) {

View file

@ -4,10 +4,11 @@ export function toCapitalCase(string: string) {
return string.charAt(0).toUpperCase() + string.slice(1); return string.charAt(0).toUpperCase() + string.slice(1);
} }
export function toCompactNotation(number: string | number, lang: ?string, minThresholdToApply?: string | number) { export function toCompactNotation(number: string | number, lang: ?string, minThresholdToApply?: number) {
const locale = lang || 'en'; const locale = lang || 'en';
const useCompactNotation = !minThresholdToApply || Number(number) >= minThresholdToApply;
if (minThresholdToApply && Number(number) >= Number(minThresholdToApply)) { if (useCompactNotation) {
try { try {
return Number(number).toLocaleString(locale, { return Number(number).toLocaleString(locale, {
compactDisplay: 'short', compactDisplay: 'short',