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();
+ }
+}