doFetchViewCount: support multiple claimIds

## Issue
Show content view counts on channel pages (https://github.com/lbryio/lbry-desktop/issues/3587)

## Changes
Updated the action and reducer to handle CSV input. This wouldn't affect existing clients as it is backward compatible with a single claimId.

In the unlikely event that requested count !== results count, we just fail silently for now.

README.md

@@ -17,6 +17,9 @@ yarn link lbryinc
 ### Build
 Run `$ yarn build`. If the symlink does not work, just build the file and move the `bundle.js` file in to the `node_modules/` folder.
 
+### Automatic rebuild
+To have the code automatically rebuild upon changes you can run `$ yarn dev` which will use `rollup` to watch the files and build upon detection of updated source code.
+
 ## License
 
 [MIT © LBRY](LICENSE)

dist/bundle.es.js

@@ -759,19 +759,19 @@ function doFetchTrendingUris() {
 }
 
 //      
-const doFetchViewCount = claimId => dispatch => {
+const doFetchViewCount = claimIdCsv => dispatch => {
   dispatch({
     type: FETCH_VIEW_COUNT_STARTED
   });
   return Lbryio.call('file', 'view_count', {
-    claim_id: claimId
+    claim_id: claimIdCsv
   }).then(result => {
-    const viewCount = result[0];
+    const viewCounts = result;
     dispatch({
       type: FETCH_VIEW_COUNT_COMPLETED,
       data: {
-        claimId,
-        viewCount
+        claimIdCsv,
+        viewCounts
       }
     });
   }).catch(error => {
@@ -1318,12 +1318,18 @@ const statsReducer = handleActions({
   }),
   [FETCH_VIEW_COUNT_COMPLETED]: (state, action) => {
     const {
-      claimId,
-      viewCount
+      claimIdCsv,
+      viewCounts
     } = action.data;
-    const viewCountById = { ...state.viewCountById,
-      [claimId]: viewCount
-    };
+    const viewCountById = Object.assign({}, state.viewCountById);
+    const claimIds = claimIdCsv.split(',');
+
+    if (claimIds.length === viewCounts.length) {
+      claimIds.forEach((claimId, index) => {
+        viewCountById[claimId] = viewCounts[index];
+      });
+    }
+
     return { ...state,
       fetchingViewCount: false,
       viewCountById
@@ -1499,18 +1505,16 @@ const selectState$2 = state => state.blacklist || {};
 const selectBlackListedOutpoints = reselect.createSelector(selectState$2, state => state.blackListedOutpoints);
 const selectBlacklistedOutpointMap = reselect.createSelector(selectBlackListedOutpoints, outpoints => outpoints ? outpoints.reduce((acc, val) => {
   const outpoint = `${val.txid}:${val.nout}`;
-  return { ...acc,
-    [outpoint]: 1
-  };
+  acc[outpoint] = 1;
+  return acc;
 }, {}) : {});
 
 const selectState$3 = state => state.filtered || {};
 const selectFilteredOutpoints = reselect.createSelector(selectState$3, state => state.filteredOutpoints);
 const selectFilteredOutpointMap = reselect.createSelector(selectFilteredOutpoints, outpoints => outpoints ? outpoints.reduce((acc, val) => {
   const outpoint = `${val.txid}:${val.nout}`;
-  return { ...acc,
-    [outpoint]: 1
-  };
+  acc[outpoint] = 1;
+  return acc;
 }, {}) : {});
 
 const selectState$4 = state => state.homepage || {};
@@ -1601,6 +1605,7 @@ exports.selectSyncData = selectSyncData;
 exports.selectSyncHash = selectSyncHash;
 exports.selectTrendingUris = selectTrendingUris;
 exports.selectUploadCount = selectUploadCount;
+exports.selectViewCount = selectViewCount;
 exports.statsReducer = statsReducer;
 exports.syncReducer = syncReducer;
 exports.webReducer = webReducer;

dist/bundle.js

@@ -210,6 +210,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "selectFetchingTrendingUris", function() { return redux_selectors_homepage__WEBPACK_IMPORTED_MODULE_25__["selectFetchingTrendingUris"]; });
 
 /* harmony import */ var redux_selectors_stats__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(38);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "selectViewCount", function() { return redux_selectors_stats__WEBPACK_IMPORTED_MODULE_26__["selectViewCount"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "makeSelectViewCountForUri", function() { return redux_selectors_stats__WEBPACK_IMPORTED_MODULE_26__["makeSelectViewCountForUri"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "makeSelectSubCountForUri", function() { return redux_selectors_stats__WEBPACK_IMPORTED_MODULE_26__["makeSelectSubCountForUri"]; });
@@ -3476,20 +3478,20 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var constants_action_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
 
 
-var doFetchViewCount = function doFetchViewCount(claimId) {
+var doFetchViewCount = function doFetchViewCount(claimIdCsv) {
   return function (dispatch) {
     dispatch({
       type: constants_action_types__WEBPACK_IMPORTED_MODULE_1__["FETCH_VIEW_COUNT_STARTED"]
     });
     return lbryio__WEBPACK_IMPORTED_MODULE_0__["default"].call('file', 'view_count', {
-      claim_id: claimId
+      claim_id: claimIdCsv
     }).then(function (result) {
-      var viewCount = result[0];
+      var viewCounts = result;
       dispatch({
         type: constants_action_types__WEBPACK_IMPORTED_MODULE_1__["FETCH_VIEW_COUNT_COMPLETED"],
         data: {
-          claimId: claimId,
-          viewCount: viewCount
+          claimIdCsv: claimIdCsv,
+          viewCounts: viewCounts
         }
       });
     })["catch"](function (error) {
@@ -4168,10 +4170,16 @@ var statsReducer = Object(util_redux_utils__WEBPACK_IMPORTED_MODULE_0__["handleA
   });
 }), _defineProperty(_handleActions, constants_action_types__WEBPACK_IMPORTED_MODULE_1__["FETCH_VIEW_COUNT_COMPLETED"], function (state, action) {
   var _action$data = action.data,
-      claimId = _action$data.claimId,
-      viewCount = _action$data.viewCount;
+      claimIdCsv = _action$data.claimIdCsv,
+      viewCounts = _action$data.viewCounts;
+  var viewCountById = Object.assign({}, state.viewCountById);
+  var claimIds = claimIdCsv.split(',');
 
-  var viewCountById = _objectSpread({}, state.viewCountById, _defineProperty({}, claimId, viewCount));
+  if (claimIds.length === viewCounts.length) {
+    claimIds.forEach(function (claimId, index) {
+      viewCountById[claimId] = viewCounts[index];
+    });
+  }
 
   return _objectSpread({}, state, {
     fetchingViewCount: false,
@@ -4577,10 +4585,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "selectBlacklistedOutpointMap", function() { return selectBlacklistedOutpointMap; });
 /* harmony import */ var reselect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(33);
 /* harmony import */ var reselect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(reselect__WEBPACK_IMPORTED_MODULE_0__);
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 
 var selectState = function selectState(state) {
   return state.blacklist || {};
@@ -4591,7 +4595,8 @@ var selectBlackListedOutpoints = Object(reselect__WEBPACK_IMPORTED_MODULE_0__["c
 var selectBlacklistedOutpointMap = Object(reselect__WEBPACK_IMPORTED_MODULE_0__["createSelector"])(selectBlackListedOutpoints, function (outpoints) {
   return outpoints ? outpoints.reduce(function (acc, val) {
     var outpoint = "".concat(val.txid, ":").concat(val.nout);
-    return _objectSpread({}, acc, _defineProperty({}, outpoint, 1));
+    acc[outpoint] = 1;
+    return acc;
   }, {}) : {};
 });
 
@@ -4606,10 +4611,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "selectFilteredOutpointMap", function() { return selectFilteredOutpointMap; });
 /* harmony import */ var reselect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(33);
 /* harmony import */ var reselect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(reselect__WEBPACK_IMPORTED_MODULE_0__);
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 
 var selectState = function selectState(state) {
   return state.filtered || {};
@@ -4620,7 +4621,8 @@ var selectFilteredOutpoints = Object(reselect__WEBPACK_IMPORTED_MODULE_0__["crea
 var selectFilteredOutpointMap = Object(reselect__WEBPACK_IMPORTED_MODULE_0__["createSelector"])(selectFilteredOutpoints, function (outpoints) {
   return outpoints ? outpoints.reduce(function (acc, val) {
     var outpoint = "".concat(val.txid, ":").concat(val.nout);
-    return _objectSpread({}, acc, _defineProperty({}, outpoint, 1));
+    acc[outpoint] = 1;
+    return acc;
   }, {}) : {};
 });
 

src/index.js

@@ -58,7 +58,11 @@ export {
   selectTrendingUris,
   selectFetchingTrendingUris,
 } from 'redux/selectors/homepage';
-export { makeSelectViewCountForUri, makeSelectSubCountForUri } from 'redux/selectors/stats';
+export {
+  selectViewCount,
+  makeSelectViewCountForUri,
+  makeSelectSubCountForUri,
+} from 'redux/selectors/stats';
 export {
   selectHasSyncedWallet,
   selectSyncData,

src/redux/actions/stats.js

@@ -2,13 +2,13 @@
 import Lbryio from 'lbryio';
 import * as ACTIONS from 'constants/action_types';
 
-export const doFetchViewCount = (claimId: string) => dispatch => {
+export const doFetchViewCount = (claimIdCsv: string) => dispatch => {
   dispatch({ type: ACTIONS.FETCH_VIEW_COUNT_STARTED });
 
-  return Lbryio.call('file', 'view_count', { claim_id: claimId })
+  return Lbryio.call('file', 'view_count', { claim_id: claimIdCsv })
     .then((result: Array<number>) => {
-      const viewCount = result[0];
-      dispatch({ type: ACTIONS.FETCH_VIEW_COUNT_COMPLETED, data: { claimId, viewCount } });
+      const viewCounts = result;
+      dispatch({ type: ACTIONS.FETCH_VIEW_COUNT_COMPLETED, data: { claimIdCsv, viewCounts } });
     })
     .catch(error => {
       dispatch({ type: ACTIONS.FETCH_VIEW_COUNT_FAILED, data: error });

src/redux/reducers/stats.js

@@ -18,9 +18,17 @@ export const statsReducer = handleActions(
       viewCountError: action.data,
     }),
     [ACTIONS.FETCH_VIEW_COUNT_COMPLETED]: (state, action) => {
-      const { claimId, viewCount } = action.data;
+      const { claimIdCsv, viewCounts } = action.data;
+
+      const viewCountById = Object.assign({}, state.viewCountById);
+      const claimIds = claimIdCsv.split(',');
+
+      if (claimIds.length === viewCounts.length) {
+        claimIds.forEach((claimId, index) => {
+          viewCountById[claimId] = viewCounts[index];
+        });
+      }
 
-      const viewCountById = { ...state.viewCountById, [claimId]: viewCount };
       return {
         ...state,
         fetchingViewCount: false,