From 48e74c81f175b69c2baab665bdacc5ec94b51e6d Mon Sep 17 00:00:00 2001
From: Josh <Diddyy@users.noreply.github.com>
Date: Tue, 23 Jul 2024 00:53:38 +0100
Subject: [PATCH] Update TransitionAnimation.tsx

Refactor TransitionAnimation component to use refs and avoid deprecated findDOMNode

- Added useRef hook to reference the DOM node directly
- Passed nodeRef to the Transition component
- Simplified state management and useEffect hook
- Cleaned up props destructuring for clarity
- Set default empty string for className to simplify handling

This update ensures compatibility with future React releases and adheres to modern React best practices.
---
 .../transitions/TransitionAnimation.tsx       | 60 +++++++++----------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/common/transitions/TransitionAnimation.tsx b/src/common/transitions/TransitionAnimation.tsx
index 8e348497..54a4304b 100644
--- a/src/common/transitions/TransitionAnimation.tsx
+++ b/src/common/transitions/TransitionAnimation.tsx
@@ -1,9 +1,8 @@
-import { FC, ReactNode, useEffect, useState } from 'react';
-import { Transition } from 'react-transition-group';
-import { getTransitionAnimationStyle } from './TransitionAnimationStyles';
+import { FC, ReactNode, useEffect, useRef, useState } from "react";
+import { Transition } from "react-transition-group";
+import { getTransitionAnimationStyle } from "./TransitionAnimationStyles";
 
-interface TransitionAnimationProps
-{
+interface TransitionAnimationProps {
     type: string;
     inProp: boolean;
     timeout?: number;
@@ -11,42 +10,43 @@ interface TransitionAnimationProps
     children?: ReactNode;
 }
 
-export const TransitionAnimation: FC<TransitionAnimationProps> = props =>
-{
-    const { type = null, inProp = false, timeout = 300, className = null, children = null } = props;
+export const TransitionAnimation: FC<TransitionAnimationProps> = ({
+    type,
+    inProp,
+    timeout = 300,
+    className = "",
+    children,
+}) => {
+    const nodeRef = useRef<HTMLDivElement>(null);
+    const [isChildrenVisible, setChildrenVisible] = useState(false);
 
-    const [ isChildrenVisible, setChildrenVisible ] = useState(false);
+    useEffect(() => {
+        let timeoutId: ReturnType<typeof setTimeout> | null = null;
 
-    useEffect(() =>
-    {
-        let timeoutData: ReturnType<typeof setTimeout> = null;
-
-        if(inProp)
-        {
+        if (inProp) {
             setChildrenVisible(true);
-        }
-        else
-        {
-            timeoutData = setTimeout(() =>
-            {
+        } else {
+            timeoutId = setTimeout(() => {
                 setChildrenVisible(false);
-                clearTimeout(timeout);
             }, timeout);
         }
 
-        return () =>
-        {
-            if(timeoutData) clearTimeout(timeoutData);
+        return () => {
+            if (timeoutId) clearTimeout(timeoutId);
         };
-    }, [ inProp, timeout ]);
+    }, [inProp, timeout]);
 
     return (
-        <Transition in={ inProp } timeout={ timeout }>
-            { state => (
-                <div className={ (className ?? '') + ' animate__animated' } style={ { ...getTransitionAnimationStyle(type, state, timeout) } }>
-                    { isChildrenVisible && children }
+        <Transition nodeRef={nodeRef} in={inProp} timeout={timeout}>
+            {(state) => (
+                <div
+                    ref={nodeRef}
+                    className={`${className} animate__animated`}
+                    style={getTransitionAnimationStyle(type, state, timeout)}
+                >
+                    {isChildrenVisible && children}
                 </div>
-            ) }
+            )}
         </Transition>
     );
 };