diff --git a/src/components/Coaching/CoachingDetail/AppointmentResults/AppointmentResults.tsx b/src/components/Coaching/CoachingDetail/AppointmentResults/AppointmentResults.tsx index 06191dc8b..149e14538 100644 --- 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 = ({ 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 = ({ 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((total, period) => { return total + period[field]; }, 0) / data.appointmentResults.length : 0, - ]), + }), + {} as Record, ), [data], ); @@ -117,7 +113,11 @@ export const AppointmentResults: React.FC = ({ {t('Appointments')} {data?.appointmentResults.map(({ id, startDate }) => ( - {startDate && dayMonthFormat(DateTime.fromISO(startDate))} + {startDate && + dateFormatWithoutYear( + DateTime.fromISO(startDate), + locale, + )} ))} {t('Average')} diff --git a/src/components/Coaching/CoachingDetail/CoachingDetail.tsx b/src/components/Coaching/CoachingDetail/CoachingDetail.tsx index cf89ad3ce..c59093572 100644 --- 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/src/components/Coaching/CoachingDetail/MultilineSkeleton.test.tsx b/src/components/Shared/MultilineSkeleton.test.tsx similarity index 100% rename from src/components/Coaching/CoachingDetail/MultilineSkeleton.test.tsx rename to src/components/Shared/MultilineSkeleton.test.tsx diff --git a/src/components/Coaching/CoachingDetail/MultilineSkeleton.tsx b/src/components/Shared/MultilineSkeleton.tsx similarity index 100% rename from src/components/Coaching/CoachingDetail/MultilineSkeleton.tsx rename to src/components/Shared/MultilineSkeleton.tsx diff --git a/src/lib/intlFormat/index.ts b/src/lib/intlFormat/index.ts index fbf0a2fc2..320f0cc3d 100644 --- 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 index 43c91c7c1..05fd4261f 100644 --- 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,