From 072621cee0f858236163ce11d42eca5adb84d205 Mon Sep 17 00:00:00 2001 From: Kristóf Marussy Date: Sat, 27 Aug 2022 13:02:22 +0200 Subject: refactor(frontend): add eslint-plugin-mobx --- subprojects/frontend/src/editor/EditorArea.tsx | 6 ++-- subprojects/frontend/src/editor/EditorButtons.tsx | 6 ++-- subprojects/frontend/src/editor/EditorPane.tsx | 6 ++-- subprojects/frontend/src/editor/EditorStore.ts | 42 +++++++--------------- subprojects/frontend/src/editor/GenerateButton.tsx | 6 ++-- subprojects/frontend/src/editor/PanelStore.ts | 18 +++++++++- .../frontend/src/editor/SearchPanelPortal.tsx | 6 ++-- .../frontend/src/editor/SearchPanelStore.ts | 3 +- subprojects/frontend/src/editor/SearchToolbar.tsx | 6 ++-- 9 files changed, 44 insertions(+), 55 deletions(-) (limited to 'subprojects/frontend/src/editor') diff --git a/subprojects/frontend/src/editor/EditorArea.tsx b/subprojects/frontend/src/editor/EditorArea.tsx index 1c9b031b..7c5ac5fb 100644 --- a/subprojects/frontend/src/editor/EditorArea.tsx +++ b/subprojects/frontend/src/editor/EditorArea.tsx @@ -5,7 +5,7 @@ import React, { useCallback, useEffect } from 'react'; import type EditorStore from './EditorStore'; import EditorTheme from './EditorTheme'; -function EditorArea({ +export default observer(function EditorArea({ editorStore, }: { editorStore: EditorStore; @@ -32,6 +32,4 @@ function EditorArea({ ref={editorParentRef} /> ); -} - -export default observer(EditorArea); +}); diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx index cbe7c424..d2273c6c 100644 --- a/subprojects/frontend/src/editor/EditorButtons.tsx +++ b/subprojects/frontend/src/editor/EditorButtons.tsx @@ -32,7 +32,7 @@ function getLintIcon(severity: Diagnostic['severity'] | undefined) { } } -function EditorButtons({ +export default observer(function EditorButtons({ editorStore, }: { editorStore: EditorStore | undefined; @@ -102,6 +102,4 @@ function EditorButtons({ ); -} - -export default observer(EditorButtons); +}); diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx index df43d2c9..2651726c 100644 --- a/subprojects/frontend/src/editor/EditorPane.tsx +++ b/subprojects/frontend/src/editor/EditorPane.tsx @@ -29,7 +29,7 @@ function EditorLoading(): JSX.Element { ); } -function EditorPane(): JSX.Element { +export default observer(function EditorPane(): JSX.Element { const { editorStore } = useRootStore(); return ( @@ -50,6 +50,4 @@ function EditorPane(): JSX.Element { ); -} - -export default observer(EditorPane); +}); diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts index b634a427..4407376b 100644 --- a/subprojects/frontend/src/editor/EditorStore.ts +++ b/subprojects/frontend/src/editor/EditorStore.ts @@ -13,7 +13,7 @@ import { type EditorState, } from '@codemirror/state'; import { type Command, EditorView } from '@codemirror/view'; -import { action, computed, makeObservable, observable } from 'mobx'; +import { makeAutoObservable, observable } from 'mobx'; import { nanoid } from 'nanoid'; import getLogger from '../utils/getLogger'; @@ -57,29 +57,15 @@ export default class EditorStore { this.client = new XtextClient(this); this.searchPanel = new SearchPanelStore(this); this.lintPanel = new LintPanelStore(this); - makeObservable(this, { + makeAutoObservable(this, { + id: false, state: observable.ref, + client: false, view: observable.ref, - showLineNumbers: observable, - errorCount: observable, - warningCount: observable, - infoCount: observable, - highestDiagnosticLevel: computed, - canUndo: computed, - canRedo: computed, - setDarkMode: action, - setEditorParent: action, - dispatch: action, - dispatchTransaction: action, - doCommand: action, - doStateCommand: action, - updateDiagnostics: action, - nextDiagnostic: action, - updateOccurrences: action, - updateSemanticHighlighting: action, - undo: action, - redo: action, - toggleLineNumbers: action, + searchPanel: false, + lintPanel: false, + contentAssist: false, + formatText: false, }); } @@ -141,13 +127,11 @@ export default class EditorStore { } } - private readonly dispatchTransactionWithoutView = action( - (tr: Transaction) => { - log.trace('Editor transaction', tr); - this.state = tr.state; - this.client.onTransaction(tr); - }, - ); + private dispatchTransactionWithoutView(tr: Transaction): void { + log.trace('Editor transaction', tr); + this.state = tr.state; + this.client.onTransaction(tr); + } doCommand(command: Command): boolean { if (this.view === undefined) { diff --git a/subprojects/frontend/src/editor/GenerateButton.tsx b/subprojects/frontend/src/editor/GenerateButton.tsx index a28f6b4b..5254f6cb 100644 --- a/subprojects/frontend/src/editor/GenerateButton.tsx +++ b/subprojects/frontend/src/editor/GenerateButton.tsx @@ -7,7 +7,7 @@ import type EditorStore from './EditorStore'; const GENERATE_LABEL = 'Generate'; -function GenerateButton({ +export default observer(function GenerateButton({ editorStore, }: { editorStore: EditorStore | undefined; @@ -53,6 +53,4 @@ function GenerateButton({ {summary === '' ? GENERATE_LABEL : `${GENERATE_LABEL} (${summary})`} ); -} - -export default observer(GenerateButton); +}); diff --git a/subprojects/frontend/src/editor/PanelStore.ts b/subprojects/frontend/src/editor/PanelStore.ts index e0e2b2f4..4f827280 100644 --- a/subprojects/frontend/src/editor/PanelStore.ts +++ b/subprojects/frontend/src/editor/PanelStore.ts @@ -18,13 +18,29 @@ export default class PanelStore { private readonly closeCommand: Command, protected readonly store: EditorStore, ) { - makeObservable(this, { + makeObservable< + PanelStore, + | 'openCommand' + | 'closeCommand' + | 'store' + | 'setState' + | 'doOpen' + | 'doClose' + >(this, { + panelClass: false, + openCommand: false, + closeCommand: false, + store: false, state: observable, element: observable, + id: false, open: action, close: action, toggle: action, + setState: false, synchronizeStateToView: action, + doOpen: false, + doClose: false, }); } diff --git a/subprojects/frontend/src/editor/SearchPanelPortal.tsx b/subprojects/frontend/src/editor/SearchPanelPortal.tsx index e8301489..b6b375e3 100644 --- a/subprojects/frontend/src/editor/SearchPanelPortal.tsx +++ b/subprojects/frontend/src/editor/SearchPanelPortal.tsx @@ -5,7 +5,7 @@ import React from 'react'; import type EditorStore from './EditorStore'; import SearchToolbar from './SearchToolbar'; -function SearchPanelPortal({ +export default observer(function SearchPanelPortal({ editorStore: { searchPanel: searchPanelStore }, }: { editorStore: EditorStore; @@ -20,6 +20,4 @@ function SearchPanelPortal({ ); -} - -export default observer(SearchPanelPortal); +}); diff --git a/subprojects/frontend/src/editor/SearchPanelStore.ts b/subprojects/frontend/src/editor/SearchPanelStore.ts index 8dd02ae6..65d595a8 100644 --- a/subprojects/frontend/src/editor/SearchPanelStore.ts +++ b/subprojects/frontend/src/editor/SearchPanelStore.ts @@ -21,7 +21,7 @@ export default class SearchPanelStore extends PanelStore { // Use a custom class name to avoid specificity issues with // CodeMirror `.cm-search.cm-panel` CSS styles. super('refinery-cm-search', openSearchPanel, closeSearchPanel, store); - makeObservable(this, { + makeObservable(this, { searchField: observable.ref, query: computed, invalidRegexp: computed, @@ -32,6 +32,7 @@ export default class SearchPanelStore extends PanelStore { findPrevious: action, replaceNext: action, replaceAll: action, + selectSearchField: false, }); } diff --git a/subprojects/frontend/src/editor/SearchToolbar.tsx b/subprojects/frontend/src/editor/SearchToolbar.tsx index 895f1ca1..a9b9811d 100644 --- a/subprojects/frontend/src/editor/SearchToolbar.tsx +++ b/subprojects/frontend/src/editor/SearchToolbar.tsx @@ -27,7 +27,7 @@ const DimLabel = styled(FormControlLabel)(({ theme }) => ({ }, })); -function SearchToolbar({ +export default observer(function SearchToolbar({ searchPanelStore, }: { searchPanelStore: SearchPanelStore; @@ -271,6 +271,4 @@ function SearchToolbar({ ); -} - -export default observer(SearchToolbar); +}); -- cgit v1.2.3-54-g00ecf