Task/wp 862 edit modal (#424)

* Fix: Approved Expiration date field in edit modal does not match the input. * Reverting some changes to test Sophia Massie-Pérez fix related to this fields * Fix: Approved Expiration date discrepancy * String to Date formating, refactor * Update method name --------- Co-authored-by: Chandra Y <[email protected]>
TACC · Feb 14, 2025 · bb177c5 · bb177c5
1 parent 21da26d
commit bb177c5
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 12 deletions.
diff --git a/apcd_cms/src/client/src/components/Admin/Extensions/AdminExtensions.tsx b/apcd_cms/src/client/src/components/Admin/Extensions/AdminExtensions.tsx
@@ -6,7 +6,7 @@ import Paginator from 'core-components/Paginator';
 import styles from './ExtensionList.module.css';
 import ViewExtensionModal from 'apcd-components/Extensions/ViewExtensionModal/ViewExtensionModal';
 import EditExtensionModal from 'apcd-components/Extensions/EditExtensionModal/EditExtensionModal';
-import { formatDate } from 'utils/dateUtil';
+import { formatDate, formatUTCDate } from 'utils/dateUtil';
 import { ClearOptionsButton } from 'apcd-components/ClearOptionsButton';
 
 export const AdminExtensions: React.FC = () => {
@@ -134,7 +134,7 @@ export const AdminExtensions: React.FC = () => {
                 <td>{row.type}</td>
                 <td>{row.ext_outcome}</td>
                 <td>{row.ext_status}</td>
-                <td>{formatDate(row.approved_expiration_date)}</td>
+                <td>{formatUTCDate(row.approved_expiration_date)}</td>
                 <td className="modal-cell">
                   <select
                     id={`actionsDropdown_${row.ext_id}`}

diff --git a/apcd_cms/src/client/src/components/Admin/ViewExceptionModal/ViewExceptionModal.tsx b/apcd_cms/src/client/src/components/Admin/ViewExceptionModal/ViewExceptionModal.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Modal, ModalHeader, ModalBody, Row, Col } from 'reactstrap';
 import { ExceptionRow } from 'hooks/admin';
-import { formatModalDate } from 'utils/dateUtil';
+import { formatUTCDate } from 'utils/dateUtil';
 import styles from './ViewExceptionModal.module.css';
 
 export const ViewExceptionModal: React.FC<{
@@ -50,7 +50,7 @@ export const ViewExceptionModal: React.FC<{
             <Row>
               <Col md={{ size: 4, offset: 1 }}>Created</Col>
               <Col md={7}>
-                {(created_at && formatModalDate(created_at)) || 'None'}
+                {(created_at && formatUTCDate(created_at)) || 'None'}
               </Col>
             </Row>
             <Row>

diff --git a/apcd_cms/src/client/src/components/Extensions/EditExtensionModal/EditExtensionModal.tsx b/apcd_cms/src/client/src/components/Extensions/EditExtensionModal/EditExtensionModal.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Modal, ModalBody, ModalHeader, Row, Col, Alert } from 'reactstrap';
 import { Field, useFormik, FormikHelpers, FormikProvider } from 'formik';
 import { fetchUtil } from 'utils/fetchUtil';
-import { formatDate } from 'utils/dateUtil';
+import { formatDate, formatUTCDate } from 'utils/dateUtil';
 import * as Yup from 'yup';
 import { ExtensionRow } from 'hooks/admin';
 import { useSubmitterDataPeriods } from 'hooks/entities';
@@ -115,8 +115,9 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
       value:
         currentExtension?.approved_expiration_date &&
         currentExtension?.approved_expiration_date !== 'None'
-          ? formatDate(currentExtension?.requested_target_date)
-          : 'None',
+          ? formatUTCDate(currentExtension?.approved_expiration_date)
+          : 'None'
+        + 'currentExtension?.approved_expiration_date',
     },
     {
       label: 'Extension Justification',

diff --git a/apcd_cms/src/client/src/utils/dateUtil.ts b/apcd_cms/src/client/src/utils/dateUtil.ts
@@ -14,11 +14,19 @@ export const formatDate = (dateString: string | number | Date): string => {
   }).format(date);
 };
 
-export const formatModalDate = (dateString: string | number | Date): string => {
-  return formatDate(dateString)
-    .replace('.', '')
-    .replace('AM', 'a.m.')
-    .replace('PM', 'p.m.');
+export const formatUTCDate = (dateString: string | number | Date): string => {
+  const date = new Date(dateString);
+
+  if (isNaN(date.getTime())) {
+    return '';
+  }
+
+  return new Intl.DateTimeFormat('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    timeZone: 'UTC'
+  }).format(date);
 };
 
 /**