From de38dfa13831593a633d6cc86259882ac9588eb9 Mon Sep 17 00:00:00 2001 From: Jeremy Kahn Date: Sun, 11 Sep 2022 13:44:23 -0500 Subject: [PATCH 1/3] feat: [#4] wire up update UI --- src/Bootstrap.tsx | 12 ++++++- src/components/Shell/Shell.test.tsx | 2 +- src/components/Shell/Shell.tsx | 52 ++++++++++++++++++++++++++--- src/index.tsx | 3 -- 4 files changed, 59 insertions(+), 10 deletions(-) diff --git a/src/Bootstrap.tsx b/src/Bootstrap.tsx index c6fec72..af5d4a9 100644 --- a/src/Bootstrap.tsx +++ b/src/Bootstrap.tsx @@ -3,6 +3,7 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom' import { v4 as uuid } from 'uuid' import localforage from 'localforage' +import * as serviceWorkerRegistration from 'serviceWorkerRegistration' import { SettingsContext } from 'contexts/SettingsContext' import { Home } from 'pages/Home/' import { PublicRoom } from 'pages/PublicRoom/' @@ -22,6 +23,7 @@ function Bootstrap({ }), getUuid = uuid, }: BootstrapProps) { + const [appNeedsUpdate, setAppNeedsUpdate] = useState(false) const [hasLoadedSettings, setHasLoadedSettings] = useState(false) const [userSettings, setUserSettings] = useState({ userId: getUuid(), @@ -29,6 +31,14 @@ function Bootstrap({ }) const { userId } = userSettings + const handleServiceWorkerUpdate = () => { + setAppNeedsUpdate(true) + } + + useEffect(() => { + serviceWorkerRegistration.register({ onUpdate: handleServiceWorkerUpdate }) + }, []) + useEffect(() => { ;(async () => { if (hasLoadedSettings) return @@ -71,7 +81,7 @@ function Bootstrap({ return ( - + {hasLoadedSettings ? ( {['/', '/index.html'].map(path => ( diff --git a/src/components/Shell/Shell.test.tsx b/src/components/Shell/Shell.test.tsx index 73e4568..77daa2c 100644 --- a/src/components/Shell/Shell.test.tsx +++ b/src/components/Shell/Shell.test.tsx @@ -7,7 +7,7 @@ import { Shell, ShellProps } from './Shell' const ShellStub = (overrides: Partial = {}) => { return ( - + ) } diff --git a/src/components/Shell/Shell.tsx b/src/components/Shell/Shell.tsx index 5a13a59..c61d6ea 100644 --- a/src/components/Shell/Shell.tsx +++ b/src/components/Shell/Shell.tsx @@ -23,7 +23,14 @@ import Tooltip from '@mui/material/Tooltip' import Snackbar from '@mui/material/Snackbar' import MuiAlert, { AlertProps, AlertColor } from '@mui/material/Alert' import IconButton from '@mui/material/IconButton' +import Button from '@mui/material/Button' +import Dialog from '@mui/material/Dialog' +import DialogActions from '@mui/material/DialogActions' +import DialogContent from '@mui/material/DialogContent' +import DialogContentText from '@mui/material/DialogContentText' +import DialogTitle from '@mui/material/DialogTitle' import MenuIcon from '@mui/icons-material/Menu' +import WarningIcon from '@mui/icons-material/Warning' import ChevronLeftIcon from '@mui/icons-material/ChevronLeft' import ChevronRightIcon from '@mui/icons-material/ChevronRight' import ListItem from '@mui/material/ListItem' @@ -40,10 +47,6 @@ import { SettingsContext } from 'contexts/SettingsContext' import { AlertOptions } from 'models/shell' import { PeerNameDisplay } from 'components/PeerNameDisplay' -export interface ShellProps extends PropsWithChildren { - userPeerId: string -} - const drawerWidth = 240 const Alert = forwardRef(function Alert( @@ -100,7 +103,12 @@ const DrawerHeader = styled('div')(({ theme }) => ({ justifyContent: 'flex-end', })) -export const Shell = ({ children, userPeerId }: ShellProps) => { +export interface ShellProps extends PropsWithChildren { + userPeerId: string + appNeedsUpdate: boolean +} + +export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => { const settingsContext = useContext(SettingsContext) const [isAlertShowing, setIsAlertShowing] = useState(false) const [isDrawerOpen, setIsDrawerOpen] = useState(false) @@ -181,10 +189,44 @@ export const Shell = ({ children, userPeerId }: ShellProps) => { }) } + const handleRestartClick = () => { + window.location.reload() + } + return ( + + + + ({ + color: theme.palette.warning.main, + mr: theme.spacing(1), + })} + /> + Update needed + + + + + In order to function properly, Chitchatter needs to be updated. + The update has already been installed in the background. All you + need to do is reload the page or click "Refresh" below. + + + + + + ) // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals() - -serviceWorkerRegistration.register() From db5b8b7905c3b2ce652c494b1111a80d714063a0 Mon Sep 17 00:00:00 2001 From: Jeremy Kahn Date: Sun, 11 Sep 2022 13:49:51 -0500 Subject: [PATCH 2/3] test: log update test message --- src/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/index.tsx b/src/index.tsx index cbffbe9..09d9b07 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -12,3 +12,6 @@ root.render() // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals() + +// FIXME: Remove this +console.log('Update test') From 702c1e8135127a03f5f1f7d94c4077a56d1945ed Mon Sep 17 00:00:00 2001 From: Jeremy Kahn Date: Sun, 11 Sep 2022 15:46:14 -0500 Subject: [PATCH 3/3] chore: remove update test message --- src/index.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 09d9b07..cbffbe9 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -12,6 +12,3 @@ root.render() // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals() - -// FIXME: Remove this -console.log('Update test')