80 lines
2.6 KiB
JavaScript
80 lines
2.6 KiB
JavaScript
// @flow
|
|
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, 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 (
|
|
<React.Fragment>
|
|
{hasDownloads ? (
|
|
<React.Fragment>
|
|
<ClaimList
|
|
header={__('Your Library')}
|
|
headerAltControls={
|
|
<Form onSubmit={() => {}} className="wunderbar--inline">
|
|
<Icon icon={ICONS.SEARCH} />
|
|
<FormField
|
|
className="wunderbar__input"
|
|
onChange={handleInputChange}
|
|
value={query}
|
|
type="text"
|
|
name="query"
|
|
placeholder={__('Search')}
|
|
/>
|
|
</Form>
|
|
}
|
|
persistedStorageKey="claim-list-downloaded"
|
|
empty={__('No results for %query%', { query })}
|
|
uris={downloadedUrls}
|
|
loading={fetching}
|
|
/>
|
|
<Paginate totalPages={Math.ceil(Number(downloadedUrlsCount) / Number(PAGE_SIZE))} loading={fetching} />
|
|
</React.Fragment>
|
|
) : (
|
|
<div className="main--empty">
|
|
<section className="card card--section">
|
|
<h2 className="card__title card__title--deprecated">
|
|
{__("You haven't downloaded anything from LBRY yet.")}
|
|
</h2>
|
|
<div className="card__actions card__actions--center">
|
|
<Button button="primary" navigate="/" label={__('Explore new content')} />
|
|
</div>
|
|
</section>
|
|
</div>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
|
|
export default withRouter(FileListDownloaded);
|