diff --git a/src/components/App/MainApp.tsx b/src/components/App/MainApp.tsx index 42946772..7fbcecaa 100644 --- a/src/components/App/MainApp.tsx +++ b/src/components/App/MainApp.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react' +import React, { useState, useEffect, useCallback } from 'react' import { connect } from 'react-redux' import { RootState, actions, selectors } from '../../Redux/Store' @@ -7,6 +7,9 @@ import Content from '../organisms/Content' import TopBar from '../organisms/TopBar' import DrawerMenu from '../organisms/DrawerMenu' +import * as serviceWorker from '../../serviceWorker' +import { Snackbar } from '@material-ui/core' + const mapStateToProps = (state: RootState) => ({ isLoading: selectors.Main.ContentLoading.getIsLoading(state), }) @@ -18,6 +21,43 @@ const mapDispatchToProps = { type Props = ReturnType & typeof mapDispatchToProps & {} const MainApp = ({ getUserConfiguration, isLoading }: Props) => { + const [waitingWorker, setWaitingWorker] = useState( + undefined + ) + const [newVersionAvailable, setNewVersionAvailable] = useState(false) + const [showSnackBar, setShowSnackBar] = useState(false) + + const onServiceWorkerUpdate = (registration: { + waiting: Worker + postMessage: Function + }) => { + if (registration && registration.waiting) { + console.log('onServiceWorkerUpdate') + setWaitingWorker(registration.waiting) + } + + setNewVersionAvailable(true) + } + + const updateServiceWorker = useCallback(() => { + if (waitingWorker) { + waitingWorker.postMessage({ type: 'SKIP_WAITING' }) + setNewVersionAvailable(false) + window.location.reload() + } + }, [waitingWorker, setNewVersionAvailable]) + + useEffect(() => { + if (process.env.NODE_ENV === 'production') { + console.log('called register') + serviceWorker.register({ onUpdate: onServiceWorkerUpdate }) + } + + if (newVersionAvailable) { + console.log('new version available, open snackbar') + setShowSnackBar(true) + } + }, []) const [drawerIsOpen, setDrawerIsOpen] = useState(false) const toggleDrawer = () => setDrawerIsOpen(!drawerIsOpen) @@ -25,11 +65,30 @@ const MainApp = ({ getUserConfiguration, isLoading }: Props) => { getUserConfiguration() }, [getUserConfiguration]) + console.log({ showSnackBar }) + return ( + + <> + +

New update available

+ +