Merged PR 165: Move useEffects to named functions

Move useEffects to named functions

src/Components/ElementsSidebar/MouseEventHandlers.ts

@@ -1,7 +1,53 @@
+import React, { RefObject, Dispatch, SetStateAction, useEffect } from 'react';
 import { IContainerModel } from '../../Interfaces/IContainerModel';
 import { IPoint } from '../../Interfaces/IPoint';
 import { findContainerById } from '../../utils/itertools';
 
+export function useMouseEvents(
+  isContextMenuOpen: boolean,
+  elementRef: RefObject<HTMLDivElement>,
+  setIsContextMenuOpen: Dispatch<SetStateAction<boolean>>,
+  setOnClickContainerId: Dispatch<SetStateAction<string>>,
+  setContextMenuPosition: Dispatch<SetStateAction<IPoint>>
+): void {
+  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
+      );
+    };
+  });
+}
+
 export function handleRightClick(
   event: MouseEvent,
   setIsContextMenuOpen: React.Dispatch<React.SetStateAction<boolean>>,