Make date formatting consistent (#1776)

client/src/components/Feedback/ProjectList.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { createUseStyles } from "react-jss";
+import { formatDatetime } from "../../helpers/util";
 
 const useStyles = createUseStyles({
   heading3: {
@@ -25,19 +26,6 @@ const ProjectsList = ({ projects, setSelectedProjects, selectedProjects }) => {
     }))
   );
 
-  const formatDates = date => {
-    return new Date(date)
-      .toLocaleDateString("en-US", {
-        month: "2-digit",
-        day: "2-digit",
-        year: "numeric",
-        hour: "numeric",
-        minute: "2-digit",
-        hour12: true
-      })
-      .replace(",", "");
-  };
-
   const onSelect = event => {
     const value = event.target.checked;
     const id = Number(event.target.name);
@@ -94,10 +82,10 @@ const ProjectsList = ({ projects, setSelectedProjects, selectedProjects }) => {
                 {JSON.parse(project.formInputs)["PROJECT_ADDRESS"]}
               </td>
               <td className={classes.tableCell}>
-                {formatDates(project.dateCreated)}
+                {formatDatetime(project.dateCreated)}
               </td>
               <td className={classes.tableCell}>
-                {formatDates(project.dateModified)}
+                {formatDatetime(project.dateModified)}
               </td>
             </tr>
           ))}

client/src/components/PdfPrint/PdfFooter.js

@@ -1,8 +1,9 @@
 import React, { useState, useEffect, useContext } from "react";
 import PropTypes from "prop-types";
 import { createUseStyles } from "react-jss";
-import { DateTime } from "luxon";
 import UserContext from "../../contexts/UserContext";
+import { DateTime } from "luxon";
+import { formatDatetime } from "../../helpers/util";
 
 const useStyles = createUseStyles({
   pdfTimeText: {
@@ -15,23 +16,24 @@ const useStyles = createUseStyles({
   }
 });
 
-const PdfFooter = ({
-  dateModified,
-  dateSubmitted,
-  dateSnapshotted,
-  loginId
-}) => {
+const PdfFooter = ({ project }) => {
+  const { dateModified, dateSubmitted, dateSnapshotted, loginId } = project;
   const classes = useStyles();
   const userContext = useContext(UserContext);
   const loggedInUserId = userContext.account?.id;
+  const formattedDateModified = formatDatetime(dateModified);
+  const formattedDateSnapshotted = formatDatetime(dateSnapshotted);
+  const formattedDateSubmitted = formatDatetime(dateSubmitted);
 
-  const [printedDate, setPrintedDate] = useState(DateTime.now());
+  const [formattedDatePrinted, setFormattedDatePrinted] = useState(
+    formatDatetime(DateTime.now())
+  );
 
   useEffect(() => {
     // You would update these dates based on your application logic
     // For instance, you might fetch them from an API when the component mounts
     const updateDates = () => {
-      setPrintedDate(DateTime.now()); // replace with actual date
+      setFormattedDatePrinted(formatDatetime(DateTime.now())); // replace with actual date
     };
 
     updateDates();
@@ -47,25 +49,25 @@ const PdfFooter = ({
         <>
           <div className={classes.pdfTimeText}>
             Status:{" "}
-            {!dateSnapshotted
+            {!formattedDateSnapshotted
               ? "Draft"
               : loginId === loggedInUserId
               ? "Snapshot"
               : "Shared Snapshot"}
           </div>
-          {dateSubmitted && (
+          {formattedDateSubmitted && (
             <div className={classes.pdfTimeText}>
-              Snapshot Submitted: {dateSubmitted} Pacific Time
+              Snapshot Submitted: {formattedDateSubmitted} Pacific Time
             </div>
           )}
-          {dateSnapshotted && (
+          {formattedDateSnapshotted && (
             <div className={classes.pdfTimeText}>
-              Snapshot Created: {dateSnapshotted} Pacific Time
+              Snapshot Created: {formattedDateSnapshotted} Pacific Time
             </div>
           )}
-          {dateModified && (
+          {formattedDateModified && (
             <div className={classes.pdfTimeText}>
-              Date Last Saved: {dateModified} Pacific Time
+              Date Last Saved: {formattedDateModified} Pacific Time
             </div>
           )}
         </>
@@ -79,10 +81,7 @@ const PdfFooter = ({
           marginBottom: "5px"
         }}
       >
-        Date Printed:{" "}
-        {printedDate
-          .setZone("America/Los_Angeles")
-          .toFormat("yyyy-MM-dd, HH:mm:ss 'Pacific Time'")}
+        Date Printed: {formattedDatePrinted}
       </div>
       <span className={classes.pdfTimeText}>
         Los Angeles Department of Transportation | tdm.ladot.lacity.org |
@@ -93,10 +92,7 @@ const PdfFooter = ({
 };
 
 PdfFooter.propTypes = {
-  dateModified: PropTypes.string || null,
-  dateSubmitted: PropTypes.string || null,
-  dateSnapshotted: PropTypes.string || null,
-  loginId: PropTypes.number || null
+  project: PropTypes.shape
 };
 
 export default PdfFooter;

client/src/components/PdfPrint/PdfPrint.js

@@ -130,8 +130,7 @@ const useStyles = createUseStyles({
 export const PdfPrint = forwardRef((props, ref) => {
   const classes = useStyles();
 
-  const { rules, dateModified, dateSubmitted, dateSnapshotted, loginId } =
-    props;
+  const { rules, project } = props;
 
   const level = getRule(rules, "PROJECT_LEVEL");
   const targetPoints = getRule(rules, "TARGET_POINTS_PARK");
@@ -324,24 +323,14 @@ export const PdfPrint = forwardRef((props, ref) => {
         </div>
       </section>
 
-      <PdfFooter
-        dateModified={dateModified}
-        dateSubmitted={dateSubmitted}
-        dateSnapshotted={dateSnapshotted}
-        loginId={loginId}
-      />
+      <PdfFooter project={project} />
     </div>
   );
 });
 
 PdfPrint.propTypes = {
   rules: PropTypes.array,
-  account: PropTypes.object,
-  projectId: PropTypes.number || null,
-  loginId: PropTypes.number || null,
-  dateModified: PropTypes.string || null,
-  dateSubmitted: PropTypes.string || null,
-  dateSnapshotted: PropTypes.string | null
+  project: PropTypes.shape
 };
 
 export default PdfPrint;

client/src/components/ProjectWizard/TdmCalculationContainer.js

@@ -7,7 +7,7 @@ import * as ruleService from "../../services/rule.service";
 import * as projectService from "../../services/project.service";
 import Engine from "../../services/tdm-engine";
 import { useToast } from "../../contexts/Toast";
-import { DateTime } from "luxon";
+// import { formatDatetime } from "../../helpers/util";
 
 // These are the calculation results we want to calculate
 // and display on the main page.
@@ -45,15 +45,18 @@ export function TdmCalculationContainer({ contentContainerRef }) {
   const [engine, setEngine] = useState(null);
   const [formInputs, setFormInputs] = useState({});
   const projectId = params.projectId ? Number(params.projectId) : 0;
-  const [loginId, setLoginId] = useState(0);
   const [strategiesInitialized, setStrategiesInitialized] = useState(false);
   const [formHasSaved, setFormHasSaved] = useState(true);
   const [inapplicableStrategiesModal, setInapplicableStrategiesModal] =
     useState(false);
   const [rules, setRules] = useState([]);
-  const [dateModified, setDateModified] = useState();
-  const [dateSnapshotted, setDateSnapshotted] = useState();
-  const [dateSubmitted, setDateSubmitted] = useState();
+
+  const [project, setProject] = useState({});
+  // const [loginId, setLoginId] = useState(0);
+  // const [dateModified, setDateModified] = useState();
+  // const [dateSnapshotted, setDateSnapshotted] = useState();
+  // const [dateSubmitted, setDateSubmitted] = useState();
+
   const toast = useToast();
 
   const fetchRules = useCallback(async () => {
@@ -69,14 +72,6 @@ export function TdmCalculationContainer({ contentContainerRef }) {
     fetchRules();
   }, [fetchRules]);
 
-  const formatDate = date => {
-    return date
-      ? DateTime.fromISO(date)
-          .setZone("America/Los_Angeles")
-          .toFormat("MM/dd/yyyy h:mm a")
-      : null;
-  };
-
   // Initialize Engine and (if existing project), perform initial calculation.
   const initializeEngine = useCallback(async () => {
     // Only run if engine has been instantiated
@@ -87,10 +82,13 @@ export function TdmCalculationContainer({ contentContainerRef }) {
       if (Number(projectId) > 0 && account.id) {
         projectResponse = await projectService.getById(projectId);
 
-        setLoginId(projectResponse.data.loginId);
-        setDateModified(formatDate(projectResponse.data.dateModified));
-        setDateSnapshotted(formatDate(projectResponse.data?.dateSnapshotted));
-        setDateSubmitted(formatDate(projectResponse.data?.dateSubmitted));
+        // setLoginId(projectResponse.data.loginId);
+        // setDateModified(formatDatetime(projectResponse.data.dateModified));
+        // setDateSnapshotted(
+        //   formatDatetime(projectResponse.data?.dateSnapshotted)
+        // );
+        // setDateSubmitted(formatDatetime(projectResponse.data?.dateSubmitted));
+        setProject(projectResponse.data);
 
         inputs = JSON.parse(projectResponse.data.formInputs);
         setStrategiesInitialized(true);
@@ -110,7 +108,7 @@ export function TdmCalculationContainer({ contentContainerRef }) {
       // const redirect = account.id ? "/projects" : "/login";
       // navigate(redirect);
     }
-  }, [engine, projectId, account, setRules, setDateModified]);
+  }, [engine, projectId, account, setRules, setProject]);
 
   // Initialize the engine with saved project data, as appropriate.
   // Should run only when projectId changes.
@@ -462,7 +460,8 @@ export function TdmCalculationContainer({ contentContainerRef }) {
 
         projectResponse = await projectService.getById(projectId);
 
-        setDateModified(formatDate(projectResponse.data?.dateModified));
+        // setDateModified(formatDatetime(projectResponse.data?.dateModified));
+        setProject(projectResponse.data);
       } catch (err) {
         console.error(err);
         if (err.response) {
@@ -527,20 +526,22 @@ export function TdmCalculationContainer({ contentContainerRef }) {
       onPkgSelect={onPkgSelect}
       onParkingProvidedChange={onParkingProvidedChange}
       resultRuleCodes={resultRuleCodes}
-      loginId={loginId}
       onSave={onSave}
       allowResidentialPackage={allowResidentialPackage}
       allowSchoolPackage={allowSchoolPackage}
       residentialPackageSelected={residentialPackageSelected}
       schoolPackageSelected={schoolPackageSelected}
       formIsDirty={!formHasSaved}
       projectIsValid={projectIsValid}
-      dateModified={dateModified}
-      dateSnapshotted={dateSnapshotted}
-      dateSubmitted={dateSubmitted}
+      // loginId={loginId}
+      // dateModified={dateModified}
+      // dateSnapshotted={dateSnapshotted}
+      // dateSubmitted={dateSubmitted}
       contentContainerRef={contentContainerRef}
       inapplicableStrategiesModal={inapplicableStrategiesModal}
       closeStrategiesModal={closeStrategiesModal}
+      // projectId={projectId}
+      project={project}
     />
   );
 }

client/src/components/ProjectWizard/TdmCalculationWizard.js

@@ -45,20 +45,21 @@ const TdmCalculationWizard = props => {
     onPkgSelect,
     onParkingProvidedChange,
     resultRuleCodes,
-    loginId,
+    // loginId,
     onSave,
     allowResidentialPackage,
     allowSchoolPackage,
     residentialPackageSelected,
     schoolPackageSelected,
     formIsDirty,
     projectIsValid,
-    dateModified,
-    dateSnapshotted,
-    dateSubmitted,
+    // dateModified,
+    // dateSnapshotted,
+    // dateSubmitted,
     contentContainerRef,
     inapplicableStrategiesModal,
-    closeStrategiesModal
+    closeStrategiesModal,
+    project
   } = props;
   const classes = useStyles();
   const context = useContext(ToastContext);
@@ -70,6 +71,7 @@ const TdmCalculationWizard = props => {
   const projectId = Number(params.projectId);
   const { pathname } = useLocation();
   const [ainInputError, setAINInputError] = useState("");
+  const loginId = project.loginId;
   /*
     shouldBlock determines if user should be blocked from navigating away
     from wizard.  Note that navigation from /calculation/a/x to 
@@ -291,7 +293,7 @@ const TdmCalculationWizard = props => {
             projectId={projectId}
             loginId={loginId}
             onSave={onSave}
-            dateModified={dateModified}
+            dateModified={project.dateModified}
           />
         );
       default:
@@ -318,6 +320,7 @@ const TdmCalculationWizard = props => {
       >
         {pageContents(page)}
         <WizardFooter
+          // projectId={projectId}
           rules={rules}
           page={page}
           onPageChange={onPageChange}
@@ -327,10 +330,11 @@ const TdmCalculationWizard = props => {
           setDisplaySaveButton={setDisplaySaveButton}
           setDisplayPrintButton={setDisplayPrintButton}
           onSave={onSave}
-          dateModified={dateModified}
-          dateSnapshotted={dateSnapshotted}
-          dateSubmitted={dateSubmitted}
-          loginId={loginId}
+          project={project}
+          // dateModified={dateModified}
+          // dateSnapshotted={dateSnapshotted}
+          // dateSubmitted={dateSubmitted}
+          // loginId={loginId}
         />
       </ContentContainer>
     </div>
@@ -367,19 +371,20 @@ TdmCalculationWizard.propTypes = {
   onResetProject: PropTypes.func.isRequired,
   filters: PropTypes.object.isRequired,
   resultRuleCodes: PropTypes.array.isRequired,
-  loginId: PropTypes.number.isRequired,
+  // loginId: PropTypes.number.isRequired,
   onSave: PropTypes.func.isRequired,
   allowResidentialPackage: PropTypes.bool.isRequired,
   allowSchoolPackage: PropTypes.bool.isRequired,
   residentialPackageSelected: PropTypes.func,
   schoolPackageSelected: PropTypes.func,
   formIsDirty: PropTypes.bool,
   projectIsValid: PropTypes.func,
-  dateModified: PropTypes.string,
-  dateSnapshotted: PropTypes.string,
-  dateSubmitted: PropTypes.string,
+  // dateModified: PropTypes.string,
+  // dateSnapshotted: PropTypes.string,
+  // dateSubmitted: PropTypes.string,
   inapplicableStrategiesModal: PropTypes.bool,
-  closeStrategiesModal: PropTypes.func
+  closeStrategiesModal: PropTypes.func,
+  project: PropTypes.shape
 };
 
 export default TdmCalculationWizard;