65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import * as React from "react";
|
|
import { store as _store } from "./redux/store";
|
|
import { history } from "./history";
|
|
import { Store } from "./redux/interfaces";
|
|
import { ready } from "./config/actions";
|
|
import { Session } from "./session";
|
|
import { attachToRoot } from "./util";
|
|
import { ErrorBoundary } from "./error_boundary";
|
|
import { Router } from "takeme";
|
|
import { UNBOUND_ROUTES } from "./route_config";
|
|
import { App } from "./app";
|
|
import { Provider } from "react-redux";
|
|
|
|
interface RootComponentProps { store: Store; }
|
|
|
|
export const attachAppToDom = () => {
|
|
attachToRoot(RootComponent, { store: _store });
|
|
// tslint:disable-next-line:no-any
|
|
_store.dispatch(ready() as any);
|
|
};
|
|
|
|
interface RootComponentState {
|
|
Route: React.ComponentType;
|
|
ChildRoute?: React.ComponentType;
|
|
}
|
|
|
|
export class RootComponent
|
|
extends React.Component<RootComponentProps, RootComponentState> {
|
|
state: RootComponentState = { Route: () => <div>Loading...</div> };
|
|
|
|
UNSAFE_componentWillMount() {
|
|
const notLoggedIn = !Session.fetchStoredToken();
|
|
const currentLocation = history.getCurrentLocation().pathname;
|
|
const restrictedArea = currentLocation.includes("/app");
|
|
(notLoggedIn && restrictedArea && Session.clear());
|
|
}
|
|
|
|
changeRoute =
|
|
(Route: React.ComponentType, ChildRoute?: React.ComponentType) => {
|
|
this.setState({ Route: Route, ChildRoute });
|
|
};
|
|
|
|
componentDidMount() {
|
|
const main_routes = UNBOUND_ROUTES.map(bindTo => bindTo(this.changeRoute));
|
|
new Router(main_routes).enableHtml5Routing("/app").init();
|
|
}
|
|
|
|
render() {
|
|
const { Route } = this.state;
|
|
const { ChildRoute } = this.state;
|
|
const props = ChildRoute ? { children: <ChildRoute /> } : {};
|
|
try {
|
|
return <ErrorBoundary>
|
|
<Provider store={_store}>
|
|
<App>
|
|
<Route {...props} />
|
|
</App>
|
|
</Provider>
|
|
</ErrorBoundary>;
|
|
} catch (error) {
|
|
return <p> Problem loading page.</p>;
|
|
}
|
|
}
|
|
}
|