From be87c97f31dc024cea6806d76d1cce15445e64f3 Mon Sep 17 00:00:00 2001
From: Lebaud Antoine <lebaud.antoine131@gmail.com>
Date: Wed, 14 Jun 2023 14:03:46 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(react)=20refactor=20dupplica?=
 =?UTF-8?q?ted=20formatter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Make sure every date formatter has the same time zone by encapsulating
it in a factored custom hook. Reorganize component to gain
in readability and improve maintainability.
---
 .../components/Forms/DatePicker/Calendar.tsx  | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/packages/react/src/components/Forms/DatePicker/Calendar.tsx b/packages/react/src/components/Forms/DatePicker/Calendar.tsx
index 66d2cb9..b099997 100644
--- a/packages/react/src/components/Forms/DatePicker/Calendar.tsx
+++ b/packages/react/src/components/Forms/DatePicker/Calendar.tsx
@@ -6,7 +6,11 @@ import {
   GregorianCalendar,
   toCalendar,
 } from "@internationalized/date";
-import { useDateFormatter, useLocale } from "@react-aria/i18n";
+import {
+  DateFormatterOptions,
+  useDateFormatter,
+  useLocale,
+} from "@react-aria/i18n";
 import { useCalendarState } from "@react-stately/calendar";
 import { useCalendar } from "@react-aria/calendar";
 import {
@@ -82,33 +86,29 @@ export const Calendar = ({
   ...props
 }: CalendarSubProps) => {
   const { locale } = useLocale();
+  const { t } = useCunningham();
+  const ref = useRef(null);
 
   const state = useCalendarState({
     ...props,
     locale,
     createCalendar,
   });
-
-  const ref = useRef(null);
   const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(
     props,
     state
   );
 
-  const monthItemsFormatter = useDateFormatter({
-    month: "long",
-    timeZone: state.timeZone,
-  });
+  const useTimeZoneFormatter = (formatOptions: DateFormatterOptions) => {
+    return useDateFormatter({
+      ...formatOptions,
+      timeZone: state.timeZone,
+    });
+  };
 
-  const selectedMonthItemFormatter = useDateFormatter({
-    month: "short",
-    timeZone: state.timeZone,
-  });
-
-  const yearItemsFormatter = useDateFormatter({
-    year: "numeric",
-    timeZone: state.timeZone,
-  });
+  const monthItemsFormatter = useTimeZoneFormatter({ month: "long" });
+  const selectedMonthItemFormatter = useTimeZoneFormatter({ month: "short" });
+  const yearItemsFormatter = useTimeZoneFormatter({ year: "numeric" });
 
   const monthItems: Array<Option> = useMemo(() => {
     // Note that in some calendar systems, such as the Hebrew, the number of months may differ between years.
@@ -151,7 +151,6 @@ export const Calendar = ({
     });
   }, [state.focusedDate, state.timeZone, state.maxValue, state.minValue]);
 
-  const { t } = useCunningham();
   const useDownshiftSelect = (
     key: string,
     items: Array<Option>