Address code review feedback

CruGlobal · Nov 13, 2023 · 9ea4cd5 · 9ea4cd5
1 parent 2d2a3b4
commit 9ea4cd5
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 25 deletions.
diff --git a/src/components/Coaching/CoachingDetail/AppointmentResults/AppointmentResults.tsx b/src/components/Coaching/CoachingDetail/AppointmentResults/AppointmentResults.tsx
@@ -16,9 +16,10 @@ import { useTranslation } from 'react-i18next';
 import theme from 'src/theme';
 import { useLocale } from 'src/hooks/useLocale';
 import { currencyFormat } from 'src/lib/intlFormat';
+import { dateFormatWithoutYear } from 'src/lib/intlFormat/intlFormat';
 import { useAppointmentResultsQuery } from './AppointmentResults.generated';
 import { CoachingPeriodEnum } from '../CoachingDetail';
-import { MultilineSkeleton } from '../MultilineSkeleton';
+import { MultilineSkeleton } from '../../../Shared/MultilineSkeleton';
 
 const RootContainer = styled(Paper)(({ theme }) => ({
   paddingTop: theme.spacing(1),
@@ -39,24 +40,18 @@ const AlignedTableCell = styled(TableCell)({
 
 interface AppointmentResultsProps {
   accountListId: string;
-  currency?: string;
   period: CoachingPeriodEnum;
+  currency?: string;
 }
 
 export const AppointmentResults: React.FC<AppointmentResultsProps> = ({
   accountListId,
-  currency,
   period,
+  currency,
 }) => {
   const { t } = useTranslation();
   const locale = useLocale();
 
-  const dayMonthFormat = (date: DateTime) =>
-    new Intl.DateTimeFormat(locale, {
-      day: 'numeric',
-      month: 'short',
-    }).format(date.toJSDate());
-
   const { data, loading } = useAppointmentResultsQuery({
     variables: {
       accountListId,
@@ -66,23 +61,24 @@ export const AppointmentResults: React.FC<AppointmentResultsProps> = ({
 
   const averages = useMemo(
     () =>
-      Object.fromEntries(
-        [
-          'appointmentsScheduled',
-          'individualAppointments',
-          'monthlyDecrease',
-          'monthlyIncrease',
-          'newMonthlyPartners',
-          'newSpecialPledges',
-          'specialGifts',
-        ].map((field) => [
-          field,
-          data
+      [
+        'appointmentsScheduled',
+        'individualAppointments',
+        'monthlyDecrease',
+        'monthlyIncrease',
+        'newMonthlyPartners',
+        'newSpecialPledges',
+        'specialGifts',
+      ].reduce(
+        (averages, field) => ({
+          ...averages,
+          [field]: data
             ? data.appointmentResults.reduce<number>((total, period) => {
                 return total + period[field];
               }, 0) / data.appointmentResults.length
             : 0,
-        ]),
+        }),
+        {} as Record<string, number>,
       ),
     [data],
   );
@@ -117,7 +113,11 @@ export const AppointmentResults: React.FC<AppointmentResultsProps> = ({
                 <AlignedTableCell>{t('Appointments')}</AlignedTableCell>
                 {data?.appointmentResults.map(({ id, startDate }) => (
                   <AlignedTableCell key={id}>
-                    {startDate && dayMonthFormat(DateTime.fromISO(startDate))}
+                    {startDate &&
+                      dateFormatWithoutYear(
+                        DateTime.fromISO(startDate),
+                        locale,
+                      )}
                   </AlignedTableCell>
                 ))}
                 <AlignedTableCell>{t('Average')}</AlignedTableCell>

diff --git a/src/components/Coaching/CoachingDetail/CoachingDetail.tsx b/src/components/Coaching/CoachingDetail/CoachingDetail.tsx
@@ -19,7 +19,7 @@ import { useLocale } from 'src/hooks/useLocale';
 import DonationHistories from 'src/components/Dashboard/DonationHistories';
 import { useGetDonationGraphQuery } from 'src/components/Reports/DonationsReport/GetDonationGraph.generated';
 import { AppointmentResults } from './AppointmentResults/AppointmentResults';
-import { MultilineSkeleton } from './MultilineSkeleton';
+import { MultilineSkeleton } from '../../Shared/MultilineSkeleton';
 
 export enum CoachingPeriodEnum {
   Weekly = 'Weekly',

diff --git a/...CoachingDetail/MultilineSkeleton.test.tsx → ...ponents/Shared/MultilineSkeleton.test.tsx b/...CoachingDetail/MultilineSkeleton.test.tsx → ...ponents/Shared/MultilineSkeleton.test.tsx
diff --git a/...hing/CoachingDetail/MultilineSkeleton.tsx → src/components/Shared/MultilineSkeleton.tsx b/...hing/CoachingDetail/MultilineSkeleton.tsx → src/components/Shared/MultilineSkeleton.tsx
diff --git a/src/lib/intlFormat/index.ts b/src/lib/intlFormat/index.ts
@@ -3,6 +3,19 @@ import {
   percentageFormat,
   currencyFormat,
   dayMonthFormat,
+  monthYearFormat,
+  dateFormat,
+  dateFormatShort,
+  dateFormatWithoutYear,
 } from './intlFormat';
 
-export { numberFormat, percentageFormat, currencyFormat, dayMonthFormat };
+export {
+  numberFormat,
+  percentageFormat,
+  currencyFormat,
+  dayMonthFormat,
+  monthYearFormat,
+  dateFormat,
+  dateFormatShort,
+  dateFormatWithoutYear,
+};
diff --git a/src/lib/intlFormat/intlFormat.ts b/src/lib/intlFormat/intlFormat.ts
@@ -80,6 +80,20 @@ export const dateFormatShort = (date: DateTime, locale: string): string =>
     year: 'numeric',
   }).format(date.toJSDate());
 
+export const dateFormatWithoutYear = (
+  date: DateTime | null,
+  locale: string,
+): string => {
+  if (date === null) {
+    return '';
+  }
+  return new Intl.DateTimeFormat(locale, {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  }).format(date.toJSDate());
+};
+
 const intlFormat = {
   numberFormat,
   percentageFormat,