From bb80df27db056cec69267af13fd27ad60444834f Mon Sep 17 00:00:00 2001
From: Chandra Y <cyemparala@tacc.utexas.edu>
Date: Fri, 1 Nov 2024 10:42:21 -0500
Subject: [PATCH] prettier run

---
 .../Admin/Extensions/AdminExtensions.tsx      | 138 +++++++++---------
 .../EditExtensionModal/EditExtensionModal.tsx |  97 ++++++------
 .../ViewExtensionModal/ViewExtensionModal.tsx | 105 +++++++------
 .../src/client/src/hooks/admin/useAdmin.ts    |   6 +-
 4 files changed, 182 insertions(+), 164 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
index 509a4b00..4e60902a 100644
--- a/apcd-cms/src/client/src/components/Admin/Extensions/AdminExtensions.tsx
+++ b/apcd-cms/src/client/src/components/Admin/Extensions/AdminExtensions.tsx
@@ -8,19 +8,22 @@ import ViewExtensionModal from 'apcd-components/Extensions/ViewExtensionModal/Vi
 import EditExtensionModal from 'apcd-components/Extensions/EditExtensionModal/EditExtensionModal';
 import { formatDate } from 'utils/dateUtil';
 
-
 export const AdminExtensions: React.FC = () => {
   const [status, setStatus] = useState('All');
   const [org, setOrg] = useState('All');
   const [page, setPage] = useState(1);
-  const { data, isLoading, isError, refetch } = useExtensions(status, org, page);
+  const { data, isLoading, isError, refetch } = useExtensions(
+    status,
+    org,
+    page
+  );
   const [isViewModalOpen, setIsViewModalOpen] = useState(false);
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
 
-    const [selectedExtension, setSelectedExtension] =
+  const [selectedExtension, setSelectedExtension] =
     useState<ExtensionRow | null>(null);
 
-console.log(data);
+  console.log(data);
 
   const clearSelections = () => {
     setStatus('');
@@ -32,19 +35,19 @@ console.log(data);
     refetch();
   }, [status, org, page, refetch]);
 
-   if (isLoading) {
-    return <LoadingSpinner/>;
+  if (isLoading) {
+    return <LoadingSpinner />;
   }
 
   if (isError) {
-      return (
-          <SectionMessage type="error">
-            There was an error loading the page.{''}
-            <a href="https://txapcd.org/workbench/dashboard/tickets/create">
-              Please submit a ticket.
-            </a>
-          </SectionMessage>
-          );
+    return (
+      <SectionMessage type="error">
+        There was an error loading the page.{''}
+        <a href="https://txapcd.org/workbench/dashboard/tickets/create">
+          Please submit a ticket.
+        </a>
+      </SectionMessage>
+    );
   }
 
   const openAction = (
@@ -53,24 +56,21 @@ console.log(data);
   ) => {
     const actionsDropdown = event.target;
     const selectedOption = actionsDropdown.value;
-    setSelectedExtension(
-      data?.page.find((x) => x.ext_id === ext_id) ?? null
-    );
+    setSelectedExtension(data?.page.find((x) => x.ext_id === ext_id) ?? null);
     if (selectedOption == 'viewExtension') {
       setIsViewModalOpen(true);
     } else if (selectedOption == 'editExtension') {
-        setIsEditModalOpen(true);
+      setIsEditModalOpen(true);
     }
     actionsDropdown.selectedIndex = 0;
   };
 
-
   return (
-      <div>
-              <h1>View Extension Requests</h1>
-  <p >All submitted extension requests</p>
-  <hr />
-         <div className="filter-container">
+    <div>
+      <h1>View Extension Requests</h1>
+      <p>All submitted extension requests</p>
+      <hr />
+      <div className="filter-container">
         <div className="filter-content">
           {/* Filter */}
           <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
@@ -114,63 +114,63 @@ console.log(data);
           </div>
         </div>
       </div>
-    <table id="extensionTable" className="extension-table">
-      <thead>
-        <tr>
-          {data?.header.map((columnName: string, index: number) => (
-            <th key={index}>{columnName}</th>
-          ))}
-        </tr>
-      </thead>
-      <tbody>
-        {data?.page.map((row: ExtensionRow, rowIndex: number) => (
-          <tr key={rowIndex}>
-            <td>{formatDate(row.created)}</td>
-            <td>{row.org_name}</td>
-            <td>{row.requestor}</td>
-            <td>{row.type}</td>
-            <td>{row.ext_outcome}</td>
-            <td>{row.ext_status}</td>
-            <td>{formatDate(row.approved_expiration_date)}</td>
-            <td className="modal-cell">
+      <table id="extensionTable" className="extension-table">
+        <thead>
+          <tr>
+            {data?.header.map((columnName: string, index: number) => (
+              <th key={index}>{columnName}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data?.page.map((row: ExtensionRow, rowIndex: number) => (
+            <tr key={rowIndex}>
+              <td>{formatDate(row.created)}</td>
+              <td>{row.org_name}</td>
+              <td>{row.requestor}</td>
+              <td>{row.type}</td>
+              <td>{row.ext_outcome}</td>
+              <td>{row.ext_status}</td>
+              <td>{formatDate(row.approved_expiration_date)}</td>
+              <td className="modal-cell">
                 <select
                   id={`actionsDropdown_${row.ext_id}`}
                   defaultValue=""
                   className="status-filter"
                   onChange={(e) => openAction(e, row.ext_id)}
                 >
-                <option value="">Select Action</option>
-                <option value="viewExtension">View Record</option>
-                <option value="editExtension">Edit Record</option>
-              </select>
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-    <div className={styles.paginatorContainer}>
+                  <option value="">Select Action</option>
+                  <option value="viewExtension">View Record</option>
+                  <option value="editExtension">Edit Record</option>
+                </select>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div className={styles.paginatorContainer}>
         <Paginator
           pages={data?.total_pages ?? 0}
           current={data?.page_num ?? 0}
           callback={setPage}
         />
         {selectedExtension && (
-        <>
-          <ViewExtensionModal
-            extension={selectedExtension}
-            isVisible={isViewModalOpen}
-            onClose={() => setIsViewModalOpen(false)}
-          />
-          <EditExtensionModal
-            extension={selectedExtension}
-            statusOptions={data?.status_edit_options}
-            outcomeOptions={data?.outcome_edit_options}
-            isVisible={isEditModalOpen}
-            onClose={() => setIsEditModalOpen(false)}
-          />
-        </>
-      )}
-      </div>
+          <>
+            <ViewExtensionModal
+              extension={selectedExtension}
+              isVisible={isViewModalOpen}
+              onClose={() => setIsViewModalOpen(false)}
+            />
+            <EditExtensionModal
+              extension={selectedExtension}
+              statusOptions={data?.status_edit_options}
+              outcomeOptions={data?.outcome_edit_options}
+              isVisible={isEditModalOpen}
+              onClose={() => setIsEditModalOpen(false)}
+            />
+          </>
+        )}
       </div>
+    </div>
   );
 };
diff --git a/apcd-cms/src/client/src/components/Extensions/EditExtensionModal/EditExtensionModal.tsx b/apcd-cms/src/client/src/components/Extensions/EditExtensionModal/EditExtensionModal.tsx
index 769a6aff..1683842d 100644
--- a/apcd-cms/src/client/src/components/Extensions/EditExtensionModal/EditExtensionModal.tsx
+++ b/apcd-cms/src/client/src/components/Extensions/EditExtensionModal/EditExtensionModal.tsx
@@ -54,14 +54,19 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
   const [showErrorMessage, setShowErrorMessage] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
   const [userFields, setUserFields] = useState([
-    { label: 'Applicable Data Period', value: extension?.applicable_data_period || 'None' },
-    { label: 'Approved Expiration Date', value: extension?.approved_expiration_date || 'None' },
+    {
+      label: 'Applicable Data Period',
+      value: extension?.applicable_data_period || 'None',
+    },
+    {
+      label: 'Approved Expiration Date',
+      value: extension?.approved_expiration_date || 'None',
+    },
     { label: 'Exception Status', value: extension?.ext_status },
     { label: 'Exception Outcome', value: extension?.ext_outcome },
     { label: 'Exception Notes', value: extension?.notes || 'None' },
   ]);
 
-
   if (!extension) return null;
 
   // Use the custom hook to get form fields and validation
@@ -100,13 +105,18 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
       if (onEditSuccess && response) {
         onEditSuccess(response);
         setUserFields([
-          { label: 'Applicable Data Period', value: values.applicable_data_period || 'None' },
-          { label: 'Approved Expiration Date', value: values.approved_expiration_date || 'None' },
+          {
+            label: 'Applicable Data Period',
+            value: values.applicable_data_period || 'None',
+          },
+          {
+            label: 'Approved Expiration Date',
+            value: values.approved_expiration_date || 'None',
+          },
           { label: 'Exception Status', value: values.ext_status },
           { label: 'Exception Outcome', value: values.ext_outcome },
           { label: 'Exception Notes', value: values.notes || 'None' },
         ]);
-
       }
 
       setShowSuccessMessage(true);
@@ -140,7 +150,7 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
     setShowSuccessMessage(false);
     setShowErrorMessage(false);
   };
-/*
+  /*
   const userFields = [
     {
       label: 'Applicable Data Period',
@@ -172,8 +182,7 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
       >
         <div className={`modal-header ${styles.modalHeader}`}>
           <Label className={styles.customModalTitle}>
-            Edit Extension ID {extension.ext_id} for{' '}
-            {extension.org_name}
+            Edit Extension ID {extension.ext_id} for {extension.org_name}
           </Label>
           <button
             type="button"
@@ -191,40 +200,40 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
           <FormikProvider value={formik}>
             <form onSubmit={formik.handleSubmit}>
               <Row>
-                  <Col md={6}>
-                    <FormGroup>
-                      <Label
-                        for="applicable_data_period"
-                        className={styles.customLabel}
-                      >
-                        <strong>Applicable Data Period</strong>
-                      </Label>
-                      <Field
-                        type="text"
-                        name="applicable_data_period"
-                        id="applicable_data_period"
-                        value={
-                          formik.values.applicable_data_period
-                            ? formik.values.applicable_data_period
-                            : ''
-                        }
-                        onChange={formik.handleChange}
-                        onBlur={formik.handleBlur}
-                        className={`form-control ${styles.viewRecord}`}
-                      />
-                      <small
-                        className="form-text text-muted"
-                        style={{ fontStyle: 'italic' }}
-                      >
-                        Current: {extension.applicable_data_period}
-                      </small>
-                      <ErrorMessage
-                        name="applicable_data_period"
-                        component="div"
-                        className="text-danger"
-                      />
-                    </FormGroup>
-                  </Col>
+                <Col md={6}>
+                  <FormGroup>
+                    <Label
+                      for="applicable_data_period"
+                      className={styles.customLabel}
+                    >
+                      <strong>Applicable Data Period</strong>
+                    </Label>
+                    <Field
+                      type="text"
+                      name="applicable_data_period"
+                      id="applicable_data_period"
+                      value={
+                        formik.values.applicable_data_period
+                          ? formik.values.applicable_data_period
+                          : ''
+                      }
+                      onChange={formik.handleChange}
+                      onBlur={formik.handleBlur}
+                      className={`form-control ${styles.viewRecord}`}
+                    />
+                    <small
+                      className="form-text text-muted"
+                      style={{ fontStyle: 'italic' }}
+                    >
+                      Current: {extension.applicable_data_period}
+                    </small>
+                    <ErrorMessage
+                      name="applicable_data_period"
+                      component="div"
+                      className="text-danger"
+                    />
+                  </FormGroup>
+                </Col>
                 <Col md={6}>
                   <FormGroup>
                     <Label
@@ -391,4 +400,4 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
   );
 };
 
-export default EditExtensionModal;
\ No newline at end of file
+export default EditExtensionModal;
diff --git a/apcd-cms/src/client/src/components/Extensions/ViewExtensionModal/ViewExtensionModal.tsx b/apcd-cms/src/client/src/components/Extensions/ViewExtensionModal/ViewExtensionModal.tsx
index 08320454..65e80bcb 100644
--- a/apcd-cms/src/client/src/components/Extensions/ViewExtensionModal/ViewExtensionModal.tsx
+++ b/apcd-cms/src/client/src/components/Extensions/ViewExtensionModal/ViewExtensionModal.tsx
@@ -9,55 +9,64 @@ const ViewExtensionModal: React.FC<{
   onClose: () => void;
 }> = ({ extension, isVisible, onClose }) => {
   return (
-    <Modal
-      title="View Extension"
-      isOpen={isVisible}
-      toggle={onClose}
-      size="lg"
-    >
-       <div className="modal-header">
-          <h4 className="modal-title">Extension Details ID {extension.ext_id} for {extension.org_name}</h4>
-          <button type="button" className="close" onClick={onClose}>
-            <span aria-hidden="true">&#xe912;</span>
-          </button>
-        </div>
-        <ModalBody className="modal-body">
-          <div>
-              <h4>Details</h4>
-                <div className="modal-section">
-                    <dl className="c-data-list--is-vert c-data-list--is-wide">
-                        <dt className="c-data-list__key">Created</dt>
-                        <dd className="c-data-list__value">{extension.created}</dd>
-                        <dt className="c-data-list__key">Entity Organization</dt>
-                        <dd className="c-data-list__value">{extension.org_name}</dd>
-                        <dt className="c-data-list__key">Requestor</dt>
-                        <dd className="c-data-list__value">{extension.requestor}</dd>
-                        <dt className="c-data-list__key">Requestor Email</dt>
-                        <dd className="c-data-list__value">{extension.requestor_email}</dd>
-                        <dt className="c-data-list__key">Extension Type</dt>
-                        <dd className="c-data-list__value">{extension.type}</dd>
-                        <dt className="c-data-list__key">Status</dt>
-                        <dd className="c-data-list__value">{extension.ext_status}</dd>
-                        <dt className="c-data-list__key">Outcome</dt>
-                        <dd className="c-data-list__value">{extension.ext_outcome}</dd>
-                        <dt className="c-data-list__key">Applicable Data Period</dt>
-                        <dd className="c-data-list__value">{extension.applicable_data_period}</dd>
-                        <dt className="c-data-list__key">Current Expected Date</dt>
-                        <dd className="c-data-list__value">{extension.current_expected_date}</dd>
-                        <dt className="c-data-list__key">Requested Target Date</dt>
-                        <dd className="c-data-list__value">{extension.requested_target_date}</dd>
-                        <dt className="c-data-list__key">Approved Expiration Date</dt>
-                        <dd className="c-data-list__value">{extension.approved_expiration_date}</dd>
-                        <dt className="c-data-list__key">Extension Justification</dt>
-                        <dd className="c-data-list__value">{extension.explanation_justification}</dd>
-                        <dt className="c-data-list__key">Extension Notes</dt>
-                        <dd className="c-data-list__value">{extension.notes}</dd>
-                        <dt className="c-data-list__key">Last Updated</dt>
-                        <dd className="c-data-list__value">{extension.updated_at}</dd>
-                    </dl>
-                </div>
+    <Modal title="View Extension" isOpen={isVisible} toggle={onClose} size="lg">
+      <div className="modal-header">
+        <h4 className="modal-title">
+          Extension Details ID {extension.ext_id} for {extension.org_name}
+        </h4>
+        <button type="button" className="close" onClick={onClose}>
+          <span aria-hidden="true">&#xe912;</span>
+        </button>
+      </div>
+      <ModalBody className="modal-body">
+        <div>
+          <h4>Details</h4>
+          <div className="modal-section">
+            <dl className="c-data-list--is-vert c-data-list--is-wide">
+              <dt className="c-data-list__key">Created</dt>
+              <dd className="c-data-list__value">{extension.created}</dd>
+              <dt className="c-data-list__key">Entity Organization</dt>
+              <dd className="c-data-list__value">{extension.org_name}</dd>
+              <dt className="c-data-list__key">Requestor</dt>
+              <dd className="c-data-list__value">{extension.requestor}</dd>
+              <dt className="c-data-list__key">Requestor Email</dt>
+              <dd className="c-data-list__value">
+                {extension.requestor_email}
+              </dd>
+              <dt className="c-data-list__key">Extension Type</dt>
+              <dd className="c-data-list__value">{extension.type}</dd>
+              <dt className="c-data-list__key">Status</dt>
+              <dd className="c-data-list__value">{extension.ext_status}</dd>
+              <dt className="c-data-list__key">Outcome</dt>
+              <dd className="c-data-list__value">{extension.ext_outcome}</dd>
+              <dt className="c-data-list__key">Applicable Data Period</dt>
+              <dd className="c-data-list__value">
+                {extension.applicable_data_period}
+              </dd>
+              <dt className="c-data-list__key">Current Expected Date</dt>
+              <dd className="c-data-list__value">
+                {extension.current_expected_date}
+              </dd>
+              <dt className="c-data-list__key">Requested Target Date</dt>
+              <dd className="c-data-list__value">
+                {extension.requested_target_date}
+              </dd>
+              <dt className="c-data-list__key">Approved Expiration Date</dt>
+              <dd className="c-data-list__value">
+                {extension.approved_expiration_date}
+              </dd>
+              <dt className="c-data-list__key">Extension Justification</dt>
+              <dd className="c-data-list__value">
+                {extension.explanation_justification}
+              </dd>
+              <dt className="c-data-list__key">Extension Notes</dt>
+              <dd className="c-data-list__value">{extension.notes}</dd>
+              <dt className="c-data-list__key">Last Updated</dt>
+              <dd className="c-data-list__value">{extension.updated_at}</dd>
+            </dl>
           </div>
-        </ModalBody>
+        </div>
+      </ModalBody>
     </Modal>
   );
 };
diff --git a/apcd-cms/src/client/src/hooks/admin/useAdmin.ts b/apcd-cms/src/client/src/hooks/admin/useAdmin.ts
index 29328582..e9cce090 100644
--- a/apcd-cms/src/client/src/hooks/admin/useAdmin.ts
+++ b/apcd-cms/src/client/src/hooks/admin/useAdmin.ts
@@ -53,11 +53,11 @@ const getExtensions = async (params: any) => {
 };
 
 export const useExtensions = (
-    status?: string,
+  status?: string,
   org?: string,
   page?: number
-  ): UseQueryResult<ExtensionResult> => {
-        const params: { status?: string; org?: string; page?: number } = {
+): UseQueryResult<ExtensionResult> => {
+  const params: { status?: string; org?: string; page?: number } = {
     status,
     org,
     page,