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

207 lines
5.7 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-01-24 19:31:49 +01:00
// @if TARGET='web'
import Ads from 'lbrytv/component/ads';
// @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,
2020-01-02 17:30:27 +01:00
obscureSideNavigation: boolean,
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 },
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,
2020-01-02 17:30:27 +01:00
obscureSideNavigation,
2019-12-18 06:27:08 +01:00
uploadCount,
doSignOut,
email,
sticky = true,
2019-12-19 21:43:49 +01:00
expanded = false,
2020-01-02 17:30:27 +01:00
location,
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-01-03 20:11:47 +01:00
const [sideInformation, setSideInformation] = usePersistedState(
'side-navigation:information',
getSideInformation(pathname)
);
function getSideInformation(path) {
switch (path) {
case `/$/${PAGES.CHANNELS_FOLLOWING}`:
return SHOW_CHANNELS;
case `/$/${PAGES.TAGS_FOLLOWING}`:
return SHOW_TAGS;
case `/$/${PAGES.DISCOVER}`:
return null;
default:
return sideInformation;
}
}
React.useEffect(() => {
const sideInfo = getSideInformation(pathname);
setSideInformation(sideInfo);
}, [pathname, setSideInformation]);
2019-12-18 06:27:08 +01:00
function buildLink(path, label, icon, onClick) {
2019-07-17 22:49:06 +02:00
return {
navigate: path ? `$/${path}` : '/',
label,
icon,
2019-12-18 06:27:08 +01:00
onClick,
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
// @if TARGET='web'
if (obscureSideNavigation) {
return (
<Wrapper>
<Ads />
</Wrapper>
);
}
// @endif
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-01-20 17:47:03 +01:00
{
...buildLink(null, __('Home'), ICONS.HOME),
},
2019-09-26 18:07:11 +02:00
{
2020-01-02 17:30:27 +01:00
...buildLink(PAGES.CHANNELS_FOLLOWING, __('Following'), ICONS.SUBSCRIBE),
2019-09-26 18:07:11 +02:00
},
{
2020-01-02 17:30:27 +01:00
...buildLink(PAGES.TAGS_FOLLOWING, __('Your Tags'), ICONS.TAG),
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
},
].map(linkProps => (
<li key={linkProps.navigate}>
2019-09-26 18:07:11 +02:00
<Button {...linkProps} className="navigation-link" activeClass="navigation-link--active" />
</li>
))}
2019-12-18 06:27:08 +01:00
2019-12-19 21:43:49 +01:00
{expanded &&
2019-12-18 06:27:08 +01:00
[
2020-01-02 17:30:27 +01:00
// @if TARGET='app'
{
...buildLink(PAGES.LIBRARY, __('Library'), ICONS.LIBRARY),
},
// @endif
{
...buildLink(PAGES.CHANNELS, __('Channels'), ICONS.CHANNEL),
},
{
...buildLink(
PAGES.PUBLISHED,
uploadCount ? (
<span>
{__('Publishes')}
<Spinner type="small" />
</span>
) : (
__('Publishes')
),
ICONS.PUBLISH
),
},
2019-12-18 06:27:08 +01:00
{
...buildLink(PAGES.WALLET, __('Wallet'), ICONS.WALLET),
},
{
...buildLink(PAGES.REWARDS, __('Rewards'), ICONS.FEATURED),
},
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.SETTINGS, __('Settings'), ICONS.SETTINGS),
},
{
...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 &&
(linkProps && (
<li key={linkProps.navigate}>
<Button {...linkProps} className="navigation-link" activeClass="navigation-link--active" />
</li>
))
)}
2019-09-26 18:07:11 +02:00
</ul>
2019-08-27 16:43:42 +02:00
2020-01-03 20:11:47 +01:00
{sideInformation === SHOW_TAGS && (
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
)}
2020-01-03 20:11:47 +01:00
{sideInformation === SHOW_CHANNELS && (
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>
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);