mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-04 23:36:00 -05:00
5b6bbcb73c
[web] Migrate notifications and error boundaries on the editor page GitOrigin-RevId: c195ecf0dd9e38ec8326c823174e559e1f192ce1
92 lines
2.6 KiB
TypeScript
92 lines
2.6 KiB
TypeScript
import { useTranslation } from 'react-i18next'
|
|
import { LostConnectionAlert } from './lost-connection-alert'
|
|
import { useConnectionContext } from '@/features/ide-react/context/connection-context'
|
|
import { debugging } from '@/utils/debugging'
|
|
import useScopeValue from '@/shared/hooks/use-scope-value'
|
|
import { createPortal } from 'react-dom'
|
|
import { useGlobalAlertsContainer } from '@/features/ide-react/context/global-alerts-context'
|
|
import OLNotification from '@/features/ui/components/ol/ol-notification'
|
|
import OLButton from '@/features/ui/components/ol/ol-button'
|
|
|
|
export function Alerts() {
|
|
const { t } = useTranslation()
|
|
const {
|
|
connectionState,
|
|
isConnected,
|
|
isStillReconnecting,
|
|
tryReconnectNow,
|
|
secondsUntilReconnect,
|
|
} = useConnectionContext()
|
|
const globalAlertsContainer = useGlobalAlertsContainer()
|
|
|
|
const [synctexError] = useScopeValue('sync_tex_error')
|
|
|
|
if (!globalAlertsContainer) {
|
|
return null
|
|
}
|
|
|
|
return createPortal(
|
|
<>
|
|
{connectionState.forceDisconnected ? (
|
|
<OLNotification
|
|
type="error"
|
|
content={<strong>{t('disconnected')}</strong>}
|
|
/>
|
|
) : null}
|
|
|
|
{connectionState.reconnectAt ? (
|
|
<LostConnectionAlert
|
|
reconnectAt={connectionState.reconnectAt}
|
|
tryReconnectNow={tryReconnectNow}
|
|
/>
|
|
) : null}
|
|
|
|
{isStillReconnecting ? (
|
|
<OLNotification
|
|
type="warning"
|
|
content={<strong>{t('reconnecting')}…</strong>}
|
|
/>
|
|
) : null}
|
|
|
|
{synctexError ? (
|
|
<OLNotification
|
|
type="warning"
|
|
content={<strong>{t('synctex_failed')}</strong>}
|
|
action={
|
|
<OLButton
|
|
href="/learn/how-to/SyncTeX_Errors"
|
|
target="_blank"
|
|
id="synctex-more-info-button"
|
|
variant="secondary"
|
|
size="sm"
|
|
bs3Props={{ className: 'alert-link-as-btn pull-right' }}
|
|
>
|
|
{t('more_info')}
|
|
</OLButton>
|
|
}
|
|
/>
|
|
) : null}
|
|
|
|
{connectionState.inactiveDisconnect ||
|
|
(connectionState.readyState === WebSocket.CLOSED &&
|
|
(connectionState.error === 'rate-limited' ||
|
|
connectionState.error === 'unable-to-connect') &&
|
|
!secondsUntilReconnect()) ? (
|
|
<OLNotification
|
|
type="warning"
|
|
content={
|
|
<strong>{t('editor_disconected_click_to_reconnect')}</strong>
|
|
}
|
|
/>
|
|
) : null}
|
|
|
|
{debugging ? (
|
|
<OLNotification
|
|
type="warning"
|
|
content={<strong>Connected: {isConnected.toString()}</strong>}
|
|
/>
|
|
) : null}
|
|
</>,
|
|
globalAlertsContainer
|
|
)
|
|
}
|