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:
parent
95654079f3
commit
5c91d55cbc
3 changed files with 12 additions and 6 deletions
|
@ -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),
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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',
|
||||||
|
|
Loading…
Reference in a new issue