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

115 lines
3.2 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
2019-08-27 16:43:42 +02:00
import type { Node } from 'react';
import React, { Fragment } from 'react';
2018-03-26 23:32:43 +02:00
import classnames from 'classnames';
2019-12-18 06:27:08 +01:00
import SideNavigation from 'component/sideNavigation';
2019-08-27 16:43:42 +02:00
import Header from 'component/header';
import Footer from 'web/component/footer';
/* @if TARGET='app' */
import StatusBar from 'component/common/status-bar';
/* @endif */
2020-08-10 22:47:39 +02:00
import usePersistedState from 'effects/use-persisted-state';
import { useHistory } from 'react-router';
import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize';
import { parseURI } from 'lbry-redux';
2018-03-26 23:32:43 +02:00
2019-10-21 00:41:28 +02:00
export const MAIN_CLASS = 'main';
2018-03-26 23:32:43 +02:00
type Props = {
2019-08-27 16:43:42 +02:00
children: Node | Array<Node>,
2019-01-09 19:39:05 +01:00
className: ?string,
2019-08-27 16:43:42 +02:00
autoUpdateDownloaded: boolean,
isUpgradeAvailable: boolean,
2019-10-28 15:04:37 +01:00
authPage: boolean,
2020-08-10 22:47:39 +02:00
filePage: boolean,
2020-08-21 17:49:13 +02:00
homePage: boolean,
noHeader: boolean,
2020-05-08 18:48:58 +02:00
noFooter: boolean,
2020-06-01 19:03:19 +02:00
noSideNavigation: boolean,
2020-08-21 17:49:13 +02:00
fullWidthPage: boolean,
backout: {
backLabel?: string,
backNavDefault?: string,
title: string,
simpleTitle: string, // Just use the same value as `title` if `title` is already short (~< 10 chars), unless you have a better idea for title overlfow on mobile
},
2018-03-26 23:32:43 +02:00
};
2019-06-17 22:32:38 +02:00
function Page(props: Props) {
2020-06-29 21:54:07 +02:00
const {
children,
className,
2020-08-10 22:47:39 +02:00
filePage = false,
2020-08-21 17:49:13 +02:00
authPage = false,
fullWidthPage = false,
2020-06-29 21:54:07 +02:00
noHeader = false,
noFooter = false,
noSideNavigation = false,
backout,
} = props;
2020-08-10 22:47:39 +02:00
const {
location: { pathname },
} = useHistory();
const [sidebarOpen, setSidebarOpen] = usePersistedState('sidebar', true);
const isMediumScreen = useIsMediumScreen();
const isMobile = useIsMobile();
2020-08-21 17:49:13 +02:00
2020-08-10 22:47:39 +02:00
let isOnFilePage = false;
try {
const url = pathname.slice(1).replace(/:/g, '#');
const { isChannel } = parseURI(url);
if (!isChannel) {
isOnFilePage = true;
}
} catch (e) {}
const isAbsoluteSideNavHidden = (isOnFilePage || isMobile) && !sidebarOpen;
React.useEffect(() => {
if (isOnFilePage || isMediumScreen) {
setSidebarOpen(false);
}
2020-12-17 19:43:47 +01:00
// TODO: make sure setState callback for usePersistedState uses useCallback to it doesn't cause effect to re-run
}, [isOnFilePage, isMediumScreen]);
2019-06-17 22:32:38 +02:00
2019-08-27 16:43:42 +02:00
return (
<Fragment>
2020-08-10 22:47:39 +02:00
{!noHeader && (
<Header
authHeader={authPage}
backout={backout}
sidebarOpen={sidebarOpen}
isAbsoluteSideNavHidden={isAbsoluteSideNavHidden}
setSidebarOpen={setSidebarOpen}
/>
)}
<div className={classnames('main-wrapper__inner', { 'main-wrapper__inner--filepage': isOnFilePage })}>
{!authPage && !noSideNavigation && (
<SideNavigation
sidebarOpen={sidebarOpen}
setSidebarOpen={setSidebarOpen}
isMediumScreen={isMediumScreen}
isOnFilePage={isOnFilePage}
/>
)}
<main
2020-08-21 17:49:13 +02:00
className={classnames(MAIN_CLASS, className, {
'main--full-width': fullWidthPage,
'main--auth-page': authPage,
'main--file-page': filePage,
})}
2020-08-10 22:47:39 +02:00
>
{children}
</main>
{/* @if TARGET='app' */}
<StatusBar />
{/* @endif */}
2019-08-27 16:43:42 +02:00
</div>
2020-05-08 18:48:58 +02:00
{/* @if TARGET='web' */}
{!noFooter && <Footer />}
{/* @endif */}
2019-08-27 16:43:42 +02:00
</Fragment>
);
}
2018-03-26 23:32:43 +02:00
export default Page;