LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Add ability to search through publishes. #7535

Merged
Ruk33 merged 8 commits from 3139-ability-to-search-through-publishes into master 2022-04-15 05:06:00 +02:00
Conversation 2 Commits 8 Files changed 9 +106 -33
6 changed files with 106 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit e15bc0e8b8 - Show all commits

2
ui/constants/action_types.js
View file

@ -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';

15
ui/page/fileListPublished/index.js
View file

@ -1,11 +1,10 @@
import { connect } from 'react-redux';
import {
selectIsFetchingClaimListMine,
selectMyClaimsPage,
selectMyClaimsPageItemCount,
selectIsFetchingAllMyClaims,
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),
urls: selectMyClaimsPage(state),
urlTotal: selectMyClaimsPageItemCount(state),
fetching: selectIsFetchingAllMyClaims(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));

80
ui/page/fileListPublished/view.jsx
View file

@ -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(() => {
if (paramsString && fetchClaimListMine) {
const params = JSON.parse(paramsString);
fetchClaimListMine(params.page, params.page_size, true, filterBy.split(','));
const filteredClaims = useMemo(() => {
if (fetching) {
return [];
}
}, [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();
Ruk33 commented 2022-04-06 17:41:52 +02:00 (Migrated from github.com)
Review
Copy link

@jessopb I'm not entirely happy with this but I couldn't think of a better way to work around this issue.

@jessopb I'm not entirely happy with this but I couldn't think of a better way to work around this issue.
jessopb commented 2022-04-07 15:05:19 +02:00 (Migrated from github.com)
Review
Copy link

Seems to work really well. I don't think you need "disableHistory" - that mostly doesn't exist except if it's passed to <Paginate as a prop, and only on one page.

Seems to work really well. I don't think you need "disableHistory" - that mostly doesn't exist except if it's passed to <Paginate as a prop, and only on one page.
Ruk33 commented 2022-04-15 02:42:44 +02:00 (Migrated from github.com)
Review
Copy link

Updated. Thanks @jessopb for the comment.

Updated. Thanks @jessopb for the comment.
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="alt"
label={__('Refresh')}
icon={ICONS.REFRESH}
onClick={() => fetchClaimListMine(params.page, params.page_size, true, filterBy.split(','))}
/>
<Button button="alt" label={__('Refresh')} icon={ICONS.REFRESH} onClick={fetchAllMyClaims} />
)}
<Button
icon={ICONS.PUBLISH}
button="secondary"
label={__('Upload')}
navigate={`/$/${PAGES.UPLOAD}`}
onClick={() => clearPublish()}
/>
<Form onSubmit={() => {}} className="wunderbar--inline">
<Icon icon={ICONS.SEARCH} />
<FormField
className="wunderbar__input--inline"
value={searchText}
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">

23
ui/redux/actions/claims.js
View file

@ -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);

15
ui/redux/reducers/claims.js
View file

@ -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 });

4
ui/redux/selectors/claims.js
View file

@ -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) || [],