From a8711c027fe1364cfcc155c89f8dd945be03bbd3 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Thu, 2 Jan 2020 11:30:27 -0500 Subject: [PATCH] navigation redesign --- static/app-strings.json | 11 +- ui/analytics.js | 2 +- ui/component/app/view.jsx | 7 ++ ui/component/claimListDiscover/index.js | 2 - ui/component/claimListDiscover/view.jsx | 147 ++++++----------------- ui/component/common/icon-custom.jsx | 33 +++++ ui/component/header/view.jsx | 47 +++++--- ui/component/page/view.jsx | 4 +- ui/component/router/view.jsx | 11 +- ui/component/sideNavigation/view.jsx | 83 +++++++------ ui/constants/icons.js | 3 + ui/constants/pages.js | 6 +- ui/page/channelsFollowing/index.js | 20 +++ ui/page/channelsFollowing/view.jsx | 56 +++++++++ ui/page/channelsFollowingManage/index.js | 16 +++ ui/page/channelsFollowingManage/view.jsx | 57 +++++++++ ui/page/discover/view.jsx | 20 +-- ui/page/home/index.js | 18 +++ ui/page/home/view.jsx | 22 ++++ ui/page/tagsFollowing/index.js | 18 +++ ui/page/tagsFollowing/view.jsx | 30 +++++ ui/redux/actions/app.js | 1 + ui/scss/component/_button.scss | 39 ++++++ ui/scss/component/_claim-list.scss | 11 +- ui/scss/component/_header.scss | 18 ++- ui/scss/component/_modal.scss | 2 +- ui/scss/component/_navigation.scss | 4 + ui/scss/component/_tags.scss | 2 - ui/scss/component/_wunderbar.scss | 1 + ui/scss/component/menu-button.scss | 4 - ui/scss/init/_gui.scss | 7 ++ ui/scss/themes/dark.scss | 10 +- ui/scss/themes/light.scss | 6 +- 33 files changed, 499 insertions(+), 219 deletions(-) create mode 100644 ui/page/channelsFollowing/index.js create mode 100644 ui/page/channelsFollowing/view.jsx create mode 100644 ui/page/channelsFollowingManage/index.js create mode 100644 ui/page/channelsFollowingManage/view.jsx create mode 100644 ui/page/home/index.js create mode 100644 ui/page/home/view.jsx create mode 100644 ui/page/tagsFollowing/index.js create mode 100644 ui/page/tagsFollowing/view.jsx diff --git a/static/app-strings.json b/static/app-strings.json index 226004fe4..96c302d4b 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -936,5 +936,12 @@ "Text copied": "Text copied", "Rewards Disabled": "Rewards Disabled", "Woah, you have a lot of friends! You've claimed the maximum amount of referral rewards. Check back soon to see if more are available!.": "Woah, you have a lot of friends! You've claimed the maximum amount of referral rewards. Check back soon to see if more are available!.", - "Wallet servers are used to relay data to and from the LBRY blockchain. They also determine what content shows in trending or is blocked. %learn_more%.": "Wallet servers are used to relay data to and from the LBRY blockchain. They also determine what content shows in trending or is blocked. %learn_more%." -} + "Wallet servers are used to relay data to and from the LBRY blockchain. They also determine what content shows in trending or is blocked. %learn_more%.": "Wallet servers are used to relay data to and from the LBRY blockchain. They also determine what content shows in trending or is blocked. %learn_more%.", + "Your Tags": "Your Tags", + "All Content": "All Content", + "Claim Your 5 LBC Invite Reward": "Claim Your 5 LBC Invite Reward", + "Accepted": "Accepted", + "Claimable": "Claimable", + "Invite A Friend": "Invite A Friend", + "Navigation": "Navigation" +} \ No newline at end of file diff --git a/ui/analytics.js b/ui/analytics.js index eaf66ae2a..3ff053bc1 100644 --- a/ui/analytics.js +++ b/ui/analytics.js @@ -46,7 +46,7 @@ type LogPublishParams = { let analyticsEnabled: boolean = true; const analytics: Analytics = { error: message => { - if (analyticsEnabled) { + if (analyticsEnabled && isProduction) { Lbryio.call('event', 'desktop_error', { error_message: message }); } }, diff --git a/ui/component/app/view.jsx b/ui/component/app/view.jsx index 0a1716758..0a7e99487 100644 --- a/ui/component/app/view.jsx +++ b/ui/component/app/view.jsx @@ -147,6 +147,13 @@ function App(props: Props) { } }, [previousRewardApproved, isRewardApproved]); + // @if TARGET='app' + useEffect(() => { + console.log('update prefs'); + updatePreferences(); + }, []); + // @endif + // Keep this at the end to ensure initial setup effects are run first useEffect(() => { // Wait for balance to be populated on desktop so we know when we can begin syncing diff --git a/ui/component/claimListDiscover/index.js b/ui/component/claimListDiscover/index.js index 10843d588..bcf0a521c 100644 --- a/ui/component/claimListDiscover/index.js +++ b/ui/component/claimListDiscover/index.js @@ -7,14 +7,12 @@ import { doToggleTagFollow, selectBlockedChannels, } from 'lbry-redux'; -import { selectSubscriptions } from 'redux/selectors/subscriptions'; import { makeSelectClientSetting } from 'redux/selectors/settings'; import ClaimListDiscover from './view'; const select = state => ({ claimSearchByQuery: selectClaimSearchByQuery(state), loading: selectFetchingClaimSearch(state), - subscribedChannels: selectSubscriptions(state), showNsfw: makeSelectClientSetting(SETTINGS.SHOW_MATURE)(state), hiddenUris: selectBlockedChannels(state), }); diff --git a/ui/component/claimListDiscover/view.jsx b/ui/component/claimListDiscover/view.jsx index 0353cfa98..d62f192ab 100644 --- a/ui/component/claimListDiscover/view.jsx +++ b/ui/component/claimListDiscover/view.jsx @@ -1,6 +1,6 @@ // @flow import type { Node } from 'react'; -import * as PAGES from 'constants/pages'; +import classnames from 'classnames'; import React, { Fragment, useEffect, useState } from 'react'; import { withRouter } from 'react-router'; import { createNormalizedClaimSearchKey, MATURE_TAGS } from 'lbry-redux'; @@ -8,7 +8,6 @@ import { FormField } from 'component/common/form'; import Button from 'component/button'; import moment from 'moment'; import ClaimList from 'component/claimList'; -import Tag from 'component/tag'; import ClaimPreview from 'component/claimPreview'; import { toCapitalCase } from 'util/string'; import I18nMessage from 'component/i18nMessage'; @@ -19,15 +18,12 @@ const TIME_WEEK = 'week'; const TIME_MONTH = 'month'; 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_CHANNELS, SEARCH_SORT_ALL]; -const SEARCH_TYPES = [TYPE_TRENDING, TYPE_TOP, TYPE_NEW]; +export const TYPE_TRENDING = 'trending'; +export const TYPE_TOP = 'top'; +export const TYPE_NEW = 'new'; + +const SEARCH_TYPES = [TYPE_TRENDING, TYPE_NEW, TYPE_TOP]; const SEARCH_TIMES = [TIME_DAY, TIME_WEEK, TIME_MONTH, TIME_YEAR, TIME_ALL]; type Props = { @@ -40,7 +36,6 @@ type Props = { doToggleTagFollow: string => void, meta?: Node, showNsfw: boolean, - hideCustomization: boolean, history: { action: string, push: string => void, replace: string => void }, location: { search: string, pathname: string }, claimSearchByQuery: { @@ -48,6 +43,8 @@ type Props = { }, hiddenUris: Array, hiddenNsfwMessage?: Node, + channelIds?: Array, + defaultTypeSort?: string, }; function ClaimListDiscover(props: Props) { @@ -58,21 +55,20 @@ function ClaimListDiscover(props: Props) { loading, personalView, meta, - subscribedChannels, + channelIds, showNsfw, history, location, hiddenUris, - hideCustomization, hiddenNsfwMessage, + defaultTypeSort, } = props; const didNavigateForward = history.action === 'PUSH'; const [page, setPage] = useState(1); const { search } = location; const [forceRefresh, setForceRefresh] = useState(); const urlParams = new URLSearchParams(search); - const personalSort = urlParams.get('sort') || (hideCustomization ? SEARCH_SORT_ALL : SEARCH_SORT_YOU); - const typeSort = urlParams.get('type') || TYPE_TRENDING; + const typeSort = urlParams.get('type') || defaultTypeSort || TYPE_TRENDING; const timeSort = urlParams.get('time') || TIME_WEEK; const tagsInUrl = urlParams.get('t') || ''; const options: { @@ -91,8 +87,8 @@ function ClaimListDiscover(props: Props) { // 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, - any_tags: (personalView && !hideCustomization && personalSort === SEARCH_SORT_YOU) || !personalView ? tags : [], - channel_ids: personalSort === SEARCH_SORT_CHANNELS ? subscribedChannels.map(sub => sub.uri.split('#')[1]) : [], + any_tags: tags || [], + channel_ids: channelIds || [], not_channel_ids: hiddenUris && hiddenUris.length ? hiddenUris.map(hiddenUri => hiddenUri.split('#')[1]) : [], not_tags: !showNsfw ? MATURE_TAGS : [], order_by: @@ -110,41 +106,17 @@ function ClaimListDiscover(props: Props) { .unix() )}`; } - 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)); + + const hasMatureTags = tags && tags.some(t => MATURE_TAGS.includes(t)); const claimSearchCacheQuery = createNormalizedClaimSearchKey(options); - const uris = (hasContent && claimSearchByQuery[claimSearchCacheQuery]) || []; + const uris = claimSearchByQuery[claimSearchCacheQuery] || []; const shouldPerformSearch = - hasContent && - (uris.length === 0 || - didNavigateForward || - (!loading && uris.length < PAGE_SIZE * page && uris.length % PAGE_SIZE === 0)); + uris.length === 0 || + didNavigateForward || + (!loading && uris.length < PAGE_SIZE * page && uris.length % PAGE_SIZE === 0); // Don't use the query from createNormalizedClaimSearchKey for the effect since that doesn't include page & release_time const optionsStringForEffect = JSON.stringify(options); - const noChannels = ( -
-

- You're not following any channels. -

-

- - ), - discover:

- ); - const noResults = (

@@ -174,22 +146,6 @@ function ClaimListDiscover(props: Props) {

); - const noTags = ( -

- , - }} - > - You're not following any tags. Add tags above or smash that %customize% button! - -

- ); - - const noFollowing = - (personalSort === SEARCH_SORT_YOU && noTags) || (personalSort === SEARCH_SORT_CHANNELS && noChannels); - const emptyState = !loading && !hasContent ? noFollowing : noResults; - function getSearch() { let search = `?`; if (!personalView) { @@ -200,7 +156,7 @@ function ClaimListDiscover(props: Props) { } function handleTypeSort(newTypeSort) { - let url = `${getSearch()}type=${newTypeSort}&sort=${personalSort}`; + let url = `${getSearch()}type=${newTypeSort}`; if (newTypeSort === TYPE_TOP) { url += `&time=${timeSort}`; } @@ -209,14 +165,9 @@ function ClaimListDiscover(props: Props) { history.push(url); } - function handlePersonalSort(newPersonalSort) { - setPage(1); - history.push(`${getSearch()}type=${typeSort}&sort=${newPersonalSort}`); - } - function handleTimeSort(newTimeSort) { setPage(1); - history.push(`${getSearch()}type=${typeSort}&sort=${personalSort}&time=${newTimeSort}`); + history.push(`${getSearch()}type=${typeSort}&time=${newTimeSort}`); } function handleScrollBottom() { @@ -234,47 +185,19 @@ function ClaimListDiscover(props: Props) { const header = ( - handleTypeSort(e.target.value)} - > - {SEARCH_TYPES.map(type => ( - - ))} - - {!hideCustomization && ( - - {__('for')} - {!personalView && tags && tags.length ? ( - tags.map(tag => ) - ) : ( - { - handlePersonalSort(e.target.value); - }} - > - {SEARCH_FILTER_TYPES.map(type => ( - - ))} - - )} - - )} + {SEARCH_TYPES.map(type => ( +