React router #343
|
@ -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 (
|
||||||
|
|
|
@ -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({
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
I had a misunderstanding of how the 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.
Why do you do Why do you do `const that = this`?
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 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 had a misunderstanding of how the 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 }) => {
|
||||||
Why do you do Why do you do `const that = this`?
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 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 had a misunderstanding of how the 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.
Why do you do Why do you do `const that = this`?
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 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 had a misunderstanding of how the 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>
|
||||||
|
|
||||||
Why do you do Why do you do `const that = this`?
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 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 had a misunderstanding of how the 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.
Why do you do Why do you do `const that = this`?
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 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 had a misunderstanding of how the 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.
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Why do you do
const that = this
?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