// @flow import { MAIN_CLASS } from 'component/page/view'; import type { Node } from 'react'; import React, { useEffect } from 'react'; import classnames from 'classnames'; import ClaimPreview from 'component/claimPreview'; import Spinner from 'component/spinner'; import { FormField } from 'component/common/form'; import usePersistedState from 'effects/use-persisted-state'; import debounce from 'util/debounce'; import ClaimPreviewTile from 'component/claimPreviewTile'; import { prioritizeActiveLivestreams } from 'component/claimTilesDiscover/view'; const DEBOUNCE_SCROLL_HANDLER_MS = 150; const SORT_NEW = 'new'; const SORT_OLD = 'old'; type Props = { uris: Array, header: Node | boolean, headerAltControls: Node, loading: boolean, type: string, activeUri?: string, empty?: string, defaultSort?: boolean, onScrollBottom?: (any) => void, page?: number, pageSize?: number, id?: string, // If using the default header, this is a unique ID needed to persist the state of the filter setting persistedStorageKey?: string, showHiddenByUser: boolean, showUnresolvedClaims?: boolean, renderActions?: (Claim) => ?Node, renderProperties?: (Claim) => ?Node, includeSupportAction?: boolean, injectedItem: ?Node, timedOutMessage?: Node, tileLayout?: boolean, searchInLanguage: boolean, hideMenu?: boolean, claimSearchByQuery: { [string]: Array }, claimsByUri: { [string]: any }, liveLivestreamsFirst?: boolean, livestreamMap?: { [string]: any }, searchOptions?: any, collectionId?: string, showNoSourceClaims?: boolean, onClick?: (e: any, index?: number) => void, }; export default function ClaimList(props: Props) { const { activeUri, uris, headerAltControls, loading, id, persistedStorageKey, empty, defaultSort, type, header, onScrollBottom, pageSize, page, showHiddenByUser, showUnresolvedClaims, includeSupportAction, injectedItem, timedOutMessage, tileLayout = false, renderActions, renderProperties, searchInLanguage, hideMenu, claimSearchByQuery, claimsByUri, liveLivestreamsFirst, livestreamMap, searchOptions, collectionId, showNoSourceClaims, onClick, } = props; const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW); const timedOut = uris === null; const urisLength = (uris && uris.length) || 0; const liveUris = []; if (liveLivestreamsFirst && livestreamMap) { prioritizeActiveLivestreams(uris, liveUris, livestreamMap, claimsByUri, claimSearchByQuery, searchOptions); } 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'); const resolveLive = (index) => { if (liveLivestreamsFirst && livestreamMap && index < liveUris.length) { return true; } return undefined; }; function handleSortChange() { setCurrentSort(currentSort === SORT_NEW ? SORT_OLD : SORT_NEW); } function handleClaimClicked(e, index) { if (onClick) { onClick(e, index); } } 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; if (contentWrapperAtBottomOfPage) { onScrollBottom(); } } } }, DEBOUNCE_SCROLL_HANDLER_MS); if (onScrollBottom) { window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); } }, [loading, onScrollBottom, urisLength, pageSize, page]); return tileLayout && !header ? (
{urisLength > 0 && uris.map((uri, index) => ( ))} {!timedOut && urisLength === 0 && !loading &&
{empty || noResultMsg}
} {timedOut && timedOutMessage &&
{timedOutMessage}
}
) : (
{header !== false && ( {header && (
{header} {loading && } {(headerAltControls || defaultSort) && (
{headerAltControls} {defaultSort && ( )}
)}
)}
)} {urisLength > 0 && (
    {sortedUris.map((uri, index) => ( {injectedItem && index === 4 &&
  • {injectedItem}
  • } { // 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 return claim.name.length === 24 && !claim.name.includes(' ') && claim.value.author === 'Spee.ch'; }} live={resolveLive(index)} onClick={handleClaimClicked} />
    ))}
)} {!timedOut && urisLength === 0 && !loading &&
{empty || noResultMsg}
} {!loading && timedOut && timedOutMessage &&
{timedOutMessage}
}
); }