React router #343

Merged
bones7242 merged 96 commits from react-router into master 2018-02-15 08:02:17 +01:00
7 changed files with 117 additions and 13 deletions
Showing only changes of commit 1f5a493375 - Show all commits

View file

@ -29,8 +29,8 @@ spee.ch is a single-serving site that reads and publishes images and videos to a
## API ## API
#### GET #### GET
* /api/claim-resolve/:name * /api/claim-resolve/:name/:claimId
* example: `curl https://spee.ch/api/claim-resolve/doitlive` * example: `curl https://spee.ch/api/claim-resolve/doitlive/xyz`
* /api/claim-list/:name * /api/claim-list/:name
* example: `curl https://spee.ch/api/claim-list/doitlive` * example: `curl https://spee.ch/api/claim-list/doitlive`
* /api/claim-is-available/:name ( * /api/claim-is-available/:name (

View file

@ -342,6 +342,7 @@ module.exports = (sequelize, { STRING, BOOLEAN, INTEGER, TEXT, DECIMAL }) => {
}; };
Claim.resolveClaim = function (name, claimId) { Claim.resolveClaim = function (name, claimId) {
logger.debug(`Claim.resolveClaim: ${name} ${claimId}`);
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this this
.findAll({ .findAll({

View file

@ -1,6 +1,6 @@
neb-b commented 2018-02-05 20:47:37 +01:00 (Migrated from github.com)
Review

Why do you do const that = this?

Why do you do `const that = this`?
neb-b commented 2018-02-05 20:52:52 +01:00 (Migrated from github.com)
Review

I think this is another piece you can move entirely into redux. Currently if this component is rendered, then a user navigates away and comes back to the same <AssetDisplay /> it will make these requests again, even if you just made them a second ago

I think this is another piece you can move entirely into redux. Currently if this component is rendered, then a user navigates away and comes back to the same `<AssetDisplay />` it will make these requests again, even if you just made them a second ago
bones7242 commented 2018-02-07 00:13:24 +01:00 (Migrated from github.com)
Review

I had a misunderstanding of how the this context works and when I needed to pass this in to a function manually. I was able to remove it from the app in multiple places where it isn't necessary.

I had a misunderstanding of how the `this` context works and when I needed to pass this in to a function manually. I was able to remove it from the app in multiple places where it isn't necessary.
neb-b commented 2018-02-05 20:47:37 +01:00 (Migrated from github.com)
Review

Why do you do const that = this?

Why do you do `const that = this`?
neb-b commented 2018-02-05 20:52:52 +01:00 (Migrated from github.com)
Review

I think this is another piece you can move entirely into redux. Currently if this component is rendered, then a user navigates away and comes back to the same <AssetDisplay /> it will make these requests again, even if you just made them a second ago

I think this is another piece you can move entirely into redux. Currently if this component is rendered, then a user navigates away and comes back to the same `<AssetDisplay />` it will make these requests again, even if you just made them a second ago
bones7242 commented 2018-02-07 00:13:24 +01:00 (Migrated from github.com)
Review

I had a misunderstanding of how the this context works and when I needed to pass this in to a function manually. I was able to remove it from the app in multiple places where it isn't necessary.

I had a misunderstanding of how the `this` context works and when I needed to pass this in to a function manually. I was able to remove it from the app in multiple places where it isn't necessary.
import React from 'react'; import React from 'react';
const AssetDisplay = ({claimName, claimId}) => { const AssetDisplay = ({ claimName, claimId }) => {
neb-b commented 2018-02-05 20:47:37 +01:00 (Migrated from github.com)
Review

Why do you do const that = this?

Why do you do `const that = this`?
neb-b commented 2018-02-05 20:52:52 +01:00 (Migrated from github.com)
Review

I think this is another piece you can move entirely into redux. Currently if this component is rendered, then a user navigates away and comes back to the same <AssetDisplay /> it will make these requests again, even if you just made them a second ago

I think this is another piece you can move entirely into redux. Currently if this component is rendered, then a user navigates away and comes back to the same `<AssetDisplay />` it will make these requests again, even if you just made them a second ago
bones7242 commented 2018-02-07 00:13:24 +01:00 (Migrated from github.com)
Review

I had a misunderstanding of how the this context works and when I needed to pass this in to a function manually. I was able to remove it from the app in multiple places where it isn't necessary.

I had a misunderstanding of how the `this` context works and when I needed to pass this in to a function manually. I was able to remove it from the app in multiple places where it isn't necessary.
neb-b commented 2018-02-05 20:47:37 +01:00 (Migrated from github.com)
Review

Why do you do const that = this?

Why do you do `const that = this`?
neb-b commented 2018-02-05 20:52:52 +01:00 (Migrated from github.com)
Review

I think this is another piece you can move entirely into redux. Currently if this component is rendered, then a user navigates away and comes back to the same <AssetDisplay /> it will make these requests again, even if you just made them a second ago

I think this is another piece you can move entirely into redux. Currently if this component is rendered, then a user navigates away and comes back to the same `<AssetDisplay />` it will make these requests again, even if you just made them a second ago
bones7242 commented 2018-02-07 00:13:24 +01:00 (Migrated from github.com)
Review

I had a misunderstanding of how the this context works and when I needed to pass this in to a function manually. I was able to remove it from the app in multiple places where it isn't necessary.

I had a misunderstanding of how the `this` context works and when I needed to pass this in to a function manually. I was able to remove it from the app in multiple places where it isn't necessary.
return ( return (
<div> <div>
<p>display {claimName}#{claimId} here</p> <p>display {claimName}#{claimId} here</p>

neb-b commented 2018-02-05 20:47:37 +01:00 (Migrated from github.com)
Review

Why do you do const that = this?

Why do you do `const that = this`?
neb-b commented 2018-02-05 20:52:52 +01:00 (Migrated from github.com)
Review

I think this is another piece you can move entirely into redux. Currently if this component is rendered, then a user navigates away and comes back to the same <AssetDisplay /> it will make these requests again, even if you just made them a second ago

I think this is another piece you can move entirely into redux. Currently if this component is rendered, then a user navigates away and comes back to the same `<AssetDisplay />` it will make these requests again, even if you just made them a second ago
bones7242 commented 2018-02-07 00:13:24 +01:00 (Migrated from github.com)
Review

I had a misunderstanding of how the this context works and when I needed to pass this in to a function manually. I was able to remove it from the app in multiple places where it isn't necessary.

I had a misunderstanding of how the `this` context works and when I needed to pass this in to a function manually. I was able to remove it from the app in multiple places where it isn't necessary.
neb-b commented 2018-02-05 20:47:37 +01:00 (Migrated from github.com)
Review

Why do you do const that = this?

Why do you do `const that = this`?
neb-b commented 2018-02-05 20:52:52 +01:00 (Migrated from github.com)
Review

I think this is another piece you can move entirely into redux. Currently if this component is rendered, then a user navigates away and comes back to the same <AssetDisplay /> it will make these requests again, even if you just made them a second ago

I think this is another piece you can move entirely into redux. Currently if this component is rendered, then a user navigates away and comes back to the same `<AssetDisplay />` it will make these requests again, even if you just made them a second ago
bones7242 commented 2018-02-07 00:13:24 +01:00 (Migrated from github.com)
Review

I had a misunderstanding of how the this context works and when I needed to pass this in to a function manually. I was able to remove it from the app in multiple places where it isn't necessary.

I had a misunderstanding of how the `this` context works and when I needed to pass this in to a function manually. I was able to remove it from the app in multiple places where it isn't necessary.

View file

@ -1,14 +1,80 @@
import React from 'react'; import React from 'react';
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 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);
});
});
}
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">
<AssetDisplay {this.state.error &&
claimName={this.props.claimName} <p>{this.state.error}</p>
claimId={this.props.claimId} }
/> {this.state.claimData &&
<div>
<AssetDisplay
claimName={this.state.claimData.name}
claimId={this.state.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>
</div>
}
</div> </div>
); );
} }

View file

@ -14,6 +14,7 @@ class ShowPage extends React.Component {
claimId : null, claimId : null,
claimName : null, claimName : null,
isServeRequest: null, isServeRequest: null,
longClaimId : null,
}; };
} }
componentDidMount () { componentDidMount () {
@ -77,15 +78,19 @@ class ShowPage extends React.Component {
if (this.state.isServeRequest) { if (this.state.isServeRequest) {
return ( return (
<ShowLite <ShowLite
claimId={this.state.claimId}
claimName={this.state.claimName} claimName={this.state.claimName}
claimId={this.state.claimId}
channelName={this.state.channelName}
channelClaimId={this.state.channelClaimId}
/> />
); );
} }
return ( return (
<ShowDetails <ShowDetails
claimId={this.state.claimId}
claimName={this.state.claimName} claimName={this.state.claimName}
claimId={this.state.claimId}
channelName={this.state.channelName}
channelClaimId={this.state.channelClaimId}
/> />
); );
} }

View file

@ -96,8 +96,8 @@ module.exports = (app) => {
}); });
}); });
// route to run a resolve request on the daemon // route to run a resolve request on the daemon
app.get('/api/claim-resolve/:uri', ({ headers, ip, originalUrl, params }, res) => { app.get('/api/claim-resolve/:name/:claimId', ({ headers, ip, originalUrl, params }, res) => {
resolveUri(params.uri) resolveUri(`${params.name}#${params.claimId}`)
.then(resolvedUri => { .then(resolvedUri => {
res.status(200).json(resolvedUri); res.status(200).json(resolvedUri);
}) })
@ -205,4 +205,36 @@ 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) => {
const claimName = params.claimName;
let claimId = params.claimId;
if (claimId === 'none') claimId = null;
db.Claim.getLongClaimId(claimName, claimId)
.then(longId => {
if (!longId) {
return res.status(200).json({success: false, message: 'No matching claim id could be found'});
}
res.status(200).json({success: true, message: longId});
})
.catch(error => {
logger.error('api error getting long claim id', error);
errorHandlers.handleApiError(originalUrl, ip, error, res);
});
});
app.get('/api/claim-get-data/:claimName/:claimId', ({ ip, originalUrl, body, params }, res) => {
const claimName = params.claimName;
let claimId = params.claimId;
if (claimId === 'none') claimId = null;
db.Claim.resolveClaim(claimName, claimId)
.then(claimInfo => {
if (!claimInfo) {
return res.status(200).json({success: false, message: 'No claim could be found'});
}
res.status(200).json({success: true, message: claimInfo});
})
.catch(error => {
logger.error('api error getting long claim id', error);
errorHandlers.handleApiError(originalUrl, ip, error, res);
});
});
}; };

View file

@ -155,12 +155,12 @@ module.exports = (app) => {
let isChannel, channelName, channelClaimId; let isChannel, channelName, channelClaimId;
try { try {
({ isChannel, channelName, channelClaimId } = lbryUri.parseIdentifier(params.identifier)); ({ isChannel, channelName, channelClaimId } = lbryUri.parseIdentifier(params.identifier));
// log the result
logger.debug(`isChannel: ${isChannel}, channelName: ${channelName}, channelClaimId: ${channelClaimId}`);
} catch (error) { } catch (error) {
return handleRequestError(originalUrl, ip, error, res); return handleRequestError(originalUrl, ip, error, res);
} }
if (isChannel) { if (isChannel) {
// log the request data for debugging
logRequestData(null, null, channelName, null);
// handle showing the channel page // handle showing the channel page
return res.status(200).render('index'); return res.status(200).render('index');
} else { } else {