From e2a7741c0f79843d3f48c026d37d1d43e7a4ea63 Mon Sep 17 00:00:00 2001
From: ITurres <emanueliturres.co@gmail.com>
Date: Tue, 9 Apr 2024 22:21:35 -0300
Subject: [PATCH] Refactor: Migrate 'Animations' ES6 functional components to
 ES5

- 'AccessPageVideo.tsx'.
- 'Drone.tsx'.
- 'FloatingAstronaut.tsx'.
---
 src/components/animations/AccessPageVideo.tsx | 28 +++++----
 src/components/animations/Drone.tsx           |  4 +-
 .../animations/FloatingAstronaut.tsx          | 62 ++++++++++---------
 3 files changed, 50 insertions(+), 44 deletions(-)

diff --git a/src/components/animations/AccessPageVideo.tsx b/src/components/animations/AccessPageVideo.tsx
index a1266b7..5070f16 100644
--- a/src/components/animations/AccessPageVideo.tsx
+++ b/src/components/animations/AccessPageVideo.tsx
@@ -7,20 +7,22 @@ interface AccessPageVideoProps {
   $videoElement: RefObject<HTMLVideoElement> | null;
 }
 
-const AccessPageVideo: React.FC<AccessPageVideoProps> = ({ $videoElement }) => (
+function AccessPageVideo(props: AccessPageVideoProps): React.ReactElement {
+  const { $videoElement } = props;
   /* eslint-disable jsx-a11y/media-has-caption */
-  <video
-    playsInline
-    ref={$videoElement}
-    className="accessPage-video"
-    width="100%"
-  >
-    <source src={webmVideo} type="video/webm" />
-    <source src={mp4Video} type="video/mp4" />
-    Your browser does not support the video tag.
-  </video>
-  /* eslint-disable jsx-a11y/media-has-caption */
-);
+  return (
+    <video
+      playsInline
+      ref={$videoElement}
+      className="accessPage-video"
+      width="100%"
+    >
+      <source src={webmVideo} type="video/webm" />
+      <source src={mp4Video} type="video/mp4" />
+      Your browser does not support the video tag.
+    </video>
+  );
+}
 
 /* eslint-disable no-undef */
 
diff --git a/src/components/animations/Drone.tsx b/src/components/animations/Drone.tsx
index dd12078..1593d03 100644
--- a/src/components/animations/Drone.tsx
+++ b/src/components/animations/Drone.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import droneFile from '../../assets/images/gif/drone.gif';
 import '../../styles/animations/Drone.scss';
 
-const Drone: React.FC = () => {
+function Drone(): React.ReactElement {
   const [position, setPosition] = useState({ x: 0, y: 0 });
   const [firstMove, setFirstMove] = useState(false);
   const drone = useRef<HTMLImageElement>(null);
@@ -77,6 +77,6 @@ const Drone: React.FC = () => {
       }}
     />
   );
-};
+}
 
 export default Drone;
diff --git a/src/components/animations/FloatingAstronaut.tsx b/src/components/animations/FloatingAstronaut.tsx
index fa42d0d..e4bd332 100644
--- a/src/components/animations/FloatingAstronaut.tsx
+++ b/src/components/animations/FloatingAstronaut.tsx
@@ -25,35 +25,39 @@ interface FloatingAstronautProps {
   };
 }
 
-const FloatingAstronaut: React.FC<FloatingAstronautProps> = ({
-  animationSpeed,
-  maxWidth,
-  move,
-  scale,
-  rotation,
-}) => (
-  <img
-    src={floatingAstronaut}
-    alt=""
-    className="floating-astronaut"
-    aria-hidden="true"
-    style={
-      {
-        '--maxWidth': `${maxWidth}px`,
-        '--animationSpeed': `${animationSpeed}s`,
-        '--fromLeft': `${move?.fromLeft}px`,
-        '--fromRight': `${move?.fromRight}px`,
-        '--toLeft': `${move?.toLeft}%`,
-        '--toRight': `${move?.toRight}%`,
-        '--fromTop': `${move?.fromTop}px`,
-        '--toTop': `${move?.toTop}px`,
-        '--fromScale': `${scale?.fromScale}`,
-        '--toScale': `${scale?.toScale}`,
-        '--rotate': `${rotation?.rotate}deg`,
-      } as CSSProperties
-    }
-  />
-);
+function FloatingAstronaut(props: FloatingAstronautProps): React.ReactElement {
+  const {
+    animationSpeed,
+    maxWidth,
+    move,
+    scale,
+    rotation,
+  } = props;
+
+  return (
+    <img
+      src={floatingAstronaut}
+      alt=""
+      className="floating-astronaut"
+      aria-hidden="true"
+      style={
+        {
+          '--maxWidth': `${maxWidth}px`,
+          '--animationSpeed': `${animationSpeed}s`,
+          '--fromLeft': `${move?.fromLeft}px`,
+          '--fromRight': `${move?.fromRight}px`,
+          '--toLeft': `${move?.toLeft}%`,
+          '--toRight': `${move?.toRight}%`,
+          '--fromTop': `${move?.fromTop}px`,
+          '--toTop': `${move?.toTop}px`,
+          '--fromScale': `${scale?.fromScale}`,
+          '--toScale': `${scale?.toScale}`,
+          '--rotate': `${rotation?.rotate}deg`,
+        } as CSSProperties
+      }
+    />
+  );
+}
 
 FloatingAstronaut.defaultProps = {
   move: {