2018-03-26 23:32:43 +02:00
|
|
|
// @flow
|
2018-11-26 02:21:25 +01:00
|
|
|
import * as ICONS from 'constants/icons';
|
2019-06-17 22:32:38 +02:00
|
|
|
import * as SETTINGS from 'constants/settings';
|
2019-08-21 22:54:44 +02:00
|
|
|
import * as PAGES from 'constants/pages';
|
|
|
|
import React, { Fragment } from 'react';
|
2019-06-17 22:32:38 +02:00
|
|
|
import { withRouter } from 'react-router';
|
2018-03-26 23:32:43 +02:00
|
|
|
import Button from 'component/button';
|
2018-12-19 06:44:53 +01:00
|
|
|
import LbcSymbol from 'component/common/lbc-symbol';
|
2017-12-21 22:08:54 +01:00
|
|
|
import WunderBar from 'component/wunderbar';
|
2019-06-17 22:32:38 +02:00
|
|
|
import Icon from 'component/common/icon';
|
|
|
|
import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
|
2017-05-04 05:44:08 +02:00
|
|
|
|
2019-08-21 22:54:44 +02:00
|
|
|
// Move this into jessops password util
|
|
|
|
import cookie from 'cookie';
|
|
|
|
// @if TARGET='app'
|
|
|
|
import keytar from 'keytar';
|
|
|
|
// @endif;
|
|
|
|
function deleteAuthToken() {
|
|
|
|
// @if TARGET='app'
|
|
|
|
keytar.deletePassword('LBRY', 'auth_token').catch(console.error); //eslint-disable-line
|
|
|
|
// @endif;
|
|
|
|
// @if TARGET='web'
|
|
|
|
document.cookie = cookie.serialize('auth_token', '', {
|
|
|
|
expires: new Date(),
|
|
|
|
});
|
|
|
|
// @endif
|
|
|
|
}
|
|
|
|
|
2018-03-26 23:32:43 +02:00
|
|
|
type Props = {
|
2018-04-17 07:14:14 +02:00
|
|
|
autoUpdateDownloaded: boolean,
|
2018-03-26 23:32:43 +02:00
|
|
|
balance: string,
|
|
|
|
isUpgradeAvailable: boolean,
|
2019-06-11 20:10:58 +02:00
|
|
|
roundedBalance: number,
|
2018-06-25 08:07:45 +02:00
|
|
|
downloadUpgradeRequested: any => void,
|
2019-07-17 22:49:06 +02:00
|
|
|
history: { push: string => void, goBack: () => void, goForward: () => void },
|
2019-06-17 22:32:38 +02:00
|
|
|
currentTheme: string,
|
|
|
|
automaticDarkModeEnabled: boolean,
|
|
|
|
setClientSetting: (string, boolean | string) => void,
|
2019-07-29 17:37:29 +02:00
|
|
|
hideBalance: boolean,
|
2019-08-21 22:54:44 +02:00
|
|
|
email: ?string,
|
2018-03-26 23:32:43 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
const Header = (props: Props) => {
|
2019-08-21 22:54:44 +02:00
|
|
|
const {
|
|
|
|
roundedBalance,
|
|
|
|
history,
|
|
|
|
setClientSetting,
|
|
|
|
currentTheme,
|
|
|
|
automaticDarkModeEnabled,
|
|
|
|
hideBalance,
|
|
|
|
email,
|
|
|
|
} = props;
|
|
|
|
const isAuthenticated = Boolean(email);
|
2018-03-26 23:32:43 +02:00
|
|
|
|
2019-06-17 22:32:38 +02:00
|
|
|
function handleThemeToggle() {
|
|
|
|
if (automaticDarkModeEnabled) {
|
|
|
|
setClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED, false);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (currentTheme === 'dark') {
|
|
|
|
setClientSetting(SETTINGS.THEME, 'light');
|
|
|
|
} else {
|
|
|
|
setClientSetting(SETTINGS.THEME, 'dark');
|
|
|
|
}
|
|
|
|
}
|
2018-03-26 23:32:43 +02:00
|
|
|
|
2019-07-29 17:37:29 +02:00
|
|
|
function getAccountTitle() {
|
|
|
|
if (roundedBalance > 0 && !hideBalance) {
|
|
|
|
return (
|
|
|
|
<React.Fragment>
|
|
|
|
{roundedBalance} <LbcSymbol />
|
|
|
|
</React.Fragment>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return __('Account');
|
|
|
|
}
|
|
|
|
|
2019-08-21 22:54:44 +02:00
|
|
|
function signOut() {
|
|
|
|
// Replace this with actual clearUser function
|
|
|
|
window.store.dispatch({ type: 'USER_FETCH_FAILURE' });
|
|
|
|
deleteAuthToken();
|
|
|
|
}
|
|
|
|
|
2017-06-06 23:19:12 +02:00
|
|
|
return (
|
2018-03-26 23:32:43 +02:00
|
|
|
<header className="header">
|
2019-06-11 20:10:58 +02:00
|
|
|
<div className="header__contents">
|
|
|
|
<div className="header__navigation">
|
2019-05-01 07:16:12 +02:00
|
|
|
<Button
|
2019-06-11 20:10:58 +02:00
|
|
|
className="header__navigation-item header__navigation-item--lbry"
|
|
|
|
label={__('LBRY')}
|
|
|
|
icon={ICONS.LBRY}
|
|
|
|
navigate="/"
|
2019-05-01 07:16:12 +02:00
|
|
|
/>
|
2019-06-11 20:10:58 +02:00
|
|
|
{/* @if TARGET='app' */}
|
|
|
|
<div className="header__navigation-arrows">
|
|
|
|
<Button
|
|
|
|
className="header__navigation-item header__navigation-item--back"
|
|
|
|
description={__('Navigate back')}
|
2019-07-17 22:49:06 +02:00
|
|
|
onClick={() => history.goBack()}
|
2019-06-11 20:10:58 +02:00
|
|
|
icon={ICONS.ARROW_LEFT}
|
2019-06-28 09:27:55 +02:00
|
|
|
iconSize={18}
|
2019-06-11 20:10:58 +02:00
|
|
|
/>
|
2018-03-26 23:32:43 +02:00
|
|
|
|
2019-06-11 20:10:58 +02:00
|
|
|
<Button
|
|
|
|
className="header__navigation-item header__navigation-item--forward"
|
|
|
|
description={__('Navigate forward')}
|
2019-07-17 22:49:06 +02:00
|
|
|
onClick={() => history.goForward()}
|
2019-06-11 20:10:58 +02:00
|
|
|
icon={ICONS.ARROW_RIGHT}
|
2019-06-28 09:27:55 +02:00
|
|
|
iconSize={18}
|
2019-06-11 20:10:58 +02:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
{/* @endif */}
|
2019-08-21 22:54:44 +02:00
|
|
|
<WunderBar />
|
2019-04-01 01:04:01 +02:00
|
|
|
</div>
|
2018-12-19 06:44:53 +01:00
|
|
|
|
2019-08-21 22:54:44 +02:00
|
|
|
<div className="header__menu">
|
|
|
|
{isAuthenticated ? (
|
|
|
|
<Fragment>
|
|
|
|
<Menu>
|
|
|
|
<MenuButton className="header__navigation-item menu__title">
|
|
|
|
<Icon icon={ICONS.ACCOUNT} />
|
|
|
|
{getAccountTitle()}
|
|
|
|
</MenuButton>
|
|
|
|
<MenuList className="menu__list--header">
|
|
|
|
<MenuItem className="menu__link" onSelect={() => history.push(`/$/account`)}>
|
|
|
|
<Icon aria-hidden icon={ICONS.OVERVIEW} />
|
|
|
|
{__('Overview')}
|
|
|
|
</MenuItem>
|
|
|
|
<MenuItem className="menu__link" onSelect={() => history.push(`/$/rewards`)}>
|
|
|
|
<Icon aria-hidden icon={ICONS.FEATURED} />
|
|
|
|
{__('Rewards')}
|
|
|
|
</MenuItem>
|
|
|
|
<MenuItem className="menu__link" onSelect={() => history.push(`/$/wallet`)}>
|
|
|
|
<Icon aria-hidden icon={ICONS.WALLET} />
|
|
|
|
{__('Wallet')}
|
|
|
|
</MenuItem>
|
|
|
|
<MenuItem className="menu__link" onSelect={() => history.push(`/$/publish`)}>
|
|
|
|
<Icon aria-hidden icon={ICONS.PUBLISH} />
|
|
|
|
{__('Publish')}
|
|
|
|
</MenuItem>
|
|
|
|
<MenuItem className="menu__link" onSelect={signOut}>
|
|
|
|
<Icon aria-hidden icon={ICONS.SIGN_OUT} />
|
|
|
|
{__('Sign Out')}
|
|
|
|
</MenuItem>
|
|
|
|
</MenuList>
|
|
|
|
</Menu>
|
2019-06-28 09:33:07 +02:00
|
|
|
|
2019-08-21 22:54:44 +02:00
|
|
|
<Menu>
|
|
|
|
<MenuButton className="header__navigation-item menu__title">
|
|
|
|
<Icon size={18} icon={ICONS.SETTINGS} />
|
|
|
|
</MenuButton>
|
|
|
|
<MenuList className="menu__list--header">
|
|
|
|
<MenuItem className="menu__link" onSelect={() => history.push(`/$/settings`)}>
|
|
|
|
<Icon aria-hidden tootlip icon={ICONS.SETTINGS} />
|
|
|
|
{__('Settings')}
|
|
|
|
</MenuItem>
|
|
|
|
<MenuItem className="menu__link" onSelect={() => history.push(`/$/help`)}>
|
|
|
|
<Icon aria-hidden icon={ICONS.HELP} />
|
|
|
|
{__('Help')}
|
|
|
|
</MenuItem>
|
|
|
|
<MenuItem className="menu__link" onSelect={handleThemeToggle}>
|
|
|
|
<Icon icon={currentTheme === 'light' ? ICONS.DARK : ICONS.LIGHT} />
|
|
|
|
{currentTheme === 'light' ? 'Dark' : 'Light'}
|
|
|
|
</MenuItem>
|
|
|
|
</MenuList>
|
|
|
|
</Menu>
|
|
|
|
</Fragment>
|
|
|
|
) : (
|
|
|
|
<Fragment>
|
|
|
|
<Button navigate={`/$/${PAGES.AUTH}/signin`} button="link" label={__('Sign In')} />
|
|
|
|
<Button navigate={`/$/${PAGES.AUTH}/signup`} button="primary" label={__('Sign Up')} />
|
|
|
|
</Fragment>
|
|
|
|
)}
|
2019-06-11 20:10:58 +02:00
|
|
|
</div>
|
2017-06-06 23:19:12 +02:00
|
|
|
</div>
|
|
|
|
</header>
|
|
|
|
);
|
2017-06-06 06:21:55 +02:00
|
|
|
};
|
2016-08-27 16:12:56 +02:00
|
|
|
|
2019-06-17 22:32:38 +02:00
|
|
|
export default withRouter(Header);
|