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

309 lines
9.2 KiB
React
Raw Normal View History

2019-06-11 20:10:58 +02:00
// @flow
2019-06-17 22:32:38 +02:00
import type { Node } from 'react';
import React, { Fragment, useEffect, useState } from 'react';
2019-07-17 22:49:06 +02:00
import { withRouter } from 'react-router';
2019-07-31 21:07:26 +02:00
import { createNormalizedClaimSearchKey, MATURE_TAGS } from 'lbry-redux';
2019-06-11 20:10:58 +02:00
import { FormField } from 'component/common/form';
import Button from 'component/button';
2019-07-17 22:49:06 +02:00
import moment from 'moment';
2019-06-19 07:05:43 +02:00
import ClaimList from 'component/claimList';
2019-06-17 22:32:38 +02:00
import Tag from 'component/tag';
2019-06-27 08:18:45 +02:00
import ClaimPreview from 'component/claimPreview';
2019-07-17 22:49:06 +02:00
import { toCapitalCase } from 'util/string';
import I18nMessage from 'component/i18nMessage';
2019-06-11 20:10:58 +02:00
2019-06-27 08:18:45 +02:00
const PAGE_SIZE = 20;
2019-06-11 20:10:58 +02:00
const TIME_DAY = 'day';
const TIME_WEEK = 'week';
const TIME_MONTH = 'month';
const TIME_YEAR = 'year';
const TIME_ALL = 'all';
2019-06-11 20:56:23 +02:00
const SEARCH_SORT_YOU = 'you';
const SEARCH_SORT_ALL = 'everyone';
2019-07-01 03:52:38 +02:00
const SEARCH_SORT_CHANNELS = 'channels';
2019-06-11 20:10:58 +02:00
const TYPE_TRENDING = 'trending';
const TYPE_TOP = 'top';
const TYPE_NEW = 'new';
2019-07-01 03:52:38 +02:00
const SEARCH_FILTER_TYPES = [SEARCH_SORT_YOU, SEARCH_SORT_CHANNELS, SEARCH_SORT_ALL];
2019-07-02 23:21:46 +02:00
const SEARCH_TYPES = [TYPE_TRENDING, TYPE_TOP, TYPE_NEW];
2019-06-11 20:56:23 +02:00
const SEARCH_TIMES = [TIME_DAY, TIME_WEEK, TIME_MONTH, TIME_YEAR, TIME_ALL];
2019-06-11 20:10:58 +02:00
type Props = {
uris: Array<string>,
2019-07-01 03:52:38 +02:00
subscribedChannels: Array<Subscription>,
2019-07-11 20:06:25 +02:00
doClaimSearch: ({}) => void,
2019-06-11 20:10:58 +02:00
tags: Array<string>,
loading: boolean,
2019-07-17 22:49:06 +02:00
personalView: boolean,
2019-06-17 22:32:38 +02:00
doToggleTagFollow: string => void,
meta?: Node,
showNsfw: boolean,
2019-09-26 18:07:11 +02:00
hideCustomization: boolean,
2019-07-17 22:49:06 +02:00
history: { action: string, push: string => void, replace: string => void },
location: { search: string, pathname: string },
claimSearchByQuery: {
[string]: Array<string>,
},
hiddenUris: Array<string>,
hiddenNsfwMessage?: Node,
2019-06-11 20:10:58 +02:00
};
2019-06-19 07:05:43 +02:00
function ClaimListDiscover(props: Props) {
2019-07-17 22:49:06 +02:00
const {
doClaimSearch,
claimSearchByQuery,
tags,
loading,
personalView,
meta,
subscribedChannels,
showNsfw,
history,
location,
hiddenUris,
2019-09-26 18:07:11 +02:00
hideCustomization,
hiddenNsfwMessage,
2019-07-17 22:49:06 +02:00
} = props;
const didNavigateForward = history.action === 'PUSH';
2019-09-26 18:07:11 +02:00
const [page, setPage] = useState(1);
const { search } = location;
const [forceRefresh, setForceRefresh] = useState();
2019-07-17 22:49:06 +02:00
const urlParams = new URLSearchParams(search);
2019-09-26 18:07:11 +02:00
const personalSort = urlParams.get('sort') || (hideCustomization ? SEARCH_SORT_ALL : SEARCH_SORT_YOU);
2019-07-17 22:49:06 +02:00
const typeSort = urlParams.get('type') || TYPE_TRENDING;
const timeSort = urlParams.get('time') || TIME_WEEK;
const tagsInUrl = urlParams.get('t') || '';
const options: {
page_size: number,
page: number,
no_totals: boolean,
any_tags: Array<string>,
channel_ids: Array<string>,
not_channel_ids: Array<string>,
2019-07-17 22:49:06 +02:00
not_tags: Array<string>,
order_by: Array<string>,
release_time?: string,
} = {
page_size: PAGE_SIZE,
page,
// no_totals makes it so the sdk doesn't have to calculate total number pages for pagination
// it's faster, but we will need to remove it if we start using total_pages
no_totals: true,
2019-09-26 18:07:11 +02:00
any_tags: (personalView && !hideCustomization && personalSort === SEARCH_SORT_YOU) || !personalView ? tags : [],
2019-07-17 22:49:06 +02:00
channel_ids: personalSort === SEARCH_SORT_CHANNELS ? subscribedChannels.map(sub => sub.uri.split('#')[1]) : [],
not_channel_ids: hiddenUris && hiddenUris.length ? hiddenUris.map(hiddenUri => hiddenUri.split('#')[1]) : [],
2019-07-17 22:49:06 +02:00
not_tags: !showNsfw ? MATURE_TAGS : [],
order_by:
typeSort === TYPE_TRENDING
? ['trending_global', 'trending_mixed']
: typeSort === TYPE_NEW
? ['release_time']
: ['effective_amount'], // Sort by top
};
if (typeSort === TYPE_TOP && timeSort !== TIME_ALL) {
options.release_time = `>${Math.floor(
moment()
.subtract(1, timeSort)
.unix()
)}`;
}
2019-08-09 15:44:49 +02:00
const hasContent =
(personalSort === SEARCH_SORT_CHANNELS && subscribedChannels.length) ||
(personalSort === SEARCH_SORT_YOU && !!tags.length) ||
personalSort === SEARCH_SORT_ALL;
const hasMatureTags = tags.some(t => MATURE_TAGS.includes(t));
2019-07-31 21:07:26 +02:00
const claimSearchCacheQuery = createNormalizedClaimSearchKey(options);
const uris = (hasContent && claimSearchByQuery[claimSearchCacheQuery]) || [];
2019-07-23 10:05:51 +02:00
const shouldPerformSearch =
hasContent &&
(uris.length === 0 ||
didNavigateForward ||
(!loading && uris.length < PAGE_SIZE * page && uris.length % PAGE_SIZE === 0));
2019-07-31 21:07:26 +02:00
// Don't use the query from createNormalizedClaimSearchKey for the effect since that doesn't include page & release_time
2019-07-17 22:49:06 +02:00
const optionsStringForEffect = JSON.stringify(options);
const noChannels = (
<div>
<p>
<I18nMessage>You're not following any channels.</I18nMessage>
</p>
<p>
<I18nMessage
tokens={{
trending: (
<Button
button="link"
label={__("trending for everyone")}
navigate={'/?type=trending&sort=everyone'}
/>
),
discover: <Button button="link" label={__('discover some channels!')} navigate={'/$/following'} />,
}}
>
Look what's %trending% or %discover%
</I18nMessage>
</p>
</div>
);
const noResults = (
<div>
<p>
<I18nMessage
tokens={{
again: (
<Button
button="link"
label={__('Please try again in a few seconds.')}
onClick={() => setForceRefresh(Date.now())}
/>
),
}}
>
Sorry, your request timed out. %again%
</I18nMessage>
</p>
<p>
<I18nMessage
tokens={{
support: <Button button="link" label={__('contact support')} href="https://lbry.com/faq/support" />,
}}
>
If you continue to have issues, please %support%.
</I18nMessage>
</p>
</div>
);
const emptyState = personalSort === SEARCH_SORT_CHANNELS && !hasContent ? noChannels : noResults;
2019-07-17 22:49:06 +02:00
function getSearch() {
let search = `?`;
if (!personalView) {
search += `t=${tagsInUrl}&`;
2019-06-11 20:10:58 +02:00
}
2019-07-17 22:49:06 +02:00
return search;
}
2019-07-01 03:52:38 +02:00
2019-07-17 22:49:06 +02:00
function handleTypeSort(newTypeSort) {
let url = `${getSearch()}type=${newTypeSort}&sort=${personalSort}`;
if (newTypeSort === TYPE_TOP) {
url += `&time=${timeSort}`;
2019-07-01 03:52:38 +02:00
}
setPage(1);
2019-07-17 22:49:06 +02:00
history.push(url);
}
2019-07-01 03:52:38 +02:00
2019-07-17 22:49:06 +02:00
function handlePersonalSort(newPersonalSort) {
setPage(1);
2019-07-17 22:49:06 +02:00
history.push(`${getSearch()}type=${typeSort}&sort=${newPersonalSort}`);
2019-07-01 03:52:38 +02:00
}
2019-06-11 20:10:58 +02:00
2019-07-17 22:49:06 +02:00
function handleTimeSort(newTimeSort) {
setPage(1);
2019-07-17 22:49:06 +02:00
history.push(`${getSearch()}type=${typeSort}&sort=${personalSort}&time=${newTimeSort}`);
}
2019-07-17 22:49:06 +02:00
function handleScrollBottom() {
if (!loading) {
setPage(page + 1);
2019-07-17 22:49:06 +02:00
}
}
useEffect(() => {
if (shouldPerformSearch) {
const searchOptions = JSON.parse(optionsStringForEffect);
doClaimSearch(searchOptions);
}
}, [doClaimSearch, shouldPerformSearch, optionsStringForEffect, forceRefresh]);
2019-07-17 22:49:06 +02:00
2019-06-11 20:10:58 +02:00
const header = (
2019-07-21 23:31:22 +02:00
<Fragment>
2019-06-17 22:32:38 +02:00
<FormField
className="claim-list__dropdown"
2019-06-17 22:32:38 +02:00
type="select"
name="trending_sort"
value={typeSort}
2019-07-17 22:49:06 +02:00
onChange={e => handleTypeSort(e.target.value)}
2019-06-17 22:32:38 +02:00
>
{SEARCH_TYPES.map(type => (
<option key={type} value={type}>
2019-08-21 20:29:22 +02:00
{__(toCapitalCase(type))}
2019-06-17 22:32:38 +02:00
</option>
))}
</FormField>
2019-09-26 18:07:11 +02:00
{!hideCustomization && (
<Fragment>
<span>{__('For')}</span>
{!personalView && tags && tags.length ? (
tags.map(tag => <Tag key={tag} name={tag} disabled />)
) : (
<FormField
type="select"
name="trending_overview"
className="claim-list__dropdown"
value={personalSort}
onChange={e => {
handlePersonalSort(e.target.value);
}}
>
{SEARCH_FILTER_TYPES.map(type => (
<option key={type} value={type}>
{type === SEARCH_SORT_ALL
? __('Everyone')
: type === SEARCH_SORT_YOU
? __('Tags You Follow')
: __('Channels You Follow')}
</option>
))}
</FormField>
)}
</Fragment>
2019-06-11 20:10:58 +02:00
)}
{typeSort === 'top' && (
<FormField
className="claim-list__dropdown"
2019-06-11 20:10:58 +02:00
type="select"
name="trending_time"
value={timeSort}
2019-07-17 22:49:06 +02:00
onChange={e => handleTimeSort(e.target.value)}
2019-06-11 20:10:58 +02:00
>
2019-06-11 20:56:23 +02:00
{SEARCH_TIMES.map(time => (
2019-06-11 20:10:58 +02:00
<option key={time} value={time}>
2019-07-01 03:52:38 +02:00
{/* i18fixme */}
2019-07-02 23:21:46 +02:00
{time === TIME_DAY && __('Today')}
{time !== TIME_ALL && time !== TIME_DAY && `${__('This')} ${toCapitalCase(time)}`}
{time === TIME_ALL && __('All time')}
2019-06-11 20:10:58 +02:00
</option>
))}
</FormField>
)}
{hasMatureTags && hiddenNsfwMessage}
2019-07-21 23:31:22 +02:00
</Fragment>
2019-06-11 20:10:58 +02:00
);
return (
2019-06-17 22:32:38 +02:00
<div className="card">
2019-06-19 07:05:43 +02:00
<ClaimList
2019-07-23 10:05:51 +02:00
id={claimSearchCacheQuery}
2019-06-17 22:32:38 +02:00
loading={loading}
uris={uris}
header={header}
2019-07-01 03:52:38 +02:00
headerAltControls={meta}
2019-07-17 22:49:06 +02:00
onScrollBottom={handleScrollBottom}
2019-07-01 06:35:36 +02:00
page={page}
2019-07-02 04:54:11 +02:00
pageSize={PAGE_SIZE}
empty={emptyState}
2019-06-17 22:32:38 +02:00
/>
2019-06-27 08:18:45 +02:00
2019-07-21 23:31:22 +02:00
{loading && new Array(PAGE_SIZE).fill(1).map((x, i) => <ClaimPreview key={i} placeholder="loading" />)}
2019-06-17 22:32:38 +02:00
</div>
2019-06-11 20:10:58 +02:00
);
}
2019-07-17 22:49:06 +02:00
export default withRouter(ClaimListDiscover);