diff --git a/src/App.tsx b/src/App.tsx index 8bb6bd0..948416c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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 ( - - -
- {!this.canGoBack() ? - toggleDrawerIcon : - - } -
+interface AppBarPropsType { + toggleDrawerIcon: any; + iconElementRight: any; +} -
+function AppBarWitHistory(props: AppBarPropsType) { + const history = useHistory(); -
- {iconElementRight} -
- - - ); - } - - 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 ( + + +
+ {!canGoBack() ? + toggleDrawerIcon : + + } +
+ +
+ +
+ {iconElementRight} +
+ + + ); +} 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; - }; +interface PropsType { + credentials: store.CredentialsData; + entries: store.EntriesData; + fetchCount: number; + darkMode: boolean; + errors: ImmutableList; +} - 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 ( - - -
- } - iconElementRight={ - <> - {(errors.size > 0) && ( - this.setState({ errorsDialog: true })} title="Parse Errors"> - - - - - )} - - - - - } - /> - this.setState({ errorsDialog: false })} - onOk={() => this.setState({ errorsDialog: false })} - > -

- This should not happen, please contact developers! -

- - {errors.map((error, index) => ( - (window as any).navigator.clipboard.writeText(`${error.message}\n\n${error.stack}`)} - > - - - ))} - -
- - - - - - - - -
-
-
- ); + 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(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 ( + + +
+ } + iconElementRight={ + <> + {(errors.size > 0) && ( + setErrorsDialog(true)} title="Parse Errors"> + + + + + )} + + + + + } + /> + setErrorsDialog(false)} + onOk={() => setErrorsDialog(false)} + > +

+ This should not happen, please contact developers! +

+ + {errors.map((error, index) => ( + (window as any).navigator.clipboard.writeText(`${error.message}\n\n${error.stack}`)} + > + + + ))} + +
+ + + + + + + + +
+
+
+ ); } const mapStateToProps = (state: store.StoreState) => {