reuterShawn/remnantchat
1
0
Fork 0
forked from Shiloh/remnantchat
Code Pull Requests Activity

refactor: move upgrade dialog to its own component file

Browse Source
This commit is contained in:
Jeremy Kahn 2022-09-16 09:36:24 -05:00
parent 9b5551a4bd
commit 0b15957d93
2 changed files with 53 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/Shell/Shell.tsx
View File

@ -19,14 +19,7 @@ import Tooltip from '@mui/material/Tooltip'
import Snackbar from '@mui/material/Snackbar' import Snackbar from '@mui/material/Snackbar'
import MuiAlert, { AlertProps, AlertColor } from '@mui/material/Alert' import MuiAlert, { AlertProps, AlertColor } from '@mui/material/Alert'
import IconButton from '@mui/material/IconButton' 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 MenuIcon from '@mui/icons-material/Menu'
import WarningIcon from '@mui/icons-material/Warning'
import LinkIcon from '@mui/icons-material/Link' import LinkIcon from '@mui/icons-material/Link'
import { ShellContext } from 'contexts/ShellContext' import { ShellContext } from 'contexts/ShellContext'
@ -34,6 +27,7 @@ import { SettingsContext } from 'contexts/SettingsContext'
import { AlertOptions } from 'models/shell' import { AlertOptions } from 'models/shell'
import { Drawer, drawerWidth } from './Drawer' import { Drawer, drawerWidth } from './Drawer'
import { UpgradeDialog } from './UpgradeDialog'
import { DrawerHeader } from './DrawerHeader' import { DrawerHeader } from './DrawerHeader'
const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert( const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
@ -154,10 +148,6 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
}) })
} }
const handleRestartClick = () => {
window.location.reload()
}
const handleDrawerClose = () => { const handleDrawerClose = () => {
setIsDrawerOpen(false) setIsDrawerOpen(false)
} }
@ -170,36 +160,7 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
<ShellContext.Provider value={shellContextValue}> <ShellContext.Provider value={shellContextValue}>
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<CssBaseline /> <CssBaseline />
<Dialog <UpgradeDialog appNeedsUpdate={appNeedsUpdate} />
open={appNeedsUpdate}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<WarningIcon
fontSize="medium"
sx={theme => ({
color: theme.palette.warning.main,
mr: theme.spacing(1),
})}
/>
Update needed
</Box>
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
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.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleRestartClick} autoFocus>
Refresh
</Button>
</DialogActions>
</Dialog>
<Box <Box
className="Chitchatter" className="Chitchatter"
sx={{ sx={{

51
src/components/Shell/UpgradeDialog.tsx Normal file
View File

@ -0,0 +1,51 @@
import Box from '@mui/material/Box'
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 WarningIcon from '@mui/icons-material/Warning'
interface UpgradeDialogProps {
appNeedsUpdate: boolean
}
export const UpgradeDialog = ({ appNeedsUpdate }: UpgradeDialogProps) => {
const handleRestartClick = () => {
window.location.reload()
}
return (
<Dialog
open={appNeedsUpdate}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<WarningIcon
fontSize="medium"
sx={theme => ({
color: theme.palette.warning.main,
mr: theme.spacing(1),
})}
/>
Update needed
</Box>
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
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.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleRestartClick} autoFocus>
Refresh
</Button>
</DialogActions>
</Dialog>
)
}