lbry-desktop/ui/component/claimList/view.jsx

181 lines
6 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
import { MAIN_CLASS } from 'component/page/view';
2019-06-17 22:32:38 +02:00
import type { Node } from 'react';
import React, { useEffect } from 'react';
2019-06-11 20:10:58 +02:00
import classnames from 'classnames';
import ClaimPreview from 'component/claimPreview';
2019-06-11 20:10:58 +02:00
import Spinner from 'component/spinner';
import { FormField } from 'component/common/form';
2019-09-27 20:56:15 +02:00
import usePersistedState from 'effects/use-persisted-state';
import debounce from 'util/debounce';
2020-08-21 17:49:13 +02:00
import ClaimPreviewTile from 'component/claimPreviewTile';
2019-06-11 20:10:58 +02:00
const DEBOUNCE_SCROLL_HANDLER_MS = 150;
2019-06-11 20:10:58 +02:00
const SORT_NEW = 'new';
const SORT_OLD = 'old';
2018-03-26 23:32:43 +02:00
type Props = {
2019-06-11 20:10:58 +02:00
uris: Array<string>,
2019-06-19 07:05:43 +02:00
header: Node | boolean,
2019-06-17 22:32:38 +02:00
headerAltControls: Node,
2019-06-11 20:10:58 +02:00
loading: boolean,
2019-06-19 07:05:43 +02:00
type: string,
2019-06-11 20:10:58 +02:00
empty?: string,
2019-06-28 09:33:07 +02:00
defaultSort?: boolean,
onScrollBottom?: (any) => void,
2019-07-01 06:35:36 +02:00
page?: number,
2019-07-02 04:54:11 +02:00
pageSize?: number,
2019-07-23 10:05:51 +02:00
id?: string,
2019-06-11 20:10:58 +02:00
// If using the default header, this is a unique ID needed to persist the state of the filter setting
persistedStorageKey?: string,
showHiddenByUser: boolean,
2020-02-05 19:01:07 +01:00
showUnresolvedClaims?: boolean,
2020-02-11 20:04:51 +01:00
renderProperties: ?(Claim) => Node,
2020-02-12 19:59:48 +01:00
includeSupportAction?: boolean,
2020-03-26 22:47:07 +01:00
injectedItem: ?Node,
timedOutMessage?: Node,
2020-08-21 17:49:13 +02:00
tileLayout?: boolean,
renderActions?: (Claim) => ?Node,
searchInLanguage: boolean,
hideMenu?: boolean,
2018-03-26 23:32:43 +02:00
};
2019-06-19 07:05:43 +02:00
export default function ClaimList(props: Props) {
2019-06-27 08:18:45 +02:00
const {
uris,
headerAltControls,
loading,
persistedStorageKey,
empty,
2019-06-28 09:33:07 +02:00
defaultSort,
2019-06-27 08:18:45 +02:00
type,
header,
onScrollBottom,
2019-07-02 04:54:11 +02:00
pageSize,
2019-07-23 10:05:51 +02:00
page,
showHiddenByUser,
2020-02-05 19:01:07 +01:00
showUnresolvedClaims,
2020-02-11 20:04:51 +01:00
renderProperties,
2020-02-12 19:59:48 +01:00
includeSupportAction,
2020-03-26 22:47:07 +01:00
injectedItem,
timedOutMessage,
2020-08-21 17:49:13 +02:00
tileLayout = false,
renderActions,
searchInLanguage,
hideMenu,
2019-06-27 08:18:45 +02:00
} = props;
2020-08-21 17:49:13 +02:00
2019-06-11 20:38:08 +02:00
const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
const timedOut = uris === null;
2019-07-17 22:49:06 +02:00
const urisLength = (uris && uris.length) || 0;
const sortedUris = (urisLength > 0 && (currentSort === SORT_NEW ? uris : uris.slice().reverse())) || [];
const noResultMsg = searchInLanguage
? __('No results. Contents may be hidden by the Language filter.')
: __('No results');
2018-03-26 23:32:43 +02:00
2019-06-11 20:10:58 +02:00
function handleSortChange() {
setCurrentSort(currentSort === SORT_NEW ? SORT_OLD : SORT_NEW);
}
2019-06-27 08:18:45 +02:00
useEffect(() => {
const handleScroll = debounce((e) => {
if (page && pageSize && onScrollBottom) {
const mainEl = document.querySelector(`.${MAIN_CLASS}`);
if (mainEl && !loading && urisLength >= pageSize) {
const contentWrapperAtBottomOfPage = mainEl.getBoundingClientRect().bottom - 0.5 <= window.innerHeight;
2019-06-28 09:33:07 +02:00
if (contentWrapperAtBottomOfPage) {
onScrollBottom();
}
2019-06-28 09:33:07 +02:00
}
}
}, DEBOUNCE_SCROLL_HANDLER_MS);
2019-06-28 09:33:07 +02:00
2019-06-27 08:18:45 +02:00
if (onScrollBottom) {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
2019-06-27 08:18:45 +02:00
}
}, [loading, onScrollBottom, urisLength, pageSize, page]);
2019-06-27 08:18:45 +02:00
2020-08-21 17:49:13 +02:00
return tileLayout && !header ? (
<section className="claim-grid">
{urisLength > 0 &&
uris.map((uri) => <ClaimPreviewTile key={uri} uri={uri} showHiddenByUser={showHiddenByUser} />)}
{!timedOut && urisLength === 0 && !loading && <div className="empty main--empty">{empty || noResultMsg}</div>}
2020-09-15 16:05:04 +02:00
{timedOut && timedOutMessage && <div className="empty main--empty">{timedOutMessage}</div>}
2020-08-21 17:49:13 +02:00
</section>
) : (
2019-06-28 09:33:07 +02:00
<section
className={classnames('claim-list', {
'claim-list--small': type === 'small',
})}
>
2019-06-19 07:05:43 +02:00
{header !== false && (
2020-01-02 21:36:03 +01:00
<React.Fragment>
{header && (
<div className={classnames('claim-list__header', { 'section__title--small': type === 'small' })}>
{header}
{loading && <Spinner type="small" />}
<div className="claim-list__alt-controls">
{headerAltControls}
{defaultSort && (
<FormField
className="claim-list__dropdown"
type="select"
name="file_sort"
value={currentSort}
onChange={handleSortChange}
>
<option value={SORT_NEW}>{__('Newest First')}</option>
<option value={SORT_OLD}>{__('Oldest First')}</option>
</FormField>
)}
</div>
2020-01-02 21:36:03 +01:00
</div>
)}
2020-01-02 21:36:03 +01:00
</React.Fragment>
2019-06-11 20:10:58 +02:00
)}
2019-07-17 22:49:06 +02:00
{urisLength > 0 && (
2020-04-29 21:31:11 +02:00
<ul
className={classnames('ul--no-style', {
2020-09-08 18:52:51 +02:00
card: !(tileLayout || type === 'small'),
2020-08-21 17:49:13 +02:00
'claim-list--card-body': tileLayout,
2020-04-29 21:31:11 +02:00
})}
>
2019-06-11 20:10:58 +02:00
{sortedUris.map((uri, index) => (
2020-03-26 22:47:07 +01:00
<React.Fragment key={uri}>
{injectedItem && index === 4 && <li>{injectedItem}</li>}
<ClaimPreview
uri={uri}
type={type}
hideMenu={hideMenu}
2020-03-26 22:47:07 +01:00
includeSupportAction={includeSupportAction}
showUnresolvedClaim={showUnresolvedClaims}
properties={renderProperties || (type !== 'small' ? undefined : false)}
renderActions={renderActions}
2020-03-26 22:47:07 +01:00
showUserBlocked={showHiddenByUser}
showHiddenByUser={showHiddenByUser}
2020-03-26 22:47:07 +01:00
customShouldHide={(claim: StreamClaim) => {
// Hack to hide spee.ch thumbnail publishes
// If it meets these requirements, it was probably uploaded here:
// https://github.com/lbryio/lbry-redux/blob/master/src/redux/actions/publish.js#L74-L79
if (claim.name.length === 24 && !claim.name.includes(' ') && claim.value.author === 'Spee.ch') {
return true;
} else {
return false;
}
}}
/>
</React.Fragment>
2019-06-11 20:10:58 +02:00
))}
</ul>
)}
2020-08-21 17:49:13 +02:00
{!timedOut && urisLength === 0 && !loading && <div className="empty empty--centered">{empty || noResultMsg}</div>}
2020-09-30 20:46:17 +02:00
{!loading && timedOut && timedOutMessage && <div className="empty empty--centered">{timedOutMessage}</div>}
2019-06-11 20:10:58 +02:00
</section>
);
}