Search working

ui/js/actions/search.js

@@ -1,21 +1,40 @@
 import * as types from 'constants/action_types'
 import lbry from 'lbry'
 import lbryio from 'lbryio'
+import lbryuri from 'lbryuri'
 import lighthouse from 'lighthouse'
 import {
   selectSearchQuery,
 } from 'selectors/search'
+import {
+  doResolveUri,
+} from 'actions/content'
 
 export function doSearchContent(query) {
   return function(dispatch, getState) {
     const state = getState()
 
+    if (!query) {
+      return dispatch({
+        type: types.SEARCH_CANCELLED,
+      })
+    }
+
     dispatch({
       type: types.SEARCH_STARTED,
       data: { query }
     })
 
     lighthouse.search(query).then(results => {
+      results.forEach(result => {
+        const uri = lbryuri.build({
+          channelName: result.channel_name,
+          contentName: result.name,
+          claimId: result.channel_id || result.claim_id,
+        })
+        doResolveUri(dispatch, uri.split('://')[1])
+      })
+
       dispatch({
         type: types.SEARCH_COMPLETED,
         data: {

ui/js/component/fileTileStream/index.js

@@ -2,12 +2,16 @@ import React from 'react'
 import {
   connect
 } from 'react-redux'
+import {
+  doNavigate,
+} from 'actions/app'
 import FileTileStream from './view'
 
 const select = (state) => ({
 })
 
 const perform = (dispatch) => ({
+  navigate: (path) => dispatch(doNavigate(path))
 })
 
 export default connect(select, perform)(FileTileStream)

ui/js/component/fileTileStream/view.jsx

@@ -79,11 +79,12 @@ const FileTileStream = React.createClass({
     const isConfirmed = !!metadata;
     const title = isConfirmed ? metadata.title : uri;
     const obscureNsfw = this.props.obscureNsfw && isConfirmed && metadata.nsfw;
+    const { navigate } = this.props
     return (
       <section className={ 'file-tile card ' + (obscureNsfw ? 'card--obscured ' : '') } onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
         <div className={"row-fluid card__inner file-tile__row"}>
           <div className="span3 file-tile__thumbnail-container">
-            <a href={'?show=' + uri}><Thumbnail className="file-tile__thumbnail" {... metadata && metadata.thumbnail ? {src: metadata.thumbnail} : {}} alt={'Photo for ' + this.props.uri} /></a>
+            <a href="#" onClick={() => navigate(`show=${uri}`)}><Thumbnail className="file-tile__thumbnail" {... metadata && metadata.thumbnail ? {src: metadata.thumbnail} : {}} alt={'Photo for ' + this.props.uri} /></a>
           </div>
           <div className="span9">
             <div className="card__title-primary">

ui/js/constants/action_types.js

@@ -51,3 +51,4 @@ export const FETCH_COST_INFO_COMPLETED = 'FETCH_COST_INFO_COMPLETED'
 // Search
 export const SEARCH_STARTED = 'SEARCH_STARTED'
 export const SEARCH_COMPLETED = 'SEARCH_COMPLETED'
+export const SEARCH_CANCELLED = 'SEARCH_CANCELLED'

ui/js/page/fileListDownloaded/index.js

@@ -3,12 +3,14 @@ import {
   connect
 } from 'react-redux'
 import {
-  selectDownloadedContent,
+  selectDownloadedContentFileInfos,
+  selectFetchingDownloadedContent,
 } from 'selectors/content'
 import FileListDownloaded from './view'
 
 const select = (state) => ({
-  downloadedContent: selectDownloadedContent(state),
+  downloadedContent: selectDownloadedContentFileInfos(state),
+  fetching: selectFetchingDownloadedContent(state),
 })
 
 const perform = (dispatch) => ({

ui/js/page/fileListDownloaded/view.jsx

@@ -9,11 +9,33 @@ import lbryio from 'lbryio.js';
 import {BusyMessage, Thumbnail} from 'component/common.js';
 import FileList from 'component/fileList'
 
-const FileListDownloaded = (props) => {
-  // <FileListNav viewingPage="published" />
-  return (
-    <div>item</div>
-  )
+class FileListDownloaded extends React.Component {
+  render() {
+    const {
+      downloadedContent,
+      fetching,
+    } = this.props
+
+    if (fetching) {
+      return (
+        <main className="page">
+          <BusyMessage message="Loading" />
+        </main>
+      );
+    } else if (!downloadedContent.length) {
+      return (
+        <main className="page">
+          <span>You haven't downloaded anything from LBRY yet. Go <Link href="?discover" label="search for your first download" />!</span>
+        </main>
+      );
+    } else {
+      return (
+        <main className="page">
+          <FileList fileInfos={downloadedContent} hidePrices={true} />
+        </main>
+      );
+    }
+  }
 }
 // const FileListDownloaded = React.createClass({
 //   _isMounted: false,

ui/js/page/showPage/view.jsx

@@ -17,19 +17,19 @@ const FormatItem = (props) => {
   const {
     contentType,
     metadata,
+    metadata: {
+      thumbnail,
+      author,
+      title,
+      description,
+      language,
+      license,
+    },
     cost,
     uri,
     outpoint,
     costIncludesData,
   } = props
-  const {
-    thumbnail,
-    author,
-    title,
-    description,
-    language,
-    license
-  } = metadata;
   const mediaType = lbry.getMediaType(contentType);
 
   return (
@@ -288,90 +288,4 @@ let ShowPage = React.createClass({
 
     return <main className="main--single-column">{innerContent}</main>;
   }
-});
-
-export default ShowPage;
-
-//
-// const ShowPage = (props) => {
-//   const {
-//     claim,
-//     uri,
-//     isDownloaded,
-//     fileInfo,
-//     costInfo,
-//   } = props
-//   const {
-//     txid,
-//     nout,
-//     has_signature,
-//     signature_is_valid,
-//     value,
-//   } = claim
-//   const {
-//     stream,
-//   } = value
-//   const {
-//     metadata,
-//     source,
-//   } = stream
-//   const {
-//     title,
-//   } = metadata
-//   const {
-//     contentType,
-//   } = source
-//   const {
-//     cost,
-//     includesData,
-//   } = costInfo
-//   const costIncludesData = includesData
-//
-//   const outpoint = txid + ':' + nout;
-//   const uriLookupComplete = !!claim
-//   const hasSignature = has_signature
-//   const signatureIsValid = signature_is_valid
-//
-//   return (
-//     <main className="main--single-column">
-//       <section className="show-page-media">
-//         { contentType && contentType.startsWith('video/') ?
-//             <Video className="video-embedded" uri={uri} metadata={metadata} outpoint={outpoint} /> :
-//             (metadata ? <Thumbnail src={metadata.thumbnail} /> : <Thumbnail />) }
-//       </section>
-//       <section className="card">
-//         <div className="card__inner">
-//           <div className="card__title-identity">
-//             {isDownloaded === false
-//               ? <span style={{float: "right"}}><FilePrice uri={uri} metadata={metadata} /></span>
-//               : null}
-//             <h1>{title}</h1>
-//             { uriLookupComplete ?
-//               <div>
-//                 <div className="card__subtitle">
-//                   <UriIndicator uri={uri} hasSignature={hasSignature} signatureIsValid={signatureIsValid} />
-//                 </div>
-//                 <div className="card__actions">
-//                   <FileActions uri={uri} outpoint={outpoint} metadata={metadata} contentType={contentType} />
-//                 </div>
-//               </div> : '' }
-//           </div>
-//           { uriLookupComplete ?
-//               <div>
-//                 <div className="card__content card__subtext card__subtext card__subtext--allow-newlines">
-//                   {metadata.description}
-//                 </div>
-//               </div>
-//             : <div className="card__content"><BusyMessage message="Loading magic decentralized data..." /></div> }
-//         </div>
-//         { metadata ?
-//             <div className="card__content">
-//               <FormatItem metadata={metadata} contentType={contentType} cost={cost} uri={uri} outpoint={outpoint} costIncludesData={costIncludesData}  />
-//             </div> : '' }
-//         <div className="card__content">
-//           <Link href="https://lbry.io/dmca" label="report" className="button-text-help" />
-//         </div>
-//       </section>
-//     </main>
-//   )
-// }
+});

ui/js/reducers/search.js

@@ -19,9 +19,12 @@ reducers[types.SEARCH_COMPLETED] = function(state, action) {
   const {
     query,
   } = action.data
-  const newResults = Object.assign({}, state.results)
-  const newByQuery = Object.assign({}, newResults.byQuery)
+  const oldResults = Object.assign({}, state.results)
+  const newByQuery = Object.assign({}, oldResults.byQuery)
   newByQuery[query] = action.data.results
+  const newResults = Object.assign({}, oldResults, {
+    byQuery: newByQuery
+  })
 
   return Object.assign({}, state, {
     searching: false,
@@ -29,6 +32,13 @@ reducers[types.SEARCH_COMPLETED] = function(state, action) {
   })
 }
 
+reducers[types.SEARCH_CANCELLED] = function(state, action) {
+  return Object.assign({}, state, {
+    searching: false,
+    query: undefined,
+  })
+}
+
 export default function reducer(state = defaultState, action) {
   const handler = reducers[action.type];
   if (handler) return handler(state, action);

ui/js/selectors/content.js

@@ -155,6 +155,11 @@ export const selectDownloadedContent = createSelector(
   (state) => state.downloadedContent || {}
 )
 
+export const selectDownloadedContentFileInfos = createSelector(
+  selectDownloadedContent,
+  (downloadedContent) => downloadedContent.fileInfos || []
+)
+
 export const shouldFetchDownloadedContent = createSelector(
   selectDaemonReady,
   selectCurrentPage,