controllers/serveController.js

@@ -1,6 +1,6 @@
 const db = require('../models');
 const logger = require('winston');
-const { returnPaginatedChannelViewData } = require('../helpers/channelPagination.js');
+const { returnPaginatedChannelClaims } = require('../helpers/channelPagination.js');
 
 const NO_CHANNEL = 'NO_CHANNEL';
 const NO_CLAIM = 'NO_CLAIM';
@@ -53,7 +53,7 @@ module.exports = {
         });
     });
   },
-  getChannelViewData (channelName, channelClaimId, page) {
+  getChannelData (channelName, channelClaimId, page) {
     return new Promise((resolve, reject) => {
       // 1. get the long channel Id (make sure channel exists)
       db.Certificate.getLongChannelId(channelName, channelClaimId)
@@ -62,14 +62,41 @@ module.exports = {
             return [null, null, null];
           }
           // 2. get the short ID and all claims for that channel
-          return Promise.all([longChannelClaimId, db.Certificate.getShortChannelIdFromLongChannelId(longChannelClaimId, channelName), db.Claim.getAllChannelClaims(longChannelClaimId)]);
+          return Promise.all([longChannelClaimId, db.Certificate.getShortChannelIdFromLongChannelId(longChannelClaimId, channelName)]);
         })
-        .then(([longChannelClaimId, shortChannelClaimId, channelClaimsArray]) => {
+        .then(([longChannelClaimId, shortChannelClaimId]) => {
+          if (!longChannelClaimId) {
+            return resolve(NO_CHANNEL);
+          }
+          // 3. return all the channel information
+          resolve({
+            channelName,
+            longChannelClaimId,
+            shortChannelClaimId,
+          });
+        })
+        .catch(error => {
+          reject(error);
+        });
+    });
+  },
+  getChannelClaims (channelName, channelClaimId, page) {
+    return new Promise((resolve, reject) => {
+      // 1. get the long channel Id (make sure channel exists)
+      db.Certificate.getLongChannelId(channelName, channelClaimId)
+        .then(longChannelClaimId => {
+          if (!longChannelClaimId) {
+            return [null, null, null];
+          }
+          // 2. get the short ID and all claims for that channel
+          return Promise.all([longChannelClaimId, db.Claim.getAllChannelClaims(longChannelClaimId)]);
+        })
+        .then(([longChannelClaimId, channelClaimsArray]) => {
           if (!longChannelClaimId) {
             return resolve(NO_CHANNEL);
           }
           // 3. format the data for the view, including pagination
-          let paginatedChannelViewData = returnPaginatedChannelViewData(channelName, longChannelClaimId, shortChannelClaimId, channelClaimsArray, page);
+          let paginatedChannelViewData = returnPaginatedChannelClaims(channelName, longChannelClaimId, channelClaimsArray, page);
           // 4. return all the channel information and contents
           resolve(paginatedChannelViewData);
         })

helpers/channelPagination.js

@@ -1,13 +1,12 @@
-const CLAIMS_PER_PAGE = 10;
+const CLAIMS_PER_PAGE = 12;
 
 module.exports = {
-  returnPaginatedChannelViewData (channelName, longChannelClaimId, shortChannelClaimId, claims, page) {
+  returnPaginatedChannelClaims (channelName, longChannelClaimId, claims, page) {
     const totalPages = module.exports.determineTotalPages(claims);
     const paginationPage = module.exports.getPageFromQuery(page);
     const viewData = {
       channelName       : channelName,
       longChannelClaimId: longChannelClaimId,
-      shortChannelClaimId: shortChannelClaimId,
       claims            : module.exports.extractPageFromClaims(claims, paginationPage),
       previousPage      : module.exports.determinePreviousPage(paginationPage),
       currentPage       : paginationPage,
@@ -30,7 +29,7 @@ module.exports = {
     // logger.debug('claims is array?', Array.isArray(claims));
     // logger.debug(`pageNumber ${pageNumber} is number?`, Number.isInteger(pageNumber));
     const claimStartIndex = (pageNumber - 1) * CLAIMS_PER_PAGE;
-    const claimEndIndex = claimStartIndex + 10;
+    const claimEndIndex = claimStartIndex + CLAIMS_PER_PAGE;
     const pageOfClaims = claims.slice(claimStartIndex, claimEndIndex);
     return pageOfClaims;
   },

react/components/AssetPreview/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom'
 
 const AssetPreview = ({ name, claimId, fileExt, contentType }) => {
   const directSourceLink = `${claimId}/${name}.${fileExt}`;
@@ -17,36 +17,36 @@ const AssetPreview = ({ name, claimId, fileExt, contentType }) => {
     padding: '0px',
     margin : '0px',
   };
+  return (
+    <div style={previewHolderStyle}>
+      <Link to={showUrlLink} >
+        {(() => {
           switch (contentType) {
             case 'image/jpeg':
             case 'image/jpg':
             case 'image/png':
               return (
-        <div style={previewHolderStyle}>
-          <Link to={showUrlLink} >
                 <img style={assetStyle} className={'asset-preview--image'} src={directSourceLink} alt={name}/>
-          </Link>
-        </div>
               );
             case 'image/gif':
               return (
-        <div style={previewHolderStyle}>
                 <img style={assetStyle} className={'asset-preview--gif'} src={directSourceLink} alt={name}/>
-        </div>
               );
             case 'video/mp4':
               return (
-        <div style={previewHolderStyle}>
                 <video style={assetStyle}>
                   <source src={directSourceLink} type={contentType}/>
                 </video>
-        </div>
               );
             default:
               return (
                 <p>unsupported file type</p>
               );
           }
+        })()}
+      </Link>
+    </div>
+  );
 };
 
 export default AssetPreview;

react/components/ChannelClaimsDisplay/index.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import NavBar from 'containers/NavBar';
+import AssetPreview from 'components/AssetPreview';
+import request from 'utils/request';
+
+class ChannelClaimsDisplay extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      error: null,
+      page : 1,
+    };
+    this.getAndStoreChannelClaims = this.getAndStoreChannelClaims.bind(this);
+  }
+  componentDidMount () {
+    const channelName = this.props.channelName;
+    const channelClaimId = this.props.channelClaimId || 'none';
+    const page = this.state.page;
+    this.getAndStoreChannelClaims(channelName, channelClaimId, page);
+  }
+  getAndStoreChannelClaims (channelName, channelClaimId, page) {
+    const url = `/api/channel-claims/${channelName}/${channelClaimId}/${page}`;
+    const that = this;
+    return request(url)
+      .then(({ success, message, data }) => {
+        console.log('api/channel-claims response:', data);
+        if (!success) {
+          return that.setState({error: message});
+        }
+        that.setState({
+          claims      : data.claims,
+          currentPage : data.currentPage,
+          nextPage    : data.nextPage,
+          previousPage: data.previousPage,
+          totalPages  : data.totalPages,
+          totalResults: data.totalResults,
+        });
+      })
+      .catch((error) => {
+        that.setState({error: error.message});
+      });
+  }
+  render () {
+    return (
+      <div>
+        {this.state.error ? (
+          <div className="row">
+            <div className="column column--10">
+              <p>{this.state.error}</p>
+            </div>
+          </div>
+        ) : (
+          <div className="row row--tall">
+            <p># of claims in channel: {this.state.totalResults >= 0 ? this.state.totalResults : 'loading...' }</p>
+            {this.state.claims && this.state.claims.map((claim, index) => <AssetPreview
+              name={claim.name}
+              claimId={claim.claimId}
+              contentType={claim.contentType}
+              key={index}
+            />)}
+          </div>
+        )}
+      </div>
+    );
+  }
+};
+
+// required props
+// channelName
+// channelClaimId
+
+export default ChannelClaimsDisplay;

react/components/ShowChannel/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import NavBar from 'containers/NavBar';
-import AssetPreview from 'components/AssetPreview';
+import ChannelClaimsDisplay from 'components/ChannelClaimsDisplay';
 import request from 'utils/request';
 
 class ShowChannel extends React.Component {
@@ -8,42 +8,27 @@ class ShowChannel extends React.Component {
     super(props);
     this.state = {
       error: null,
-      channelName        : null,
-      claims             : null,
-      currentPage        : null,
-      longChannelClaimId : null,
-      nextPage           : null,
-      previousPage       : null,
-      shortChannelClaimId: null,
-      totalPages         : null,
-      totalResults       : null,
     };
-    this.updateChannelData = this.updateChannelData.bind(this);
+    this.getAndStoreChannelData = this.getAndStoreChannelData.bind(this);
   }
   componentDidMount () {
-    this.updateChannelData(1);
-  }
-  updateChannelData (page) {
     const channelName = this.props.channelName;
     const channelClaimId = this.props.channelClaimId || 'none';
-    const url = `/api/channel-get-content/${channelName}/${channelClaimId}/${page}`;
+    this.getAndStoreChannelData(channelName, channelClaimId);
+  }
+  getAndStoreChannelData (channelName, channelClaimId) {
+    const url = `/api/channel-data/${channelName}/${channelClaimId}`;
     const that = this;
     return request(url)
       .then(({ success, message, data }) => {
-        console.log('get channel data response:', data);
+        console.log('api/channel-data response:', data);
         if (!success) {
           return that.setState({error: message});
         }
         that.setState({
           channelName        : data.channelName,
-          claims             : data.claims,
-          currentPage        : data.currentPage,
           longChannelClaimId : data.longChannelClaimId,
-          nextPage           : data.nextPage,
-          previousPage       : data.previousPage,
           shortChannelClaimId: data.shortChannelClaimId,
-          totalPages         : data.totalPages,
-          totalResults       : data.totalResults,
         });
       })
       .catch((error) => {
@@ -66,18 +51,14 @@ class ShowChannel extends React.Component {
               <h2>channel name: {this.props.channelName}</h2>
               <p>full channel id: {this.state.longChannelClaimId ? this.state.longChannelClaimId : 'loading...'}</p>
               <p>short channel id: {this.state.shortChannelClaimId ? this.state.shortChannelClaimId : 'loading...'}</p>
-              <p># of claims in channel: {this.state.totalResults >= 0 ? this.state.totalResults : 'loading...' }</p>
             </div>
             <div className="column column--10">
-              <div>
+              { (this.state.channelName && this.state.longChannelClaimId) &&
-                {/* claims here */}
+                <ChannelClaimsDisplay
-                {this.state.claims && this.state.claims.map((claim, index) => <AssetPreview
+                  channelName={this.state.channelName}
-                  name={claim.name}
+                  channelClaimId={this.state.longChannelClaimId}
-                  claimId={claim.claimId}
+                />
-                  contentType={claim.contentType}
+              }
-                  key={index}
-                />)}
-              </div>
             </div>
           </div>
         )}

routes/api-routes.js

@@ -9,7 +9,7 @@ const { createPublishParams, parsePublishApiRequestBody, parsePublishApiRequestF
 const errorHandlers = require('../helpers/errorHandlers.js');
 const { sendGoogleAnalyticsTiming } = require('../helpers/statsHelpers.js');
 const { authenticateIfNoUserToken } = require('../auth/authentication.js');
-const { getChannelViewData, getClaimId } = require('../controllers/serveController.js');
+const { getChannelData, getChannelClaims, getClaimId } = require('../controllers/serveController.js');
 
 const NO_CHANNEL = 'NO_CHANNEL';
 const NO_CLAIM = 'NO_CLAIM';
@@ -189,12 +189,28 @@ module.exports = (app) => {
         errorHandlers.handleApiError(originalUrl, ip, error, res);
       });
   });
-  app.get('/api/channel-get-content/:name/:longId/:page', ({ ip, originalUrl, body, params }, res) => {
+  app.get('/api/channel-data/:channelName/:channelClaimId', ({ ip, originalUrl, body, params }, res) => {
-    const channelName = params.name;
+    const channelName = params.channelName;
-    let channelClaimId = params.longId;
+    let channelClaimId = params.channelClaimId;
+    if (channelClaimId === 'none') channelClaimId = null;
+    getChannelData(channelName, channelClaimId, 0) // getChannelViewData(channelName, channelId, 0)
+      .then(data => {
+        if (data === NO_CHANNEL) {
+          return res.status(200).json({success: false, message: 'No matching channel was found'});
+        }
+        res.status(200).json({success: true, data});
+      })
+      .catch(error => {
+        logger.error('api error getting channel contents', error);
+        errorHandlers.handleApiError(originalUrl, ip, error, res);
+      });
+  });
+  app.get('/api/channel-claims/:channelName/:channelClaimId/:page', ({ ip, originalUrl, body, params }, res) => {
+    const channelName = params.channelName;
+    let channelClaimId = params.channelClaimId;
     if (channelClaimId === 'none') channelClaimId = null;
     const page = params.page;
-    getChannelViewData(channelName, channelClaimId, page)
+    getChannelClaims(channelName, channelClaimId, page)// getChannelViewData(channelName, channelClaimId, page)
       .then(data => {
         if (data === NO_CHANNEL) {
           return res.status(200).json({success: false, message: 'No matching channel was found'});