72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
import * as React from "react";
|
|
|
|
import { Button, Classes, Dialog } from "@blueprintjs/core";
|
|
import { IconNames } from "@blueprintjs/icons";
|
|
|
|
import { BrowserRouter, Route } from "react-router-dom";
|
|
import { Nav } from "./components/Nav";
|
|
import { AboutScreen } from "./components/screens/AboutScreen";
|
|
import { GraphScreen } from "./components/screens/GraphScreen";
|
|
import { DESKTOP_WIDTH_THRESHOLD } from "./constants";
|
|
|
|
interface IAppLocalState {
|
|
mobileDialogOpen: boolean;
|
|
}
|
|
export class AppRouter extends React.Component<{}, IAppLocalState> {
|
|
constructor(props: {}) {
|
|
super(props);
|
|
this.state = { mobileDialogOpen: false };
|
|
}
|
|
|
|
public render() {
|
|
return (
|
|
<BrowserRouter>
|
|
<div className={`${Classes.DARK} App`}>
|
|
<Nav />
|
|
<Route exact={true} path="/" component={GraphScreen} />
|
|
<Route path="/about" component={AboutScreen} />
|
|
{this.renderMobileDialog()}
|
|
</div>
|
|
</BrowserRouter>
|
|
);
|
|
}
|
|
|
|
public componentDidMount() {
|
|
if (window.innerWidth < DESKTOP_WIDTH_THRESHOLD) {
|
|
this.handleMobileDialogOpen();
|
|
}
|
|
}
|
|
|
|
private renderMobileDialog = () => {
|
|
return (
|
|
<Dialog
|
|
icon={IconNames.DESKTOP}
|
|
title="Desktop-optimized site"
|
|
onClose={this.handleMobileDialogClose}
|
|
isOpen={this.state.mobileDialogOpen}
|
|
className={Classes.DARK + " fediverse-about-dialog"}
|
|
>
|
|
<div className={Classes.DIALOG_BODY}>
|
|
<p className={Classes.RUNNING_TEXT}>
|
|
fediverse.space is optimized for desktop computers. Feel free to check it out on your phone (ideally in
|
|
landscape mode) but for best results, open it on a computer.
|
|
</p>
|
|
</div>
|
|
<div className={Classes.DIALOG_FOOTER}>
|
|
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
|
|
<Button icon={IconNames.THUMBS_UP} text="OK!" onClick={this.handleMobileDialogClose} />
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
private handleMobileDialogOpen = () => {
|
|
this.setState({ mobileDialogOpen: true });
|
|
};
|
|
|
|
private handleMobileDialogClose = () => {
|
|
this.setState({ mobileDialogOpen: false });
|
|
};
|
|
}
|