refactor: move joinArray & parseDate to utils (freeCodeCamp#54240)

client/src/components/profile/components/camper.tsx

@@ -1,24 +1,16 @@
 import { faAward, faCalendar } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
-import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { Col, Row } from '@freecodecamp/ui';
-
-import envData from '../../../../config/env.json';
-import { getLangCode } from '../../../../../shared/config/i18n';
 import type { User } from '../../../redux/prop-types';
 import { AvatarRenderer } from '../../helpers';
 import Link from '../../helpers/link';
 import SupporterBadge from '../../../assets/icons/supporter-badge';
 import SocialIcons from './social-icons';
-
+import { formatYears, parseDate } from './utils';
 import './camper.css';
 
-const { clientLocale } = envData;
-
-const localeCode = getLangCode(clientLocale);
-
 export type CamperProps = Pick<
   User,
   | 'about'
@@ -35,29 +27,6 @@ export type CamperProps = Pick<
   | 'joinDate'
 >;
 
-function joinArray(array: string[], t: TFunction): string {
-  return array.reduce((string, item, index, array) => {
-    if (string.length > 0) {
-      if (index === array.length - 1) {
-        return `${string} ${t('misc.and')} ${item}`;
-      } else {
-        return `${string}, ${item}`;
-      }
-    } else {
-      return item;
-    }
-  });
-}
-
-function parseDate(joinDate: string, t: TFunction): string {
-  const convertedJoinDate = new Date(joinDate);
-  const date = convertedJoinDate.toLocaleString([localeCode, 'en-US'], {
-    year: 'numeric',
-    month: 'long'
-  });
-  return t('profile.joined', { date: date });
-}
-
 function Camper({
   name,
   username,
@@ -117,7 +86,7 @@ function Camper({
               {t('profile.contributor')}
             </Link>
           </p>
-          <p className='text-center'>{joinArray(yearsTopContributor, t)}</p>
+          <p className='text-center'>{formatYears(yearsTopContributor, t)}</p>
         </div>
       )}
       <br />

client/src/components/profile/components/utils/index.ts

@@ -0,0 +1 @@
+export { parseDate, formatYears } from './utils';

client/src/components/profile/components/utils/utils.ts

@@ -0,0 +1,31 @@
+import type { TFunction } from 'i18next';
+import { getLangCode } from '../../../../../../shared/config/i18n';
+import envData from '../../../../../config/env.json';
+const { clientLocale } = envData;
+
+const localeCode = getLangCode(clientLocale);
+
+const formatYears = (array: string[], t: TFunction): string => {
+  return array.reduce((string, item, index, array) => {
+    if (string.length > 0) {
+      if (index === array.length - 1) {
+        return `${string} ${t('misc.and')} ${item}`;
+      } else {
+        return `${string}, ${item}`;
+      }
+    } else {
+      return item;
+    }
+  });
+};
+
+const parseDate = (joinDate: string, t: TFunction): string => {
+  const convertedJoinDate = new Date(joinDate);
+  const date = convertedJoinDate.toLocaleString([localeCode, 'en-US'], {
+    year: 'numeric',
+    month: 'long'
+  });
+  return t('profile.joined', { date: date });
+};
+
+export { formatYears, parseDate };