fix(md): minor improvements based on feedback from #9269 (#9289)

spinnaker · Jun 4, 2021 · 75a3a25 · 75a3a25
1 parent c72702b
commit 75a3a25
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/app/scripts/modules/core/src/managed/environmentBaseElements/EnvironmentsRender.tsx b/app/scripts/modules/core/src/managed/environmentBaseElements/EnvironmentsRender.tsx
@@ -3,7 +3,7 @@ import { reverse } from 'lodash';
 import React from 'react';
 import { atom, useRecoilState } from 'recoil';
 
-import { useElementDimensions } from 'core/presentation/hooks/useDimensions.hook';
+import { useDimensions } from 'core/presentation/hooks/useDimensions.hook';
 import { logger } from 'core/utils';
 
 const STORAGE_KEY = 'MD_environmentsDirection';
@@ -25,7 +25,7 @@ const environmentsDirectionState = atom<Direction>({
 // The goal of this hook is to store the value in an atom to be shared across the app but also update the local storage
 const useEnvironmentDirection = () => {
   const [direction, setDirection] = useRecoilState(environmentsDirectionState);
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     localStorage.setItem(STORAGE_KEY, direction);
   }, [direction]);
 
@@ -56,7 +56,7 @@ interface IEnvironmentsRenderProps {
 export const EnvironmentsRender = ({ className, children }: IEnvironmentsRenderProps) => {
   const { direction } = useEnvironmentDirection();
   const ref = React.useRef(null);
-  const { width } = useElementDimensions({ ref, isActive: direction === 'sideBySide' });
+  const { width } = useDimensions(ref, { isActive: direction === 'sideBySide' });
   let numEnvironments = 1;
   if (Array.isArray(children)) {
     numEnvironments = children.length;

diff --git a/app/scripts/modules/core/src/presentation/hooks/useDimensions.hook.ts b/app/scripts/modules/core/src/presentation/hooks/useDimensions.hook.ts
@@ -4,15 +4,16 @@ import React from 'react';
 const getElementDimensions = (ref: React.RefObject<HTMLElement>) =>
   ref.current ? { width: ref.current.offsetWidth, height: ref.current.offsetHeight } : { width: 0, height: 0 };
 
-export const useElementDimensions = ({
-  ref,
-  delay = 200,
-  isActive = true,
-}: {
-  ref: React.RefObject<HTMLElement>;
-  delay?: number;
-  isActive?: boolean;
-}) => {
+export const useDimensions = (
+  ref: React.RefObject<HTMLElement>,
+  {
+    delay = 200,
+    isActive = true,
+  }: {
+    delay?: number;
+    isActive?: boolean;
+  },
+) => {
   const [dimension, setDimension] = React.useState(getElementDimensions(ref));
 
   React.useLayoutEffect(() => {