chore(client): refactor ImageLoader (#39691)

client/src/components/helpers/ImageLoader.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import './image-loader.css';
 import LazyLoad from 'react-lazy-load';
@@ -14,52 +14,35 @@ const propTypes = {
   width: PropTypes.number
 };
 
-class ImageLoader extends React.Component {
+const ImageLoader = ({
-  // initial state: image loaded stage
+  className = '',
-  state = {
+  loadedClassName = 'img-loaded',
-    loaded: false
+  loadingClassName = 'img-loading',
-  };
+  alt,
-
+  src,
-  // define our loading and loaded image classes
+  width,
-  static defaultProps = {
+  height
-    className: '',
+}) => {
-    loadingClassName: 'img-loading',
+  const [loaded, setLoaded] = useState(false);
-    loadedClassName: 'img-loaded'
+  const fullClassName = `${className} ${
-  };
+    loaded ? loadedClassName : loadingClassName
-
+  }`;
-  // image onLoad handler to update state to loaded
+  return (
-  onLoad = () => {
+    <LazyLoad
-    this.setState(() => ({ loaded: true }));
+      debounce={false}
-  };
+      height={height}
-
+      offsetVertical={100}
-  render() {
+      width={width}
-    let {
+    >
-      className,
+      {/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */}
-      loadedClassName,
+      <img
-      loadingClassName,
+        alt={alt}
-      alt,
+        className={fullClassName}
-      src,
+        onLoad={() => setLoaded(true)}
-      width,
+        src={src}
-      height
+      />
-    } = this.props;
+    </LazyLoad>
-
+  );
-    className = `${className} ${
+};
-      this.state.loaded ? loadedClassName : loadingClassName
-    }`;
-
-    return (
-      <LazyLoad
-        debounce={false}
-        height={height}
-        offsetVertical={100}
-        width={width}
-      >
-        {/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */}
-        <img alt={alt} className={className} onLoad={this.onLoad} src={src} />
-        {/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */}
-      </LazyLoad>
-    );
-  }
-}
 ImageLoader.propTypes = propTypes;
 export default ImageLoader;