React router #343
|
@ -29,8 +29,8 @@ spee.ch is a single-serving site that reads and publishes images and videos to a
|
|||
## API
|
||||
|
||||
#### GET
|
||||
* /api/claim-resolve/:name
|
||||
* example: `curl https://spee.ch/api/claim-resolve/doitlive`
|
||||
* /api/claim-resolve/:name/:claimId
|
||||
* example: `curl https://spee.ch/api/claim-resolve/doitlive/xyz`
|
||||
* /api/claim-list/:name
|
||||
* example: `curl https://spee.ch/api/claim-list/doitlive`
|
||||
* /api/claim-is-available/:name (
|
||||
|
|
|
@ -342,6 +342,7 @@ module.exports = (sequelize, { STRING, BOOLEAN, INTEGER, TEXT, DECIMAL }) => {
|
|||
};
|
||||
|
||||
Claim.resolveClaim = function (name, claimId) {
|
||||
logger.debug(`Claim.resolveClaim: ${name} ${claimId}`);
|
||||
return new Promise((resolve, reject) => {
|
||||
this
|
||||
.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';
|
||||
|
||||
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.
|
||||
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.
|
||||
return (
|
||||
<div>
|
||||
<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 { 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);
|
||||
});
|
||||
});
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<div className="row row--tall flex-container--column flex-container--center-center">
|
||||
<AssetDisplay
|
||||
claimName={this.props.claimName}
|
||||
claimId={this.props.claimId}
|
||||
/>
|
||||
{this.state.error &&
|
||||
<p>{this.state.error}</p>
|
||||
}
|
||||
{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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -14,6 +14,7 @@ class ShowPage extends React.Component {
|
|||
claimId : null,
|
||||
claimName : null,
|
||||
isServeRequest: null,
|
||||
longClaimId : null,
|
||||
};
|
||||
}
|
||||
componentDidMount () {
|
||||
|
@ -77,15 +78,19 @@ class ShowPage extends React.Component {
|
|||
if (this.state.isServeRequest) {
|
||||
return (
|
||||
<ShowLite
|
||||
claimId={this.state.claimId}
|
||||
claimName={this.state.claimName}
|
||||
claimId={this.state.claimId}
|
||||
channelName={this.state.channelName}
|
||||
channelClaimId={this.state.channelClaimId}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<ShowDetails
|
||||
claimId={this.state.claimId}
|
||||
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
|
||||
app.get('/api/claim-resolve/:uri', ({ headers, ip, originalUrl, params }, res) => {
|
||||
resolveUri(params.uri)
|
||||
app.get('/api/claim-resolve/:name/:claimId', ({ headers, ip, originalUrl, params }, res) => {
|
||||
resolveUri(`${params.name}#${params.claimId}`)
|
||||
.then(resolvedUri => {
|
||||
res.status(200).json(resolvedUri);
|
||||
})
|
||||
|
@ -205,4 +205,36 @@ 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) {
|
||||
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;
|
||||
try {
|
||||
({ isChannel, channelName, channelClaimId } = lbryUri.parseIdentifier(params.identifier));
|
||||
// log the result
|
||||
logger.debug(`isChannel: ${isChannel}, channelName: ${channelName}, channelClaimId: ${channelClaimId}`);
|
||||
} catch (error) {
|
||||
return handleRequestError(originalUrl, ip, error, res);
|
||||
}
|
||||
if (isChannel) {
|
||||
// log the request data for debugging
|
||||
logRequestData(null, null, channelName, null);
|
||||
// handle showing the channel page
|
||||
return res.status(200).render('index');
|
||||
} 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