Adds sub count to search and other areas. (#10)

Add follower counts to search

ui/component/claimPreviewSubtitle/index.js

@@ -9,11 +9,13 @@ import {
 } from 'lbry-redux';
 import { push } from 'connected-react-router';
 import ClaimPreviewSubtitle from './view';
+import { doFetchSubCount, makeSelectSubCountForUri } from 'lbryinc';
 
 const select = (state, props) => ({
   claim: makeSelectClaimForUri(props.uri)(state),
   pending: makeSelectClaimIsPending(props.uri)(state),
   isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
+  subCount: makeSelectSubCountForUri(props.uri)(state),
 });
 
 const perform = (dispatch) => ({
@@ -22,6 +24,7 @@ const perform = (dispatch) => ({
     dispatch(doPrepareEdit({ name }));
     dispatch(push(`/$/${PAGES.UPLOAD}`));
   },
+  fetchSubCount: (claimId) => dispatch(doFetchSubCount(claimId)),
 });
 
 export default connect(select, perform)(ClaimPreviewSubtitle);

ui/component/claimPreviewSubtitle/view.jsx

@@ -14,13 +14,21 @@ type Props = {
   type: string,
   beginPublish: (string) => void,
   isLivestream: boolean,
+  fetchSubCount: (string) => void,
+  subCount: number,
 };
 
 // previews used in channel overview and homepage (and other places?)
 function ClaimPreviewSubtitle(props: Props) {
-  const { pending, uri, claim, type, beginPublish, isLivestream } = props;
+  const { pending, uri, claim, type, beginPublish, isLivestream, fetchSubCount, subCount } = props;
   const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
 
+  const claimId = (claim && claim.claim_id) || '0';
+  const formattedSubCount = Number(subCount).toLocaleString();
+  React.useEffect(() => {
+    fetchSubCount(claimId);
+  }, [uri, fetchSubCount, claimId]);
+
   let isChannel;
   let name;
   try {
@@ -34,9 +42,14 @@ function ClaimPreviewSubtitle(props: Props) {
           <UriIndicator uri={uri} link />{' '}
           {!pending && claim && (
             <>
-              {isChannel &&
-                type !== 'inline' &&
-                `${claimsInChannel} ${claimsInChannel === 1 ? __('upload') : __('uploads')}`}
+              {isChannel && type !== 'inline' && (
+                <>
+                  <span className="claim-preview-metadata-sub-upload">
+                    {formattedSubCount} {subCount !== 1 ? __('Followers') : __('Follower')}
+                    &nbsp;&bull; {claimsInChannel} {claimsInChannel === 1 ? __('upload') : __('uploads')}
+                  </span>
+                </>
+              )}
 
               {!isChannel &&
                 (isLivestream && ENABLE_NO_SOURCE_CLAIMS ? (

ui/component/fileViewCountInline/view.jsx

@@ -30,6 +30,9 @@ export default function FileViewCountInline(props: Props) {
   // clean up (only one place edit/remove).
   const isChannelPage = window.location.pathname.startsWith('/@');
 
+  // Checks if search page and gives a bullet between claim name and ago.
+  const isSearchPage = window.location.pathname.startsWith('/$/search');
+
   // dont show if no view count, if it's a repost, a livestream or isn't a channel page
   if (!viewCount || (claim && claim.repost_url) || isLivestream || !isChannelPage) {
     // (1) Currently, makeSelectViewCountForUri doesn't differentiate between
@@ -37,8 +40,13 @@ export default function FileViewCountInline(props: Props) {
     // ideal to highlight that a view has 0 count, let's just not show anything.
     // (2) No idea how to get the repost source's claim ID from the repost claim,
     // so hiding it for now.
+    if (isSearchPage) {
+      return <>&nbsp;&bull;&nbsp; </>;
+    }
+    else {
       return null;
     }
+  }
 
   return (
     <span className="view_count">

ui/scss/component/_claim-list.scss

@@ -297,6 +297,13 @@
   flex: 1;
 }
 
+.claim-preview-metadata-sub-upload {
+  position: relative;
+  //margin-left: 4px;
+  display: flex;
+  text-align: left;
+}
+
 .claim-preview-info {
   align-items: flex-start;
 }