From c11e86bd6a8441ea73b81312794efc6541ece512 Mon Sep 17 00:00:00 2001 From: Sean Beyer Date: Thu, 26 Oct 2023 15:49:31 -0700 Subject: [PATCH] Fix stale issue in componentRef checks --- .../editor/layouts/Classic.tsx | 5 +-- .../editor/layouts/Default.tsx | 8 +--- .../editor/layouts/FourByFour.tsx | 5 +-- .../editor/layouts/OnePane.tsx | 5 +-- .../editor/layouts/OnePaneR.tsx | 5 +-- .../editor/layouts/Pyramid.tsx | 5 +-- .../editor/layouts/Triplets.tsx | 5 +-- .../editor/layouts/TwoPane.tsx | 5 +-- app/components-react/editor/layouts/hooks.tsx | 37 +++++++++++-------- 9 files changed, 30 insertions(+), 50 deletions(-) diff --git a/app/components-react/editor/layouts/Classic.tsx b/app/components-react/editor/layouts/Classic.tsx index 3ffdb2f5483f..ff29f6071554 100644 --- a/app/components-react/editor/layouts/Classic.tsx +++ b/app/components-react/editor/layouts/Classic.tsx @@ -5,10 +5,7 @@ import ResizeBar from 'components-react/root/ResizeBar'; import styles from './Layouts.m.less'; export function Classic(p: React.PropsWithChildren) { - const componentRef = useRef(null); - - const { mins, bars, resizes, calculateMax, setBar } = useLayout( - componentRef.current, + const { mins, bars, resizes, calculateMax, setBar, componentRef } = useLayout( ['1', ['2', '3', '4']], false, p.childrenMins, diff --git a/app/components-react/editor/layouts/Default.tsx b/app/components-react/editor/layouts/Default.tsx index 69d03b3371ce..8041fcf65627 100644 --- a/app/components-react/editor/layouts/Default.tsx +++ b/app/components-react/editor/layouts/Default.tsx @@ -5,12 +5,8 @@ import ResizeBar from 'components-react/root/ResizeBar'; import styles from './Layouts.m.less'; export function Default(p: React.PropsWithChildren) { - const vectors: ILayoutSlotArray = ['1', '2', ['3', '4', '5']]; - const componentRef = useRef(null); - - const { mins, bars, resizes, calculateMax, setBar } = useLayout( - componentRef.current as HTMLDivElement, - vectors, + const { mins, bars, resizes, calculateMax, setBar, componentRef } = useLayout( + ['1', '2', ['3', '4', '5']], false, p.childrenMins, p.onTotalWidth, diff --git a/app/components-react/editor/layouts/FourByFour.tsx b/app/components-react/editor/layouts/FourByFour.tsx index d543defb9b4c..4568ced6af4a 100644 --- a/app/components-react/editor/layouts/FourByFour.tsx +++ b/app/components-react/editor/layouts/FourByFour.tsx @@ -5,10 +5,7 @@ import ResizeBar from 'components-react/root/ResizeBar'; import styles from './Layouts.m.less'; export function FourByFour(p: React.PropsWithChildren) { - const componentRef = useRef(null); - - const { mins, bars, resizes, calculateMax, setBar } = useLayout( - componentRef.current, + const { mins, bars, resizes, calculateMax, setBar, componentRef } = useLayout( ['1', ['2', '3'], ['4', '5']], false, p.childrenMins, diff --git a/app/components-react/editor/layouts/OnePane.tsx b/app/components-react/editor/layouts/OnePane.tsx index 55d17d12056f..5d7496f760d2 100644 --- a/app/components-react/editor/layouts/OnePane.tsx +++ b/app/components-react/editor/layouts/OnePane.tsx @@ -5,10 +5,7 @@ import ResizeBar from 'components-react/root/ResizeBar'; import styles from './Layouts.m.less'; export function OnePane(p: React.PropsWithChildren) { - const componentRef = useRef(null); - - const { mins, bars, resizes, calculateMax, setBar } = useLayout( - componentRef.current, + const { mins, bars, resizes, calculateMax, setBar, componentRef } = useLayout( ['2', ['1', ['3', '4', '5']]], true, p.childrenMins, diff --git a/app/components-react/editor/layouts/OnePaneR.tsx b/app/components-react/editor/layouts/OnePaneR.tsx index cb459c7ec1f9..67c9511de848 100644 --- a/app/components-react/editor/layouts/OnePaneR.tsx +++ b/app/components-react/editor/layouts/OnePaneR.tsx @@ -5,10 +5,7 @@ import ResizeBar from 'components-react/root/ResizeBar'; import styles from './Layouts.m.less'; export function OnePaneR(p: React.PropsWithChildren) { - const componentRef = useRef(null); - - const { mins, bars, resizes, calculateMax, setBar } = useLayout( - componentRef.current, + const { mins, bars, resizes, calculateMax, setBar, componentRef } = useLayout( [['1', ['3', '4', '5']], '2'], true, p.childrenMins, diff --git a/app/components-react/editor/layouts/Pyramid.tsx b/app/components-react/editor/layouts/Pyramid.tsx index 4f0ded0ebc7c..f935e2d3a5a9 100644 --- a/app/components-react/editor/layouts/Pyramid.tsx +++ b/app/components-react/editor/layouts/Pyramid.tsx @@ -5,10 +5,7 @@ import ResizeBar from 'components-react/root/ResizeBar'; import styles from './Layouts.m.less'; export function Pyramid(p: React.PropsWithChildren) { - const componentRef = useRef(null); - - const { mins, bars, resizes, calculateMax, setBar } = useLayout( - componentRef.current, + const { mins, bars, resizes, calculateMax, setBar, componentRef } = useLayout( ['1', ['2', '3']], false, p.childrenMins, diff --git a/app/components-react/editor/layouts/Triplets.tsx b/app/components-react/editor/layouts/Triplets.tsx index c3a8139624a6..80b373564011 100644 --- a/app/components-react/editor/layouts/Triplets.tsx +++ b/app/components-react/editor/layouts/Triplets.tsx @@ -5,10 +5,7 @@ import ResizeBar from 'components-react/root/ResizeBar'; import styles from './Layouts.m.less'; export function Triplets(p: React.PropsWithChildren) { - const componentRef = useRef(null); - - const { mins, bars, resizes, calculateMax, setBar } = useLayout( - componentRef.current, + const { mins, bars, resizes, calculateMax, setBar, componentRef } = useLayout( [ ['1', '4'], ['2', '5'], diff --git a/app/components-react/editor/layouts/TwoPane.tsx b/app/components-react/editor/layouts/TwoPane.tsx index 5a8b68aadeef..6c1255e44542 100644 --- a/app/components-react/editor/layouts/TwoPane.tsx +++ b/app/components-react/editor/layouts/TwoPane.tsx @@ -5,10 +5,7 @@ import ResizeBar from 'components-react/root/ResizeBar'; import styles from './Layouts.m.less'; export function TwoPane(p: React.PropsWithChildren) { - const componentRef = useRef(null); - - const { mins, bars, resizes, calculateMax, setBar } = useLayout( - componentRef.current, + const { mins, bars, resizes, calculateMax, setBar, componentRef } = useLayout( [['2', '5', ['1', ['3', '4']]]], true, p.childrenMins, diff --git a/app/components-react/editor/layouts/hooks.tsx b/app/components-react/editor/layouts/hooks.tsx index 132717d3eff3..998dea26ae18 100644 --- a/app/components-react/editor/layouts/hooks.tsx +++ b/app/components-react/editor/layouts/hooks.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo, useState } from 'react'; +import React, { useEffect, useMemo, useState, useCallback, useRef } from 'react'; import { LayoutSlot, IVec2Array } from 'services/layout'; import { useVuex } from 'components-react/hooks'; import { Services } from 'components-react/service-provider'; @@ -17,7 +17,6 @@ export interface IResizeMins { export interface ILayoutSlotArray extends Array {} export default function useLayout( - component: HTMLDivElement | null, vectors: ILayoutSlotArray, isColumns: boolean, childrenMins: Dictionary, @@ -46,16 +45,22 @@ export default function useLayout( }, []); useEffect(() => { - console.log('firing', !!component); - if (!component) return; onTotalWidth(mapVectors(vectors), isColumns); - - window.addEventListener('resize', () => updateSize()); updateSize(); - return () => { + }, [chatCollapsed]); + + const componentEl = useRef(null); + + const componentRef = useCallback(node => { + if (node) { + componentEl.current = node; + onTotalWidth(mapVectors(vectors), isColumns); + window.addEventListener('resize', () => updateSize()); + updateSize(); + } else { window.removeEventListener('resize', () => updateSize()); - }; - }, [component, chatCollapsed]); + } + }, []); function vectorsToSlots() { const slotArray: Array = []; @@ -67,18 +72,18 @@ export default function useLayout( } function getBarPixels(bar: 'bar1' | 'bar2', offset: number) { - if (!component) return; + if (!componentEl.current) return; // Migrate from pixels to proportions if ((resizes[bar] as number) >= 1) setBar(bar, resizes[bar] as number); - const { height, width } = component.getBoundingClientRect(); + const { height, width } = componentEl.current.getBoundingClientRect(); const offsetSize = isColumns ? width - offset : height; return Math.round(offsetSize * (resizes[bar] as number)); } function setBar(bar: 'bar1' | 'bar2', val: number) { - if (val === 0 || !component) return; + if (val === 0 || !componentEl.current) return; setBars({ ...bars, [bar]: val }); - const { height, width } = component.getBoundingClientRect(); + const { height, width } = componentEl.current.getBoundingClientRect(); const totalSize = isColumns ? width : height; const proportion = parseFloat((val / totalSize).toFixed(2)); LayoutService.actions.setBarResize(bar, proportion); @@ -121,11 +126,11 @@ export default function useLayout( } function calculateMax(restMin: number) { - if (!component) return 0; - const { height, width } = component.getBoundingClientRect(); + if (!componentEl.current) return 0; + const { height, width } = componentEl.current.getBoundingClientRect(); const max = isColumns ? width : height; return max - restMin; } - return { calculateMax, setBar, mins, bars, resizes }; + return { componentRef, calculateMax, setBar, mins, bars, resizes }; }