Merged PR 165: Move useEffects to named functions

Move useEffects to named functions

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -5,9 +5,10 @@ import { IContainerModel } from '../../Interfaces/IContainerModel';
 import { getDepth, MakeIterator } from '../../utils/itertools';
 import { Menu } from '../Menu/Menu';
 import { MenuItem } from '../Menu/MenuItem';
-import { handleDragLeave, handleDragOver, handleLeftClick, handleOnDrop, handleRightClick } from './MouseEventHandlers';
+import { handleDragLeave, handleDragOver, handleLeftClick, handleOnDrop, handleRightClick, useMouseEvents } from './MouseEventHandlers';
 import { IPoint } from '../../Interfaces/IPoint';
 import { ISymbolModel } from '../../Interfaces/ISymbolModel';
+import { Dispatch, RefObject, SetStateAction } from 'react';
 
 interface IElementsSidebarProps {
   MainContainer: IContainerModel
@@ -33,42 +34,13 @@ export const ElementsSidebar: React.FC<IElementsSidebarProps> = (props: IElement
   const elementRef = React.useRef<HTMLDivElement>(null);
 
   // Event listeners
-  React.useEffect(() => {
-    const onContextMenu = (event: MouseEvent): void => handleRightClick(
-      event,
-      setIsContextMenuOpen,
-      setOnClickContainerId,
-      setContextMenuPosition
-    );
-
-    const onLeftClick = (): void => handleLeftClick(
-      isContextMenuOpen,
-      setIsContextMenuOpen,
-      setOnClickContainerId
-    );
-
-    elementRef.current?.addEventListener(
-      'contextmenu',
-      onContextMenu
-    );
-
-    window.addEventListener(
-      'click',
-      onLeftClick
-    );
-
-    return () => {
-      elementRef.current?.removeEventListener(
-        'contextmenu',
-        onContextMenu
-      );
-
-      window.removeEventListener(
-        'click',
-        onLeftClick
-      );
-    };
-  });
+  useMouseEvents(
+    isContextMenuOpen,
+    elementRef,
+    setIsContextMenuOpen,
+    setOnClickContainerId,
+    setContextMenuPosition
+  );
 
   // Render
   let isOpenClasses = '-right-64';