diff options
Diffstat (limited to 'subprojects/frontend/src/editor')
-rw-r--r-- | subprojects/frontend/src/editor/ConnectionStatusNotification.tsx | 49 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/EditorStore.ts | 5 |
2 files changed, 6 insertions, 48 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; |
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts index ecbe6ef8..c74e732f 100644 --- a/subprojects/frontend/src/editor/EditorStore.ts +++ b/subprojects/frontend/src/editor/EditorStore.ts | |||
@@ -16,6 +16,7 @@ import { type Command, EditorView } from '@codemirror/view'; | |||
16 | import { makeAutoObservable, observable } from 'mobx'; | 16 | import { makeAutoObservable, observable } from 'mobx'; |
17 | import { nanoid } from 'nanoid'; | 17 | import { nanoid } from 'nanoid'; |
18 | 18 | ||
19 | import type PWAStore from '../PWAStore'; | ||
19 | import getLogger from '../utils/getLogger'; | 20 | import getLogger from '../utils/getLogger'; |
20 | import XtextClient from '../xtext/XtextClient'; | 21 | import XtextClient from '../xtext/XtextClient'; |
21 | 22 | ||
@@ -51,10 +52,10 @@ export default class EditorStore { | |||
51 | 52 | ||
52 | infoCount = 0; | 53 | infoCount = 0; |
53 | 54 | ||
54 | constructor(initialValue: string) { | 55 | constructor(initialValue: string, pwaStore: PWAStore) { |
55 | this.id = nanoid(); | 56 | this.id = nanoid(); |
56 | this.state = createEditorState(initialValue, this); | 57 | this.state = createEditorState(initialValue, this); |
57 | this.client = new XtextClient(this); | 58 | this.client = new XtextClient(this, pwaStore); |
58 | this.searchPanel = new SearchPanelStore(this); | 59 | this.searchPanel = new SearchPanelStore(this); |
59 | this.lintPanel = new LintPanelStore(this); | 60 | this.lintPanel = new LintPanelStore(this); |
60 | makeAutoObservable<EditorStore, 'client'>(this, { | 61 | makeAutoObservable<EditorStore, 'client'>(this, { |