From 932f803941baa690bb3127d8161185b537e642a4 Mon Sep 17 00:00:00 2001
From: Vojimirovich <vojimir.cirovic.bloxico@gmail.com>
Date: Thu, 7 Nov 2024 10:51:36 +0100
Subject: [PATCH] fix: ga modal showing wrong date

---
 .../Modals/PreviewReasoningModal.tsx          |  5 +--
 frontend/src/lib/utils/date.ts                | 43 +++++++++++--------
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/organisms/Modals/PreviewReasoningModal.tsx b/frontend/src/components/organisms/Modals/PreviewReasoningModal.tsx
index 8edb512d..53937966 100644
--- a/frontend/src/components/organisms/Modals/PreviewReasoningModal.tsx
+++ b/frontend/src/components/organisms/Modals/PreviewReasoningModal.tsx
@@ -55,7 +55,6 @@ export const PreviewReasoningModal = () => {
   }, [govAction.id]);
 
   if (!govMetadata) return null;
-
   return (
     <ModalWrapper dataTestId="preview-reasoning-modal" sx={{ py: 3, px: 0 }}>
       <ModalHeader sx={{ px: 3 }}>
@@ -182,7 +181,7 @@ export const PreviewReasoningModal = () => {
             variant="caption"
             data-testid="governance-action-modal-submit-time"
           >
-            {formatDisplayDate(govAction.submit_time)}
+            {formatDisplayDate(govMetadata.submit_time)}
           </Typography>
         </Box>
       )}
@@ -205,7 +204,7 @@ export const PreviewReasoningModal = () => {
             variant="caption"
             data-testid="governance-action-modal-end-time"
           >
-            {formatDisplayDate(govAction.end_time)}
+            {formatDisplayDate(govMetadata.end_time)}
           </Typography>
         </Box>
       )}
diff --git a/frontend/src/lib/utils/date.ts b/frontend/src/lib/utils/date.ts
index 9fb6aacc..b30e7bae 100644
--- a/frontend/src/lib/utils/date.ts
+++ b/frontend/src/lib/utils/date.ts
@@ -1,27 +1,32 @@
-import { format } from "date-fns";
+import { format, parseISO } from "date-fns";
 /**
  * Formats a given date into a specified display format.
  *
- * The function converts the input date into a string representation according to
- * the specified format. By default, it uses the "d.MM.yyyy" format, but a different
- * format can be provided if needed.
+ * The function converts the input date string into a date object and then formats it
+ * according to the "do LLL yyyy" format, which will display the date in the format
+ * "23rd Aug 2024".
  *
- * @param date - The date to format. This can be a string or a `Date` object.
- * @param outputFormat - The format string that specifies the desired output format.
- *                        Defaults to "d.MM.yyyy" if not specified.
- * @returns A string representing the formatted date based on the `outputFormat`.
+ * @param dateString - The date string to format. This should be in the ISO 8601 format
+ *                     (e.g., "2024-08-23T04:08:06.000Z").
+ * @returns A string representing the formatted date.
  *
  * @example
- * formatDisplayDate("2024-08-05");
- * // Returns "5.08.2024" (using default format)
+ * formatDisplayDate("2024-08-23T04:08:06.000Z");
+ * // Returns "23rd Aug 2024"
  *
- * formatDisplayDate(new Date(), "yyyy/MM/dd");
- * // Returns "2024/08/05" (current date in specified format)
- *
- * formatDisplayDate("2024-08-05", "MMMM d, yyyy");
- * // Returns "August 5, 2024"
+ * formatDisplayDate("invalid date");
+ * // Returns "Invalid date"
  */
-export const formatDisplayDate = (
-  date: string | Date,
-  outputFormat = "d.MM.yyyy"
-) => format(new Date(date), outputFormat).toString();
+export function formatDisplayDate(dateString: string): string {
+  if (!dateString) {
+    return "Invalid date";
+  }
+
+  try {
+    const date = parseISO(dateString);
+    return format(date, "do LLL yyyy");
+  } catch (error) {
+    console.error("Error parsing date:", error);
+    return "Invalid date";
+  }
+}