fixed issue where ShowPage wasnot re-rendering on new props

This commit is contained in:
bill bittner 2018-01-31 14:50:35 -08:00
parent aeaab8bf2d
commit a5f383aff8
2 changed files with 17 additions and 5 deletions

View file

@ -1,7 +1,9 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom';
const AssetPreview = ({ name, claimId, fileExt, contentType }) => { const AssetPreview = ({ name, claimId, fileExt, contentType }) => {
const directSourceLink = `${claimId}/${name}.${fileExt}`; const directSourceLink = `${claimId}/${name}.${fileExt}`;
const showUrlLink = `${claimId}/${name}`;
const previewHolderStyle = { const previewHolderStyle = {
clear: 'both', clear: 'both',
display: 'inline-block', display: 'inline-block',
@ -21,7 +23,9 @@ const AssetPreview = ({ name, claimId, fileExt, contentType }) => {
case 'image/png': case 'image/png':
return ( return (
<div style={previewHolderStyle}> <div style={previewHolderStyle}>
<img style={assetStyle} className={'asset-preview--image'} src={directSourceLink} alt={name} /> <Link to={showUrlLink} >
<img style={assetStyle} className={'asset-preview--image'} src={directSourceLink} alt={name} />
</Link>
</div> </div>
); );
case 'image/gif': case 'image/gif':

View file

@ -20,17 +20,25 @@ class ShowPage extends React.Component {
} }
componentDidMount () { componentDidMount () {
console.log('ShowPage did mount'); console.log('ShowPage did mount');
this.parseUrlAndUpdateState();
}
parseUrlAndUpdateState () {
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;
this.parseUrlAndUpdateState(identifier, claim);
}
componentWillReceiveProps (nextProps) {
if (this.props.match.params !== nextProps.match.params) {
console.log('received new params props');
const identifier = nextProps.match.params.identifier;
const claim = nextProps.match.params.claim;
this.parseUrlAndUpdateState(identifier, claim);
}
}
parseUrlAndUpdateState (identifier, claim) {
if (identifier) { if (identifier) {
return this.parseAndUpdateIdentifierAndClaim(identifier, claim); return this.parseAndUpdateIdentifierAndClaim(identifier, claim);
} }
this.parseAndUpdateClaimOnly(claim); this.parseAndUpdateClaimOnly(claim);
} }
parseAndUpdateIdentifierAndClaim(identifier, claim) { parseAndUpdateIdentifierAndClaim (identifier, claim) {
// handle case of identifier and claim // handle case of identifier and claim
// this is a request for an asset // this is a request for an asset
// claim will be an asset claim // claim will be an asset claim