lbry-desktop/src/ui/component/app/view.jsx

83 lines
2 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
import React from 'react';
import Router from 'component/router/index';
import ModalRouter from 'modal/modalRouter';
import ReactModal from 'react-modal';
2018-03-26 23:32:43 +02:00
import SideBar from 'component/sideBar';
import Header from 'component/header';
2019-01-23 16:38:40 +01:00
import { openContextMenu } from 'util/context-menu';
import EnhancedLayoutListener from 'util/enhanced-layout';
2019-03-05 05:46:57 +01:00
import Yrbl from 'component/yrbl';
2018-03-26 23:32:43 +02:00
2018-11-07 17:03:42 +01:00
const TWO_POINT_FIVE_MINUTES = 1000 * 60 * 2.5;
2018-03-26 23:32:43 +02:00
type Props = {
alertError: (string | {}) => void,
pageTitle: ?string,
2019-06-07 23:10:47 +02:00
language: string,
2018-10-19 17:27:14 +02:00
theme: string,
2018-11-07 17:03:42 +01:00
updateBlockHeight: () => void,
2019-01-23 16:38:40 +01:00
toggleEnhancedLayout: () => void,
enhancedLayout: boolean,
2018-03-26 23:32:43 +02:00
};
2017-04-07 07:15:22 +02:00
2018-03-26 23:32:43 +02:00
class App extends React.PureComponent<Props> {
2019-06-12 23:51:39 +02:00
componentDidMount() {
const { updateBlockHeight, toggleEnhancedLayout, alertError, theme } = this.props;
2017-07-16 18:29:46 +02:00
2018-03-26 23:32:43 +02:00
// TODO: create type for this object
// it lives in jsonrpc.js
document.addEventListener('unhandledError', (event: any) => {
2017-07-16 18:29:46 +02:00
alertError(event.detail);
2017-04-07 07:15:22 +02:00
});
2018-10-18 18:45:24 +02:00
// $FlowFixMe
2019-02-13 17:27:20 +01:00
document.documentElement.setAttribute('data-mode', theme);
2018-11-07 17:03:42 +01:00
ReactModal.setAppElement('#window'); // fuck this
2018-11-07 17:03:42 +01:00
2019-01-23 16:38:40 +01:00
this.enhance = new EnhancedLayoutListener(() => toggleEnhancedLayout());
2018-11-07 17:03:42 +01:00
updateBlockHeight();
setInterval(() => {
updateBlockHeight();
}, TWO_POINT_FIVE_MINUTES);
2017-07-16 18:29:46 +02:00
}
2018-03-26 23:32:43 +02:00
componentDidUpdate(prevProps: Props) {
2019-03-28 17:53:13 +01:00
const { theme: prevTheme } = prevProps;
const { theme } = this.props;
2018-10-19 17:27:14 +02:00
if (prevTheme !== theme) {
// $FlowFixMe
2019-02-13 17:27:20 +01:00
document.documentElement.setAttribute('data-mode', theme);
2018-10-19 17:27:14 +02:00
}
2017-11-17 22:27:35 +01:00
}
2018-03-26 23:32:43 +02:00
componentWillUnmount() {
2019-01-23 16:38:40 +01:00
this.enhance = null;
2018-03-26 23:32:43 +02:00
}
2019-01-23 16:38:40 +01:00
enhance: ?any;
2018-03-26 23:32:43 +02:00
2017-05-04 05:44:08 +02:00
render() {
2019-06-12 23:51:39 +02:00
const { enhancedLayout } = this.props;
2019-01-23 16:38:40 +01:00
2017-06-06 23:19:12 +02:00
return (
2018-06-04 02:17:58 +02:00
<div id="window" onContextMenu={e => openContextMenu(e)}>
2019-06-12 23:51:39 +02:00
<Header />
<SideBar />
<div className="main-wrapper">
<Router />
</div>
<ModalRouter />
{enhancedLayout && <Yrbl className="yrbl--enhanced" />}
2017-04-21 04:31:50 +02:00
</div>
2017-06-06 23:19:12 +02:00
);
2017-04-07 07:15:22 +02:00
}
2017-05-04 05:44:08 +02:00
}
2017-04-07 07:15:22 +02:00
2017-06-06 06:21:55 +02:00
export default App;