6cb6b1534d
Add Server-Sent Events (SSE) support with connection status and settings components - Implemented SSEConnectionStatus component to display real-time connection status. - Created SSESettings component for enabling/disabling SSE based on user profile. - Introduced SSEContext and useSSE hook for managing SSE connections and state. - Added auto-connect functionality for SSE based on user profile and token validity. - Updated WebSocketSettings to ensure proper handling of WebSocket state. - Enhanced MyChores view with bulk archive functionality and improved UI feedback. - Refactored NotificationSetting to ensure boolean values are set correctly. - Updated Settings view to include RealTimeSettings component for SSE configuration.
107 lines
2.7 KiB
JavaScript
107 lines
2.7 KiB
JavaScript
import { Circle, SignalWifi4Bar, SignalWifiOff } from '@mui/icons-material'
|
|
import { Box, Chip, Tooltip, Typography } from '@mui/joy'
|
|
import { useSSEContext } from '../hooks/useSSEContext'
|
|
|
|
const SSEConnectionStatus = ({
|
|
variant = 'minimal',
|
|
showError = false,
|
|
sx = {},
|
|
}) => {
|
|
const { isConnected, isConnecting, error, getConnectionStatus } =
|
|
useSSEContext()
|
|
|
|
const getStatusColor = () => {
|
|
if (isConnected) return 'success'
|
|
if (isConnecting) return 'warning'
|
|
return 'danger'
|
|
}
|
|
|
|
const getStatusIcon = () => {
|
|
if (isConnected) return <SignalWifi4Bar />
|
|
if (isConnecting) return <Circle />
|
|
return <SignalWifiOff />
|
|
}
|
|
|
|
const getStatusText = () => {
|
|
if (isConnected) return 'Connected'
|
|
if (isConnecting) return 'Connecting...'
|
|
return 'Disconnected'
|
|
}
|
|
|
|
const getTooltipText = () => {
|
|
const status = getConnectionStatus()
|
|
if (error) return `Real-time updates (SSE): ${status} - ${error}`
|
|
if (!isConnected && !isConnecting) {
|
|
return `Real-time updates (SSE): ${status} - Join a circle to enable real-time updates`
|
|
}
|
|
return `Real-time updates (SSE): ${status}`
|
|
}
|
|
|
|
if (variant === 'minimal') {
|
|
return (
|
|
<Tooltip title={getTooltipText()} size='sm'>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 0.5,
|
|
...sx,
|
|
}}
|
|
>
|
|
<Circle
|
|
sx={{
|
|
fontSize: 8,
|
|
color:
|
|
getStatusColor() === 'success'
|
|
? 'success.main'
|
|
: getStatusColor() === 'warning'
|
|
? 'warning.main'
|
|
: 'danger.main',
|
|
}}
|
|
/>
|
|
{showError && error && (
|
|
<Typography level='body-xs' color='danger'>
|
|
{error}
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
</Tooltip>
|
|
)
|
|
}
|
|
|
|
if (variant === 'chip') {
|
|
return (
|
|
<Tooltip title={getTooltipText()} size='sm'>
|
|
<Chip
|
|
color={getStatusColor()}
|
|
size='sm'
|
|
variant='soft'
|
|
startDecorator={getStatusIcon()}
|
|
sx={sx}
|
|
>
|
|
{getStatusText()}
|
|
</Chip>
|
|
</Tooltip>
|
|
)
|
|
}
|
|
|
|
// Full variant
|
|
return (
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, ...sx }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
{getStatusIcon()}
|
|
<Typography level='body-sm' color={getStatusColor()}>
|
|
{getStatusText()}
|
|
</Typography>
|
|
</Box>
|
|
{showError && error && (
|
|
<Typography level='body-xs' color='danger'>
|
|
{error}
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default SSEConnectionStatus
|