react/components/AssetPreview/index.js

@@ -1,7 +1,9 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 const AssetPreview = ({ name, claimId, fileExt, contentType }) => {
   const directSourceLink = `${claimId}/${name}.${fileExt}`;
+  const showUrlLink = `${claimId}/${name}`;
   const previewHolderStyle = {
     clear: 'both',
     display: 'inline-block',
@@ -21,7 +23,9 @@ const AssetPreview = ({ name, claimId, fileExt, contentType }) => {
     case 'image/png':
       return (
         <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>
       );
     case 'image/gif':

react/components/ShowPage/index.js

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