diff --git a/ui/component/fileViewCount/index.js b/ui/component/fileViewCount/index.js index d1cec539a..4f0810380 100644 --- a/ui/component/fileViewCount/index.js +++ b/ui/component/fileViewCount/index.js @@ -1,13 +1,16 @@ import { connect } from 'react-redux'; -import { selectClaimForUri } from 'redux/selectors/claims'; +import { selectClaimIdForUri } from 'redux/selectors/claims'; import { doFetchViewCount, selectViewCountForUri } from 'lbryinc'; import { doAnalyticsView } from 'redux/actions/app'; import FileViewCount from './view'; -const select = (state, props) => ({ - claim: selectClaimForUri(state, props.uri), - viewCount: selectViewCountForUri(state, props.uri), -}); +const select = (state, props) => { + const claimId = selectClaimIdForUri(state, props.uri); + return { + claimId, + viewCount: selectViewCountForUri(state, props.uri), + }; +}; const perform = (dispatch) => ({ fetchViewCount: (claimId) => dispatch(doFetchViewCount(claimId)), diff --git a/ui/component/fileViewCount/view.jsx b/ui/component/fileViewCount/view.jsx index 9feeaba05..5c65b13e9 100644 --- a/ui/component/fileViewCount/view.jsx +++ b/ui/component/fileViewCount/view.jsx @@ -1,9 +1,11 @@ // @flow import React from 'react'; import HelpLink from 'component/common/help-link'; +import Tooltip from 'component/common/tooltip'; +import { toCompactNotation } from 'util/string'; type Props = { - claim: ?StreamClaim, + claimId: ?string, // this fetchViewCount: (string) => void, fetchingViewCount: boolean, uri: string, @@ -11,8 +13,9 @@ type Props = { }; function FileViewCount(props: Props) { - const { claim, uri, fetchViewCount, viewCount } = props; - const claimId = claim && claim.claim_id; + const { claimId, uri, fetchViewCount, viewCount } = props; // claimId + const countCompact = toCompactNotation(viewCount); + const countFullResolution = Number(viewCount).toLocaleString(); React.useEffect(() => { if (claimId) { @@ -20,13 +23,13 @@ function FileViewCount(props: Props) { } }, [fetchViewCount, uri, claimId]); - const formattedViewCount = Number(viewCount).toLocaleString(); - return ( - - {viewCount !== 1 ? __('%view_count% views', { view_count: formattedViewCount }) : __('1 view')} - {} - + + + {viewCount !== 1 ? __('%view_count% views', { view_count: countCompact }) : __('1 view')} + {} + + ); } diff --git a/ui/component/fileViewCountInline/view.jsx b/ui/component/fileViewCountInline/view.jsx index efd0b6bbf..ea99a9f4a 100644 --- a/ui/component/fileViewCountInline/view.jsx +++ b/ui/component/fileViewCountInline/view.jsx @@ -2,6 +2,7 @@ import React from 'react'; import 'scss/component/_view_count.scss'; import { useHistory } from 'react-router'; +import { toCompactNotation } from 'util/string'; type Props = { uri: string, @@ -16,17 +17,7 @@ export default function FileViewCountInline(props: Props) { const { location: { pathname }, } = useHistory(); - let formattedViewCount; - - try { - // SI notation that changes 1234 to 1.2K, look up Intl.NumberFormat() for docs - formattedViewCount = Number(viewCount).toLocaleString(lang || 'en', { - compactDisplay: 'short', - notation: 'compact', - }); - } catch (err) { - formattedViewCount = Number(viewCount).toLocaleString(); - } + const formattedViewCount = toCompactNotation(viewCount, lang); // Limit the view-count visibility to Channel Pages for now. I believe we'll // eventually show it everywhere, so this band-aid would be the easiest to diff --git a/ui/util/string.js b/ui/util/string.js index e4cb060c5..d5784e9ad 100644 --- a/ui/util/string.js +++ b/ui/util/string.js @@ -3,3 +3,15 @@ export function toCapitalCase(string: string) { return string.charAt(0).toUpperCase() + string.slice(1); } + +export function toCompactNotation(number: string | number, lang: ?string) { + try { + return Number(number).toLocaleString(lang || 'en', { + compactDisplay: 'short', + notation: 'compact', + }); + } catch (err) { + // Not all browsers support the addition options. + return Number(number).toLocaleString(); + } +}