From ec3fddec9d906db52d4b5030cfde410cb2e95001 Mon Sep 17 00:00:00 2001 From: Eric Nguyen Date: Mon, 22 Aug 2022 15:52:40 +0000 Subject: [PATCH] Merged PR 165: Move useEffects to named functions Move useEffects to named functions --- src/Components/Editor/Editor.tsx | 40 +++++++++++----- .../ElementsSidebar/ElementsSidebar.tsx | 46 ++++--------------- .../ElementsSidebar/MouseEventHandlers.ts | 46 +++++++++++++++++++ src/Components/SVG/SVG.tsx | 18 +++++--- .../SymbolsSidebar/MouseEventHandlers.ts | 46 +++++++++++++++++++ .../SymbolsSidebar/SymbolsSidebar.tsx | 45 ++++-------------- 6 files changed, 150 insertions(+), 91 deletions(-) diff --git a/src/Components/Editor/Editor.tsx b/src/Components/Editor/Editor.tsx index aed34ab..86db810 100644 --- a/src/Components/Editor/Editor.tsx +++ b/src/Components/Editor/Editor.tsx @@ -1,4 +1,4 @@ -import React, { useRef } from 'react'; +import React, { Dispatch, SetStateAction, useEffect, useRef } from 'react'; import './Editor.scss'; import { IConfiguration } from '../../Interfaces/IConfiguration'; import { SVG } from '../SVG/SVG'; @@ -36,12 +36,12 @@ export const getCurrentHistory = (history: IHistoryState[], historyCurrentStep: export const getCurrentHistoryState = (history: IHistoryState[], historyCurrentStep: number): IHistoryState => history[historyCurrentStep]; -const Editor: React.FunctionComponent = (props) => { - const [history, setHistory] = React.useState(structuredClone(props.history)); - const [historyCurrentStep, setHistoryCurrentStep] = React.useState(props.historyCurrentStep); - const editorRef = useRef(null); - - React.useEffect(() => { +function useShortcuts( + history: IHistoryState[], + historyCurrentStep: number, + setHistoryCurrentStep: Dispatch> +): void { + useEffect(() => { const onKeyUp = (event: KeyboardEvent): void => onKeyDown( event, history, @@ -50,12 +50,24 @@ const Editor: React.FunctionComponent = (props) => { ); window.addEventListener('keyup', onKeyUp); + return () => { + window.removeEventListener('keyup', onKeyUp); + }; + }); +} +function useWindowEvents( + history: IHistoryState[], + historyCurrentStep: number, + configuration: IConfiguration, + editorRef: React.RefObject +): void { + useEffect(() => { const events = EditorEvents; const editorState: IEditorState = { history, historyCurrentStep, - configuration: props.configuration + configuration }; const funcs = new Map void>(); @@ -64,10 +76,7 @@ const Editor: React.FunctionComponent = (props) => { editorRef.current?.addEventListener(event.name, func); funcs.set(event.name, func); } - return () => { - window.removeEventListener('keyup', onKeyUp); - for (const event of events) { const func = funcs.get(event.name); if (func === undefined) { @@ -77,6 +86,15 @@ const Editor: React.FunctionComponent = (props) => { } }; }); +} + +const Editor: React.FunctionComponent = (props) => { + const [history, setHistory] = React.useState(structuredClone(props.history)); + const [historyCurrentStep, setHistoryCurrentStep] = React.useState(props.historyCurrentStep); + const editorRef = useRef(null); + + useShortcuts(history, historyCurrentStep, setHistoryCurrentStep); + useWindowEvents(history, historyCurrentStep, props.configuration, editorRef); const configuration = props.configuration; const current = getCurrentHistoryState(history, historyCurrentStep); diff --git a/src/Components/ElementsSidebar/ElementsSidebar.tsx b/src/Components/ElementsSidebar/ElementsSidebar.tsx index bade0d9..2c15fde 100644 --- a/src/Components/ElementsSidebar/ElementsSidebar.tsx +++ b/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 = (props: IElement const elementRef = React.useRef(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'; diff --git a/src/Components/ElementsSidebar/MouseEventHandlers.ts b/src/Components/ElementsSidebar/MouseEventHandlers.ts index 5081033..a031802 100644 --- a/src/Components/ElementsSidebar/MouseEventHandlers.ts +++ b/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, + setIsContextMenuOpen: Dispatch>, + setOnClickContainerId: Dispatch>, + setContextMenuPosition: Dispatch> +): 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>, diff --git a/src/Components/SVG/SVG.tsx b/src/Components/SVG/SVG.tsx index 3b7c59b..d201bee 100644 --- a/src/Components/SVG/SVG.tsx +++ b/src/Components/SVG/SVG.tsx @@ -33,12 +33,9 @@ function resizeViewBox( }); } -export const SVG: React.FC = (props: ISVGProps) => { - const [viewer, setViewer] = React.useState({ - viewerWidth: window.innerWidth - BAR_WIDTH, - viewerHeight: window.innerHeight - }); - +function useSVGAutoResizer( + setViewer: React.Dispatch> +): void { React.useEffect(() => { const onResize = (): void => resizeViewBox(setViewer); window.addEventListener('resize', onResize); @@ -47,6 +44,15 @@ export const SVG: React.FC = (props: ISVGProps) => { window.removeEventListener('resize', onResize); }; }); +} + +export const SVG: React.FC = (props: ISVGProps) => { + const [viewer, setViewer] = React.useState({ + viewerWidth: window.innerWidth - BAR_WIDTH, + viewerHeight: window.innerHeight + }); + + useSVGAutoResizer(setViewer); const xmlns = ''; const properties = { diff --git a/src/Components/SymbolsSidebar/MouseEventHandlers.ts b/src/Components/SymbolsSidebar/MouseEventHandlers.ts index 8a8b5b6..e7cd5f0 100644 --- a/src/Components/SymbolsSidebar/MouseEventHandlers.ts +++ b/src/Components/SymbolsSidebar/MouseEventHandlers.ts @@ -1,5 +1,51 @@ +import { RefObject, Dispatch, SetStateAction, useEffect } from 'react'; import { IPoint } from '../../Interfaces/IPoint'; +export function useMouseEvents( + isContextMenuOpen: boolean, + elementRef: RefObject, + setIsContextMenuOpen: Dispatch>, + setOnClickSymbolId: Dispatch>, + setContextMenuPosition: Dispatch> +): void { + useEffect(() => { + const onContextMenu = (event: MouseEvent): void => handleRightClick( + event, + setIsContextMenuOpen, + setOnClickSymbolId, + setContextMenuPosition + ); + + const onLeftClick = (): void => handleLeftClick( + isContextMenuOpen, + setIsContextMenuOpen, + setOnClickSymbolId + ); + + 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>, diff --git a/src/Components/SymbolsSidebar/SymbolsSidebar.tsx b/src/Components/SymbolsSidebar/SymbolsSidebar.tsx index 2285f47..9b8a1a5 100644 --- a/src/Components/SymbolsSidebar/SymbolsSidebar.tsx +++ b/src/Components/SymbolsSidebar/SymbolsSidebar.tsx @@ -2,7 +2,7 @@ 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 } from './MouseEventHandlers'; +import { handleLeftClick, handleRightClick, useMouseEvents } from './MouseEventHandlers'; import { IPoint } from '../../Interfaces/IPoint'; import { ISymbolModel } from '../../Interfaces/ISymbolModel'; import { SymbolProperties } from '../SymbolProperties/SymbolProperties'; @@ -29,42 +29,13 @@ export const SymbolsSidebar: React.FC = (props: ISymbolsSi const elementRef = React.useRef(null); // Event listeners - React.useEffect(() => { - const onContextMenu = (event: MouseEvent): void => handleRightClick( - event, - setIsContextMenuOpen, - setOnClickSymbolId, - setContextMenuPosition - ); - - const onLeftClick = (): void => handleLeftClick( - isContextMenuOpen, - setIsContextMenuOpen, - setOnClickSymbolId - ); - - elementRef.current?.addEventListener( - 'contextmenu', - onContextMenu - ); - - window.addEventListener( - 'click', - onLeftClick - ); - - return () => { - elementRef.current?.removeEventListener( - 'contextmenu', - onContextMenu - ); - - window.removeEventListener( - 'click', - onLeftClick - ); - }; - }); + useMouseEvents( + isContextMenuOpen, + elementRef, + setIsContextMenuOpen, + setOnClickSymbolId, + setContextMenuPosition + ); // Render let isOpenClasses = '-right-64';