From 6ac91046b1dc83143636bdbb258116b0d410fc2f Mon Sep 17 00:00:00 2001 From: bill bittner Date: Tue, 30 Jan 2018 17:15:23 -0800 Subject: [PATCH] changed show components to share ShowAsset --- react/components/ShowAsset/index.js | 106 ++++++++++++++++++++++++++ react/components/ShowDetails/index.js | 39 +++++----- react/components/ShowLite/index.js | 73 ++---------------- react/components/ShowPage/index.js | 79 +++++++++---------- routes/api-routes.js | 24 +++--- 5 files changed, 189 insertions(+), 132 deletions(-) create mode 100644 react/components/ShowAsset/index.js diff --git a/react/components/ShowAsset/index.js b/react/components/ShowAsset/index.js new file mode 100644 index 00000000..63d2021b --- /dev/null +++ b/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 ( + + ); + } + return ( + + ); + } +}; + +// required props +// identifier +// claim +// isServeRequest + +export default ShowAsset; diff --git a/react/components/ShowDetails/index.js b/react/components/ShowDetails/index.js index 1825252d..a6e810bb 100644 --- a/react/components/ShowDetails/index.js +++ b/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 (
-
-
- -
-
-
- + {this.props.error && +

{this.props.error}

+ } + {this.props.claimData && +
+
+ +
+
+
+ +
+
+
+ +
-
-
-
+ }
-
-
); } }; @@ -41,4 +46,4 @@ class ShowDetailsPage extends React.Component { // claimId // claimName -export default ShowDetailsPage; +export default ShowDetails; diff --git a/react/components/ShowLite/index.js b/react/components/ShowLite/index.js index 908042d7..a7865278 100644 --- a/react/components/ShowLite/index.js +++ b/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 { - 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); - }); - }); - } +class ShowLite extends React.Component { render () { return (
- {this.state.error && -

{this.state.error}

+ {this.props.error && +

{this.props.error}

} - {this.state.claimData && + {this.props.claimData &&
- hosted via Spee.ch + hosted via Spee.ch
}
@@ -80,4 +23,4 @@ class ShowLitePage extends React.Component { } }; -export default ShowLitePage; +export default ShowLite; diff --git a/react/components/ShowPage/index.js b/react/components/ShowPage/index.js index b42e76d6..5846c686 100644 --- a/react/components/ShowPage/index.js +++ b/react/components/ShowPage/index.js @@ -1,6 +1,5 @@ import React from 'react'; -import ShowLite from 'components/ShowLite'; -import ShowDetails from 'components/ShowDetails'; +import ShowAsset from 'components/ShowAsset'; 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, - channelName : null, - channelClaimId: null, - claimId : null, - claimName : null, + identifier : null, + claim : 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, - channelName, - channelClaimId, - claimId, - claimName, + identifier: { + isChannel, + channelName, + channelClaimId, + 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, - channelName, - channelClaimId, + claim: { + isChannel, + 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 component'); - if (!identifier && this.state.isChannel) { + console.log('rendering ShowPage'); + if (this.state.claim) { + if (this.state.claim.isChannel) { + return ( + + ); + } return ( - - ); - } - if (this.state.isServeRequest) { - return ( - ); } return ( - +

Loading...

); } }; diff --git a/routes/api-routes.js b/routes/api-routes.js index dc63a44b..57f1c629 100644 --- a/routes/api-routes.js +++ b/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) => { - const claimName = params.claimName; - let claimId = params.claimId; - if (claimId === 'none') claimId = null; - db.Claim.getLongClaimId(claimName, claimId) - .then(longId => { - if (!longId) { + app.post('/api/claim-get-long-id', ({ ip, originalUrl, body, params }, res) => { + logger.debug('body:', body); + const channelName = body.channelName; + const channelClaimId = body.channelClaimId; + const claimName = body.claimName; + const claimId = body.claimId; + 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);