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
2 changed files with 69 additions and 61 deletions
Showing only changes of commit 8ede588b38 - Show all commits

View file

@ -2306,5 +2306,6 @@
"Privacy": "Privacy",
"LBRY takes privacy and choice seriously. Is it ok if we monitor performance and help creators track their views?": "LBRY takes privacy and choice seriously. Is it ok if we monitor performance and help creators track their views?",
"Yes, share with LBRY": "Yes, share with LBRY",
"Search Uploads": "Search Uploads",
"--end--": "--end--"
}

View file

@ -4,6 +4,7 @@ import * as ICONS from 'constants/icons';
import React, { useEffect, useMemo } from 'react';
import Button from 'component/button';
import ClaimList from 'component/claimList';
import ClaimPreview from 'component/claimPreview';
import Page from 'component/page';
import Paginate from 'component/common/paginate';
import { PAGE_PARAM, PAGE_SIZE_PARAM } from 'constants/claim';
@ -126,67 +127,73 @@ function FileListPublished(props: Props) {
return (
<Page>
<div className="card-stack">
<ClaimList
noEmpty
header={
<span>
<Button
button="alt"
label={__('All')}
aria-label={__('All uploads')}
onClick={() => setFilterBy(FILTER_ALL)}
className={classnames(`button-toggle`, {
'button-toggle--active': filterBy === FILTER_ALL,
})}
/>
<Button
button="alt"
label={__('Uploads')}
onClick={() => setFilterBy(FILTER_UPLOADS)}
className={classnames(`button-toggle`, {
'button-toggle--active': filterBy === FILTER_UPLOADS,
})}
/>
<Button
button="alt"
label={__('Reposts')}
onClick={() => {
setFilterBy(FILTER_REPOSTS);
setSearchText('');
}}
className={classnames(`button-toggle`, {
'button-toggle--active': filterBy === FILTER_REPOSTS,
})}
/>
</span>
}
headerAltControls={
<div className="card__actions--inline">
<Button
button="alt"
label={__('Refresh')}
icon={ICONS.REFRESH}
disabled={fetching}
onClick={fetchAllMyClaims}
/>
<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 Uploads')}
disabled={filterBy === FILTER_REPOSTS}
/>
</Form>
</div>
}
persistedStorageKey="claim-list-published"
uris={urls}
loading={fetching}
/>
<Paginate totalPages={urlTotal > 0 ? Math.ceil(urlTotal / Number(pageSize)) : 1} />
{!!urls && (
<>
<ClaimList
noEmpty
header={
<span>
<Button
button="alt"
label={__('All')}
aria-label={__('All uploads')}
onClick={() => setFilterBy(FILTER_ALL)}
className={classnames(`button-toggle`, {
'button-toggle--active': filterBy === FILTER_ALL,
})}
/>
<Button
button="alt"
label={__('Uploads')}
onClick={() => setFilterBy(FILTER_UPLOADS)}
className={classnames(`button-toggle`, {
'button-toggle--active': filterBy === FILTER_UPLOADS,
})}
/>
<Button
button="alt"
label={__('Reposts')}
onClick={() => {
setFilterBy(FILTER_REPOSTS);
setSearchText('');
}}
className={classnames(`button-toggle`, {
'button-toggle--active': filterBy === FILTER_REPOSTS,
})}
/>
</span>
}
headerAltControls={
<div className="card__actions--inline">
<Button
button="alt"
label={__('Refresh')}
icon={ICONS.REFRESH}
disabled={fetching}
onClick={fetchAllMyClaims}
/>
<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 Uploads')}
disabled={filterBy === FILTER_REPOSTS}
/>
</Form>
</div>
}
persistedStorageKey="claim-list-published"
uris={fetching ? [] : urls}
loading={fetching}
/>
{fetching &&
new Array(Number(pageSize)).fill(1).map((x, i) => <ClaimPreview key={i} placeholder="loading" />)}
<Paginate totalPages={urlTotal > 0 ? Math.ceil(urlTotal / Number(pageSize)) : 1} />
</>
)}
</div>
{!fetching && myClaims.length === 0 && (
<React.Fragment>