2018-03-26 23:32:43 +02:00
|
|
|
// @flow
|
2017-12-21 22:08:54 +01:00
|
|
|
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
|
|
|
|
2017-12-21 22:08:54 +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 />
|
2019-04-18 18:51:15 +02:00
|
|
|
|
|
|
|
<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;
|