Merged PR 170: Add new eslint rules

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

src/Components/SymbolsSidebar/MouseEventHandlers.ts

@@ -1,7 +1,7 @@
 import { RefObject, Dispatch, SetStateAction, useEffect } from 'react';
 import { IPoint } from '../../Interfaces/IPoint';
 
-export function useMouseEvents(
+export function UseMouseEvents(
   isContextMenuOpen: boolean,
   elementRef: RefObject<HTMLDivElement>,
   setIsContextMenuOpen: Dispatch<SetStateAction<boolean>>,
@@ -9,44 +9,48 @@ export function useMouseEvents(
   setContextMenuPosition: Dispatch<SetStateAction<IPoint>>
 ): void {
   useEffect(() => {
-    const onContextMenu = (event: MouseEvent): void => handleRightClick(
-      event,
-      setIsContextMenuOpen,
-      setOnClickSymbolId,
-      setContextMenuPosition
-    );
+    function OnContextMenu(event: MouseEvent): void {
+      return HandleRightClick(
+        event,
+        setIsContextMenuOpen,
+        setOnClickSymbolId,
+        setContextMenuPosition
+      );
+    }
 
-    const onLeftClick = (): void => handleLeftClick(
-      isContextMenuOpen,
-      setIsContextMenuOpen,
-      setOnClickSymbolId
-    );
+    function OnLeftClick(): void {
+      return HandleLeftClick(
+        isContextMenuOpen,
+        setIsContextMenuOpen,
+        setOnClickSymbolId
+      );
+    }
 
     elementRef.current?.addEventListener(
       'contextmenu',
-      onContextMenu
+      OnContextMenu
     );
 
     window.addEventListener(
       'click',
-      onLeftClick
+      OnLeftClick
     );
 
     return () => {
       elementRef.current?.removeEventListener(
         'contextmenu',
-        onContextMenu
+        OnContextMenu
       );
 
       window.removeEventListener(
         'click',
-        onLeftClick
+        OnLeftClick
       );
     };
   });
 }
 
-export function handleRightClick(
+export function HandleRightClick(
   event: MouseEvent,
   setIsContextMenuOpen: React.Dispatch<React.SetStateAction<boolean>>,
   setOnClickSymbolId: React.Dispatch<React.SetStateAction<string>>,
@@ -66,7 +70,7 @@ export function handleRightClick(
   setContextMenuPosition(contextMenuPosition);
 }
 
-export function handleLeftClick(
+export function HandleLeftClick(
   isContextMenuOpen: boolean,
   setIsContextMenuOpen: React.Dispatch<React.SetStateAction<boolean>>,
   setOnClickContainerId: React.Dispatch<React.SetStateAction<string>>

src/Components/SymbolsSidebar/SymbolsSidebar.tsx

@@ -2,22 +2,22 @@ import * as React from 'react';
 import { FixedSizeList as List } from 'react-window';
 import { Menu } from '../Menu/Menu';
 import { MenuItem } from '../Menu/MenuItem';
-import { handleLeftClick, handleRightClick, useMouseEvents } from './MouseEventHandlers';
+import { UseMouseEvents } from './MouseEventHandlers';
 import { IPoint } from '../../Interfaces/IPoint';
 import { ISymbolModel } from '../../Interfaces/ISymbolModel';
 import { SymbolProperties } from '../SymbolProperties/SymbolProperties';
 
 interface ISymbolsSidebarProps {
-  SelectedSymbolId: string
+  selectedSymbolId: string
   symbols: Map<string, ISymbolModel>
   isOpen: boolean
   isHistoryOpen: boolean
-  OnPropertyChange: (key: string, value: string | number | boolean) => void
-  SelectSymbol: (symbolId: string) => void
-  DeleteSymbol: (containerid: string) => void
+  onPropertyChange: (key: string, value: string | number | boolean) => void
+  selectSymbol: (symbolId: string) => void
+  deleteSymbol: (containerid: string) => void
 }
 
-export const SymbolsSidebar: React.FC<ISymbolsSidebarProps> = (props: ISymbolsSidebarProps): JSX.Element => {
+export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element {
   // States
   const [isContextMenuOpen, setIsContextMenuOpen] = React.useState<boolean>(false);
   const [onClickSymbolId, setOnClickSymbolId] = React.useState<string>('');
@@ -29,7 +29,7 @@ export const SymbolsSidebar: React.FC<ISymbolsSidebarProps> = (props: ISymbolsSi
   const elementRef = React.useRef<HTMLDivElement>(null);
 
   // Event listeners
-  useMouseEvents(
+  UseMouseEvents(
     isContextMenuOpen,
     elementRef,
     setIsContextMenuOpen,
@@ -46,35 +46,33 @@ export const SymbolsSidebar: React.FC<ISymbolsSidebarProps> = (props: ISymbolsSi
   }
 
   const containers = [...props.symbols.values()];
-  const Row = ({ index, style }: {index: number, style: React.CSSProperties}): JSX.Element => {
+  function Row({ index, style }: { index: number, style: React.CSSProperties }): JSX.Element {
     const container = containers[index];
     const key = container.id.toString();
     const text = key;
-    const selectedClass: string = props.SelectedSymbolId !== '' &&
-        props.SelectedSymbolId === container.id
+    const selectedClass: string = props.selectedSymbolId !== '' &&
+      props.selectedSymbolId === container.id
       ? 'border-l-4 bg-slate-400/60 hover:bg-slate-400'
       : 'bg-slate-300/60 hover:bg-slate-300';
 
     return (
       <button type="button"
-        className={
-          `w-full border-blue-500 elements-sidebar-row whitespace-pre
-          text-left text-sm font-medium transition-all ${selectedClass}`
-        }
+        className={`w-full border-blue-500 elements-sidebar-row whitespace-pre
+          text-left text-sm font-medium transition-all ${selectedClass}`}
         id={key}
         key={key}
         style={style}
-        onClick={() => props.SelectSymbol(key)}
+        onClick={() => props.selectSymbol(key)}
       >
-        { text }
+        {text}
       </button>
     );
-  };
+  }
 
   return (
     <div className={`fixed flex flex-col bg-slate-100 text-gray-800 transition-all h-full w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
       <div className='bg-slate-100 font-bold sidebar-title'>
-          Elements
+        Elements
       </div>
       <div ref={elementRef} className='h-96 text-gray-800'>
         <List
@@ -84,7 +82,7 @@ export const SymbolsSidebar: React.FC<ISymbolsSidebarProps> = (props: ISymbolsSi
           height={384}
           width={256}
         >
-          { Row }
+          {Row}
         </List>
       </div>
       <Menu
@@ -95,14 +93,13 @@ export const SymbolsSidebar: React.FC<ISymbolsSidebarProps> = (props: ISymbolsSi
       >
         <MenuItem className='contextmenu-item' text='Delete' onClick={() => {
           setIsContextMenuOpen(false);
-          props.DeleteSymbol(onClickSymbolId);
-        }} />
+          props.deleteSymbol(onClickSymbolId);
+        } } />
       </Menu>
       <SymbolProperties
-        symbol={props.symbols.get(props.SelectedSymbolId)}
+        symbol={props.symbols.get(props.selectedSymbolId)}
         symbols={props.symbols}
-        onChange={props.OnPropertyChange}
-      />
+        onChange={props.onPropertyChange} />
     </div>
   );
-};
+}