ui/constants/action_types.js

@@ -128,6 +128,8 @@ export const FETCH_CHANNEL_CLAIMS_COMPLETED = 'FETCH_CHANNEL_CLAIMS_COMPLETED';
 export const FETCH_CHANNEL_CLAIM_COUNT_STARTED = 'FETCH_CHANNEL_CLAIM_COUNT_STARTED';
 export const FETCH_CLAIM_LIST_MINE_STARTED = 'FETCH_CLAIM_LIST_MINE_STARTED';
 export const FETCH_CLAIM_LIST_MINE_COMPLETED = 'FETCH_CLAIM_LIST_MINE_COMPLETED';
+export const FETCH_ALL_CLAIM_LIST_MINE_STARTED = 'FETCH_ALL_CLAIM_LIST_MINE_STARTED';
+export const FETCH_ALL_CLAIM_LIST_MINE_COMPLETED = 'FETCH_ALL_CLAIM_LIST_MINE_COMPLETED';
 export const ABANDON_CLAIM_STARTED = 'ABANDON_CLAIM_STARTED';
 export const ABANDON_CLAIM_SUCCEEDED = 'ABANDON_CLAIM_SUCCEEDED';
 export const FETCH_CHANNEL_LIST_STARTED = 'FETCH_CHANNEL_LIST_STARTED';

ui/page/fileListPublished/index.js

@@ -1,11 +1,10 @@
 import { connect } from 'react-redux';
 import {
-  selectIsFetchingClaimListMine,
+  selectIsFetchingAllMyClaims,
-  selectMyClaimsPage,
-  selectMyClaimsPageItemCount,
   selectFetchingMyClaimsPageError,
+  selectAllMyClaims,
 } from 'redux/selectors/claims';
-import { doFetchClaimListMine, doCheckPendingClaims } from 'redux/actions/claims';
+import { doCheckPendingClaims, doFetchAllClaimListMine } from 'redux/actions/claims';
 import { doClearPublish } from 'redux/actions/publish';
 import FileListPublished from './view';
 import { withRouter } from 'react-router';
@@ -20,18 +19,16 @@ const select = (state, props) => {
   return {
     page,
     pageSize,
-    fetching: selectIsFetchingClaimListMine(state),
+    fetching: selectIsFetchingAllMyClaims(state),
-    urls: selectMyClaimsPage(state),
-    urlTotal: selectMyClaimsPageItemCount(state),
     error: selectFetchingMyClaimsPageError(state),
+    myClaims: selectAllMyClaims(state),
   };
 };
 
 const perform = (dispatch) => ({
   checkPendingPublishes: () => dispatch(doCheckPendingClaims()),
-  fetchClaimListMine: (page, pageSize, resolve, filterBy) =>
-    dispatch(doFetchClaimListMine(page, pageSize, resolve, filterBy)),
   clearPublish: () => dispatch(doClearPublish()),
+  fetchAllMyClaims: () => dispatch(doFetchAllClaimListMine()),
 });
 
 export default withRouter(connect(select, perform)(FileListPublished));

ui/page/fileListPublished/view.jsx

@@ -1,7 +1,7 @@
 // @flow
 import * as PAGES from 'constants/pages';
 import * as ICONS from 'constants/icons';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import Button from 'component/button';
 import ClaimList from 'component/claimList';
 import Page from 'component/page';
@@ -9,6 +9,8 @@ import Paginate from 'component/common/paginate';
 import { PAGE_PARAM, PAGE_SIZE_PARAM } from 'constants/claim';
 import Spinner from 'component/spinner';
 import Yrbl from 'component/yrbl';
+import { FormField, Form } from 'component/common/form';
+import Icon from 'component/common/icon';
 import classnames from 'classnames';
 
 const FILTER_ALL = 'stream,repost';
@@ -18,19 +20,19 @@ const FILTER_REPOSTS = 'repost';
 type Props = {
   checkPendingPublishes: () => void,
   clearPublish: () => void,
-  fetchClaimListMine: (number, number, boolean, Array<string>) => void,
   fetching: boolean,
-  urls: Array<string>,
-  urlTotal: number,
   history: { replace: (string) => void, push: (string) => void },
   page: number,
   pageSize: number,
+  myClaims: any,
+  fetchAllMyClaims: () => void,
 };
 
 function FileListPublished(props: Props) {
-  const { checkPendingPublishes, clearPublish, fetchClaimListMine, fetching, urls, urlTotal, page, pageSize } = props;
+  const { checkPendingPublishes, clearPublish, fetching, page, pageSize, myClaims, fetchAllMyClaims } = props;
 
   const [filterBy, setFilterBy] = React.useState(FILTER_ALL);
+  const [searchText, setSearchText] = React.useState('');
   const params = {};
 
   params[PAGE_PARAM] = Number(page);
@@ -42,12 +44,44 @@ function FileListPublished(props: Props) {
     checkPendingPublishes();
   }, [checkPendingPublishes]);
 
-  useEffect(() => {
+  const filteredClaims = useMemo(() => {
-    if (paramsString && fetchClaimListMine) {
+    if (fetching) {
-      const params = JSON.parse(paramsString);
+      return [];
-      fetchClaimListMine(params.page, params.page_size, true, filterBy.split(','));
     }
-  }, [paramsString, filterBy, fetchClaimListMine]);
+
+    return myClaims.filter((claim) => {
+      const value = claim.value || {};
+      const src = value.source || {};
+      const title = (value.title || '').toLowerCase();
+      const description = (value.description || '').toLowerCase();
+      const tags = (value.tags || []).join('').toLowerCase();
+      const srcName = (src.name || '').toLowerCase();
+      const lowerCaseSearchText = searchText.toLowerCase();
+      const textMatches =
+        !searchText ||
+        title.indexOf(lowerCaseSearchText) !== -1 ||
+        description.indexOf(lowerCaseSearchText) !== -1 ||
+        tags.indexOf(lowerCaseSearchText) !== -1 ||
+        srcName.indexOf(lowerCaseSearchText) !== -1;
+      return textMatches && filterBy.includes(claim.value_type);
+    });
+  }, [fetching, myClaims, filterBy, searchText]);
+
+  const urlTotal = filteredClaims.length;
+
+  const urls = useMemo(() => {
+    const params = JSON.parse(paramsString);
+    const zeroIndexPage = Math.max(0, params.page - 1);
+    const paginated = filteredClaims.slice(
+      zeroIndexPage * params.page_size,
+      zeroIndexPage * params.page_size + params.page_size
+    );
+    return paginated.map((claim) => claim.permanent_url);
+  }, [filteredClaims, paramsString]);
+
+  useEffect(() => {
+    fetchAllMyClaims();
+  }, [fetchAllMyClaims]);
 
   return (
     <Page>
@@ -89,20 +123,18 @@ function FileListPublished(props: Props) {
                 <div className="card__actions--inline">
                   {fetching && <Spinner type="small" />}
                   {!fetching && (
-                    <Button
+                    <Button button="alt" label={__('Refresh')} icon={ICONS.REFRESH} onClick={fetchAllMyClaims} />
-                      button="alt"
-                      label={__('Refresh')}
-                      icon={ICONS.REFRESH}
-                      onClick={() => fetchClaimListMine(params.page, params.page_size, true, filterBy.split(','))}
-                    />
                   )}
-                  <Button
+                  <Form onSubmit={() => {}} className="wunderbar--inline">
-                    icon={ICONS.PUBLISH}
+                    <Icon icon={ICONS.SEARCH} />
-                    button="secondary"
+                    <FormField
-                    label={__('Upload')}
+                      className="wunderbar__input--inline"
-                    navigate={`/$/${PAGES.UPLOAD}`}
+                      value={searchText}
-                    onClick={() => clearPublish()}
+                      onChange={(e) => setSearchText(e.target.value)}
+                      type="text"
+                      placeholder={__('Search')}
                     />
+                  </Form>
                 </div>
               }
               persistedStorageKey="claim-list-published"
@@ -112,7 +144,7 @@ function FileListPublished(props: Props) {
           </>
         )}
       </div>
-      {!(urls && urls.length) && (
+      {!fetching && myClaims.length === 0 && (
         <React.Fragment>
           {!fetching ? (
             <section className="main--empty">

ui/redux/actions/claims.js

@@ -184,6 +184,29 @@ export function doFetchClaimListMine(
   };
 }
 
+export function doFetchAllClaimListMine() {
+  return (dispatch: Dispatch) => {
+    dispatch({
+      type: ACTIONS.FETCH_ALL_CLAIM_LIST_MINE_STARTED,
+    });
+
+    // $FlowFixMe
+    Lbry.claim_list({
+      page: 1,
+      page_size: 99999,
+      claim_type: ['stream', 'repost'],
+      resolve: true,
+    }).then((result: StreamListResponse) => {
+      dispatch({
+        type: ACTIONS.FETCH_ALL_CLAIM_LIST_MINE_COMPLETED,
+        data: {
+          result,
+        },
+      });
+    });
+  };
+}
+
 export function doAbandonTxo(txo: Txo, cb: (string) => void) {
   return (dispatch: Dispatch) => {
     if (cb) cb(ABANDON_STATES.PENDING);

ui/redux/reducers/claims.js

@@ -61,6 +61,8 @@ type State = {
   isCheckingNameForPublish: boolean,
   checkingPending: boolean,
   checkingReflecting: boolean,
+  isFetchingAllClaimListMine: boolean,
+  allClaimListMine: ?ClaimListResponse,
 };
 
 const reducers = {};
@@ -109,6 +111,8 @@ const defaultState = {
   isCheckingNameForPublish: false,
   checkingPending: false,
   checkingReflecting: false,
+  isFetchingAllClaimListMine: false,
+  allClaimListMine: undefined,
 };
 
 function handleClaimAction(state: State, action: any): State {
@@ -273,6 +277,17 @@ reducers[ACTIONS.FETCH_CLAIM_LIST_MINE_COMPLETED] = (state: State, action: any):
   });
 };
 
+reducers[ACTIONS.FETCH_ALL_CLAIM_LIST_MINE_STARTED] = (state: State): State =>
+  Object.assign({}, state, {
+    isFetchingAllClaimListMine: true,
+  });
+
+reducers[ACTIONS.FETCH_ALL_CLAIM_LIST_MINE_COMPLETED] = (state: State, action: any): State =>
+  Object.assign({}, state, {
+    isFetchingAllClaimListMine: false,
+    allClaimListMine: action.data.result.items,
+  });
+
 reducers[ACTIONS.FETCH_CHANNEL_LIST_STARTED] = (state: State): State =>
   Object.assign({}, state, { fetchingMyChannels: true });
 

ui/redux/selectors/claims.js

@@ -410,6 +410,10 @@ export const selectIsFetchingClaimListMine = (state: State) => selectState(state
 
 export const selectMyClaimsPage = createSelector(selectState, (state) => state.myClaimsPageResults || []);
 
+export const selectAllMyClaims = createSelector(selectState, (state) => state.allClaimListMine || []);
+
+export const selectIsFetchingAllMyClaims = createSelector(selectState, (state) => state.isFetchingAllClaimListMine);
+
 export const selectMyClaimsPageNumber = createSelector(
   selectState,
   (state) => (state.claimListMinePage && state.claimListMinePage.items) || [],