From 3f0cc0bf2e37347d88df4a464ca371b84f7e83ca Mon Sep 17 00:00:00 2001
From: jessopb <36554050+jessopb@users.noreply.github.com>
Date: Tue, 25 Jan 2022 18:16:28 -0500
Subject: [PATCH] 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       | 13 ++++++++-----
 ui/component/fileViewCount/view.jsx       | 21 ++++++++++++---------
 ui/component/fileViewCountInline/view.jsx | 13 ++-----------
 ui/util/string.js                         | 12 ++++++++++++
 4 files changed, 34 insertions(+), 25 deletions(-)

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