diff --git a/ui/js/component/fileTile/view.jsx b/ui/js/component/fileTile/view.jsx index d76d75ec2..34b1476dd 100644 --- a/ui/js/component/fileTile/view.jsx +++ b/ui/js/component/fileTile/view.jsx @@ -19,11 +19,15 @@ class FileTile extends React.Component { } componentDidMount() { - const { isResolvingUri, resolveUri, claim, uri } = this.props; + this.resolve(this.props); + } - if (!isResolvingUri && !claim && uri) { - resolveUri(uri); - } + componentWillReceiveProps(nextProps) { + this.resolve(nextProps); + } + + resolve({ isResolvingUri, claim, uri, resolveUri }) { + if (!isResolvingUri && claim === undefined && uri) resolveUri(uri); } handleMouseOver() { diff --git a/ui/js/reducers/claims.js b/ui/js/reducers/claims.js index a5f6d4d09..80f79b22f 100644 --- a/ui/js/reducers/claims.js +++ b/ui/js/reducers/claims.js @@ -13,6 +13,8 @@ reducers[types.RESOLVE_URI_COMPLETED] = function(state, action) { if (claim) { byId[claim.claim_id] = claim; byUri[uri] = claim.claim_id; + } else { + byUri[uri] = null; } return Object.assign({}, state, { diff --git a/ui/js/selectors/claims.js b/ui/js/selectors/claims.js index 567b7ef46..11e3b1e86 100644 --- a/ui/js/selectors/claims.js +++ b/ui/js/selectors/claims.js @@ -17,9 +17,17 @@ export const selectClaimsByUri = createSelector( Object.keys(byUri).forEach(uri => { const claimId = byUri[uri]; - const claim = byId[claimId]; - claims[uri] = claim; + // NOTE returning a null claim allows us to differentiate between an + // undefined (never fetched claim) and one which just doesn't exist. Not + // the cleanest solution but couldn't think of anything better right now + if (claimId === null) { + claims[uri] = null; + } else { + const claim = byId[claimId]; + + claims[uri] = claim; + } }) return claims;