diff options
author | Kristóf Marussy <kristof@marussy.com> | 2022-09-06 22:32:04 +0200 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2022-09-08 01:24:50 +0200 |
commit | 5f8f4e6484faff23821ca7c009e309382fba914d (patch) | |
tree | 6d399fb90b4aa3527c30c502ba474cd83b5c94b2 /subprojects/frontend/src/editor/ConnectionStatusNotification.tsx | |
parent | feat(frontend): handle page hide events (diff) | |
download | refinery-5f8f4e6484faff23821ca7c009e309382fba914d.tar.gz refinery-5f8f4e6484faff23821ca7c009e309382fba914d.tar.zst refinery-5f8f4e6484faff23821ca7c009e309382fba914d.zip |
feat(frontend): check for updates periodically
Diffstat (limited to 'subprojects/frontend/src/editor/ConnectionStatusNotification.tsx')
-rw-r--r-- | subprojects/frontend/src/editor/ConnectionStatusNotification.tsx | 49 |
1 files changed, 3 insertions, 46 deletions
diff --git a/subprojects/frontend/src/editor/ConnectionStatusNotification.tsx b/subprojects/frontend/src/editor/ConnectionStatusNotification.tsx index 54c4e834..f7f089f0 100644 --- a/subprojects/frontend/src/editor/ConnectionStatusNotification.tsx +++ b/subprojects/frontend/src/editor/ConnectionStatusNotification.tsx | |||
@@ -1,44 +1,12 @@ | |||
1 | import Button from '@mui/material/Button'; | 1 | import Button from '@mui/material/Button'; |
2 | import { observer } from 'mobx-react-lite'; | 2 | import { observer } from 'mobx-react-lite'; |
3 | import { | ||
4 | useSnackbar, | ||
5 | type SnackbarKey, | ||
6 | type SnackbarMessage, | ||
7 | type OptionsObject, | ||
8 | } from 'notistack'; | ||
9 | import React, { useEffect } from 'react'; | 3 | import React, { useEffect } from 'react'; |
10 | 4 | ||
11 | import { ContrastThemeProvider } from '../theme/ThemeProvider'; | 5 | import { ContrastThemeProvider } from '../theme/ThemeProvider'; |
6 | import useDelayedSnackbar from '../utils/useDelayedSnackbar'; | ||
12 | 7 | ||
13 | import type EditorStore from './EditorStore'; | 8 | import type EditorStore from './EditorStore'; |
14 | 9 | ||
15 | const DEBOUNCE_TIMEOUT = 350; | ||
16 | |||
17 | function enqueueLater( | ||
18 | enqueueSnackbar: ( | ||
19 | message: SnackbarMessage, | ||
20 | options: OptionsObject | undefined, | ||
21 | ) => SnackbarKey, | ||
22 | closeSnackbar: (key: SnackbarKey) => void, | ||
23 | message: SnackbarMessage, | ||
24 | options?: OptionsObject | undefined, | ||
25 | debounceTimeout = DEBOUNCE_TIMEOUT, | ||
26 | ): () => void { | ||
27 | let key: SnackbarKey | undefined; | ||
28 | let timeout: number | undefined = setTimeout(() => { | ||
29 | timeout = undefined; | ||
30 | key = enqueueSnackbar(message, options); | ||
31 | }, debounceTimeout); | ||
32 | return () => { | ||
33 | if (timeout !== undefined) { | ||
34 | clearTimeout(timeout); | ||
35 | } | ||
36 | if (key !== undefined) { | ||
37 | closeSnackbar(key); | ||
38 | } | ||
39 | }; | ||
40 | } | ||
41 | |||
42 | export default observer(function ConnectionStatusNotification({ | 10 | export default observer(function ConnectionStatusNotification({ |
43 | editorStore, | 11 | editorStore, |
44 | }: { | 12 | }: { |
@@ -51,13 +19,11 @@ export default observer(function ConnectionStatusNotification({ | |||
51 | disconnectedByUser, | 19 | disconnectedByUser, |
52 | networkMissing, | 20 | networkMissing, |
53 | } = editorStore; | 21 | } = editorStore; |
54 | const { enqueueSnackbar, closeSnackbar } = useSnackbar(); | 22 | const enqueueLater = useDelayedSnackbar(350); |
55 | 23 | ||
56 | useEffect(() => { | 24 | useEffect(() => { |
57 | if (opening) { | 25 | if (opening) { |
58 | return enqueueLater( | 26 | return enqueueLater( |
59 | enqueueSnackbar, | ||
60 | closeSnackbar, | ||
61 | 'Connecting to Refinery', | 27 | 'Connecting to Refinery', |
62 | { | 28 | { |
63 | persist: true, | 29 | persist: true, |
@@ -73,8 +39,6 @@ export default observer(function ConnectionStatusNotification({ | |||
73 | 39 | ||
74 | if (connectionErrors.length >= 1 && !opening) { | 40 | if (connectionErrors.length >= 1 && !opening) { |
75 | return enqueueLater( | 41 | return enqueueLater( |
76 | enqueueSnackbar, | ||
77 | closeSnackbar, | ||
78 | <div> | 42 | <div> |
79 | Connection error:{' '} | 43 | Connection error:{' '} |
80 | <b>{connectionErrors[connectionErrors.length - 1]}</b> | 44 | <b>{connectionErrors[connectionErrors.length - 1]}</b> |
@@ -110,8 +74,6 @@ export default observer(function ConnectionStatusNotification({ | |||
110 | if (networkMissing) { | 74 | if (networkMissing) { |
111 | if (disconnectedByUser) { | 75 | if (disconnectedByUser) { |
112 | return enqueueLater( | 76 | return enqueueLater( |
113 | enqueueSnackbar, | ||
114 | closeSnackbar, | ||
115 | <div> | 77 | <div> |
116 | <b>No network connection:</b> Some editing features might be | 78 | <b>No network connection:</b> Some editing features might be |
117 | degraded | 79 | degraded |
@@ -130,8 +92,6 @@ export default observer(function ConnectionStatusNotification({ | |||
130 | } | 92 | } |
131 | 93 | ||
132 | return enqueueLater( | 94 | return enqueueLater( |
133 | enqueueSnackbar, | ||
134 | closeSnackbar, | ||
135 | <div> | 95 | <div> |
136 | <b>No network connection:</b> Refinery will try to reconnect when the | 96 | <b>No network connection:</b> Refinery will try to reconnect when the |
137 | connection is restored | 97 | connection is restored |
@@ -154,8 +114,6 @@ export default observer(function ConnectionStatusNotification({ | |||
154 | 114 | ||
155 | if (disconnectedByUser) { | 115 | if (disconnectedByUser) { |
156 | return enqueueLater( | 116 | return enqueueLater( |
157 | enqueueSnackbar, | ||
158 | closeSnackbar, | ||
159 | <div> | 117 | <div> |
160 | <b>Not connected to Refinery:</b> Some editing features might be | 118 | <b>Not connected to Refinery:</b> Some editing features might be |
161 | degraded | 119 | degraded |
@@ -181,8 +139,7 @@ export default observer(function ConnectionStatusNotification({ | |||
181 | connectionErrors, | 139 | connectionErrors, |
182 | disconnectedByUser, | 140 | disconnectedByUser, |
183 | networkMissing, | 141 | networkMissing, |
184 | closeSnackbar, | 142 | enqueueLater, |
185 | enqueueSnackbar, | ||
186 | ]); | 143 | ]); |
187 | 144 | ||
188 | return null; | 145 | return null; |