lbry-desktop/ui/page/fileListDownloaded/view.jsx

81 lines
2.6 KiB
React
Raw Normal View History

// @flow
import React, { useState } from 'react';
2018-03-26 23:32:43 +02:00
import Button from 'component/button';
2019-06-19 07:05:43 +02:00
import ClaimList from 'component/claimList';
2019-09-23 19:32:38 +02:00
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';
2020-01-02 21:36:03 +01:00
import Page from 'component/page';
type Props = {
fetching: boolean,
allDownloadedUrlsCount: number,
2019-09-25 23:37:01 +02:00
downloadedUrls: Array<string>,
downloadedUrlsCount: ?number,
2019-09-23 19:32:38 +02:00
history: { replace: string => void },
page: number,
2019-10-27 15:41:43 +01:00
query: string,
};
2019-06-11 20:10:58 +02:00
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`);
}
}
2019-06-11 20:10:58 +02:00
return (
2020-01-02 21:36:03 +01:00
<Page>
2019-06-11 20:10:58 +02:00
{hasDownloads ? (
2020-01-02 21:36:03 +01:00
<React.Fragment>
2019-06-28 09:33:07 +02:00
<ClaimList
2019-07-21 23:31:22 +02:00
header={__('Your Library')}
headerAltControls={
<Form onSubmit={() => {}} className="wunderbar--inline">
<Icon icon={ICONS.SEARCH} />
<FormField
className="wunderbar__input"
onChange={handleInputChange}
value={query}
type="text"
2019-10-27 15:41:43 +01:00
name="query"
placeholder={__('Search')}
/>
</Form>
}
2019-06-28 09:33:07 +02:00
persistedStorageKey="claim-list-downloaded"
empty={__('No results for %query%', { query })}
2019-09-25 23:37:01 +02:00
uris={downloadedUrls}
2019-06-28 09:33:07 +02:00
loading={fetching}
/>
2019-09-25 23:37:01 +02:00
<Paginate totalPages={Math.ceil(Number(downloadedUrlsCount) / Number(PAGE_SIZE))} loading={fetching} />
2020-01-02 21:36:03 +01:00
</React.Fragment>
2019-06-11 20:10:58 +02:00
) : (
<div className="main--empty">
<section className="card card--section">
2019-11-22 22:13:00 +01:00
<h2 className="card__title card__title--deprecated">
{__("You haven't downloaded anything from LBRY yet.")}
</h2>
2019-07-21 23:31:22 +02:00
<div className="card__actions card__actions--center">
<Button button="primary" navigate="/" label={__('Explore new content')} />
2019-06-11 20:10:58 +02:00
</div>
</section>
</div>
)}
2020-01-02 21:36:03 +01:00
</Page>
2019-06-11 20:10:58 +02:00
);
}
export default withRouter(FileListDownloaded);