add support for searching downloaded files

CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## [0.37.2] - [Unreleased]
+
+### Fixed
+
+### Added
+
+- Search on downloads page ([#2969](https://github.com/lbryio/lbry-sdk/pull/2969))
+
+### Changed
+
 ## [0.37.1] - [2019-10-22]
 
 ### Fixed

src/ui/component/walletSendTip/view.jsx

@@ -105,9 +105,14 @@ class WalletSendTip extends React.PureComponent<Props, State> {
             helper={
               <React.Fragment>
                 {claimIsMine || isSupport
-                  ? __('This will increase the overall bid amount for ')
-                  : __('This will appear as a tip for ')}
-                {`"${title}" which will boost its ability to be discovered while active.`}{' '}
+                  ? __(
+                      'This will increase the overall bid amount for %title%, which will boost its ability to be discovered while active.',
+                      { title }
+                    )
+                  : __(
+                      'This will appear as a tip for %title%, which will boost its ability to be discovered while active.',
+                      { title }
+                    )}{' '}
                 <Button label={__('Learn more')} button="link" href="https://lbry.com/faq/tipping" />.
               </React.Fragment>
             }

src/ui/page/channel/view.jsx

@@ -229,7 +229,7 @@ function ChannelPage(props: Props) {
             <Tab disabled={editing}>{__('Discussion')}</Tab>
             {/* only render searchbar on content page (tab index 0 === content page) */}
             {tabIndex === 0 ? (
-              <Form onSubmit={handleSearch} className="wunderbar--channel">
+              <Form onSubmit={handleSearch} className="wunderbar--inline">
                 <Icon icon={ICONS.SEARCH} />
                 <FormField
                   className="wunderbar__input"

src/ui/page/fileListDownloaded/index.js

@@ -1,16 +1,21 @@
 import { connect } from 'react-redux';
-import { makeSelectDownloadUrlsForPage, selectDownloadUrlsCount, selectIsFetchingFileList } from 'lbry-redux';
+import { makeSelectSearchDownloadUrlsForPage, makeSelectSearchDownloadUrlsCount, selectDownloadUrlsCount, selectIsFetchingFileList } from 'lbry-redux';
 import FileListDownloaded from './view';
 import { withRouter } from 'react-router';
 
 const select = (state, props) => {
-  const { search } = props.location;
+  const { history, location }  = props;
+  const { search } = location;
   const urlParams = new URLSearchParams(search);
+  const query = urlParams.get('query') || '';
   const page = Number(urlParams.get('page')) || 1;
   return {
     page,
-    downloadedUrls: makeSelectDownloadUrlsForPage(page)(state),
-    downloadedUrlsCount: selectDownloadUrlsCount(state),
+    history,
+    query,
+    allDownloadedUrlsCount: selectDownloadUrlsCount(state),
+    downloadedUrls: makeSelectSearchDownloadUrlsForPage(query, page)(state),
+    downloadedUrlsCount: makeSelectSearchDownloadUrlsCount(query)(state),
     fetching: selectIsFetchingFileList(state),
   };
 };

src/ui/page/fileListDownloaded/view.jsx

@@ -1,21 +1,39 @@
 // @flow
-import React from 'react';
+import React, { useState } from 'react';
 import Button from 'component/button';
 import ClaimList from 'component/claimList';
 import Paginate from 'component/common/paginate';
 import { PAGE_SIZE } from 'constants/claim';
+import { Form } from 'component/common/form-components/form';
+import Icon from 'component/common/icon';
+import * as ICONS from '../../constants/icons';
+import { FormField } from '../../component/common/form-components/form-field';
+import { withRouter } from 'react-router';
 
 type Props = {
   fetching: boolean,
+  allDownloadedUrlsCount: number,
   downloadedUrls: Array<string>,
   downloadedUrlsCount: ?number,
   history: { replace: string => void },
   page: number,
+  query: string
 };
 
 function FileListDownloaded(props: Props) {
-  const { fetching, downloadedUrls, downloadedUrlsCount } = props;
-  const hasDownloads = !!downloadedUrls.length;
+  const { fetching, history, query, allDownloadedUrlsCount, downloadedUrls, downloadedUrlsCount } = props;
+  const hasDownloads = allDownloadedUrlsCount > 0;
+
+  const [searchQuery, setSearchQuery] = useState('');
+
+  function handleInputChange(e) {
+    const { value } = e.target;
+    if (value !== searchQuery) {
+      setSearchQuery(value);
+      history.replace(`?query=${value}&page=1`);
+    }
+  }
+
   return (
     // Removed the <Page> wapper to try combining this page with UserHistory
     // This should eventually move into /components if we want to keep it this way
@@ -24,7 +42,20 @@ function FileListDownloaded(props: Props) {
         <div className="card">
           <ClaimList
             header={__('Your Library')}
+            headerAltControls={
+              <Form onSubmit={() => {}} className="wunderbar--inline">
+                <Icon icon={ICONS.SEARCH} />
+                <FormField
+                  className="wunderbar__input"
+                  onChange={handleInputChange}
+                  value={query}
+                  type="text"
+                  placeholder={__('Search')}
+                />
+              </Form>
+            }
             persistedStorageKey="claim-list-downloaded"
+            empty={__('No results for %query%', { query })}
             uris={downloadedUrls}
             loading={fetching}
           />
@@ -44,4 +75,4 @@ function FileListDownloaded(props: Props) {
   );
 }
 
-export default FileListDownloaded;
+export default withRouter(FileListDownloaded);

src/ui/scss/component/_wunderbar.scss

@@ -27,7 +27,7 @@
   }
 }
 
-.wunderbar--channel {
+.wunderbar--inline {
   @extend .wunderbar;
   flex: 0;
   margin-right: 0;

static/app-strings.json

@@ -553,7 +553,6 @@
   "For the initial release, deleting or editing comments is not possible. Please be mindful of this when posting.": "For the initial release, deleting or editing comments is not possible. Please be mindful of this when posting.",
   "Add support": "Add support",
   "Add support to": "Add support to",
-  "This will increase your overall bid amount for ": "This will increase your overall bid amount for ",
   "Share on Facebook": "Share on Facebook",
   "Share On Twitter": "Share On Twitter",
   "View on lbry.tv": "View on lbry.tv",
@@ -579,7 +578,6 @@
   "Cover (1000 x 160)": "Cover (1000 x 160)",
   "The tags you follow will change what's trending for you. ": "The tags you follow will change what's trending for you. ",
   "Mature": "Mature",
-  "This will increase the overall bid amount for ": "This will increase the overall bid amount for ",
   "This will appear as a tip for ": "This will appear as a tip for ",
   "Show mature content": "Show mature content",
   "Mature content may include nudity, intense sexuality, profanity, or other adult content. By displaying mature content, you are affirming you are of legal age to view mature content in your country or jurisdiction.  ": "Mature content may include nudity, intense sexuality, profanity, or other adult content. By displaying mature content, you are affirming you are of legal age to view mature content in your country or jurisdiction.  ",
@@ -832,4 +830,4 @@
   "Sign Out": "Sign Out",
   "Follow more tags": "Follow more tags",
   "Portuguese": "Portuguese"
-}
+}