general fixes
This commit is contained in:
parent
292e3a3ed1
commit
fbd7d12a93
9 changed files with 42 additions and 29 deletions
|
@ -1,10 +1,12 @@
|
|||
import { connect } from 'react-redux';
|
||||
import { doClaimSearch, selectLastClaimSearchUris, selectFetchingClaimSearch, doToggleTagFollow } from 'lbry-redux';
|
||||
import { selectSubscriptions } from 'redux/selectors/subscriptions';
|
||||
import ClaimListDiscover from './view';
|
||||
|
||||
const select = state => ({
|
||||
uris: selectLastClaimSearchUris(state),
|
||||
loading: selectFetchingClaimSearch(state),
|
||||
subscribedChannels: selectSubscriptions(state),
|
||||
});
|
||||
|
||||
const perform = {
|
||||
|
|
|
@ -16,15 +16,18 @@ const TIME_YEAR = 'year';
|
|||
const TIME_ALL = 'all';
|
||||
const SEARCH_SORT_YOU = 'you';
|
||||
const SEARCH_SORT_ALL = 'everyone';
|
||||
const SEARCH_SORT_CHANNELS = 'channels';
|
||||
|
||||
const TYPE_TRENDING = 'trending';
|
||||
const TYPE_TOP = 'top';
|
||||
const TYPE_NEW = 'new';
|
||||
const SEARCH_FILTER_TYPES = [SEARCH_SORT_YOU, SEARCH_SORT_ALL];
|
||||
const SEARCH_FILTER_TYPES = [SEARCH_SORT_YOU, SEARCH_SORT_CHANNELS, SEARCH_SORT_ALL];
|
||||
const SEARCH_TYPES = ['trending', 'top', 'new'];
|
||||
const SEARCH_TIMES = [TIME_DAY, TIME_WEEK, TIME_MONTH, TIME_YEAR, TIME_ALL];
|
||||
|
||||
type Props = {
|
||||
uris: Array<string>,
|
||||
subscribedChannels: Array<Subscription>,
|
||||
doClaimSearch: (number, {}) => void,
|
||||
injectedItem: any,
|
||||
tags: Array<string>,
|
||||
|
@ -35,7 +38,7 @@ type Props = {
|
|||
};
|
||||
|
||||
function ClaimListDiscover(props: Props) {
|
||||
const { doClaimSearch, uris, tags, loading, personal, injectedItem, meta } = props;
|
||||
const { doClaimSearch, uris, tags, loading, personal, injectedItem, meta, subscribedChannels } = props;
|
||||
const [personalSort, setPersonalSort] = usePersistedState('file-list-trending:personalSort', SEARCH_SORT_YOU);
|
||||
const [typeSort, setTypeSort] = usePersistedState('file-list-trending:typeSort', TYPE_TRENDING);
|
||||
const [timeSort, setTimeSort] = usePersistedState('file-list-trending:timeSort', TIME_WEEK);
|
||||
|
@ -43,17 +46,22 @@ function ClaimListDiscover(props: Props) {
|
|||
|
||||
const toCapitalCase = string => string.charAt(0).toUpperCase() + string.slice(1);
|
||||
const tagsString = tags.join(',');
|
||||
const channelsIdString = subscribedChannels.map(channel => channel.uri.split('#')[1]).join(',');
|
||||
useEffect(() => {
|
||||
const options: {
|
||||
page_size: number,
|
||||
any_tags?: Array<string>,
|
||||
order_by?: Array<string>,
|
||||
channel_ids?: Array<string>,
|
||||
release_time?: string,
|
||||
} = { page_size: PAGE_SIZE, page };
|
||||
const newTags = tagsString.split(',');
|
||||
const newChannelIds = channelsIdString.split(',');
|
||||
|
||||
if ((newTags && !personal) || (newTags && personal && personalSort === SEARCH_SORT_YOU)) {
|
||||
options.any_tags = newTags;
|
||||
} else if (personalSort === SEARCH_SORT_CHANNELS) {
|
||||
options.channel_ids = newChannelIds;
|
||||
}
|
||||
|
||||
if (typeSort === TYPE_TRENDING) {
|
||||
|
@ -73,7 +81,15 @@ function ClaimListDiscover(props: Props) {
|
|||
}
|
||||
|
||||
doClaimSearch(20, options);
|
||||
}, [personal, personalSort, typeSort, timeSort, doClaimSearch, page, tagsString]);
|
||||
}, [personal, personalSort, typeSort, timeSort, doClaimSearch, page, tagsString, channelsIdString]);
|
||||
|
||||
function getLabel(type) {
|
||||
if (type === SEARCH_SORT_ALL) {
|
||||
return __('Everyone');
|
||||
}
|
||||
|
||||
return type === SEARCH_SORT_YOU ? __('Tags You Follow') : __('Channels You Follow');
|
||||
}
|
||||
|
||||
const header = (
|
||||
<h1 className="card__title--flex">
|
||||
|
@ -106,17 +122,11 @@ function ClaimListDiscover(props: Props) {
|
|||
>
|
||||
{SEARCH_FILTER_TYPES.map(type => (
|
||||
<option key={type} value={type}>
|
||||
{toCapitalCase(type)}
|
||||
{getLabel(type)}
|
||||
</option>
|
||||
))}
|
||||
</FormField>
|
||||
)}
|
||||
</h1>
|
||||
);
|
||||
|
||||
const headerAltControls = (
|
||||
<React.Fragment>
|
||||
{meta}
|
||||
{typeSort === 'top' && (
|
||||
<FormField
|
||||
className="claim-list__dropdown"
|
||||
|
@ -127,12 +137,13 @@ function ClaimListDiscover(props: Props) {
|
|||
>
|
||||
{SEARCH_TIMES.map(time => (
|
||||
<option key={time} value={time}>
|
||||
{toCapitalCase(time)}
|
||||
{/* i18fixme */}
|
||||
{__('This')} {toCapitalCase(time)}
|
||||
</option>
|
||||
))}
|
||||
</FormField>
|
||||
)}
|
||||
</React.Fragment>
|
||||
</h1>
|
||||
);
|
||||
|
||||
return (
|
||||
|
@ -142,7 +153,7 @@ function ClaimListDiscover(props: Props) {
|
|||
uris={uris}
|
||||
injectedItem={personalSort === SEARCH_SORT_YOU && injectedItem}
|
||||
header={header}
|
||||
headerAltControls={headerAltControls}
|
||||
headerAltControls={meta}
|
||||
onScrollBottom={() => setPage(page + 1)}
|
||||
/>
|
||||
|
||||
|
|
|
@ -33,9 +33,6 @@ function SideBar(props: Props) {
|
|||
{
|
||||
...buildLink(null, __('Home'), ICONS.HOME),
|
||||
},
|
||||
{
|
||||
...buildLink(PAGES.FOLLOWING, __('Following'), ICONS.SUBSCRIBE),
|
||||
},
|
||||
{
|
||||
...buildLink(PAGES.LIBRARY, __('Library'), ICONS.LIBRARY),
|
||||
},
|
||||
|
@ -43,27 +40,17 @@ function SideBar(props: Props) {
|
|||
...buildLink(PAGES.PUBLISHED, __('Publishes'), ICONS.PUBLISH),
|
||||
},
|
||||
].map(renderLink)}
|
||||
|
||||
<li>
|
||||
<Button
|
||||
navigate="/$/following/customize"
|
||||
icon={ICONS.EDIT}
|
||||
className="navigation__link"
|
||||
activeClass="navigation__link--active"
|
||||
label={__('Customize')}
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="navigation__links tags--vertical">
|
||||
{followedTags.map(({ name }, key) => (
|
||||
<li className="navigation__link--indented" key={name}>
|
||||
<li className="" key={name}>
|
||||
<Tag navigate={`/$/tags?t${name}`} name={name} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<ul className="navigation__links--small">
|
||||
{subscriptions.map(({ uri, channelName }, index) => (
|
||||
<li key={uri} className="navigation__link--indented">
|
||||
<li key={uri} className="">
|
||||
<Button
|
||||
navigate={uri}
|
||||
label={channelName}
|
||||
|
|
|
@ -15,12 +15,18 @@ export default function Tag(props: Props) {
|
|||
const { name, onClick, type = 'link', disabled = false } = props;
|
||||
|
||||
const clickProps = onClick ? { onClick } : { navigate: `/$/tags?t=${name}` };
|
||||
let title;
|
||||
if (!onClick) {
|
||||
title = __('View tag');
|
||||
} else {
|
||||
type === 'add' ? __('Add tag') : __('Remove tag');
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
{...clickProps}
|
||||
disabled={disabled}
|
||||
title={type === 'add' ? __('Add tag') : __('Remove tag')}
|
||||
title={title}
|
||||
className={classnames('tag', {
|
||||
'tag--add': type === 'add',
|
||||
'tag--remove': type === 'remove',
|
||||
|
|
|
@ -1,9 +1,11 @@
|
|||
import { connect } from 'react-redux';
|
||||
import { selectFollowedTags } from 'lbry-redux';
|
||||
import { selectSubscriptions } from 'redux/selectors/subscriptions';
|
||||
import DiscoverPage from './view';
|
||||
|
||||
const select = state => ({
|
||||
followedTags: selectFollowedTags(state),
|
||||
subscribedChannels: selectSubscriptions(state),
|
||||
});
|
||||
|
||||
const perform = {};
|
||||
|
|
|
@ -3,6 +3,7 @@ import React from 'react';
|
|||
import ClaimListDiscover from 'component/claimListDiscover';
|
||||
import TagsSelect from 'component/tagsSelect';
|
||||
import Page from 'component/page';
|
||||
import Button from 'component/button';
|
||||
|
||||
type Props = {
|
||||
followedTags: Array<Tag>,
|
||||
|
@ -16,6 +17,7 @@ function DiscoverPage(props: Props) {
|
|||
<ClaimListDiscover
|
||||
personal
|
||||
tags={followedTags.map(tag => tag.name)}
|
||||
meta={<Button button="link" label={__('Customize')} navigate="/$/following/customize" />}
|
||||
injectedItem={<TagsSelect showClose title={__('Customize Your Homepage')} />}
|
||||
/>
|
||||
</Page>
|
||||
|
|
|
@ -19,6 +19,7 @@
|
|||
// Normal link buttons are too dark on the black file list background
|
||||
.button--link {
|
||||
color: $lbry-teal-3;
|
||||
font-size: 1.2em;
|
||||
|
||||
&:hover {
|
||||
color: $lbry-teal-1;
|
||||
|
|
|
@ -21,6 +21,7 @@ $main: $lbry-teal-5;
|
|||
@extend .tags;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-top: var(--spacing-medium);
|
||||
}
|
||||
|
||||
.tags--selected {
|
||||
|
|
|
@ -31,6 +31,7 @@
|
|||
|
||||
[data-reach-menu-item] {
|
||||
display: block;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
[data-reach-menu-item] {
|
||||
|
|
Loading…
Reference in a new issue