From 8b11c71384c4493116cc1f1f49f9c88aec3d1314 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Mon, 21 Nov 2022 13:47:04 +0100 Subject: [PATCH] Fix lot of eslint problems --- .eslintignore | 3 ++ .eslintrc.cjs | 39 +++-------------- src/Components/App/App.test.tsx | 14 +++--- .../Editor/Actions/ContextMenuActions.ts | 43 ------------------- src/Components/Loader/Loader.tsx | 5 +-- src/Components/Messages/Messages.tsx | 2 - src/Components/SVG/Elements/Container.tsx | 13 +++--- src/Components/SVG/SVG.tsx | 1 + .../SymbolProperties/SymbolForm.tsx | 1 - src/Components/SymbolsList/SymbolsList.tsx | 2 +- src/Components/UI/UseWorker.tsx | 4 +- src/Events/AppEvents.ts | 10 ++++- src/Events/EditorEvents.ts | 10 ++++- src/utils/default.ts | 5 ++- src/utils/itertools.ts | 1 - src/vite-env.d.ts | 1 + tsconfig.json | 6 ++- 17 files changed, 52 insertions(+), 108 deletions(-) create mode 100644 .eslintignore diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..21a0ff6 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,3 @@ +/dist +/public +/src/dts \ No newline at end of file diff --git a/.eslintrc.cjs b/.eslintrc.cjs index c1c1dbe..748a5bb 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -1,4 +1,9 @@ module.exports = { + settings: { + react: { + version: "detect" + } + }, env: { browser: true, es2021: true @@ -43,40 +48,6 @@ module.exports = { '@typescript-eslint/no-unused-vars': 'error', '@typescript-eslint/ban-types': ['error'], '@typescript-eslint/no-floating-promises': 'off', // disabled cuz troublesome for SweetAlert since they never reject - "@typescript-eslint/naming-convention": [ - "error", - { - "selector": "default", - "format": ["camelCase"] - }, - { - 'selector': 'function', - 'format': ['PascalCase'] - }, - { - "selector": "variable", - "format": ["camelCase", "UPPER_CASE"] - }, - { - "selector": "parameter", - "format": ["camelCase"], - "leadingUnderscore": "allow" - }, - { - 'selector': ['enumMember', 'enum'], - 'format': ['PascalCase'] - }, - { - "selector": "memberLike", - "modifiers": ["private"], - "format": ["camelCase"], - "leadingUnderscore": "require" - }, - { - "selector": ['typeLike'], - "format": ["PascalCase"], - } - ], // React 'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks diff --git a/src/Components/App/App.test.tsx b/src/Components/App/App.test.tsx index f06c68b..fd49185 100644 --- a/src/Components/App/App.test.tsx +++ b/src/Components/App/App.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import { loadEnv } from 'vite'; -import { beforeEach, describe, expect, it } from 'vitest'; +import { beforeEach, describe, it } from 'vitest'; +import { AppState } from '../../Enums/AppState'; import { FAST_BOOT } from '../../utils/default'; -import { fireEvent, render, RenderResult, screen } from '../../utils/test-utils'; +import { fireEvent, render, RenderResult } from '../../utils/test-utils'; import { App } from './App'; describe.concurrent('App', () => { @@ -15,7 +15,7 @@ describe.concurrent('App', () => { }); it('New editor', async() => { - if (FAST_BOOT) { + if (FAST_BOOT !== AppState.MainMenu) { return; } @@ -24,7 +24,7 @@ describe.concurrent('App', () => { }, 10000); it('Load editor by file', () => { - if (FAST_BOOT) { + if (FAST_BOOT !== AppState.MainMenu) { return; } @@ -37,7 +37,7 @@ describe.concurrent('App', () => { const load2 = app.getByText(/Load a configuration file/i); fireEvent.click(load2); - const chooseFile = app.getByText(/Import Save/i); - const inputFile: HTMLInputElement = document.querySelector('input[type="file"]') as HTMLInputElement; + app.getByText(/Import Save/i); + document.querySelector('input[type="file"]') as HTMLInputElement; }); }); diff --git a/src/Components/Editor/Actions/ContextMenuActions.ts b/src/Components/Editor/Actions/ContextMenuActions.ts index b8209bb..69a3121 100644 --- a/src/Components/Editor/Actions/ContextMenuActions.ts +++ b/src/Components/Editor/Actions/ContextMenuActions.ts @@ -297,46 +297,3 @@ function HandleReplace( return newHistoryBeforeDelete; } - -function HandleInsert( - containers: Map, - selectedContainer: IContainerModel, - response: ISetContainerListResponse, - configuration: IConfiguration, - history: IHistoryState[], - historyCurrentStep: number -): IHistoryState[] { - const parent = FindContainerById(containers, selectedContainer.properties.id); - if (parent === undefined || parent === null) { - throw new Error('[InsertContainer] Cannot insert in a container that does not exists'); - } - - const index = parent.children.indexOf(selectedContainer.properties.id); - - const newHistoryAfterDelete = DeleteContainer( - selectedContainer.properties.id, - history, - historyCurrentStep - ); - - const { history: newHistoryBeforeDelete } = AddContainers( - index, - response.Containers, - selectedContainer.properties.parentId, - configuration, - newHistoryAfterDelete, - newHistoryAfterDelete.length - 1 - ); - - // Remove AddContainers from history - if (import.meta.env.PROD) { - newHistoryBeforeDelete.splice(newHistoryBeforeDelete.length - 2, 1); - } - - // Rename the last action by Replace - const types = response.Containers.map(container => container.Type); - newHistoryBeforeDelete[newHistoryBeforeDelete.length - 1].lastAction = - `Replace ${selectedContainer.properties.id} by [${types.join(', ')}]`; - - return newHistoryBeforeDelete; -} diff --git a/src/Components/Loader/Loader.tsx b/src/Components/Loader/Loader.tsx index 21ff32b..85444d2 100644 --- a/src/Components/Loader/Loader.tsx +++ b/src/Components/Loader/Loader.tsx @@ -2,10 +2,7 @@ import './Loader.scss'; import * as React from 'react'; -export interface ILoaderProps { -} - -export function Loader(props: ILoaderProps): JSX.Element { +export function Loader(): JSX.Element { return (
Loading... diff --git a/src/Components/Messages/Messages.tsx b/src/Components/Messages/Messages.tsx index 15ae165..7e71d62 100644 --- a/src/Components/Messages/Messages.tsx +++ b/src/Components/Messages/Messages.tsx @@ -4,8 +4,6 @@ import { FixedSizeList as List } from 'react-window'; import { MessageType } from '../../Enums/MessageType'; import { IHistoryState } from '../../Interfaces/IHistoryState'; import { IMessage } from '../../Interfaces/IMessage'; -import { DISABLE_API } from '../../utils/default'; -import { GetCircularReplacer } from '../../utils/saveload'; import { TITLE_BAR_HEIGHT } from '../Sidebar/Sidebar'; import { Text } from '../Text/Text'; diff --git a/src/Components/SVG/Elements/Container.tsx b/src/Components/SVG/Elements/Container.tsx index 383ddb3..ac01ed0 100644 --- a/src/Components/SVG/Elements/Container.tsx +++ b/src/Components/SVG/Elements/Container.tsx @@ -95,17 +95,17 @@ export function Container(props: IContainerProps): JSX.Element { ); } -function CreateReactCustomSVG(customSVG: string, props: IContainerProperties): React.ReactNode { +function CreateReactCustomSVG(customSVG: string, properties: IContainerProperties): React.ReactNode { return Transform(node, children, props)} + transform={(node, children) => Transform(node, children, properties)} />; } -function Transform(node: HTMLElement, children: Node[], props: IContainerProperties): React.ReactNode { +function Transform(node: HTMLElement, children: Node[], properties: IContainerProperties): React.ReactNode { const supportedTags = ['line', 'path', 'rect']; if (supportedTags.includes(node.tagName.toLowerCase())) { const attributes: { [att: string]: string | object | null } = {}; @@ -118,13 +118,14 @@ function Transform(node: HTMLElement, children: Node[], props: IContainerPropert if (attributeValue.startsWith('{userData.') && attributeValue.endsWith('}')) { // support for userData - if (props.userData === undefined) { + const userData = properties.userData; + if (userData === undefined) { return undefined; } const userDataKey = attributeValue.replace(/userData\./, ''); - const prop = Object.entries(props.userData).find(([key]) => `{${key}}` === userDataKey); + const prop = Object.entries(userData).find(([key]) => `{${key}}` === userDataKey); if (prop !== undefined) { attributes[Camelize(attName)] = prop[1]; return; @@ -139,7 +140,7 @@ function Transform(node: HTMLElement, children: Node[], props: IContainerPropert return; } - const prop = Object.entries(props).find(([key]) => `{${key}}` === attributeValue); + const prop = Object.entries(properties).find(([key]) => `{${key}}` === attributeValue); if (prop !== undefined) { attributes[Camelize(attName)] = prop[1]; return; diff --git a/src/Components/SVG/SVG.tsx b/src/Components/SVG/SVG.tsx index f11bc26..92d4095 100644 --- a/src/Components/SVG/SVG.tsx +++ b/src/Components/SVG/SVG.tsx @@ -26,6 +26,7 @@ export const ID = 'svg'; export function SVG(props: ISVGProps): JSX.Element { const [tool, setTool] = React.useState(TOOL_PAN); + // eslint-disable-next-line @typescript-eslint/consistent-type-assertions const [value, setValue] = React.useState({} as Value); const [scale, setScale] = React.useState(value.a ?? 1); diff --git a/src/Components/SymbolProperties/SymbolForm.tsx b/src/Components/SymbolProperties/SymbolForm.tsx index 5593db8..4ad76d8 100644 --- a/src/Components/SymbolProperties/SymbolForm.tsx +++ b/src/Components/SymbolProperties/SymbolForm.tsx @@ -3,7 +3,6 @@ import { ISymbolModel } from '../../Interfaces/ISymbolModel'; import { RestoreX, TransformX } from '../../utils/svg'; import { InputGroup } from '../InputGroup/InputGroup'; import { TextInputGroup } from '../InputGroup/TextInputGroup'; -import { PositionReferenceSelector } from '../RadioGroupButtons/PositionReferenceSelector'; import { Text } from '../Text/Text'; interface ISymbolFormProps { diff --git a/src/Components/SymbolsList/SymbolsList.tsx b/src/Components/SymbolsList/SymbolsList.tsx index d5a5894..b860cf0 100644 --- a/src/Components/SymbolsList/SymbolsList.tsx +++ b/src/Components/SymbolsList/SymbolsList.tsx @@ -14,7 +14,7 @@ interface ISymbolsSidebarProps { export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element { // States const divRef = React.useRef(null); - const [width, height] = useSize(divRef); + const height = useSize(divRef)[1]; // Render const containers = [...props.symbols.values()]; function Row({ index, style }: { index: number, style: React.CSSProperties }): JSX.Element { diff --git a/src/Components/UI/UseWorker.tsx b/src/Components/UI/UseWorker.tsx index 7569bc3..c4584af 100644 --- a/src/Components/UI/UseWorker.tsx +++ b/src/Components/UI/UseWorker.tsx @@ -21,7 +21,7 @@ export function UseWorker( return () => { }; - }, [state]); + }, [state, configurationUrl]); React.useEffect(() => { myWorker.onmessage = (event) => { @@ -53,5 +53,5 @@ export function UseAsync( .then(async(json: IGetFeedbackResponse) => { setMessages(json.messages); }); - }, [state]); + }, [state, configurationUrl, setMessages]); } diff --git a/src/Events/AppEvents.ts b/src/Events/AppEvents.ts index df1cafd..e2976c9 100644 --- a/src/Events/AppEvents.ts +++ b/src/Events/AppEvents.ts @@ -40,6 +40,12 @@ export function UseCustomEvents( setAppState: (appState: AppState) => void ): void { useEffect(() => { + const current = appRef.current; + + if (current === null) { + return; + } + const funcs = new Map void>(); for (const event of events) { function Func(eventInitDict?: CustomEventInit): void { @@ -51,7 +57,7 @@ export function UseCustomEvents( eventInitDict }); } - appRef.current?.addEventListener(event.name, Func); + current.addEventListener(event.name, Func); funcs.set(event.name, Func); } return () => { @@ -60,7 +66,7 @@ export function UseCustomEvents( if (func === undefined) { continue; } - appRef.current?.removeEventListener(event.name, func); + current.removeEventListener(event.name, func); } }; }); diff --git a/src/Events/EditorEvents.ts b/src/Events/EditorEvents.ts index be79486..ff645a3 100644 --- a/src/Events/EditorEvents.ts +++ b/src/Events/EditorEvents.ts @@ -51,8 +51,14 @@ export function UseCustomEvents( historyCurrentStep, configuration }; + const current = editorRef.current; + + if (current === null) { + return; + } const funcs = new Map void>(); + for (const event of events) { function Func(eventInitDict?: CustomEventInit): void { return event.func({ @@ -62,7 +68,7 @@ export function UseCustomEvents( eventInitDict }); } - editorRef.current?.addEventListener(event.name, Func); + current?.addEventListener(event.name, Func); funcs.set(event.name, Func); } return () => { @@ -71,7 +77,7 @@ export function UseCustomEvents( if (func === undefined) { continue; } - editorRef.current?.removeEventListener(event.name, func); + current?.removeEventListener(event.name, func); } }; }); diff --git a/src/utils/default.ts b/src/utils/default.ts index 283b2ef..1287b93 100644 --- a/src/utils/default.ts +++ b/src/utils/default.ts @@ -8,11 +8,12 @@ import { IEditorState } from '../Interfaces/IEditorState'; import { ISymbolModel } from '../Interfaces/ISymbolModel'; import { Orientation } from '../Enums/Orientation'; import { Position } from '../Enums/Position'; +import { AppState } from '../Enums/AppState'; /// EDITOR DEFAULTS /// /** Enable fast boot and disable main menu (0 = disabled, 1 = loading, 2 = loaded) */ -export const FAST_BOOT = import.meta.env.PROD ? 2 : 0; +export const FAST_BOOT = import.meta.env.PROD ? AppState.Loaded : AppState.MainMenu; /** Disable any call to the API (default = false) */ export const DISABLE_API = false; @@ -184,7 +185,7 @@ const DEFAULT_CONTAINER_STYLE = { fillOpacity: 1, fill: 'white', strokeWidth: 2 -} +}; /** * Default Main container properties diff --git a/src/utils/itertools.ts b/src/utils/itertools.ts index cdd4164..9efef1f 100644 --- a/src/utils/itertools.ts +++ b/src/utils/itertools.ts @@ -12,7 +12,6 @@ export function * MakeChildrenIterator(containers: Map, }; } - /** * Returns a Generator iterating of over the children depth-first */ diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 3fc526e..1430cee 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -1,3 +1,4 @@ +// eslint-disable-next-line @typescript-eslint/triple-slash-reference /// interface ImportMetaEnv { diff --git a/tsconfig.json b/tsconfig.json index 4b64a19..24da452 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,6 +17,10 @@ "jsx": "react-jsx" }, "include": ["src"], - "exclude": ["test-server"], + "exclude": [ + "test-server", + "public/**/*", + "src/dts/**/*" + ], "references": [{ "path": "./tsconfig.node.json" }] }