switched show and channel components back to inernal state

react/components/AssetDisplay/index.js

@@ -39,9 +39,12 @@ class AssetDisplay extends React.Component {
     const url = `/api/file-is-available/${this.props.name}/${this.props.claimId}`;
     return new Promise((resolve, reject) => {
       Request(url)
-        .then(isAvailable => {
-          console.log('/api/file-is-available response:', isAvailable);
-          resolve(isAvailable);
+        .then(({success, message, data: isAvailable}) => {
+          if (success) {
+            console.log('/api/file-is-available response:', isAvailable);
+            return resolve(isAvailable);
+          }
+          reject(new Error(message));
         })
         .catch(error => {
           reject(error);
@@ -53,9 +56,12 @@ class AssetDisplay extends React.Component {
     const url = `/api/claim-get/${this.props.name}/${this.props.claimId}`;
     return new Promise((resolve, reject) => {
       Request(url)
-        .then(response => {
-          console.log('/api/claim-get response:', response);
-          resolve(true);
+        .then(({success, message}) => {
+          console.log('/api/claim-get response:', success, message);
+          if (success) {
+            return resolve(true);
+          }
+          reject(new Error(message));
         })
         .catch(error => {
           reject(error);
@@ -65,6 +71,11 @@ class AssetDisplay extends React.Component {
   render () {
     return (
       <div id="asset-display-component">
+        {(this.state.status === LOCAL_CHECK) &&
+        <div>
+          <p>Checking to see if Spee.ch has your asset locally...</p>
+        </div>
+        }
         {(this.state.status === SEARCHING) &&
           <div>
             <p>Sit tight, we're searching the LBRY blockchain for your asset!</p>

react/components/ChannelClaimsDisplay/index.js

@@ -0,0 +1,79 @@
+import React from 'react/index';
+import AssetPreview from 'components/AssetPreview';
+import request from 'utils/request';
+
+class ChannelClaimsDisplay extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      error      : null,
+      claims     : null,
+      currentPage: null,
+      totalPages : null,
+      totalClaims: null,
+    };
+    this.updateClaimsData = this.updateClaimsData.bind(this);
+  }
+  componentDidMount () {
+    this.updateClaimsData(1);
+  }
+  updateClaimsData (page) {
+    const name = this.props.name;
+    const longId = this.props.longId;
+    const url = `/api/channel-claims/${name}/${longId}/${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});
+        }
+        this.setState({
+          claims     : data.claims,
+          currentPage: data.currentPage,
+          totalPages : data.totalPages,
+          totalClaims: 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>total pages: {this.state.totalPages}</p>
+            <p>total claims: {this.state.totalClaims}</p>
+            {this.state.claims &&
+            <div>
+              {this.state.claims.map((claim, index) => <AssetPreview
+                name={claim.name}
+                claimId={claim.claimId}
+                contentType={claim.contentType}
+                key={index}
+              />)}
+              {(this.state.currentPage > 1) && <button onClick={this.updateClaimsData(this.state.currentPage - 1)}>Previous Page</button>}
+              <p>current page: {this.state.currentPage}</p>
+              {(this.state.currentPage < this.state.totalPages) && <button onClick={this.updateClaimsData(this.state.currentPage + 1)}>Next Page</button>}
+            </div>
+            }
+          </div>
+        )}
+      </div>
+    );
+  }
+};
+
+// PropTypes
+// name
+// id
+
+export default ChannelClaimsDisplay;