From 8abe1eafbc55d903755f881e12a828be92641cc9 Mon Sep 17 00:00:00 2001
From: Shaun Hamilton <shauhami020@gmail.com>
Date: Thu, 24 Jun 2021 16:16:19 +0000
Subject: [PATCH] push small updates for Spacer component merge

---
 client/src/components/helpers/avatar-renderer.tsx   | 10 ++++------
 .../components/helpers/current-challenge-link.tsx   |  9 +++------
 client/src/components/helpers/full-width-row.tsx    |  2 +-
 client/src/components/helpers/link.tsx              |  4 ++--
 client/src/components/helpers/skeleton-sprite.tsx   |  1 +
 client/src/components/helpers/slim-width-row.tsx    |  4 ++--
 client/src/components/helpers/spacer.tsx            | 13 +++++++------
 client/src/components/helpers/toggle-button.tsx     |  2 +-
 8 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/client/src/components/helpers/avatar-renderer.tsx b/client/src/components/helpers/avatar-renderer.tsx
index 7cf7f167b9..ad40555154 100644
--- a/client/src/components/helpers/avatar-renderer.tsx
+++ b/client/src/components/helpers/avatar-renderer.tsx
@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next';
 interface AvatarRendererProps {
   isDonating?: boolean;
   isTopContributor?: boolean;
-  picture: unknown;
+  picture: string;
   userName: string;
 }
 
@@ -19,14 +19,12 @@ function AvatarRenderer({
   isTopContributor
 }: AvatarRendererProps): JSX.Element {
   const { t } = useTranslation();
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-  const borderColor: unknown = borderColorPicker(isDonating, isTopContributor);
+  const borderColor: string = borderColorPicker(isDonating, isTopContributor);
   const isPlaceHolderImage =
-    /example.com|identicon.org/.test(picture as string) ||
-    picture === defaultUserImage;
+    /example.com|identicon.org/.test(picture) || picture === defaultUserImage;
 
   return (
-    <div className={`avatar-container ${borderColor as string}`}>
+    <div className={`avatar-container ${borderColor}`}>
       {isPlaceHolderImage ? (
         <DefaultAvatar className='avatar default-avatar' />
       ) : (
diff --git a/client/src/components/helpers/current-challenge-link.tsx b/client/src/components/helpers/current-challenge-link.tsx
index 23e4630530..176bfcceda 100644
--- a/client/src/components/helpers/current-challenge-link.tsx
+++ b/client/src/components/helpers/current-challenge-link.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import envData from '../../../../config/env.json';
 
 interface EnvData {
-  apiLocation?: string;
+  apiLocation: string;
 }
 
 const { apiLocation } = envData as EnvData;
@@ -14,7 +14,7 @@ function CurrentChallengeLink({
   children,
   isLargeBtn
 }: {
-  children?: React.ReactNode;
+  children?: JSX.ElementChildrenAttribute;
   isLargeBtn?: boolean;
 }): JSX.Element {
   let classNames;
@@ -24,10 +24,7 @@ function CurrentChallengeLink({
     classNames = 'btn btn-primary btn-block';
   }
   return (
-    <a
-      className={classNames}
-      href={`${apiLocation as string}${currentChallengeApi}`}
-    >
+    <a className={classNames} href={`${apiLocation}${currentChallengeApi}`}>
       {children}
     </a>
   );
diff --git a/client/src/components/helpers/full-width-row.tsx b/client/src/components/helpers/full-width-row.tsx
index dfb3d4de31..f7201a4b39 100644
--- a/client/src/components/helpers/full-width-row.tsx
+++ b/client/src/components/helpers/full-width-row.tsx
@@ -5,7 +5,7 @@ function FullWidthRow({
   children,
   className
 }: {
-  children?: React.ReactNode;
+  children?: JSX.ElementChildrenAttribute;
   className?: string;
 }): JSX.Element {
   return (
diff --git a/client/src/components/helpers/link.tsx b/client/src/components/helpers/link.tsx
index 14c76f7e2e..91739a7acb 100644
--- a/client/src/components/helpers/link.tsx
+++ b/client/src/components/helpers/link.tsx
@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { Link as GatsbyLink } from 'gatsby';
 
 interface LinkProps {
-  children?: ReactNode;
+  children?: JSX.ElementChildrenAttribute;
   external?: boolean;
   sameTab?: boolean;
   to: string;
diff --git a/client/src/components/helpers/skeleton-sprite.tsx b/client/src/components/helpers/skeleton-sprite.tsx
index 152045c716..d7401b2d2f 100644
--- a/client/src/components/helpers/skeleton-sprite.tsx
+++ b/client/src/components/helpers/skeleton-sprite.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import styles from './skeleton-styles';
 
+// TODO: unsure about parameter typing
 function SkeletonSprite({}: React.FC<
   React.ComponentPropsWithoutRef<'svg'>
 >): JSX.Element {
diff --git a/client/src/components/helpers/slim-width-row.tsx b/client/src/components/helpers/slim-width-row.tsx
index 95bcadb9d8..983b6fe10c 100644
--- a/client/src/components/helpers/slim-width-row.tsx
+++ b/client/src/components/helpers/slim-width-row.tsx
@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { Row, Col } from '@freecodecamp/react-bootstrap';
 
 interface SlimWidthRowProps {
-  children: ReactNode;
+  children: JSX.ElementChildrenAttribute;
 }
 function SlimWidthRow({
   children,
diff --git a/client/src/components/helpers/spacer.tsx b/client/src/components/helpers/spacer.tsx
index 10897de79c..b67cbd8e5d 100644
--- a/client/src/components/helpers/spacer.tsx
+++ b/client/src/components/helpers/spacer.tsx
@@ -6,18 +6,19 @@ interface SpacerProps {
 
 const styles = { padding: '15px 0', height: '1px' };
 
-const Comp: React.FC = ({ ...props }) => (
+const Comp = ({ ...props }): JSX.Element => (
   <div className='spacer' style={styles} {...props} />
 );
 
-const Spacer = ({ size = 1 }: SpacerProps): React.ReactNode =>
+const Spacer = ({ size = 1 }: SpacerProps): JSX.Element =>
   size === 1 ? (
     <Comp />
   ) : (
-    '#'
-      .repeat(size)
-      .split('')
-      .map((_, i) => <Comp key={`spacer_${i}`} />)
+    <>
+      {Array.from(Array(size), (_, i) => (
+        <Comp key={`spacer_${i}`} />
+      ))}
+    </>
   );
 
 export default Spacer;
diff --git a/client/src/components/helpers/toggle-button.tsx b/client/src/components/helpers/toggle-button.tsx
index 38a371832a..898cb28311 100644
--- a/client/src/components/helpers/toggle-button.tsx
+++ b/client/src/components/helpers/toggle-button.tsx
@@ -29,7 +29,7 @@ export default function ToggleButton({
   value,
   onLabel = 'On',
   offLabel = 'Off'
-}: ButtonProps): React.ReactNode {
+}: ButtonProps): JSX.Element {
   const checkIconStyle = {
     height: '15px',
     width: '20px'