App: change to be a function component.

master
Tom Hacohen 4 years ago
parent 9ec5d2a708
commit c1b57eecfd

@ -3,8 +3,8 @@
import * as React from "react";
import { List as ImmutableList } from "immutable";
import { connect } from "react-redux";
import { withRouter } from "react-router";
import { connect, useDispatch } from "react-redux";
import { useHistory } from "react-router";
import { BrowserRouter } from "react-router-dom";
import { MuiThemeProvider as ThemeProvider, createMuiTheme } from "@material-ui/core/styles"; // v1.x
import amber from "@material-ui/core/colors/amber";
@ -38,8 +38,6 @@ import * as actions from "./store/actions";
import { credentialsSelector } from "./login";
import { History } from "history";
export const routeResolver = new RouteResolver({
home: "",
pim: {
@ -95,205 +93,178 @@ export const routeResolver = new RouteResolver({
},
});
const AppBarWitHistory = withRouter(
class extends React.PureComponent {
public props: {
title: string;
toggleDrawerIcon: any;
history?: History;
staticContext?: any;
iconElementRight: any;
};
constructor(props: any) {
super(props);
this.goBack = this.goBack.bind(this);
this.canGoBack = this.canGoBack.bind(this);
}
public render() {
const {
staticContext,
toggleDrawerIcon,
history,
iconElementRight,
...props
} = this.props;
return (
<AppBar
position="static"
{...props}
>
<Toolbar>
<div style={{ marginLeft: -12, marginRight: 20 }}>
{!this.canGoBack() ?
toggleDrawerIcon :
<IconButton onClick={this.goBack}><NavigationBack /></IconButton>
}
</div>
interface AppBarPropsType {
toggleDrawerIcon: any;
iconElementRight: any;
}
<div style={{ flexGrow: 1, fontSize: "1.25em" }} id="appbar-title" />
function AppBarWitHistory(props: AppBarPropsType) {
const history = useHistory();
<div style={{ marginRight: -12 }} id="appbar-buttons">
{iconElementRight}
</div>
</Toolbar>
</AppBar>
);
}
private canGoBack() {
return (
(this.props.history!.length > 1) &&
(this.props.history!.location.pathname !== routeResolver.getRoute("pim")) &&
(this.props.history!.location.pathname !== routeResolver.getRoute("home"))
);
}
function canGoBack() {
return (
(history!.length > 1) &&
(history!.location.pathname !== routeResolver.getRoute("pim")) &&
(history!.location.pathname !== routeResolver.getRoute("home"))
);
}
private goBack() {
this.props.history!.goBack();
}
function goBack() {
history!.goBack();
}
);
const {
toggleDrawerIcon,
iconElementRight,
...rest
} = props;
return (
<AppBar
position="static"
{...rest}
>
<Toolbar>
<div style={{ marginLeft: -12, marginRight: 20 }}>
{!canGoBack() ?
toggleDrawerIcon :
<IconButton onClick={goBack}><NavigationBack /></IconButton>
}
</div>
<div style={{ flexGrow: 1, fontSize: "1.25em" }} id="appbar-title" />
<div style={{ marginRight: -12 }} id="appbar-buttons">
{iconElementRight}
</div>
</Toolbar>
</AppBar>
);
}
const IconRefreshWithSpin = withSpin(NavigationRefresh);
class App extends React.PureComponent {
public state: {
drawerOpen: boolean;
errorsDialog: boolean;
};
public props: {
credentials: store.CredentialsData;
entries: store.EntriesData;
fetchCount: number;
darkMode: boolean;
errors: ImmutableList<Error>;
};
interface PropsType {
credentials: store.CredentialsData;
entries: store.EntriesData;
fetchCount: number;
darkMode: boolean;
errors: ImmutableList<Error>;
}
constructor(props: any) {
super(props);
this.state = { drawerOpen: false, errorsDialog: false };
function App(props: PropsType) {
const [drawerOpen, setDrawerOpen] = React.useState(false);
const [errorsDialog, setErrorsDialog] = React.useState(false);
const dispatch = useDispatch();
this.toggleDrawer = this.toggleDrawer.bind(this);
this.closeDrawer = this.closeDrawer.bind(this);
this.refresh = this.refresh.bind(this);
this.autoRefresh = this.autoRefresh.bind(this);
function refresh() {
dispatch(actions.fetchAll(props.credentials, props.entries));
}
public render() {
const credentials = this.props.credentials ?? null;
const { darkMode } = this.props;
const errors = this.props.errors;
const fetching = this.props.fetchCount > 0;
const muiTheme = createMuiTheme({
palette: {
type: darkMode ? "dark" : undefined,
primary: amber,
secondary: {
light: lightBlue.A200,
main: lightBlue.A400,
dark: lightBlue.A700,
contrastText: "#fff",
},
},
});
const styles = {
main: {
backgroundColor: muiTheme.palette.background.default,
color: muiTheme.palette.text.primary,
flexGrow: 1,
},
};
return (
<ThemeProvider theme={muiTheme}>
<BrowserRouter>
<div style={styles.main} className={darkMode ? "theme-dark" : "theme-light"}>
<AppBarWitHistory
toggleDrawerIcon={<IconButton onClick={this.toggleDrawer}><NavigationMenu /></IconButton>}
iconElementRight={
<>
{(errors.size > 0) && (
<IconButton onClick={() => this.setState({ errorsDialog: true })} title="Parse Errors">
<Badge badgeContent={errors.size} color="error">
<ErrorsIcon />
</Badge>
</IconButton>
)}
<IconButton disabled={!credentials || fetching} onClick={this.refresh} title="Refresh">
<IconRefreshWithSpin spin={fetching} />
</IconButton>
</>
}
/>
<ConfirmationDialog
title="Parse Errors"
open={this.state.errorsDialog}
labelOk="OK"
onCancel={() => this.setState({ errorsDialog: false })}
onOk={() => this.setState({ errorsDialog: false })}
>
<h4>
This should not happen, please contact developers!
</h4>
<List>
{errors.map((error, index) => (
<ListItem
key={index}
style={{ height: "unset" }}
onClick={() => (window as any).navigator.clipboard.writeText(`${error.message}\n\n${error.stack}`)}
>
<PrettyError error={error} />
</ListItem>
))}
</List>
</ConfirmationDialog>
<Drawer
open={this.state.drawerOpen}
onClose={this.toggleDrawer}
>
<SideMenu etesync={credentials} onCloseDrawerRequest={this.closeDrawer} />
</Drawer>
<ErrorBoundary>
<LoginGate />
</ErrorBoundary>
</div>
</BrowserRouter>
</ThemeProvider>
);
function autoRefresh() {
if (navigator.onLine && props.credentials &&
!(window.location.pathname.match(/.*\/(new|edit|duplicate)$/))) {
refresh();
}
}
private toggleDrawer() {
this.setState({ drawerOpen: !this.state.drawerOpen });
}
React.useEffect(() => {
const interval = 60 * 1000;
const id = setInterval(autoRefresh, interval);
return () => clearInterval(id);
});
private closeDrawer() {
this.setState({ drawerOpen: false });
function toggleDrawer() {
setDrawerOpen(!drawerOpen);
}
private refresh() {
store.store.dispatch<any>(actions.fetchAll(this.props.credentials, this.props.entries));
function closeDrawer() {
setDrawerOpen(false);
}
private autoRefresh() {
if (navigator.onLine && this.props.credentials &&
!(window.location.pathname.match(/.*\/(new|edit|duplicate)$/))) {
this.refresh();
}
const credentials = props.credentials ?? null;
const { darkMode } = props;
const errors = props.errors;
const fetching = props.fetchCount > 0;
const muiTheme = createMuiTheme({
palette: {
type: darkMode ? "dark" : undefined,
primary: amber,
secondary: {
light: lightBlue.A200,
main: lightBlue.A400,
dark: lightBlue.A700,
contrastText: "#fff",
},
},
});
}
const styles = {
main: {
backgroundColor: muiTheme.palette.background.default,
color: muiTheme.palette.text.primary,
flexGrow: 1,
},
};
componentDidMount() {
const interval = 60 * 1000;
setInterval(this.autoRefresh, interval);
}
return (
<ThemeProvider theme={muiTheme}>
<BrowserRouter>
<div style={styles.main} className={darkMode ? "theme-dark" : "theme-light"}>
<AppBarWitHistory
toggleDrawerIcon={<IconButton onClick={toggleDrawer}><NavigationMenu /></IconButton>}
iconElementRight={
<>
{(errors.size > 0) && (
<IconButton onClick={() => setErrorsDialog(true)} title="Parse Errors">
<Badge badgeContent={errors.size} color="error">
<ErrorsIcon />
</Badge>
</IconButton>
)}
<IconButton disabled={!credentials || fetching} onClick={refresh} title="Refresh">
<IconRefreshWithSpin spin={fetching} />
</IconButton>
</>
}
/>
<ConfirmationDialog
title="Parse Errors"
open={errorsDialog}
labelOk="OK"
onCancel={() => setErrorsDialog(false)}
onOk={() => setErrorsDialog(false)}
>
<h4>
This should not happen, please contact developers!
</h4>
<List>
{errors.map((error, index) => (
<ListItem
key={index}
style={{ height: "unset" }}
onClick={() => (window as any).navigator.clipboard.writeText(`${error.message}\n\n${error.stack}`)}
>
<PrettyError error={error} />
</ListItem>
))}
</List>
</ConfirmationDialog>
<Drawer
open={drawerOpen}
onClose={toggleDrawer}
>
<SideMenu etesync={credentials} onCloseDrawerRequest={closeDrawer} />
</Drawer>
<ErrorBoundary>
<LoginGate />
</ErrorBoundary>
</div>
</BrowserRouter>
</ThemeProvider>
);
}
const mapStateToProps = (state: store.StoreState) => {

Loading…
Cancel
Save