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,19 +1,18 @@
-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,
-      nextPage           : module.exports.determineNextPage(totalPages, paginationPage),
-      totalPages         : totalPages,
-      totalResults       : module.exports.determineTotalClaims(claims),
+      channelName       : channelName,
+      longChannelClaimId: longChannelClaimId,
+      claims            : module.exports.extractPageFromClaims(claims, paginationPage),
+      previousPage      : module.exports.determinePreviousPage(paginationPage),
+      currentPage       : paginationPage,
+      nextPage          : module.exports.determineNextPage(totalPages, paginationPage),
+      totalPages        : totalPages,
+      totalResults      : module.exports.determineTotalClaims(claims),
     };
     return viewData;
   },
@@ -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,52 +1,52 @@
 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}`;
   const showUrlLink = `${claimId}/${name}`;
   const previewHolderStyle = {
-    clear: 'both',
-    display: 'inline-block',
-    width: '31%',
-    padding: '0px',
-    margin: '1%',
+    clear          : 'both',
+    display        : 'inline-block',
+    width          : '31%',
+    padding        : '0px',
+    margin         : '1%',
     backgroundColor: 'black',
   };
   const assetStyle = {
-    width: '100%',
+    width  : '100%',
     padding: '0px',
-    margin: '0px',
+    margin : '0px',
   };
-  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>
-      );
-  }
+  return (
+    <div style={previewHolderStyle}>
+      <Link to={showUrlLink} >
+        {(() => {
+          switch (contentType) {
+            case 'image/jpeg':
+            case 'image/jpg':
+            case 'image/png':
+              return (
+                <img style={assetStyle} className={'asset-preview--image'} src={directSourceLink} alt={name}/>
+              );
+            case 'image/gif':
+              return (
+                <img style={assetStyle} className={'asset-preview--gif'} src={directSourceLink} alt={name}/>
+              );
+            case 'video/mp4':
+              return (
+                <video style={assetStyle}>
+                  <source src={directSourceLink} type={contentType}/>
+                </video>
+              );
+            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,49 +1,34 @@
 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 {
   constructor (props) {
     super(props);
     this.state = {
-      error              : null,
-      channelName        : null,
-      claims             : null,
-      currentPage        : null,
-      longChannelClaimId : null,
-      nextPage           : null,
-      previousPage       : null,
-      shortChannelClaimId: null,
-      totalPages         : null,
-      totalResults       : null,
+      error: 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>
-                {/* claims here */}
-                {this.state.claims && this.state.claims.map((claim, index) => <AssetPreview
-                  name={claim.name}
-                  claimId={claim.claimId}
-                  contentType={claim.contentType}
-                  key={index}
-                />)}
-              </div>
+              { (this.state.channelName && this.state.longChannelClaimId) &&
+                <ChannelClaimsDisplay
+                  channelName={this.state.channelName}
+                  channelClaimId={this.state.longChannelClaimId}
+                />
+              }
             </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) => {
-    const channelName = params.name;
-    let channelClaimId = params.longId;
+  app.get('/api/channel-data/:channelName/:channelClaimId', ({ ip, originalUrl, body, params }, res) => {
+    const channelName = params.channelName;
+    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'});