From 06bfe60c5445c79a27f43108fb6b36ac058b2558 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Thu, 23 Dec 2021 09:33:12 +0800
Subject: [PATCH] Show view counts on uploads page

## Ticket
556
---
 ui/component/fileViewCountInline/view.jsx | 13 ++++++++-----
 ui/page/fileListPublished/index.js        |  4 ++++
 ui/page/fileListPublished/view.jsx        |  7 +++++++
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/ui/component/fileViewCountInline/view.jsx b/ui/component/fileViewCountInline/view.jsx
index d27a59748..02605e10c 100644
--- a/ui/component/fileViewCountInline/view.jsx
+++ b/ui/component/fileViewCountInline/view.jsx
@@ -1,11 +1,12 @@
 // @flow
 import React from 'react';
 import 'scss/component/_view_count.scss';
+import * as PAGES from 'constants/pages';
 
 type Props = {
   uri: string,
   isLivestream?: boolean,
-  // --- select ---
+  // --- redux ---
   claim: ?StreamClaim,
   viewCount: string,
   lang: ?string,
@@ -24,16 +25,18 @@ export default function FileViewCountInline(props: Props) {
     formattedViewCount = Number(viewCount).toLocaleString();
   }
 
-  // Limit the view-count visibility to Channel Pages for now. We'll eventually
+  // Limit the view-count visibility to specific pages for now. We'll eventually
   // show it everywhere, so this band-aid would be the easiest to clean up
   // (only one place edit/remove).
   const pathname: string = window.location.pathname;
-  const isOnChannelPage = pathname && pathname.startsWith('/@') && pathname.indexOf('/', 1) === -1;
+  const isOnAllowedPage =
+    (pathname && pathname.startsWith('/@') && pathname.indexOf('/', 1) === -1) || // Channel Page
+    pathname === `/$/${PAGES.UPLOADS}`;
 
-  if (!viewCount || (claim && claim.repost_url) || isLivestream || !isOnChannelPage) {
+  if (!viewCount || (claim && claim.repost_url) || isLivestream || !isOnAllowedPage) {
     // (1) Currently, selectViewCountForUri doesn't differentiate between
     // un-fetched vs zero view-count. But since it's probably not ideal to
-    // highlight that a claim has 0 count, let's just not show anything.
+    // highlight that a claim has 0 view 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.
     return null;
diff --git a/ui/page/fileListPublished/index.js b/ui/page/fileListPublished/index.js
index a7a929049..aa91f0bff 100644
--- a/ui/page/fileListPublished/index.js
+++ b/ui/page/fileListPublished/index.js
@@ -4,10 +4,12 @@ import {
   selectMyClaimsPage,
   selectMyClaimsPageItemCount,
   selectFetchingMyClaimsPageError,
+  selectClaimsByUri,
 } from 'redux/selectors/claims';
 import { selectUploadCount } from 'redux/selectors/publish';
 import { doFetchClaimListMine, doCheckPendingClaims } from 'redux/actions/claims';
 import { doClearPublish } from 'redux/actions/publish';
+import { doFetchViewCount } from 'lbryinc';
 import FileListPublished from './view';
 import { withRouter } from 'react-router';
 import { MY_CLAIMS_PAGE_SIZE, PAGE_PARAM, PAGE_SIZE_PARAM } from 'constants/claim';
@@ -26,6 +28,7 @@ const select = (state, props) => {
     urlTotal: selectMyClaimsPageItemCount(state),
     error: selectFetchingMyClaimsPageError(state),
     uploadCount: selectUploadCount(state),
+    claimsByUri: selectClaimsByUri(state),
   };
 };
 
@@ -34,6 +37,7 @@ const perform = (dispatch) => ({
   fetchClaimListMine: (page, pageSize, resolve, filterBy) =>
     dispatch(doFetchClaimListMine(page, pageSize, resolve, filterBy)),
   clearPublish: () => dispatch(doClearPublish()),
+  doFetchViewCount: (csv) => dispatch(doFetchViewCount(csv)),
 });
 
 export default withRouter(connect(select, perform)(FileListPublished));
diff --git a/ui/page/fileListPublished/view.jsx b/ui/page/fileListPublished/view.jsx
index c87ea8634..fadc46d8c 100644
--- a/ui/page/fileListPublished/view.jsx
+++ b/ui/page/fileListPublished/view.jsx
@@ -11,6 +11,7 @@ import WebUploadList from 'component/webUploadList';
 import Spinner from 'component/spinner';
 import Yrbl from 'component/yrbl';
 import classnames from 'classnames';
+import useFetchViewCount from 'effects/use-fetch-view-count';
 
 const FILTER_ALL = 'stream,repost';
 const FILTER_UPLOADS = 'stream';
@@ -18,6 +19,7 @@ const FILTER_REPOSTS = 'repost';
 
 type Props = {
   uploadCount: number,
+  claimsByUri: { [string]: any },
   checkPendingPublishes: () => void,
   clearPublish: () => void,
   fetchClaimListMine: (number, number, boolean, Array<string>) => void,
@@ -27,11 +29,13 @@ type Props = {
   history: { replace: (string) => void, push: (string) => void },
   page: number,
   pageSize: number,
+  doFetchViewCount: (claimIdCsv: string) => void,
 };
 
 function FileListPublished(props: Props) {
   const {
     uploadCount,
+    claimsByUri,
     checkPendingPublishes,
     clearPublish,
     fetchClaimListMine,
@@ -40,6 +44,7 @@ function FileListPublished(props: Props) {
     urlTotal,
     page,
     pageSize,
+    doFetchViewCount,
   } = props;
 
   const [filterBy, setFilterBy] = React.useState(FILTER_ALL);
@@ -61,6 +66,8 @@ function FileListPublished(props: Props) {
     }
   }, [uploadCount, paramsString, filterBy, fetchClaimListMine]);
 
+  useFetchViewCount(!fetching, urls, claimsByUri, doFetchViewCount);
+
   return (
     <Page>
       <div className="card-stack">