Refactor: Migrate 'Animations' ES6 functional components to ES5

- 'AccessPageVideo.tsx'. - 'Drone.tsx'. - 'FloatingAstronaut.tsx'.
ITurres · Apr 10, 2024 · e2a7741 · e2a7741
1 parent 8ab2f59
commit e2a7741
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 44 deletions.
diff --git 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
@@ -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
@@ -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: {