general fixes

This commit is contained in:
Sean Yesmunt 2019-06-30 21:52:38 -04:00
parent 292e3a3ed1
commit fbd7d12a93
9 changed files with 42 additions and 29 deletions

View file

@ -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 = {

View file

@ -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)}
/>

View file

@ -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}

View file

@ -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',

View file

@ -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 = {};

View file

@ -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>

View file

@ -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;

View file

@ -21,6 +21,7 @@ $main: $lbry-teal-5;
@extend .tags;
flex-direction: column;
align-items: flex-start;
margin-top: var(--spacing-medium);
}
.tags--selected {

View file

@ -31,6 +31,7 @@
[data-reach-menu-item] {
display: block;
z-index: 2;
}
[data-reach-menu-item] {