Compact follower counts (#7432)

* Factor out 'toCompactNotation'

* File page: use compact view count (w/ tooltip for full res)

Co-authored-by: infinite-persistence <inf.persistence@gmail.com>

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)),

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 (
-    <span className="media__subtitle--centered">
-      {viewCount !== 1 ? __('%view_count% views', { view_count: formattedViewCount }) : __('1 view')}
-      {<HelpLink href="https://lbry.com/faq/views" />}
-    </span>
+    <Tooltip label={countFullResolution}>
+      <span className="media__subtitle--centered">
+        {viewCount !== 1 ? __('%view_count% views', { view_count: countCompact }) : __('1 view')}
+        {<HelpLink href="https://lbry.com/faq/views" />}
+      </span>
+    </Tooltip>
   );
 }
 

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

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