forked from tl-its-umich-edu/canvas-course-manager-next
-
Notifications
You must be signed in to change notification settings - Fork 0
/
ErrorAlert.tsx
55 lines (47 loc) · 1.62 KB
/
ErrorAlert.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import React from 'react'
import { styled } from '@mui/material/styles'
import { Button, Typography } from '@mui/material'
import { Error as ErrorIcon } from '@mui/icons-material'
import Alert from './Alert.js'
const PREFIX = 'ErrorAlert'
const classes = {
dialogIcon: `${PREFIX}-dialogIcon`
}
const StyledErrorIcon = styled(ErrorIcon)((
{
theme
}
) => ({
[`&.${classes.dialogIcon}`]: {
color: theme.palette.error.main
}
}))
interface ErrorAlertProps {
// Spacing works out best when you use Material UI Typography components or p tags.
messages?: JSX.Element[]
tryAgain?: () => void | Promise<void>
title?: string
icon?: JSX.Element
embedded?: boolean
}
export default function ErrorAlert (props: ErrorAlertProps): JSX.Element {
const { messages, tryAgain, title, icon, embedded } = props
const defaultMessage = <Typography>Something went wrong. Please try again later.</Typography>
const preface = <Typography gutterBottom>If possible, fix the issue(s), and/or try again.</Typography>
const messageBlock = (messages === undefined || messages.length === 0)
? defaultMessage
: messages.length === 1
? messages[0]
: <ol>{messages.map((m, i) => <li key={i}>{m}</li>)}</ol>
return (
<Alert
title={title !== undefined ? title : 'Some errors occurred'}
icon={icon !== undefined ? icon : <StyledErrorIcon className={classes.dialogIcon} fontSize='large' />}
embedded={embedded}
>
{Boolean(messages?.length) && preface}
{messageBlock}
{tryAgain !== undefined && <Button color='primary' onClick={props.tryAgain}>Try Again</Button>}
</Alert>
)
}