Merge pull request #664 from lbryio/claimViews

Add views to claim pages for logged in channels

client/src/actions/show.js

@@ -91,10 +91,17 @@ export function addRequestToRequestList (id, error, key) {
 
 // asset actions
 
-export function addAssetToAssetList (id, error, name, claimId, shortId, claimData) {
+export function addAssetToAssetList (id, error, name, claimId, shortId, claimData, claimViews) {
   return {
     type: actions.ASSET_ADD,
-    data: { id, error, name, claimId, shortId, claimData },
+    data: { id, error, name, claimId, shortId, claimData, claimViews },
+  };
+}
+
+export function updateAssetViewsInList (id, claimId, claimViews) {
+  return {
+    type: actions.ASSET_VIEWS_UPDATE,
+    data: { id, claimId, claimViews },
   };
 }
 

client/src/api/assetApi.js

@@ -37,3 +37,8 @@ export function checkClaimAvailability (claim) {
   const url = `/api/claim/availability/${claim}`;
   return Request(url);
 }
+
+export function getClaimViews (claimId) {
+  const url = `/api/claim/views/${claimId}`;
+  return Request(url);
+}

client/src/constants/show_action_types.js

@@ -9,7 +9,8 @@ export const SPECIAL_ASSET_REQUEST_NEW = 'SPECIAL_ASSET_REQUEST_NEW';
 export const REQUEST_LIST_ADD = 'REQUEST_LIST_ADD';
 
 // asset actions
-export const ASSET_ADD = `ASSET_ADD`;
+export const ASSET_ADD = 'ASSET_ADD';
+export const ASSET_VIEWS_UPDATE = 'ASSET_VIEWS_UPDATE';
 
 // channel actions
 export const CHANNEL_ADD = 'CHANNEL_ADD';

client/src/containers/AssetInfo/view.jsx

@@ -9,7 +9,16 @@ import ClickToCopy from '@components/ClickToCopy';
 
 class AssetInfo extends React.Component {
   render () {
-    const { asset: { shortId, claimData : { channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host } } } = this.props;
+    const {
+      asset: {
+        shortId,
+        claimData : {
+          channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host
+        },
+        claimViews,
+      }
+    } = this.props;
+
     return (
       <div>
         {channelName && (
@@ -27,6 +36,21 @@ class AssetInfo extends React.Component {
           </Row>
         )}
 
+        {claimViews && (
+          <Row>
+            <RowLabeled
+              label={
+                <Label value={'Views:'} />
+              }
+              content={
+                <span className='text'>
+                  {claimViews}
+                </span>
+              }
+            />
+          </Row>
+        )}
+
         <Row>
           <RowLabeled
             label={

client/src/reducers/show.js

@@ -47,11 +47,21 @@ export default function (state = initialState, action) {
       return Object.assign({}, state, {
         assetList: Object.assign({}, state.assetList, {
           [action.data.id]: {
-            error    : action.data.error,
-            name     : action.data.name,
-            claimId  : action.data.claimId,
-            shortId  : action.data.shortId,
-            claimData: action.data.claimData,
+            error     : action.data.error,
+            name      : action.data.name,
+            claimId   : action.data.claimId,
+            shortId   : action.data.shortId,
+            claimData : action.data.claimData,
+            claimViews: action.data.claimViews,
+          },
+        }),
+      });
+    case actions.ASSET_VIEWS_UPDATE:
+      return Object.assign({}, state, {
+        assetList: Object.assign({}, state.assetList, {
+          [action.data.id]: {
+            ...state.assetList[action.data.id],
+            claimViews: action.data.claimViews,
           },
         }),
       });

client/src/sagas/rootSaga.js

@@ -1,6 +1,6 @@
 import { all } from 'redux-saga/effects';
 import { watchHandleShowPageUri, watchHandleShowHomepage } from './show_uri';
-import { watchNewAssetRequest } from './show_asset';
+import { watchNewAssetRequest, watchUpdateAssetViews } from './show_asset';
 import { watchNewChannelRequest, watchUpdateChannelClaims } from './show_channel';
 import { watchNewSpecialAssetRequest } from './show_special';
 import { watchFileIsRequested } from './file';
@@ -26,5 +26,6 @@ export function * rootSaga () {
     watchChannelCreate(),
     watchChannelLoginCheck(),
     watchChannelLogout(),
+    watchUpdateAssetViews(),
   ]);
 }

client/src/sagas/show_asset.js

@@ -1,7 +1,15 @@
 import { call, put, select, takeLatest } from 'redux-saga/effects';
 import * as actions from '../constants/show_action_types';
-import { addRequestToRequestList, onRequestError, onRequestUpdate, addAssetToAssetList } from '../actions/show';
-import { getLongClaimId, getShortId, getClaimData } from '../api/assetApi';
+import * as channelActions from '../constants/channel_action_types';
+import {
+  addRequestToRequestList,
+  onRequestError,
+  onRequestUpdate,
+  addAssetToAssetList,
+  updateAssetViewsInList,
+} from '../actions/show';
+import { getLongClaimId, getShortId, getClaimData, getClaimViews } from '../api/assetApi';
+import { selectChannelState } from '../selectors/channel';
 import { selectShowState } from '../selectors/show';
 import { selectSiteHost } from '../selectors/site';
 
@@ -37,19 +45,72 @@ export function * newAssetRequest (action) {
   } catch (error) {
     return yield put(onRequestError(error.message));
   }
+
   // get asset claim data
   let claimData;
+  let claimViews = null;
+
   try {
     ({data: claimData} = yield call(getClaimData, host, name, longId));
   } catch (error) {
     return yield put(onRequestError(error.message));
   }
+
+  try {
+    const { loggedInChannel } = yield select(selectChannelState);
+
+    if(loggedInChannel && loggedInChannel.longId) {
+      const {
+        data: claimViewData
+      } = yield call(getClaimViews, longId);
+
+      claimViews = claimViewData[longId] || 0;
+    }
+  } catch (error) { }
+
   // add asset to asset list
-  yield put(addAssetToAssetList(assetKey, null, name, longId, shortId, claimData));
+  yield put(addAssetToAssetList(assetKey, null, name, longId, shortId, claimData, claimViews));
   // clear any errors in request error
   yield put(onRequestError(null));
 };
 
+export function * updateAssetViews (action) {
+  // update each loaded claim that's in the loggedInChannel
+  try {
+    const showState = yield select(selectShowState);
+    const { data: loggedInChannel } = action;
+
+    const channelId = loggedInChannel.longId;
+
+    for(let key in showState.assetList) {
+      let asset = showState.assetList[key];
+
+      if(asset.claimData && asset.claimData.certificateId === channelId) {
+        const longId = asset.claimId;
+        const assetKey = `a#${asset.name}#${longId}`;
+
+        let claimViews = null;
+
+        if(longId) {
+          const {
+            data: claimViewData
+          } = yield call(getClaimViews, longId);
+
+          claimViews = claimViewData[longId] || 0;
+        }
+
+        yield put(updateAssetViewsInList(assetKey, longId, claimViews));
+      }
+    }
+  } catch (error) {
+    console.log(error)
+  }
+};
+
+export function * watchUpdateAssetViews (action) {
+  yield takeLatest(channelActions.CHANNEL_UPDATE, updateAssetViews)
+};
+
 export function * watchNewAssetRequest () {
   yield takeLatest(actions.ASSET_REQUEST_NEW, newAssetRequest);
 };

server/controllers/api/claim/views/index.js

@@ -0,0 +1,28 @@
+const { handleErrorResponse } = require('../../../utils/errorHandlers.js');
+const db = require('server/models');
+
+/*
+
+  route to return data for a claim
+
+*/
+
+const claimViews = async ({ ip, originalUrl, body, params }, res) => {
+  let claimId = params.claimId;
+  if (claimId === 'none') claimId = null;
+
+  try {
+    const viewCount = await db.Views.getGetUniqueViewsbByClaimId(claimId);
+
+    res.status(200).json({
+      success: true,
+      data   : {
+        [claimId]: viewCount,
+      },
+    });
+  } catch(error) {
+    handleErrorResponse(originalUrl, ip, error, res);
+  }
+};
+
+module.exports = claimViews;

server/models/views.js

@@ -51,7 +51,17 @@ module.exports = (sequelize, { BOOLEAN, DATE, STRING }) => {
       `SELECT ${selectString} FROM Views WHERE time > '${sqlTime}' GROUP BY ${groupString}`,
       { type: sequelize.QueryTypes.SELECT }
     );
-  }
+  };
+
+  Views.getGetUniqueViewsbByClaimId = (claimId) => {
+    return Views.count({
+      where: {
+        claimId,
+      },
+      distinct: true,
+      col: 'ip'
+    })
+  };
 
   return Views;
 };

server/routes/api/index.js

@@ -16,6 +16,7 @@ const claimLongId = require('../../controllers/api/claim/longId');
 const claimPublish = require('../../controllers/api/claim/publish');
 const claimResolve = require('../../controllers/api/claim/resolve');
 const claimShortId = require('../../controllers/api/claim/shortId');
+const claimViews = require('../../controllers/api/claim/views');
 const fileAvailability = require('../../controllers/api/file/availability');
 const specialClaims = require('../../controllers/api/special/claims');
 const userPassword = require('../../controllers/api/user/password');
@@ -97,6 +98,7 @@ module.exports = {
   '/api/claim/publish': { method: 'post', controller: [ torCheckMiddleware, autoblockPublishMiddleware, multipartMiddleware, claimPublish ] },
   '/api/claim/resolve/:name/:claimId': { controller: [ torCheckMiddleware, claimResolve ] },
   '/api/claim/short-id/:longId/:name': { controller: [ torCheckMiddleware, claimShortId ] },
+  '/api/claim/views/:claimId': { controller: [ torCheckMiddleware, claimViews ] },
   // file routes
   '/api/file/availability/:name/:claimId': { controller: [ torCheckMiddleware, fileAvailability ] },
   // user routes