Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merged PR 165: Move useEffects to named functions

Browse source 
Move useEffects to named functions
This commit is contained in:
Eric Nguyen 2022-08-22 15:52:40 +00:00
parent 29625dce28
commit ec3fddec9d
6 changed files with 150 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/Components/Editor/Editor.tsx
View file

@ -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<IEditorProps> = (props) => {
const [history, setHistory] = React.useState<IHistoryState[]>(structuredClone(props.history));
const [historyCurrentStep, setHistoryCurrentStep] = React.useState<number>(props.historyCurrentStep);
const editorRef = useRef<HTMLDivElement>(null);
React.useEffect(() => {
function useShortcuts(
history: IHistoryState[],
historyCurrentStep: number,
setHistoryCurrentStep: Dispatch<SetStateAction<number>>
): void {
useEffect(() => {
const onKeyUp = (event: KeyboardEvent): void => onKeyDown(
event,
history,
@ -50,12 +50,24 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
);
window.addEventListener('keyup', onKeyUp);
return () => {
window.removeEventListener('keyup', onKeyUp);
};
});
}
function useWindowEvents(
history: IHistoryState[],
historyCurrentStep: number,
configuration: IConfiguration,
editorRef: React.RefObject<HTMLDivElement>
): void {
useEffect(() => {
const events = EditorEvents;
const editorState: IEditorState = {
history,
historyCurrentStep,
configuration: props.configuration
configuration
};
const funcs = new Map<string, () => void>();
@ -64,10 +76,7 @@ const Editor: React.FunctionComponent<IEditorProps> = (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<IEditorProps> = (props) => {
}
};
});
}
const Editor: React.FunctionComponent<IEditorProps> = (props) => {
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(history, historyCurrentStep, props.configuration, editorRef);
const configuration = props.configuration;
const current = getCurrentHistoryState(history, historyCurrentStep);