From c644cb26384cd126a1e71ce652b358e0a87e3b59 Mon Sep 17 00:00:00 2001 From: Kristóf Marussy Date: Sun, 22 Aug 2021 21:35:53 +0200 Subject: Add ESLint config --- language-web/src/main/js/App.tsx | 46 +++++++++++------------ language-web/src/main/js/RootStore.tsx | 7 ++-- language-web/src/main/js/editor/Editor.tsx | 2 +- language-web/src/main/js/editor/EditorButtons.tsx | 29 +++++++------- language-web/src/main/js/editor/EditorStore.ts | 40 +++++++++++--------- language-web/src/main/js/index.tsx | 12 +++--- language-web/src/main/js/makeStyles.ts | 4 +- 7 files changed, 72 insertions(+), 68 deletions(-) (limited to 'language-web/src/main/js') diff --git a/language-web/src/main/js/App.tsx b/language-web/src/main/js/App.tsx index 5bd46c09..17d4f339 100644 --- a/language-web/src/main/js/App.tsx +++ b/language-web/src/main/js/App.tsx @@ -9,10 +9,10 @@ import MenuIcon from '@material-ui/icons/Menu'; import PlayArrowIcon from '@material-ui/icons/PlayArrow'; import { makeStyles } from './makeStyles'; -import Editor from './editor/Editor'; -import EditorButtons from './editor/EditorButtons'; +import { Editor } from './editor/Editor'; +import { EditorButtons } from './editor/EditorButtons'; -const useStyles = makeStyles()(theme => ({ +const useStyles = makeStyles()((theme) => ({ container: { maxHeight: '100vh', }, @@ -27,31 +27,31 @@ const useStyles = makeStyles()(theme => ({ }, })); -export default () => { +export const App = (): JSX.Element => { const { classes, cx } = useStyles(); return ( GraphSolver @@ -59,22 +59,22 @@ export default () => { - + @@ -85,7 +85,7 @@ export default () => { flexShrink={1} className={cx(classes.editorBox)} > - + ); diff --git a/language-web/src/main/js/RootStore.tsx b/language-web/src/main/js/RootStore.tsx index 2159f440..1c3aab2b 100644 --- a/language-web/src/main/js/RootStore.tsx +++ b/language-web/src/main/js/RootStore.tsx @@ -1,9 +1,8 @@ - import React, { createContext, useContext } from 'react'; -import EditorStore from './editor/EditorStore'; +import { EditorStore } from './editor/EditorStore'; -export default class RootStore { +export class RootStore { editorStore; constructor() { @@ -19,7 +18,7 @@ export const RootStoreProvider: React.FC<{ rootStore: RootStore }> = ({ children ); -export const useRootStore = () => { +export const useRootStore = (): RootStore => { const rootStore = useContext(StoreContext); if (!rootStore) { throw new Error('useRootStore must be used within RootStoreProvider'); diff --git a/language-web/src/main/js/editor/Editor.tsx b/language-web/src/main/js/editor/Editor.tsx index f81c5c37..9badb6a3 100644 --- a/language-web/src/main/js/editor/Editor.tsx +++ b/language-web/src/main/js/editor/Editor.tsx @@ -4,7 +4,7 @@ import { Controlled as CodeMirror } from 'react-codemirror2'; import { useRootStore } from '../RootStore'; -export default observer(() => { +export const Editor = observer(() => { const { editorStore } = useRootStore(); return ( diff --git a/language-web/src/main/js/editor/EditorButtons.tsx b/language-web/src/main/js/editor/EditorButtons.tsx index 1a187635..d3825c07 100644 --- a/language-web/src/main/js/editor/EditorButtons.tsx +++ b/language-web/src/main/js/editor/EditorButtons.tsx @@ -11,7 +11,7 @@ import UndoIcon from '@material-ui/icons/Undo'; import { makeStyles } from '../makeStyles'; import { useRootStore } from '../RootStore'; -const useStyles = makeStyles()(theme => ({ +const useStyles = makeStyles()((theme) => ({ iconButton: { padding: 7, border: 0, @@ -28,47 +28,48 @@ const useStyles = makeStyles()(theme => ({ }, })); -export default observer(() => { +export const EditorButtons = observer(() => { const { editorStore } = useRootStore(); const { classes, cx } = useStyles(); + return ( <> editorStore.toggleLineNumbers()} - size='small' + size="small" className={cx(classes.iconButton)} - aria-label='Show line numbers' - value='show-line-numbers' + aria-label="Show line numbers" + value="show-line-numbers" > - + ); diff --git a/language-web/src/main/js/editor/EditorStore.ts b/language-web/src/main/js/editor/EditorStore.ts index 167e1ade..3a0c6f87 100644 --- a/language-web/src/main/js/editor/EditorStore.ts +++ b/language-web/src/main/js/editor/EditorStore.ts @@ -25,17 +25,21 @@ const codeMirrorGlobalOptions: EditorConfiguration = { theme: 'material-darker', }; -export default class EditorStore { - _atom; +export class EditorStore { + atom; + editor?: Editor; + xtextServices?: IXtextServices; + value = ''; + showLineNumbers = false; constructor() { - this._atom = createAtom('EditorStore'); + this.atom = createAtom('EditorStore'); makeAutoObservable(this, { - _atom: false, + atom: false, editor: observable.ref, xtextServices: observable.ref, }); @@ -49,7 +53,7 @@ export default class EditorStore { * * @param newEditor The new CodeMirror instance */ - editorDidMount(newEditor: Editor) { + editorDidMount(newEditor: Editor): void { if (this.editor) { throw new Error('CoreMirror editor mounted before unmounting'); } @@ -57,7 +61,7 @@ export default class EditorStore { this.xtextServices = createServices(newEditor, xtextOptions); } - editorWillUnmount() { + editorWillUnmount(): void { if (this.editor) { removeServices(this.editor); } @@ -70,16 +74,16 @@ export default class EditorStore { * * @param newValue The new contents of the editor */ - updateValue(newValue: string) { + updateValue(newValue: string): void { this.value = newValue; } - reportChanged() { - this._atom.reportChanged(); + reportChanged(): void { + this.atom.reportChanged(); } - _observeEditorChanges() { - this._atom.reportObserved(); + protected observeEditorChanges(): void { + this.atom.reportObserved(); } get codeMirrorOptions(): EditorConfiguration { @@ -92,8 +96,8 @@ export default class EditorStore { /** * @returns `true` if there is history to undo */ - get canUndo() { - this._observeEditorChanges(); + get canUndo(): boolean { + this.observeEditorChanges(); if (!this.editor) { return false; } @@ -101,15 +105,15 @@ export default class EditorStore { return undoSize > 0; } - undo() { + undo(): void { this.editor?.undo(); } /** * @returns `true` if there is history to redo */ - get canRedo() { - this._observeEditorChanges(); + get canRedo(): boolean { + this.observeEditorChanges(); if (!this.editor) { return false; } @@ -117,11 +121,11 @@ export default class EditorStore { return redoSize > 0; } - redo() { + redo(): void { this.editor?.redo(); } - toggleLineNumbers() { + toggleLineNumbers(): void { this.showLineNumbers = !this.showLineNumbers; } } diff --git a/language-web/src/main/js/index.tsx b/language-web/src/main/js/index.tsx index f59b40a9..24f0b69d 100644 --- a/language-web/src/main/js/index.tsx +++ b/language-web/src/main/js/index.tsx @@ -1,12 +1,12 @@ -import { CacheProvider } from "@emotion/react"; +import { CacheProvider } from '@emotion/react'; import React from 'react'; import { render } from 'react-dom'; import CssBaseline from '@material-ui/core/CssBaseline'; import { ThemeProvider, createTheme } from '@material-ui/core/styles'; -import { getCache } from "tss-react/cache"; +import { getCache } from 'tss-react/cache'; -import App from './App'; -import RootStore, { RootStoreProvider } from './RootStore'; +import { App } from './App'; +import { RootStore, RootStoreProvider } from './RootStore'; import '../css/index.scss'; @@ -68,9 +68,9 @@ const theme = createTheme({ const app = ( - + - + diff --git a/language-web/src/main/js/makeStyles.ts b/language-web/src/main/js/makeStyles.ts index 1dee6c1f..a80e8858 100644 --- a/language-web/src/main/js/makeStyles.ts +++ b/language-web/src/main/js/makeStyles.ts @@ -1,4 +1,4 @@ -import { createMakeStyles } from "tss-react"; -import { useTheme } from "@material-ui/core/styles"; +import { createMakeStyles } from 'tss-react'; +import { useTheme } from '@material-ui/core/styles'; export const { makeStyles } = createMakeStyles({ useTheme }); -- cgit v1.2.3-54-g00ecf