LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Fix header profile button for no channels, use it as an icon for mobile unath instead of big login/signup buttons

Browse source
This commit is contained in:
Rafael 2021-12-21 12:09:19 -03:00 committed by Thomas Zarebczan
parent 7001c27ed0
commit 4158b99453
3 changed files with 35 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ui/component/header/view.jsx
View file

@ -158,13 +158,13 @@ const Header = (props: Props) => {
{!hideProfile && <HeaderProfileMenuButton />}
</>
) : (
) : !isMobile ? (
<div className="header__authButtons">
{!isMobile && (
<Button navigate={`/$/${PAGES.AUTH_SIGNIN}`} button="link" label={__('Log In')} disabled={user === null} />
)}
<Button navigate={`/$/${PAGES.AUTH_SIGNIN}`} button="link" label={__('Log In')} disabled={user === null} />
<Button navigate={`/$/${PAGES.AUTH}`} button="primary" label={__('Sign Up')} disabled={user === null} />
</div>
) : (
<HeaderProfileMenuButton />
)}
</div>
);

35
ui/component/headerProfileMenuButton/view.jsx
View file

@ -45,19 +45,30 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
)}
<MenuList className="menu__list--header">
<HeaderMenuLink page={PAGES.UPLOADS} icon={ICONS.PUBLISH} name={__('Uploads')} />
<HeaderMenuLink page={PAGES.CHANNELS} icon={ICONS.CHANNEL} name={__('Channels')} />
<HeaderMenuLink page={PAGES.CREATOR_DASHBOARD} icon={ICONS.ANALYTICS} name={__('Creator Analytics')} />
<HeaderMenuLink page={PAGES.REWARDS} icon={ICONS.REWARDS} name={__('Rewards')} />
<HeaderMenuLink page={PAGES.INVITE} icon={ICONS.INVITE} name={__('Invites')} />
{email ? (
<>
<HeaderMenuLink page={PAGES.UPLOADS} icon={ICONS.PUBLISH} name={__('Uploads')} />
<HeaderMenuLink page={PAGES.CHANNELS} icon={ICONS.CHANNEL} name={__('Channels')} />
<HeaderMenuLink page={PAGES.CREATOR_DASHBOARD} icon={ICONS.ANALYTICS} name={__('Creator Analytics')} />
<HeaderMenuLink page={PAGES.REWARDS} icon={ICONS.REWARDS} name={__('Rewards')} />
<HeaderMenuLink page={PAGES.INVITE} icon={ICONS.INVITE} name={__('Invites')} />
<MenuItem onSelect={signOut}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.SIGN_OUT} />
{__('Sign Out')}
</div>
<span className="menu__link-help">{email}</span>
</MenuItem>
<MenuItem onSelect={signOut}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.SIGN_OUT} />
{__('Sign Out')}
</div>
<span className="menu__link-help">{email}</span>
</MenuItem>
</>
) : (
<>
<HeaderMenuLink page={PAGES.AUTH_SIGNIN} icon={ICONS.SIGN_IN} name={__('Log In')} />
<HeaderMenuLink page={PAGES.AUTH} icon={ICONS.SIGN_UP} name={__('Sign Up')} />
<HeaderMenuLink page={PAGES.SETTINGS} icon={ICONS.SETTINGS} name={__('Settings')} />
<HeaderMenuLink page={PAGES.HELP} icon={ICONS.HELP} name={__('Help')} />
</>
)}
</MenuList>
</Menu>
</div>

13
ui/redux/selectors/app.js
View file

@ -1,5 +1,6 @@
import { createSelector } from 'reselect';
import { selectClaimWithId, selectMyChannelClaims, selectStakedLevelForChannelUri } from 'redux/selectors/claims';
import { selectUserEmail } from 'redux/selectors/user';
export const selectState = (state) => state.app || {};
@ -66,15 +67,17 @@ export const selectActiveChannelId = (state) => selectState(state).activeChannel
export const selectActiveChannelClaim = createSelector(
(state) => selectClaimWithId(state, selectActiveChannelId(state)), // i.e. 'byId[activeChannelId]' specifically, instead of just 'byId'.
(state) => selectUserEmail(state),
selectMyChannelClaims,
(activeChannelClaim, myChannelClaims) => {
if (!activeChannelClaim || !myChannelClaims || !myChannelClaims.length) {
(activeChannelClaim, userEmail, myChannelClaims) => {
// Null: has none. Undefined: not resolved, default state, could have or not
if (!userEmail || myChannelClaims === null) {
return null;
} else if (!activeChannelClaim || !myChannelClaims || !myChannelClaims.length) {
return undefined;
}
if (activeChannelClaim) {
return activeChannelClaim;
}
if (activeChannelClaim) return activeChannelClaim;
const myChannelClaimsByEffectiveAmount = myChannelClaims.slice().sort((a, b) => {
const effectiveAmountA = (a.meta && Number(a.meta.effective_amount)) || 0;