LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

React router #343

Merged
bones7242 merged 96 commits from react-router into master 2018-02-15 08:02:17 +01:00
Conversation 3 Commits 96 Files changed 111 +189 -132
5 changed files with 189 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 6ac91046b1 - Show all commits

106
react/components/ShowAsset/index.js Normal file
View file

@ -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;

17
react/components/ShowDetails/index.js
View file

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

73
react/components/ShowLite/index.js
View file

@ -1,78 +1,21 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import AssetDisplay from 'components/AssetDisplay'; 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 () { render () {
return ( return (
<div className="row row--tall flex-container--column flex-container--center-center"> <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> <div>
<AssetDisplay <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>
} }
</div> </div>
@ -80,4 +23,4 @@ class ShowLitePage extends React.Component {
} }
}; };
export default ShowLitePage; export default ShowLite;

57
react/components/ShowPage/index.js
View file

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

24
routes/api-routes.js
View file

@ -9,9 +9,10 @@ const { createPublishParams, parsePublishApiRequestBody, parsePublishApiRequestF
const errorHandlers = require('../helpers/errorHandlers.js'); const errorHandlers = require('../helpers/errorHandlers.js');
const { sendGoogleAnalyticsTiming } = require('../helpers/statsHelpers.js'); const { sendGoogleAnalyticsTiming } = require('../helpers/statsHelpers.js');
const { authenticateIfNoUserToken } = require('../auth/authentication.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_CHANNEL = 'NO_CHANNEL';
const NO_CLAIM = 'NO_CLAIM';
module.exports = (app) => { module.exports = (app) => {
// route to run a claim_list request on the daemon // route to run a claim_list request on the daemon
@ -205,16 +206,21 @@ module.exports = (app) => {
errorHandlers.handleApiError(originalUrl, ip, error, res); 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'}); 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 => { .catch(error => {
logger.error('api error getting long claim id', error); logger.error('api error getting long claim id', error);