/*
* SPDX-FileCopyrightText: 2021-2023 The Refinery Authors
*
* SPDX-License-Identifier: EPL-2.0
*/
import Button from '@mui/material/Button';
import { observer } from 'mobx-react-lite';
import { useEffect } from 'react';
import { ContrastThemeProvider } from '../theme/ThemeProvider';
import useDelayedSnackbar from '../utils/useDelayedSnackbar';
import type EditorStore from './EditorStore';
export default observer(function ConnectionStatusNotification({
editorStore,
}: {
editorStore: EditorStore;
}): null {
const {
opened,
opening,
connectionErrors,
disconnectedByUser,
networkMissing,
} = editorStore;
const enqueueLater = useDelayedSnackbar(350);
useEffect(() => {
if (opening) {
return enqueueLater(
'Connecting to Refinery',
{
persist: true,
action: (
),
},
500,
);
}
if (connectionErrors.length >= 1 && !opening) {
return enqueueLater(
Connection error:{' '}
{connectionErrors[connectionErrors.length - 1]}
{connectionErrors.length >= 2 && (
<>
{' '}
and {connectionErrors.length - 1} more{' '}
{connectionErrors.length >= 3 ? 'errors' : 'error'}
>
)}
,
{
persist: !opened,
variant: 'error',
action: opened ? (
) : (
<>
>
),
},
);
}
if (networkMissing) {
if (disconnectedByUser) {
return enqueueLater(
No network connection: Some editing features might be
degraded
,
{
action: (
),
},
0,
);
}
return enqueueLater(
No network connection: Refinery will try to reconnect when the
connection is restored
,
{
persist: true,
action: (
),
},
);
}
if (disconnectedByUser) {
return enqueueLater(
Not connected to Refinery: Some editing features might be
degraded
,
{
action: (
),
},
0,
);
}
return () => {};
}, [
editorStore,
opened,
opening,
connectionErrors,
disconnectedByUser,
networkMissing,
enqueueLater,
]);
return null;
});