push small updates for Spacer component merge

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' />
       ) : (

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>
   );

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 (

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;

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 {

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,

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;

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'