FLow/React Bugs

'use strict';
// @flow

import {HashRouter, Route, Switch} from 'react-router-dom';
import React from 'react';
import {connect} from 'react-redux';
import axios from 'axios';
import Loader from './loader/Loader';
import Sidebar from './sidebar/Sidebar';
import Header from './header/Header';
import * as appActions from '../actions/appActions';



type Props = {
	dispatch:	Function,
	loadingTxt:	string,
	errorTxt:	string,
	loading:	bool,
	error:		bool
};


/**
* App Component.
*/
class App extends React.Component<Props> {
	constructor(props: Props) {
		super(props: Props);

		this.data = {};
	}

	componentDidMount() {
		axios.get(window.location.protocol + '//' + window.location.host + '/data/app.json')
			.then((response: object) => {
				this.data = response.data
				setTimeout(() => this.props.dispatch(appActions.appHasLoaded(): Function), 2000);

			}).catch(() => {
				this.props.dispatch(appActions.appHasErrored(): Function);
			});
	}

	render(): React.Element {
		if (this.props.error || this.props.loading) {
			return (
				<div className={this.props.error ? 'app-loader is--error' : 'app-loader'}>
					<Loader size="app" />
					<p className="app-loader__text">{this.props.error ? this.props.errorTxt : this.props.loadingTxt}</p>
				</div>
			)

		} else {
			return (
				<div className="app-inner">
					<HashRouter>
						<Route>
							<Header {...this.data.header} />
						</Route>
					</HashRouter>

					<div className="page">
						<HashRouter>
							<Switch>
								<Route path='/'>
									<Sidebar {...this.data.sidebar} />
								</Route>
								<Route>
									<p>Not Found</p>
								</Route>
							</Switch>
						</HashRouter>
					</div>
				</div>
			)
		}
	}
};

const mapStateToProps = (state: object) => {
	return {
		loading:	state.app.loading,
		error:		state.app.error
	}
}

export default connect(mapStateToProps)(App);