From 78406d55e7585575603f5fc0190405b09ecc34b3 Mon Sep 17 00:00:00 2001
From: Marlon Johnson <johnsonmarlon18@gmail.com>
Date: Mon, 21 Jun 2021 14:17:27 -0700
Subject: [PATCH] refactor(client): avatar-renderer to TypeScript

---
 ...{AvatarRenderer.js => avatar-renderer.tsx} | 33 +++++++++++--------
 client/src/components/helpers/index.js        |  2 +-
 2 files changed, 20 insertions(+), 15 deletions(-)
 rename client/src/components/helpers/{AvatarRenderer.js => avatar-renderer.tsx} (52%)

diff --git a/client/src/components/helpers/AvatarRenderer.js b/client/src/components/helpers/avatar-renderer.tsx
similarity index 52%
rename from client/src/components/helpers/AvatarRenderer.js
rename to client/src/components/helpers/avatar-renderer.tsx
index 21246ee786..854cc35421 100644
--- a/client/src/components/helpers/AvatarRenderer.js
+++ b/client/src/components/helpers/avatar-renderer.tsx
@@ -1,26 +1,32 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Image } from '@freecodecamp/react-bootstrap';
 import DefaultAvatar from '../../assets/icons/DefaultAvatar';
 import { defaultUserImage } from '../../../../config/misc';
-import { borderColorPicker } from '../helpers';
+import { borderColorPicker } from '.';
 import { useTranslation } from 'react-i18next';
 
-const propTypes = {
-  isDonating: PropTypes.bool,
-  isTopContributor: PropTypes.bool,
-  picture: PropTypes.any.isRequired,
-  userName: PropTypes.string.isRequired
-};
+interface AvatarRendererProps {
+  isDonating: boolean;
+  isTopContributor: boolean;
+  picture: unknown;
+  userName: string;
+}
 
-function AvatarRenderer({ picture, userName, isDonating, isTopContributor }) {
+function AvatarRenderer({
+  picture,
+  userName,
+  isDonating,
+  isTopContributor
+}: AvatarRendererProps): JSX.Element {
   const { t } = useTranslation();
-  let borderColor = borderColorPicker(isDonating, isTopContributor);
-  let isPlaceHolderImage =
-    /example.com|identicon.org/.test(picture) || picture === defaultUserImage;
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  const borderColor: unknown = borderColorPicker(isDonating, isTopContributor);
+  const isPlaceHolderImage =
+    /example.com|identicon.org/.test(picture as string) ||
+    picture === defaultUserImage;
 
   return (
-    <div className={`avatar-container ${borderColor}`}>
+    <div className={`avatar-container ${borderColor as string}`}>
       {isPlaceHolderImage ? (
         <DefaultAvatar className='avatar default-avatar' />
       ) : (
@@ -35,6 +41,5 @@ function AvatarRenderer({ picture, userName, isDonating, isTopContributor }) {
   );
 }
 
-AvatarRenderer.propTypes = propTypes;
 AvatarRenderer.displayName = 'AvatarRenderer';
 export default AvatarRenderer;
diff --git a/client/src/components/helpers/index.js b/client/src/components/helpers/index.js
index 89b6d14887..a501903a0b 100644
--- a/client/src/components/helpers/index.js
+++ b/client/src/components/helpers/index.js
@@ -7,5 +7,5 @@ export { default as Spacer } from './spacer';
 export { default as Link } from './link';
 export { default as CurrentChallengeLink } from './current-challenge-link';
 export { default as ImageLoader } from './image-loader';
-export { default as AvatarRenderer } from './AvatarRenderer';
+export { default as AvatarRenderer } from './avatar-renderer';
 export { default as borderColorPicker } from './border-color-picker';