changed show components to share ShowAsset

react/components/ShowAsset/index.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import ShowLite from 'components/ShowLite';
+import ShowDetails from 'components/ShowDetails';
+import request from 'utils/request';
+
+class ShowAsset extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      claimData: null,
+      error    : null,
+    };
+    this.getLongClaimId = this.getLongClaimId.bind(this);
+    this.getClaimData = this.getClaimData.bind(this);
+  }
+  componentDidMount () {
+    console.log('ShowAsset did mount');
+    console.log('ShowAsset props', this.props);
+    let body = {};
+    if (this.props.identifier) {
+      if (this.props.identifier.isChannel) {
+        body['channelName'] = this.props.identifier.channelName;
+        body['channelClaimId'] = this.props.identifier.channelClaimId;
+      } else {
+        body['claimId'] = this.props.identifier.claimId;
+      }
+    }
+    if (this.props.claim) {
+      body['claimName'] = this.props.claim.claimName;
+    }
+    const params = {
+      method : 'POST',
+      headers: new Headers({
+        'Content-Type': 'application/json',
+      }),
+      body: JSON.stringify(body),
+    }
+    const that = this;
+    this.getLongClaimId(params)
+      .then(claimLongId => {
+        return that.getClaimData(this.props.claim.claimName, claimLongId);
+      })
+      .then(claimData => {
+        this.setState({ claimData });
+      })
+      .catch(error => {
+        this.setState({error});
+      });
+  }
+  getLongClaimId (params) {
+    const url = `/api/claim-get-long-id`;
+    console.log('params:', params);
+    return new Promise((resolve, reject) => {
+      request(url, params)
+        .then(({ success, message }) => {
+          console.log('get long claim id response:', message);
+          if (!success) {
+            reject(message);
+          }
+          resolve(message);
+        })
+        .catch((error) => {
+          reject(error.message);
+        });
+    });
+  }
+  getClaimData (claimName, claimId) {
+    return new Promise((resolve, reject) => {
+      const url = `/api/claim-get-data/${claimName}/${claimId}`;
+      return request(url)
+        .then(({ success, message }) => {
+          console.log('get claim data response:', message);
+          if (!success) {
+            reject(message);
+          }
+          resolve(message);
+        })
+        .catch((error) => {
+          reject(error.message);
+        });
+    });
+  }
+  render () {
+    if (this.props.isServeRequest) {
+      return (
+        <ShowLite
+          error={this.state.error}
+          claimData={this.state.claimData}
+        />
+      );
+    }
+    return (
+      <ShowDetails
+        error={this.state.error}
+        claimData={this.state.claimData}
+      />
+    );
+  }
+};
+
+// required props
+// identifier
+// claim
+// isServeRequest
+
+export default ShowAsset;

react/components/ShowDetails/index.js

@@ -4,7 +4,7 @@ import AssetTitle from 'components/AssetTitle';
 import AssetDisplay from 'components/AssetDisplay';
 import AssetInfo from 'components/AssetInfo';
 
-class ShowDetailsPage extends React.Component {
+class ShowDetails extends React.Component {
   componentDidMount () {
     console.log(this.props);
   }
@@ -12,24 +12,29 @@ class ShowDetailsPage extends React.Component {
     return (
       <div>
         <NavBar/>
-        <div className="row row--tall row--padded">
+          {this.props.error &&
-          <div className="column column--10">
+          <p>{this.props.error}</p>
-            <AssetTitle title={this.props.claimName}/>
+          }
-          </div>
+          {this.props.claimData &&
-          <div className="column column--5 column--sml-10 align-content-top">
+          <div className="row row--tall row--padded">
-            <div className="row row--padded">
+            <div className="column column--10">
-              <AssetDisplay
+              <AssetTitle title={this.props.claimData.title}/>
-                claimName={this.props.claimName}
+            </div>
-                claimId={this.props.claimId}
+            <div className="column column--5 column--sml-10 align-content-top">
-              />
+              <div className="row row--padded">
+                <AssetDisplay
+                claimName={this.props.claimData.name}
+                claimId={this.props.claimData.claimId}
+                />
+              </div>
+            </div><div className="column column--5 column--sml-10 align-content-top">
+              <div className="row row--padded">
+              <AssetInfo claimId={this.props.claimData.claimId}/>
+              </div>
             </div>
-          </div><div className="column column--5 column--sml-10 align-content-top">
-          <div className="row row--padded">
-            <AssetInfo claimId={this.props.claimId}/>
           </div>
+          }
         </div>
-        </div>
-      </div>
     );
   }
 };
@@ -41,4 +46,4 @@ class ShowDetailsPage extends React.Component {
 // claimId
 // claimName
 
-export default ShowDetailsPage;
+export default ShowDetails;

react/components/ShowLite/index.js

@@ -1,78 +1,21 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import AssetDisplay from 'components/AssetDisplay';
-import request from 'utils/request';
 
-class ShowLitePage extends React.Component {
+class ShowLite extends React.Component {
-  constructor (props) {
-    super(props);
-    this.state = {
-      claimData: null,
-      error    : null,
-    };
-    this.getLongClaimId = this.getLongClaimId.bind(this);
-    this.getClaimData = this.getClaimData.bind(this);
-  }
-  componentDidMount () {
-    const that = this;
-    const claimName = that.props.claimName;
-    const claimId = that.props.claimId || 'none';
-    this.getLongClaimId(claimName, claimId)
-      .then(claimLongId => {
-        return that.getClaimData(claimName, claimLongId);
-      })
-      .then(claimData => {
-        this.setState({ claimData });
-      })
-      .catch(error => {
-        this.setState({error});
-      });
-  }
-  getLongClaimId (claimName, claimId) {
-    return new Promise((resolve, reject) => {
-      const url = `/api/claim-get-long-id/${claimName}/${claimId}`;
-      return request(url)
-        .then(({ success, message }) => {
-          console.log('get long claim id response:', message);
-          if (!success) {
-            reject(message);
-          }
-          resolve(message);
-        })
-        .catch((error) => {
-          reject(error.message);
-        });
-    });
-  }
-  getClaimData (claimName, claimId) {
-    return new Promise((resolve, reject) => {
-      const url = `/api/claim-get-data/${claimName}/${claimId}`;
-      return request(url)
-        .then(({ success, message }) => {
-          console.log('get claim data response:', message);
-          if (!success) {
-            reject(message);
-          }
-          resolve(message);
-        })
-        .catch((error) => {
-          reject(error.message);
-        });
-    });
-  }
   render () {
     return (
       <div className="row row--tall flex-container--column flex-container--center-center">
-        {this.state.error &&
+        {this.props.error &&
-          <p>{this.state.error}</p>
+          <p>{this.props.error}</p>
         }
-        {this.state.claimData &&
+        {this.props.claimData &&
         <div>
           <AssetDisplay
-              claimName={this.state.claimData.name}
+              claimName={this.props.claimData.name}
-              claimId={this.state.claimData.claimId}
+              claimId={this.props.claimData.claimId}
             />
-          <Link id="asset-boilerpate" className="link--primary fine-print" to={`/${this.state.claimData.claimId}/${this.state.claimData.name}`}>hosted via Spee.ch</Link>
+          <Link id="asset-boilerpate" className="link--primary fine-print" to={`/${this.props.claimData.claimId}/${this.props.claimData.name}`}>hosted via Spee.ch</Link>
         </div>
         }
       </div>
@@ -80,4 +23,4 @@ class ShowLitePage extends React.Component {
   }
 };
 
-export default ShowLitePage;
+export default ShowLite;

react/components/ShowPage/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import ShowLite from 'components/ShowLite';
+import ShowAsset from 'components/ShowAsset';
-import ShowDetails from 'components/ShowDetails';
 import ShowChannel from 'components/ShowChannel';
 import lbryUri from 'utils/lbryUri';
 
@@ -8,16 +7,13 @@ class ShowPage extends React.Component {
   constructor (props) {
     super(props);
     this.state = {
-      isChannel     : null,
+      identifier    : null,
-      channelName   : null,
+      claim         : null,
-      channelClaimId: null,
-      claimId       : null,
-      claimName     : null,
       isServeRequest: null,
-      longClaimId   : null,
     };
   }
   componentDidMount () {
+    console.log('ShowPage did mount');
     const identifier = this.props.match.params.identifier;
     const claim = this.props.match.params.claim;
     // handle case of identifier and claim
@@ -31,11 +27,15 @@ class ShowPage extends React.Component {
       }
       // set state
       return this.setState({
-        isChannel,
+        identifier: {
-        channelName,
+          isChannel,
-        channelClaimId,
+          channelName,
-        claimId,
+          channelClaimId,
-        claimName,
+          claimId,
+        },
+        claim: {
+          claimName,
+        },
         isServeRequest,
       });
     }
@@ -44,54 +44,51 @@ class ShowPage extends React.Component {
     try {
       ({ isChannel, channelName, channelClaimId } = lbryUri.parseIdentifier(claim));
     } catch (error) {
-      console.log('error:', error);
+      return console.log('error:', error);
     }
     if (isChannel) {
       return this.setState({
-        isChannel,
+        claim: {
-        channelName,
+          isChannel,
-        channelClaimId,
+          channelName,
+          channelClaimId,
+        },
       });
     }
     let claimName, isServeRequest;
     try {
       ({claimName, isServeRequest} = lbryUri.parseName(claim));
     } catch (error) {
-      console.log('error:', error);
+      return console.log('error:', error);
     }
     this.setState({
-      claimName,
+      claim: {
+        claimName,
+      },
       isServeRequest,
     });
   }
   render () {
-    const identifier = this.props.match.params.identifier;
+    console.log('rendering ShowPage');
-    console.log('rendering component');
+    if (this.state.claim) {
-    if (!identifier && this.state.isChannel) {
+      if (this.state.claim.isChannel) {
+        return (
+          <ShowChannel
+            channelName={this.state.claim.channelName}
+            channelClaimId={this.state.claim.channelClaimId}
+          />
+        );
+      }
       return (
-        <ShowChannel
+        <ShowAsset
-          channelName={this.state.channelName}
+          identifier={this.state.identifier} // this.state.url.identifier
-          channelClaimId={this.state.channelClaimId}
+          claim={this.state.claim} // this.state.url.claim
-        />
+          isServeRequest={this.state.isServeRequest} // this.state.url.ending
-      );
-    }
-    if (this.state.isServeRequest) {
-      return (
-        <ShowLite
-          claimName={this.state.claimName}
-          claimId={this.state.claimId}
-          channelName={this.state.channelName}
-          channelClaimId={this.state.channelClaimId}
         />
       );
     }
     return (
-      <ShowDetails
+      <p>Loading...</p>
-        claimName={this.state.claimName}
-        claimId={this.state.claimId}
-        channelName={this.state.channelName}
-        channelClaimId={this.state.channelClaimId}
-      />
     );
   }
 };

routes/api-routes.js

@@ -9,9 +9,10 @@ const { createPublishParams, parsePublishApiRequestBody, parsePublishApiRequestF
 const errorHandlers = require('../helpers/errorHandlers.js');
 const { sendGoogleAnalyticsTiming } = require('../helpers/statsHelpers.js');
 const { authenticateIfNoUserToken } = require('../auth/authentication.js');
-const { getChannelViewData } = require('../controllers/serveController.js');
+const { getChannelViewData, getClaimId } = require('../controllers/serveController.js');
 
 const NO_CHANNEL = 'NO_CHANNEL';
+const NO_CLAIM = 'NO_CLAIM';
 
 module.exports = (app) => {
   // route to run a claim_list request on the daemon
@@ -205,16 +206,21 @@ module.exports = (app) => {
         errorHandlers.handleApiError(originalUrl, ip, error, res);
       });
   });
-  app.get('/api/claim-get-long-id/:claimName/:claimId', ({ ip, originalUrl, body, params }, res) => {
+  app.post('/api/claim-get-long-id', ({ ip, originalUrl, body, params }, res) => {
-    const claimName = params.claimName;
+    logger.debug('body:', body);
-    let claimId = params.claimId;
+    const channelName = body.channelName;
-    if (claimId === 'none') claimId = null;
+    const channelClaimId = body.channelClaimId;
-    db.Claim.getLongClaimId(claimName, claimId)
+    const claimName = body.claimName;
-      .then(longId => {
+    const claimId = body.claimId;
-        if (!longId) {
+    getClaimId(channelName, channelClaimId, claimName, claimId)
+      .then(result => {
+        if (result === NO_CHANNEL) {
+          return res.status(200).json({success: false, message: 'No matching channel could be found'});
+        }
+        if (result === NO_CLAIM) {
           return res.status(200).json({success: false, message: 'No matching claim id could be found'});
         }
-        res.status(200).json({success: true, message: longId});
+        res.status(200).json({success: true, message: result});
       })
       .catch(error => {
         logger.error('api error getting long claim id', error);