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

184 lines
6.3 KiB
React
Raw Normal View History

// @flow
2020-07-23 19:02:07 +02:00
import * as PAGES from 'constants/pages';
import * as ICONS from 'constants/icons';
import React, { useEffect, useMemo } 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';
2018-03-26 23:32:43 +02:00
import Page from 'component/page';
2019-09-23 19:32:38 +02:00
import Paginate from 'component/common/paginate';
import { PAGE_PARAM, PAGE_SIZE_PARAM } from 'constants/claim';
import Spinner from 'component/spinner';
2020-09-04 19:14:48 +02:00
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';
const FILTER_UPLOADS = 'stream';
const FILTER_REPOSTS = 'repost';
type Props = {
2018-10-26 06:20:18 +02:00
checkPendingPublishes: () => void,
clearPublish: () => void,
fetching: boolean,
history: { replace: (string) => void, push: (string) => void },
2019-09-23 19:32:38 +02:00
page: number,
pageSize: number,
myClaims: any,
fetchAllMyClaims: () => void,
};
2019-06-11 20:10:58 +02:00
function FileListPublished(props: 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);
params[PAGE_SIZE_PARAM] = Number(pageSize);
const paramsString = JSON.stringify(params);
2019-06-11 20:10:58 +02:00
useEffect(() => {
2018-10-26 06:20:18 +02:00
checkPendingPublishes();
}, [checkPendingPublishes]);
const filteredClaims = useMemo(() => {
if (fetching) {
return [];
}
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]);
2019-06-11 20:10:58 +02:00
return (
2020-01-02 21:36:03 +01:00
<Page>
2020-05-28 16:45:56 +02:00
<div className="card-stack">
2021-10-16 07:26:40 +02:00
{!!urls && (
<>
<ClaimList
2021-10-16 07:26:40 +02:00
noEmpty
2021-03-16 16:45:14 +01:00
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)}
className={classnames(`button-toggle`, {
'button-toggle--active': filterBy === FILTER_REPOSTS,
})}
/>
</span>
}
headerAltControls={
<div className="card__actions--inline">
{fetching && <Spinner type="small" />}
{!fetching && (
<Button button="alt" label={__('Refresh')} icon={ICONS.REFRESH} 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')}
/>
</Form>
</div>
}
persistedStorageKey="claim-list-published"
uris={urls}
/>
<Paginate totalPages={urlTotal > 0 ? Math.ceil(urlTotal / Number(pageSize)) : 1} />
</>
2020-06-02 18:32:58 +02:00
)}
2020-05-28 16:45:56 +02:00
</div>
{!fetching && myClaims.length === 0 && (
<React.Fragment>
{!fetching ? (
<section className="main--empty">
2020-09-04 19:14:48 +02:00
<Yrbl
2021-10-16 07:26:40 +02:00
title={filterBy === FILTER_REPOSTS ? __('No Reposts') : __('No uploads')}
subtitle={
filterBy === FILTER_REPOSTS
? __("You haven't reposted anything yet. Do it.")
: __("You haven't uploaded anything yet. This is where you can find them when you do!")
}
2020-09-04 19:14:48 +02:00
actions={
2021-10-16 07:26:40 +02:00
filterBy !== FILTER_REPOSTS && (
<div className="section__actions">
<Button
button="primary"
navigate={`/$/${PAGES.UPLOAD}`}
label={__('Upload Something New')}
onClick={() => clearPublish()}
/>
</div>
)
2020-09-04 19:14:48 +02:00
}
/>
</section>
) : (
<section className="main--empty">
2020-09-04 19:14:48 +02:00
<Spinner delayed />
</section>
)}
</React.Fragment>
2019-06-11 20:10:58 +02:00
)}
</Page>
);
2017-05-01 08:26:09 +02:00
}
2017-06-06 06:21:55 +02:00
export default FileListPublished;