lbry-desktop/ui/component/sideNavigation/view.jsx

244 lines
7.3 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
2019-03-28 17:53:13 +01:00
import * as PAGES from 'constants/pages';
import * as ICONS from 'constants/icons';
2019-09-26 18:07:11 +02:00
import React from 'react';
2020-01-02 17:30:27 +01:00
import { withRouter } from 'react-router';
2018-03-26 23:32:43 +02:00
import Button from 'component/button';
2019-06-11 20:10:58 +02:00
import Tag from 'component/tag';
2019-07-17 22:49:06 +02:00
import StickyBox from 'react-sticky-box/dist/esnext';
import Spinner from 'component/spinner';
2020-01-03 20:11:47 +01:00
import usePersistedState from 'effects/use-persisted-state';
2020-05-21 17:38:28 +02:00
import classnames from 'classnames';
2020-01-24 19:31:49 +01:00
// @if TARGET='web'
2020-04-15 17:07:20 +02:00
// import Ads from 'lbrytv/component/ads';
2020-01-24 19:31:49 +01:00
// @endif
2020-01-03 20:11:47 +01:00
const SHOW_CHANNELS = 'SHOW_CHANNELS';
const SHOW_TAGS = 'SHOW_TAGS';
2018-03-26 23:32:43 +02:00
type Props = {
2019-06-11 20:10:58 +02:00
subscriptions: Array<Subscription>,
followedTags: Array<Tag>,
2019-08-21 22:54:44 +02:00
email: ?string,
uploadCount: number,
2019-12-18 06:27:08 +01:00
sticky: boolean,
2019-12-19 21:43:49 +01:00
expanded: boolean,
2019-12-18 06:27:08 +01:00
doSignOut: () => void,
2020-01-02 17:30:27 +01:00
location: { pathname: string },
2020-05-21 17:38:28 +02:00
purchaseSuccess: boolean,
doClearPurchasedUriSuccess: () => void,
2018-03-26 23:32:43 +02:00
};
2020-01-02 17:30:27 +01:00
function SideNavigation(props: Props) {
2019-12-18 06:27:08 +01:00
const {
subscriptions,
followedTags,
uploadCount,
doSignOut,
email,
sticky = true,
2019-12-19 21:43:49 +01:00
expanded = false,
2020-01-02 17:30:27 +01:00
location,
2020-05-21 17:38:28 +02:00
purchaseSuccess,
doClearPurchasedUriSuccess,
2019-12-18 06:27:08 +01:00
} = props;
2020-01-02 17:30:27 +01:00
const { pathname } = location;
2019-12-18 06:27:08 +01:00
const isAuthenticated = Boolean(email);
2020-05-21 17:38:28 +02:00
const [pulseLibrary, setPulseLibrary] = React.useState(false);
2020-01-03 20:11:47 +01:00
const [sideInformation, setSideInformation] = usePersistedState(
'side-navigation:information',
getSideInformation(pathname)
);
const isPersonalized = !IS_WEB || isAuthenticated;
const requireAuthOnPersonalizedActions = IS_WEB;
2020-01-03 20:11:47 +01:00
function getSideInformation(path) {
switch (path) {
case `/$/${PAGES.CHANNELS_FOLLOWING}`:
return SHOW_CHANNELS;
case `/$/${PAGES.TAGS_FOLLOWING}`:
return SHOW_TAGS;
default:
return sideInformation;
}
}
React.useEffect(() => {
const sideInfo = getSideInformation(pathname);
setSideInformation(sideInfo);
}, [pathname, setSideInformation]);
2019-12-18 06:27:08 +01:00
2020-05-21 17:38:28 +02:00
React.useEffect(() => {
if (purchaseSuccess) {
setPulseLibrary(true);
let timeout = setTimeout(() => {
setPulseLibrary(false);
doClearPurchasedUriSuccess();
}, 2500);
return () => clearTimeout(timeout);
}
}, [setPulseLibrary, purchaseSuccess, doClearPurchasedUriSuccess]);
function buildLink(path, label, icon, onClick, requiresAuth = false) {
2019-07-17 22:49:06 +02:00
return {
navigate: path ? `$/${path}` : '/',
label,
icon,
2019-12-18 06:27:08 +01:00
onClick,
requiresAuth,
2019-07-17 22:49:06 +02:00
};
}
2019-04-19 23:15:41 +02:00
2019-12-18 06:27:08 +01:00
const Wrapper = ({ children }: any) =>
sticky ? (
<StickyBox offsetTop={100} offsetBottom={20}>
{children}
</StickyBox>
) : (
<div>{children}</div>
);
2020-01-24 19:31:49 +01:00
return (
2019-12-18 06:27:08 +01:00
<Wrapper>
2019-09-26 18:07:11 +02:00
<nav className="navigation">
<ul className="navigation-links">
{[
2020-02-28 06:18:37 +01:00
{
...(expanded && !isAuthenticated ? { ...buildLink(PAGES.AUTH, __('Sign Up'), ICONS.SIGN_UP) } : {}),
},
{
...(expanded && !isAuthenticated
? { ...buildLink(PAGES.AUTH_SIGNIN, __('Sign In'), ICONS.SIGN_IN) }
: {}),
2020-02-28 06:18:37 +01:00
},
2020-01-20 17:47:03 +01:00
{
...buildLink(null, __('Home'), ICONS.HOME),
},
2019-09-26 18:07:11 +02:00
{
...buildLink(
PAGES.CHANNELS_FOLLOWING,
__('Following'),
ICONS.SUBSCRIBE,
null,
requireAuthOnPersonalizedActions
),
2019-09-26 18:07:11 +02:00
},
{
...buildLink(PAGES.TAGS_FOLLOWING, __('Your Tags'), ICONS.TAG, null, requireAuthOnPersonalizedActions),
2019-09-26 18:07:11 +02:00
},
{
2020-01-02 17:30:27 +01:00
...buildLink(PAGES.DISCOVER, __('All Content'), ICONS.DISCOVER),
2019-09-26 18:07:11 +02:00
},
2020-01-28 00:17:31 +01:00
{
...buildLink(PAGES.LIBRARY, __('Library'), ICONS.LIBRARY),
},
2020-04-29 16:00:48 +02:00
{
...(expanded ? { ...buildLink(PAGES.SETTINGS, __('Settings'), ICONS.SETTINGS) } : {}),
},
2020-03-11 20:57:21 +01:00
].map(
linkProps =>
linkProps.navigate && (
<li key={linkProps.navigate}>
2020-05-21 17:38:28 +02:00
<Button
{...linkProps}
icon={pulseLibrary && linkProps.icon === ICONS.LIBRARY ? ICONS.PURCHASED : linkProps.icon}
className={classnames('navigation-link', {
'navigation-link--pulse': linkProps.icon === ICONS.LIBRARY && pulseLibrary,
})}
activeClass="navigation-link--active"
/>
2020-03-11 20:57:21 +01:00
</li>
)
)}
2019-12-18 06:27:08 +01:00
2019-12-19 21:43:49 +01:00
{expanded &&
isPersonalized &&
2019-12-18 06:27:08 +01:00
[
2020-01-02 17:30:27 +01:00
{
...buildLink(PAGES.CHANNELS, __('Channels'), ICONS.CHANNEL),
},
{
...buildLink(
PAGES.PUBLISHED,
uploadCount ? (
<span>
{__('Publishes')}
<Spinner type="small" />
</span>
) : (
__('Publishes')
),
ICONS.PUBLISH
),
},
2020-03-23 20:16:09 +01:00
{
...buildLink(PAGES.CREATOR_DASHBOARD, __('Creator Analytics'), ICONS.ANALYTICS),
},
2019-12-18 06:27:08 +01:00
{
...buildLink(PAGES.WALLET, __('Wallet'), ICONS.WALLET),
},
{
...buildLink(PAGES.REWARDS, __('Rewards'), ICONS.REWARDS),
2019-12-18 06:27:08 +01:00
},
2020-01-17 16:26:57 +01:00
{
...buildLink(PAGES.INVITE, __('Invites'), ICONS.INVITE),
},
2019-12-18 06:27:08 +01:00
{
...buildLink(PAGES.PUBLISH, __('Publish'), ICONS.PUBLISH),
},
{
...buildLink(PAGES.HELP, __('Help'), ICONS.HELP),
},
{
...(isAuthenticated ? { ...buildLink(PAGES.AUTH, __('Sign Out'), ICONS.SIGN_OUT, doSignOut) } : {}),
},
2019-12-19 21:43:49 +01:00
].map(
linkProps =>
Object.keys(linkProps).length > 0 &&
2020-03-18 18:33:17 +01:00
linkProps && (
2019-12-19 21:43:49 +01:00
<li key={linkProps.navigate}>
<Button {...linkProps} className="navigation-link" activeClass="navigation-link--active" />
</li>
2020-03-18 18:33:17 +01:00
)
2019-12-19 21:43:49 +01:00
)}
2019-09-26 18:07:11 +02:00
</ul>
2019-08-27 16:43:42 +02:00
{sideInformation === SHOW_TAGS && !expanded && isPersonalized && (
2020-01-02 17:30:27 +01:00
<ul className="navigation__secondary navigation-links--small tags--vertical">
2019-09-27 20:56:15 +02:00
{followedTags.map(({ name }, key) => (
<li className="navigation-link__wrapper" key={name}>
<Tag navigate={`/$/tags?t${name}`} name={name} />
</li>
))}
</ul>
2020-01-02 17:30:27 +01:00
)}
{sideInformation === SHOW_CHANNELS && !expanded && isPersonalized && (
2020-01-02 17:30:27 +01:00
<ul className="navigation__secondary navigation-links--small">
2019-09-27 20:56:15 +02:00
{subscriptions.map(({ uri, channelName }, index) => (
<li key={uri} className="navigation-link__wrapper">
<Button
navigate={uri}
label={channelName}
className="navigation-link"
activeClass="navigation-link--active"
/>
</li>
))}
</ul>
2020-01-02 17:30:27 +01:00
)}
2019-09-26 18:07:11 +02:00
</nav>
// @if TARGET='web'
2020-04-15 17:07:20 +02:00
{/* {!isAuthenticated && !expanded && <Ads />} commenting out sidebar ads for test */}
// @endif
2019-12-18 06:27:08 +01:00
</Wrapper>
2019-06-11 20:10:58 +02:00
);
}
2018-03-26 23:32:43 +02:00
2020-01-02 17:30:27 +01:00
export default withRouter(SideNavigation);