some progress but also broken show

ui/js/actions/app.js

@@ -28,6 +28,7 @@ export function doNavigate(path, params = {}) {
     if (params)
       url = `${url}?${queryStringFromParams(params)}`
 
+    console.log('Path: ' + url);
     dispatch(doChangePath(url))
 
     const state = getState()

ui/js/actions/content.js

@@ -44,7 +44,7 @@ export function doResolveUri(uri) {
       const {
         claim,
         certificate,
-      } = resolutionInfo
+      } = resolutionInfo ? resolutionInfo : { claim : null, certificate: null }
 
       dispatch({
         type: types.RESOLVE_URI_COMPLETED,

ui/js/actions/cost_info.js

@@ -21,7 +21,7 @@ export function doFetchCostInfoForUri(uri) {
           costInfo,
         }
       })
-    })
+    }).catch(() => {})
   }
 }
 

ui/js/component/fileCard/view.jsx

@@ -63,7 +63,7 @@ class FileCard extends React.Component {
                 <UriIndicator uri={uri} />
               </div>
             </div>
-            {metadata &&
+            {metadata && metadata.thumbnail && 
             <div className="card__media" style={{ backgroundImage: "url('" + metadata.thumbnail + "')" }}></div>
             }
             <div className="card__content card__subtext card__subtext--two-lines">

ui/js/component/uriIndicator/view.jsx

@@ -6,14 +6,20 @@ import {Icon} from 'component/common';
 const UriIndicator = (props) => {
   const {
     uri,
-    claim: {
+    claim
-      has_signature: hasSignature,
-      signature_is_valid: signatureIsValid,
-    } = {},
   } = props
 
   const uriObj = lbryuri.parse(uri);
 
+  if (!claim) {
+    return <span className="empty">Unused</span>
+  }
+
+  const {
+    has_signature: hasSignature,
+    signature_is_valid: signatureIsValid
+  } = claim
+
   if (!hasSignature || !uriObj.isChannel) {
     return <span className="empty">Anonymous</span>;
   }

ui/js/lbry.js

@@ -254,6 +254,9 @@ lbry.getCostInfo = function(uri) {
       function getCostGenerous(uri) {
         // If generous is on, the calculation is simple enough that we might as well do it here in the front end
         lbry.resolve({uri: uri}).then((resolutionInfo) => {
+          if (!resolutionInfo) {
+            return reject(new Error("Unused URI"));
+          }
           const fee = resolutionInfo.claim.value.stream.metadata.fee;
           if (fee === undefined) {
             cacheAndResolve(0, true);

ui/js/page/showPage/index.js

@@ -2,6 +2,12 @@ import React from 'react'
 import {
   connect
 } from 'react-redux'
+import {
+  doResolveUri,
+} from 'actions/content'
+import {
+  doNavigate,
+} from 'actions/app'
 import {
   selectCurrentUri,
 } from 'selectors/app'
@@ -17,19 +23,27 @@ import {
 import {
   selectCurrentUriCostInfo,
 } from 'selectors/cost_info'
+import {
+  makeSelectResolvingUri,
+} from 'selectors/content'
 import ShowPage from './view'
 
-const select = (state) => ({
+const makeSelect = () => {
+  const selectResolvingUri = makeSelectResolvingUri()
+
+  const select = (state, props) => ({
     claim: selectCurrentUriClaim(state),
     uri: selectCurrentUri(state),
-  isDownloaded: selectCurrentUriIsDownloaded(state),
+    isResolvingUri: selectResolvingUri(state, props),
-  fileInfo: selectCurrentUriFileInfo(state),
-  costInfo: selectCurrentUriCostInfo(state),
-  isFailed: false,
     claimType: 'file',
-})
+  })
+
+  return select
+}
 
 const perform = (dispatch) => ({
+  navigate: (path, params) => dispatch(doNavigate(path, params)),
+  resolveUri: (uri) => dispatch(doResolveUri(uri)),
 })
 
-export default connect(select, perform)(ShowPage)
+export default connect(makeSelect, perform)(ShowPage)

ui/js/page/showPage/view.jsx

@@ -4,69 +4,63 @@ import {
 } from 'component/common';
 import FilePage from 'page/filePage'
 
-const ShowPage = (props) => {
+class ShowPage extends React.Component{
+  componentWillMount() {
     const {
+      isResolvingUri,
+      resolveUri,
       claim,
-    navigate,
-    claim: {
-      txid,
-      nout,
-      has_signature: hasSignature,
-      signature_is_valid: signatureIsValid,
-      value,
-      value: {
-        stream,
-        stream: {
-          metadata,
-          source,
-          metadata: {
-            title,
-          } = {},
-          source: {
-            contentType,
-          } = {},
-        } = {},
-      } = {},
-    },
       uri,
-    isDownloaded,
+    } = this.props
-    fileInfo,
+
-    costInfo,
+    if(!isResolvingUri && !claim && uri) {
-    costInfo: {
+      resolveUri(uri)
-      cost,
+    }
-      includesData: costIncludesData,
+  }
-    } = {},
+
-    isFailed,
+  render() {
-    claimType,
+    const {
-  } = props
+      claim: {
+        value: {
+          stream: {
+            metadata
+          } = {},
+        } = {},
+      } = {},
+      navigate,
+      uri,
+      isResolvingUri,
+      claimType,
+    } = this.props
 
-  const outpoint = txid + ':' + nout;
-  const uriLookupComplete = !!claim && Object.keys(claim).length
     const pageTitle = metadata ? metadata.title : uri;
 
     let innerContent = "";
 
-    if (!uriLookupComplete || isFailed) {
+    if (isResolvingUri) {
       innerContent = <section className="card">
         <div className="card__inner">
           <div className="card__title-identity"><h1>{pageTitle}</h1></div>
         </div>
         <div className="card__content">
-            { uriLookupComplete ?
+          { isResolvingUri ?
-              <p>This location is not yet in use. { ' ' }<Link onClick={() => navigate('/publish')} label="Put something here" />.</p> :
+            <BusyMessage message="Loading magic decentralized data..." /> :
-                <BusyMessage message="Loading magic decentralized data..." />
+            <p>This location is not yet in use. { ' ' }<Link onClick={() => navigate('/publish')} label="Put something here" />.</p>
           }
         </div>
       </section>;
-    } else if (claimType == "channel") {
+    }
+    else if (claimType == "channel") {
       innerContent = <ChannelPage title={uri} />
-    } else {
+    }
+    else {
       innerContent = <FilePage uri={uri} />
     }
 
     return (
       <main className="main--single-column">{innerContent}</main>
     )
+  }
 }
 
 export default ShowPage

ui/js/selectors/claims.js

@@ -16,12 +16,14 @@ export const selectClaimsByUri = createSelector(
 export const selectCurrentUriClaim = createSelector(
   selectCurrentUri,
   selectClaimsByUri,
-  (uri, byUri) => byUri[uri] || {}
+  (uri, byUri) => byUri[uri]
 )
 
 export const selectCurrentUriClaimOutpoint = createSelector(
   selectCurrentUriClaim,
-  (claim) => `${claim.txid}:${claim.nout}`
+  (claim) => {
+    return claim ? `${claim.txid}:${claim.nout}` : null
+  }
 )
 
 const selectClaimForUri = (state, props) => {

ui/js/selectors/file_info.js

@@ -71,10 +71,17 @@ export const shouldFetchCurrentUriFileInfo = createSelector(
   selectFetchingCurrentUriFileInfo,
   selectCurrentUriFileInfo,
   (page, uri, fetching, fileInfo) => {
+    console.log('should fetch?');
+    console.log(page);
+    console.log(uri);
+    console.log(fetching);
+
     if (page != 'show') return false
     if (fetching) return false
     if (fileInfo != undefined) return false
 
+    console.log('fetch!');
+
     return true
   }
 )