refactor(client): image-loader to TypeScript

client/package-lock.json

@@ -5805,6 +5805,14 @@
         }
       }
     },
+    "@types/react-lazyload": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/react-lazyload/-/react-lazyload-3.1.0.tgz",
+      "integrity": "sha512-JnVJb+6cUrIk4Fo/zc/4NuFtm0h3XeNlN4Gt++WEHGeUDtlhnF1lXRz0WoqNmh5gH3oyeYOJXIZ8MoPL9ehp0g==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-spinkit": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/@types/react-spinkit/-/react-spinkit-3.0.6.tgz",

client/src/components/helpers/image-loader.tsx

@@ -1,20 +1,21 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import React, { useState } from 'react';
 
 import './image-loader.css';
+// @ts-ignore
 import LazyLoad from 'react-lazy-load';
-import PropTypes from 'prop-types';
 
-const propTypes = {
+interface ImageLoaderProps {
-  alt: PropTypes.string,
+  alt?: string;
-  className: PropTypes.string,
+  className?: string;
-  height: PropTypes.number,
+  height?: number;
-  loadedClassName: PropTypes.string,
+  loadedClassName?: string;
-  loadingClassName: PropTypes.string,
+  loadingClassName?: string;
-  offsetVertical: PropTypes.number,
+  offsetVertical?: number;
-  src: PropTypes.string,
+  src?: string;
-  style: PropTypes.object,
+  style?: React.CSSProperties;
-  width: PropTypes.number
+  width?: number;
-};
+}
 
 const ImageLoader = ({
   className = '',
@@ -26,7 +27,7 @@ const ImageLoader = ({
   style,
   width,
   height
-}) => {
+}: ImageLoaderProps): JSX.Element => {
   const [loaded, setLoaded] = useState(false);
   const fullClassName = `${className} ${
     loaded ? loadedClassName : loadingClassName
@@ -49,5 +50,5 @@ const ImageLoader = ({
     </LazyLoad>
   );
 };
-ImageLoader.propTypes = propTypes;
+
 export default ImageLoader;

client/src/components/helpers/index.js

@@ -6,6 +6,6 @@ export { default as SkeletonSprite } from './skeleton-sprite';
 export { default as Spacer } from './spacer';
 export { default as Link } from './link';
 export { default as CurrentChallengeLink } from './CurrentChallengeLink';
-export { default as ImageLoader } from './ImageLoader';
+export { default as ImageLoader } from './image-loader';
 export { default as AvatarRenderer } from './AvatarRenderer';
 export { default as borderColorPicker } from './borderColorPicker';