From 5c91d55cbc37cd9f851c00bb9c4a750fe68862c0 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Sat, 26 Feb 2022 22:55:49 +0800
Subject: [PATCH] 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`.
---
 ui/component/claimPreviewSubtitle/index.js |  2 ++
 ui/component/claimPreviewSubtitle/view.jsx | 11 +++++++----
 ui/util/string.js                          |  5 +++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/ui/component/claimPreviewSubtitle/index.js b/ui/component/claimPreviewSubtitle/index.js
index 7947c0813..ca80a2dfa 100644
--- a/ui/component/claimPreviewSubtitle/index.js
+++ b/ui/component/claimPreviewSubtitle/index.js
@@ -1,6 +1,7 @@
 import * as PAGES from 'constants/pages';
 import { connect } from 'react-redux';
 import { selectClaimForUri, makeSelectClaimIsPending } from 'redux/selectors/claims';
+import { selectLanguage } from 'redux/selectors/settings';
 import { doClearPublish, doPrepareEdit } from 'redux/actions/publish';
 import { push } from 'connected-react-router';
 import ClaimPreviewSubtitle from './view';
@@ -16,6 +17,7 @@ const select = (state, props) => {
     pending: makeSelectClaimIsPending(props.uri)(state),
     isLivestream,
     subCount: isChannel ? selectSubCountForUri(state, claim.repost_url ? claim.canonical_url : props.uri) : 0,
+    lang: selectLanguage(state),
   };
 };
 
diff --git a/ui/component/claimPreviewSubtitle/view.jsx b/ui/component/claimPreviewSubtitle/view.jsx
index 61fb638af..c21699dd2 100644
--- a/ui/component/claimPreviewSubtitle/view.jsx
+++ b/ui/component/claimPreviewSubtitle/view.jsx
@@ -6,28 +6,31 @@ import DateTime from 'component/dateTime';
 import LivestreamDateTime from 'component/livestreamDateTime';
 import Button from 'component/button';
 import FileViewCountInline from 'component/fileViewCountInline';
+import { toCompactNotation } from 'util/string';
 import { parseURI } from 'util/lbryURI';
 
 type Props = {
   uri: string,
+  type?: string,
+  showAtSign?: boolean,
+  // --- redux ---
   claim: ?StreamClaim,
   pending?: boolean,
-  type: string,
   beginPublish: (?string) => void,
   isLivestream: boolean,
+  lang: string,
   fetchSubCount: (string) => void,
   subCount: number,
-  showAtSign?: boolean,
 };
 
 // previews used in channel overview and homepage (and other places?)
 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 claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
 
   const claimId = (claim && claim.claim_id) || '0';
-  const formattedSubCount = Number(subCount).toLocaleString();
+  const formattedSubCount = toCompactNotation(subCount, lang, 10000);
 
   React.useEffect(() => {
     if (isChannel) {
diff --git a/ui/util/string.js b/ui/util/string.js
index 3877cae44..f71a36677 100644
--- a/ui/util/string.js
+++ b/ui/util/string.js
@@ -4,10 +4,11 @@ export function toCapitalCase(string: string) {
   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 useCompactNotation = !minThresholdToApply || Number(number) >= minThresholdToApply;
 
-  if (minThresholdToApply && Number(number) >= Number(minThresholdToApply)) {
+  if (useCompactNotation) {
     try {
       return Number(number).toLocaleString(locale, {
         compactDisplay: 'short',