Merged PR 170: Add new eslint rules

- naming-convention
- prefer-arrow-callback
- func-style
- import/no-default-export

src/Components/Editor/Editor.tsx

@@ -6,12 +6,12 @@ import { IHistoryState } from '../../Interfaces/IHistoryState';
 import { UI } from '../UI/UI';
 import { SelectContainer, DeleteContainer, AddContainerToSelectedContainer, OnPropertyChange } from './Actions/ContainerOperations';
 import { SaveEditorAsJSON, SaveEditorAsSVG } from './Actions/Save';
-import { onKeyDown } from './Actions/Shortcuts';
+import { OnKey } from './Actions/Shortcuts';
 import EditorEvents from '../../Events/EditorEvents';
 import { IEditorState } from '../../Interfaces/IEditorState';
 import { MAX_HISTORY } from '../../utils/default';
 import { AddSymbol, OnPropertyChange as OnSymbolPropertyChange, DeleteSymbol, SelectSymbol } from './Actions/SymbolOperations';
-import { findContainerById } from '../../utils/itertools';
+import { FindContainerById } from '../../utils/itertools';
 
 interface IEditorProps {
   root: Element | Document
@@ -29,35 +29,40 @@ export function UpdateCounters(counters: Record<string, number>, type: string):
   }
 }
 
-export const getCurrentHistory = (history: IHistoryState[], historyCurrentStep: number): IHistoryState[] =>
-  history.slice(
-    Math.max(0, history.length - MAX_HISTORY), // change this to 0 for unlimited (not recommanded because of overflow)
+export function GetCurrentHistory(history: IHistoryState[], historyCurrentStep: number): IHistoryState[] {
+  return history.slice(
+    Math.max(0, history.length - MAX_HISTORY),
     historyCurrentStep + 1
   );
+}
 
-export const getCurrentHistoryState = (history: IHistoryState[], historyCurrentStep: number): IHistoryState => history[historyCurrentStep];
+export function GetCurrentHistoryState(history: IHistoryState[], historyCurrentStep: number): IHistoryState {
+  return history[historyCurrentStep];
+}
 
-function useShortcuts(
+function UseShortcuts(
   history: IHistoryState[],
   historyCurrentStep: number,
   setHistoryCurrentStep: Dispatch<SetStateAction<number>>
 ): void {
   useEffect(() => {
-    const onKeyUp = (event: KeyboardEvent): void => onKeyDown(
-      event,
-      history,
-      historyCurrentStep,
-      setHistoryCurrentStep
-    );
+    function OnKeyUp(event: KeyboardEvent): void {
+      return OnKey(
+        event,
+        history,
+        historyCurrentStep,
+        setHistoryCurrentStep
+      );
+    }
 
-    window.addEventListener('keyup', onKeyUp);
+    window.addEventListener('keyup', OnKeyUp);
     return () => {
-      window.removeEventListener('keyup', onKeyUp);
+      window.removeEventListener('keyup', OnKeyUp);
     };
   });
 }
 
-function useWindowEvents(
+function UseWindowEvents(
   root: Element | Document,
   history: IHistoryState[],
   historyCurrentStep: number,
@@ -76,15 +81,17 @@ function useWindowEvents(
 
     const funcs = new Map<string, () => void>();
     for (const event of events) {
-      const func = (eventInitDict?: CustomEventInit): void => event.func(
-        root,
-        editorState,
-        setHistory,
-        setHistoryCurrentStep,
-        eventInitDict
-      );
-      editorRef.current?.addEventListener(event.name, func);
-      funcs.set(event.name, func);
+      function Func(eventInitDict?: CustomEventInit): void {
+        return event.func(
+          root,
+          editorState,
+          setHistory,
+          setHistoryCurrentStep,
+          eventInitDict
+        );
+      }
+      editorRef.current?.addEventListener(event.name, Func);
+      funcs.set(event.name, Func);
     }
     return () => {
       for (const event of events) {
@@ -98,13 +105,13 @@ function useWindowEvents(
   });
 }
 
-const Editor: React.FunctionComponent<IEditorProps> = (props) => {
+export function Editor(props: IEditorProps): JSX.Element {
   const [history, setHistory] = React.useState<IHistoryState[]>(structuredClone(props.history));
   const [historyCurrentStep, setHistoryCurrentStep] = React.useState<number>(props.historyCurrentStep);
   const editorRef = useRef<HTMLDivElement>(null);
 
-  useShortcuts(history, historyCurrentStep, setHistoryCurrentStep);
-  useWindowEvents(
+  UseShortcuts(history, historyCurrentStep, setHistoryCurrentStep);
+  UseWindowEvents(
     props.root,
     history,
     historyCurrentStep,
@@ -115,32 +122,32 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
   );
 
   const configuration = props.configuration;
-  const current = getCurrentHistoryState(history, historyCurrentStep);
-  const selected = findContainerById(current.MainContainer, current.SelectedContainerId);
+  const current = GetCurrentHistoryState(history, historyCurrentStep);
+  const selected = FindContainerById(current.mainContainer, current.selectedContainerId);
   return (
     <div ref={editorRef} className="Editor font-sans h-full">
       <UI
-        SelectedContainer={selected}
+        selectedContainer={selected}
         current={current}
         history={history}
         historyCurrentStep={historyCurrentStep}
-        AvailableContainers={configuration.AvailableContainers}
-        AvailableSymbols={configuration.AvailableSymbols}
-        SelectContainer={(container) => SelectContainer(
+        availableContainers={configuration.AvailableContainers}
+        availableSymbols={configuration.AvailableSymbols}
+        selectContainer={(container) => SelectContainer(
           container,
           history,
           historyCurrentStep,
           setHistory,
           setHistoryCurrentStep
         )}
-        DeleteContainer={(containerId: string) => DeleteContainer(
+        deleteContainer={(containerId: string) => DeleteContainer(
           containerId,
           history,
           historyCurrentStep,
           setHistory,
           setHistoryCurrentStep
         )}
-        OnPropertyChange={(key, value, type) => OnPropertyChange(
+        onPropertyChange={(key, value, type) => OnPropertyChange(
           key, value, type,
           selected,
           history,
@@ -148,7 +155,7 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
           setHistory,
           setHistoryCurrentStep
         )}
-        AddContainer={(type) => AddContainerToSelectedContainer(
+        addContainer={(type) => AddContainerToSelectedContainer(
           type,
           selected,
           configuration,
@@ -157,7 +164,7 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
           setHistory,
           setHistoryCurrentStep
         )}
-        AddSymbol={(type) => AddSymbol(
+        addSymbol={(type) => AddSymbol(
           type,
           configuration,
           history,
@@ -165,45 +172,42 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
           setHistory,
           setHistoryCurrentStep
         )}
-        OnSymbolPropertyChange={(key, value) => OnSymbolPropertyChange(
+        onSymbolPropertyChange={(key, value) => OnSymbolPropertyChange(
           key, value,
           history,
           historyCurrentStep,
           setHistory,
           setHistoryCurrentStep
         )}
-        SelectSymbol={(symbolId) => SelectSymbol(
+        selectSymbol={(symbolId) => SelectSymbol(
           symbolId,
           history,
           historyCurrentStep,
           setHistory,
           setHistoryCurrentStep
         )}
-        DeleteSymbol={(symbolId) => DeleteSymbol(
+        deleteSymbol={(symbolId) => DeleteSymbol(
           symbolId,
           history,
           historyCurrentStep,
           setHistory,
           setHistoryCurrentStep
         )}
-        SaveEditorAsJSON={() => SaveEditorAsJSON(
+        saveEditorAsJSON={() => SaveEditorAsJSON(
           history,
           historyCurrentStep,
           configuration
         )}
-        SaveEditorAsSVG={() => SaveEditorAsSVG()}
-        LoadState={(move) => setHistoryCurrentStep(move)}
-      />
+        saveEditorAsSVG={() => SaveEditorAsSVG()}
+        loadState={(move) => setHistoryCurrentStep(move)} />
       <SVG
-        width={current.MainContainer?.properties.width}
-        height={current.MainContainer?.properties.height}
+        width={current.mainContainer?.properties.width}
+        height={current.mainContainer?.properties.height}
         selected={selected}
-        symbols={current.Symbols}
+        symbols={current.symbols}
       >
-        { current.MainContainer }
+        {current.mainContainer}
       </SVG>
     </div>
   );
-};
-
-export default Editor;
+}