ui/js/actions/content.js

@@ -100,6 +100,12 @@ export function doFetchPublishedContent() {
     })
 
     lbry.claim_list_mine().then((claimInfos) => {
+      dispatch({
+        type: types.FETCH_MY_CLAIMS_COMPLETED,
+        data: {
+          claims: claimInfos,
+        }
+      })
       lbry.file_list().then((fileInfos) => {
         const myClaimOutpoints = claimInfos.map(({txid, nout}) => txid + ':' + nout)
 

ui/js/component/fileCardStream/view.jsx

@@ -56,9 +56,9 @@ class FileCardStream extends React.Component {
       return null;
     }
 
-    if (!this.props.metadata) {
+    // if (!this.props.metadata) {
-      return null
+    //   return null
-    }
+    // }
 
     const uri = lbryuri.normalize(this.props.uri);
     const metadata = this.props.metadata;
@@ -78,7 +78,9 @@ class FileCardStream extends React.Component {
                               hasSignature={this.props.hasSignature} signatureIsValid={this.props.signatureIsValid} />
               </div>
             </div>
+            {metadata &&
             <div className="card__media" style={{ backgroundImage: "url('" + metadata.thumbnail + "')" }}></div>
+            }
             <div className="card__content card__subtext card__subtext--two-lines">
                 <TruncatedText lines={2}>
                   {isConfirmed

ui/js/constants/action_types.js

@@ -56,6 +56,7 @@ export const FETCH_AVAILABILITY_STARTED = 'FETCH_AVAILABILITY_STARTED'
 export const FETCH_AVAILABILITY_COMPLETED = 'FETCH_AVAILABILITY_COMPLETED'
 export const DELETE_FILE_STARTED = 'DELETE_FILE_STARTED'
 export const DELETE_FILE_COMPLETED = 'DELETE_FILE_COMPLETED'
+export const FETCH_MY_CLAIMS_COMPLETED = 'FETCH_MY_CLAIMS_COMPLETED'
 
 // Search
 export const SEARCH_STARTED = 'SEARCH_STARTED'

ui/js/page/fileListPublished/view.jsx

@@ -9,13 +9,53 @@ import lbryio from 'lbryio.js';
 import {BusyMessage, Thumbnail} from 'component/common.js';
 import FileList from 'component/fileList'
 
-const FileListPublished = (props) => {
+class FileListPublished extends React.Component {
-  // <FileListNav viewingPage="published" />
+  componentDidUpdate() {
-  return (
+    if(this.props.publishedContent.length > 0) this._requestPublishReward()
-    <div>published content</div>
+  }
-  )
-}
 
+  _requestPublishReward() {
+    lbryio.call('reward', 'list', {}).then(function(userRewards) {
+      //already rewarded
+      if (userRewards.filter(function (reward) {
+          return reward.RewardType == rewards.TYPE_FIRST_PUBLISH && reward.TransactionID
+        }).length) {
+        return
+      }
+      else {
+        rewards.claimReward(rewards.TYPE_FIRST_PUBLISH).catch(() => {})
+      }
+    })
+  }
+
+  render() {
+    const {
+      publishedContent,
+      fetching,
+      navigate,
+    } = this.props
+
+    if (fetching) {
+      return (
+        <main className="page">
+          <BusyMessage message="Loading" />
+        </main>
+      );
+    } else if (!publishedContent.length) {
+      return (
+        <main className="page">
+          <span>You haven't downloaded anything from LBRY yet. Go <Link href="#" onClick={() => navigate('discover')} label="search for your first download" />!</span>
+        </main>
+      );
+    } else {
+      return (
+        <main className="page">
+          <FileList fileInfos={publishedContent} hidePrices={true} />
+        </main>
+      );
+    }
+  }
+}
 // const FileListPublished = React.createClass({
 //   _isMounted: false,
 

ui/js/reducers/claims.js

@@ -18,6 +18,23 @@ reducers[types.RESOLVE_URI_COMPLETED] = function(state, action) {
   })
 }
 
+reducers[types.FETCH_MY_CLAIMS_COMPLETED] = function(state, action) {
+  const {
+    claims,
+  } = action.data
+  const newMine = Object.assign({}, state.mine)
+  const newById = Object.assign({}, newMine.byId)
+
+  claims.forEach(claim => {
+    newById[claim.claim_id] = claim
+  })
+  newMine.byId = newById
+
+  return Object.assign({}, state, {
+    mine: newMine,
+  })
+}
+
 export default function reducer(state = defaultState, action) {
   const handler = reducers[action.type];
   if (handler) return handler(state, action);

ui/js/reducers/file_info.js

@@ -178,6 +178,27 @@ reducers[types.FETCH_DOWNLOADED_CONTENT_COMPLETED] = function(state, action) {
   })
 }
 
+reducers[types.FETCH_PUBLISHED_CONTENT_COMPLETED] = function(state, action) {
+  const {
+    fileInfos
+  } = action.data
+  const newByUri = Object.assign({}, state.byUri)
+
+  fileInfos.forEach(fileInfo => {
+    const uri = lbryuri.build({
+      channelName: fileInfo.channel_name,
+      contentName: fileInfo.name,
+    })
+
+    newByUri[uri] = fileInfo
+  })
+
+  return Object.assign({}, state, {
+    byUri: newByUri
+  })
+}
+
+
 export default function reducer(state = defaultState, action) {
   const handler = reducers[action.type];
   if (handler) return handler(state, action);

ui/js/selectors/claims.js

@@ -63,3 +63,27 @@ export const makeSelectSourceForUri = () => {
     (source) => source
   )
 }
+
+export const selectMyClaims = createSelector(
+  _selectState,
+  (state) => state.mine || {}
+)
+
+export const selectMyClaimsById = createSelector(
+  selectMyClaims,
+  (mine) => mine.byId || {}
+)
+
+export const selectMyClaimsOutpoints = createSelector(
+  selectMyClaimsById,
+  (byId) => {
+    const outpoints = []
+    Object.keys(byId).forEach(key => {
+      const claim = byId[key]
+      const outpoint = `${claim.txid}:${claim.nout}`
+      outpoints.push(outpoint)
+    })
+
+    return outpoints
+  }
+)

ui/js/selectors/file_info.js

@@ -5,6 +5,9 @@ import {
   selectCurrentUri,
   selectCurrentPage,
 } from 'selectors/app'
+import {
+  selectMyClaimsOutpoints,
+} from 'selectors/claims'
 
 export const _selectState = state => state.fileInfo || {}
 
@@ -149,3 +152,21 @@ export const selectDownloadedFileInfo = createSelector(
     return fileInfoList
   }
 )
+
+export const selectPublishedFileInfo = createSelector(
+  selectAllFileInfoByUri,
+  selectMyClaimsOutpoints,
+  (byUri, outpoints) => {
+    const fileInfos = []
+    outpoints.forEach(outpoint => {
+      Object.keys(byUri).forEach(key => {
+        const fileInfo = byUri[key]
+        if (fileInfo.outpoint == outpoint) {
+          fileInfos.push(fileInfo)
+        }
+      })
+    })
+
+    return fileInfos
+  }
+)