refactor(file-tree): extract file tree resize hooks into hook file, wrap both hooks with useFileTreeResize, export the wrapper function and update main component file

Author: gustedeveloper

src/common/components/mock-components/front-rich-components/file-tree/file-tree-resize.hook.ts

@@ -0,0 +1,88 @@
+import { ElementSize, Size } from '@/core/model';
+import { useCanvasContext } from '@/core/providers';
+import { useEffect, useRef } from 'react';
+
+// Hook to resize edition text area based on content
+const useFileTreeResizeOnContentChange = (
+  id: string,
+  coords: { x: number; y: number },
+  text: string,
+  currentSize: Size,
+  calculatedSize: Size,
+  minHeight: number
+) => {
+  const previousText = useRef(text);
+  const { updateShapeSizeAndPosition } = useCanvasContext();
+
+  useEffect(() => {
+    // Only update if the text has changed AND the height is different
+    const textChanged = previousText.current !== text;
+
+    const finalHeight = Math.max(calculatedSize.height, minHeight);
+    const finalSize = { ...calculatedSize, height: finalHeight };
+
+    const heightChanged = finalHeight !== currentSize.height;
+
+    if (textChanged && heightChanged) {
+      previousText.current = text;
+      updateShapeSizeAndPosition(id, coords, finalSize, false);
+    }
+  }, [
+    text,
+    calculatedSize.height,
+    currentSize.height,
+    id,
+    coords.x,
+    coords.y,
+    updateShapeSizeAndPosition,
+  ]);
+};
+
+const useFileTreeResizeOnSizeChange = (
+  id: string,
+  coords: { x: number; y: number },
+  currentWidth: number,
+  size?: ElementSize
+) => {
+  const previousSize = useRef(size);
+  const { updateShapeSizeAndPosition } = useCanvasContext();
+
+  useEffect(() => {
+    // Only update if the size has changed
+    if (previousSize.current !== size) {
+      previousSize.current = size;
+
+      const newWidth = size === 'XS' ? 150 : 230;
+
+      if (currentWidth !== newWidth) {
+        updateShapeSizeAndPosition(
+          id,
+          coords,
+          { width: newWidth, height: currentWidth },
+          false
+        );
+      }
+    }
+  }, [size, currentWidth, id, coords.x, coords.y, updateShapeSizeAndPosition]);
+};
+
+export const useFileTreeResize = (
+  id: string,
+  coords: { x: number; y: number },
+  text: string,
+  currentSize: Size,
+  calculatedSize: Size,
+  minHeight: number,
+  size?: ElementSize
+) => {
+  useFileTreeResizeOnContentChange(
+    id,
+    coords,
+    text,
+    currentSize,
+    calculatedSize,
+    minHeight
+  );
+
+  useFileTreeResizeOnSizeChange(id, coords, currentSize.width, size);
+};

src/common/components/mock-components/front-rich-components/file-tree/file-tree.business.ts

@@ -1,8 +1,6 @@
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes';
 import { ElementSize, ShapeSizeRestrictions, Size } from '@/core/model';
 import { FONT_SIZE_VALUES } from '../../front-components/shape.const';
-import { useCanvasContext } from '@/core/providers';
-import { useEffect, useRef } from 'react';
 
 interface FileTreeSizeValues {
   fontSize: number;
@@ -147,67 +145,3 @@ export const calculateFileTreeDynamicSize = (
     finalHeight
   );
 };
-
-// Hook to resize edition text area based on content
-export const useFileTreeResizeOnContentChange = (
-  id: string,
-  coords: { x: number; y: number },
-  text: string,
-  currentSize: Size,
-  calculatedSize: Size,
-  minHeight: number
-) => {
-  const previousText = useRef(text);
-  const { updateShapeSizeAndPosition } = useCanvasContext();
-
-  useEffect(() => {
-    // Only update if the text has changed AND the height is different
-    const textChanged = previousText.current !== text;
-
-    const finalHeight = Math.max(calculatedSize.height, minHeight);
-    const finalSize = { ...calculatedSize, height: finalHeight };
-
-    const heightChanged = finalHeight !== currentSize.height;
-
-    if (textChanged && heightChanged) {
-      previousText.current = text;
-      updateShapeSizeAndPosition(id, coords, finalSize, false);
-    }
-  }, [
-    text,
-    calculatedSize.height,
-    currentSize.height,
-    id,
-    coords.x,
-    coords.y,
-    updateShapeSizeAndPosition,
-  ]);
-};
-
-export const useFileTreeResizeOnSizeChange = (
-  id: string,
-  coords: { x: number; y: number },
-  currentWidth: number,
-  size?: ElementSize
-) => {
-  const previousSize = useRef(size);
-  const { updateShapeSizeAndPosition } = useCanvasContext();
-
-  useEffect(() => {
-    // Only update if the size has changed
-    if (previousSize.current !== size) {
-      previousSize.current = size;
-
-      const newWidth = size === 'XS' ? 150 : 230;
-
-      if (currentWidth !== newWidth) {
-        updateShapeSizeAndPosition(
-          id,
-          coords,
-          { width: newWidth, height: currentWidth },
-          false
-        );
-      }
-    }
-  }, [size, currentWidth, id, coords.x, coords.y, updateShapeSizeAndPosition]);
-};

src/common/components/mock-components/front-rich-components/file-tree/file-tree.tsx

@@ -11,9 +11,8 @@ import {
   FileTreeItem,
   getFileTreeSizeValues,
   parseFileTreeText,
-  useFileTreeResizeOnContentChange,
-  useFileTreeResizeOnSizeChange,
 } from './file-tree.business';
+import { useFileTreeResize } from './file-tree-resize.hook';
 
 const fileTreeShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 150,
@@ -75,17 +74,16 @@ export const FileTreeShape = forwardRef<any, FileTreeShapeProps>(
       baseRestrictions: fileTreeShapeRestrictions,
     });
 
-    useFileTreeResizeOnContentChange(
+    useFileTreeResize(
       id,
       { x, y },
       text,
       { width, height },
       restrictedSize,
-      fileTreeShapeRestrictions.minHeight
+      fileTreeShapeRestrictions.minHeight,
+      otherProps?.size
     );
 
-    useFileTreeResizeOnSizeChange(id, { x, y }, width, otherProps?.size);
-
     const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
     const { stroke, strokeStyle, fill, textColor, borderRadius } =