remove momentjs (#139755)

services/ui-src/package.json

@@ -17,11 +17,11 @@
     "@testing-library/user-event": "^14.5.1",
     "@vitejs/plugin-react": "^4.2.1",
     "aws-amplify": "^5.3.4",
+    "date-fns": "^3.6.0",
     "font-awesome": "^4.7.0",
     "jsonpath": "^1.0.2",
     "launchdarkly-react-client-sdk": "^3.3.2",
     "mathjs": "^7.5.0",
-    "moment": "^2.29.4",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-data-table-component": "^6.11.6",

services/ui-src/src/components/layout/CertifyAndSubmit.jsx

@@ -1,9 +1,8 @@
 import React, { useEffect } from "react";
 import { shallowEqual, useDispatch, useSelector } from "react-redux";
-import moment from "moment";
-import PropTypes from "prop-types";
 import { Button, Dialog } from "@cmsgov/design-system";
 import { useHistory } from "react-router-dom";
+import { format } from "date-fns";
 // components
 import PageInfo from "./PageInfo";
 import FormActions from "./FormActions";
@@ -17,6 +16,7 @@ import {
 import useModal from "../../hooks/useModal";
 // types
 import { AppRoles } from "../../types";
+import PropTypes from "prop-types";
 
 const Submit = ({ openCertifyConfirmation }) => (
   <>
@@ -43,15 +43,25 @@ const Submit = ({ openCertifyConfirmation }) => (
 
 Submit.propTypes = { openCertifyConfirmation: PropTypes.func.isRequired };
 
-const Thanks = ({ done: doneDispatch, lastSave, submitterUsername }) => {
+const Thanks = ({ done: doneDispatch, submitterUsername }) => {
+  const lastSave = useSelector(
+    (state) =>
+      getCurrentReportStatus(
+        state.reportStatus,
+        state.formData,
+        state.stateUser,
+        state.global.formYear
+      ).lastChanged
+  );
+  const formattedDate = lastSave ? format(lastSave, "PPP") : "";
+  const formattedTime = lastSave ? format(lastSave, "p") : "";
   return (
     <>
       <h3 data-testid={"certifyThankYou"}>
         Thank you for submitting your CARTS report!
       </h3>
       <p>
-        Submitted on {lastSave.format("MMMM Do, YYYY")} at{" "}
-        {lastSave.format("h:mm A")} by {submitterUsername}.
+        Submitted on {formattedDate} at {formattedTime} by {submitterUsername}.
       </p>
       <h3>What to expect next</h3>
       <p>You‘ll hear from CMS if they have any questions about your report.</p>
@@ -64,42 +74,32 @@ const Thanks = ({ done: doneDispatch, lastSave, submitterUsername }) => {
 
 Thanks.propTypes = {
   done: PropTypes.func.isRequired,
-  lastSave: PropTypes.object.isRequired,
   submitterUsername: PropTypes.string.isRequired,
 };
 
 const CertifyAndSubmit = () => {
   const dispatch = useDispatch();
   const history = useHistory();
   const { isShowing, toggleModal } = useModal();
-  const [isCertified, lastSave, submitterUsername, currentUserRole, state] =
-    useSelector(
-      (state) => [
-        !selectIsFormEditable(
-          state.reportStatus,
-          state.formData,
-          state.stateUser,
-          state.global.formYear
-        ),
-        moment(
-          getCurrentReportStatus(
-            state.reportStatus,
-            state.formData,
-            state.stateUser,
-            state.global.formYear
-          ).lastChanged
-        ),
-        getCurrentReportStatus(
-          state.reportStatus,
-          state.formData,
-          state.stateUser,
-          state.global.formYear
-        ).username,
-        state.stateUser.currentUser.role,
-        state.stateUser.abbr,
-      ],
-      shallowEqual
-    );
+  const [isCertified, submitterUsername, currentUserRole, state] = useSelector(
+    (state) => [
+      !selectIsFormEditable(
+        state.reportStatus,
+        state.formData,
+        state.stateUser,
+        state.global.formYear
+      ),
+      getCurrentReportStatus(
+        state.reportStatus,
+        state.formData,
+        state.stateUser,
+        state.global.formYear
+      ).username,
+      state.stateUser.currentUser.role,
+      state.stateUser.abbr,
+    ],
+    shallowEqual
+  );
 
   useEffect(() => {
     dispatch(loadForm(state));
@@ -149,11 +149,7 @@ const CertifyAndSubmit = () => {
         <PageInfo />
         {currentUserRole === AppRoles.STATE_USER && <h2>Certify and Submit</h2>}
         {isCertified ? (
-          <Thanks
-            done={doneClick}
-            lastSave={lastSave}
-            submitterUsername={submitterUsername}
-          />
+          <Thanks done={doneClick} submitterUsername={submitterUsername} />
         ) : (
           <Submit openCertifyConfirmation={toggleModal} />
         )}

services/ui-src/src/components/layout/PageInfo.jsx

@@ -1,19 +1,18 @@
 import React from "react";
 import { shallowEqual, useSelector } from "react-redux";
-import moment from "moment";
 import Autosave from "../fields/Autosave";
 import Title from "./Title";
 
 const PageInfo = () => {
   const [lastSaved, status] = useSelector(
-    (state) => [moment(state.save.lastSave), state.reportStatus.status],
+    (state) => [state.save.lastSave, state.reportStatus.status],
     shallowEqual
   );
   return (
     <div className="page-info">
       <div className="edit-info no-print" data-testid="edit-info-display">
         {status ?? "draft"}
-        {lastSaved.isValid() && ` | Last Edit: ${lastSaved.format("M/D/YYYY")}`}
+        {lastSaved && ` | Last Edit: ${lastSaved.toLocaleDateString()}`}
       </div>
       <Title />
       <Autosave />

services/ui-src/src/components/layout/PageInfo.test.jsx

@@ -11,7 +11,9 @@ const store = mockStore({
     status: null,
   },
   save: {
-    lastSave: "01/01/2002",
+    lastSave: new Date(
+      "Mon Jan 1 2024 12:00:00 GMT-0400 (Eastern Daylight Time)"
+    ),
   },
 });
 jest.mock("./Title", () => () => {

services/ui-src/src/components/layout/SaveMessage.jsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import {
+  differenceInMinutes,
+  format,
+  formatDistanceToNowStrict,
+} from "date-fns";
+import PropTypes from "prop-types";
+
+const SaveMessage = ({ lastSaved }) => {
+  const [currentMoment, setCurrentMoment] = useState(() => Date.now());
+
+  useEffect(() => {
+    const timerID = setInterval(() => setCurrentMoment(Date.now()), 1000);
+    return () => clearInterval(timerID);
+  });
+
+  if (!lastSaved) return "Not yet saved";
+  if (differenceInMinutes(currentMoment, lastSaved) < 1) return "Saved";
+
+  return `Last saved ${format(lastSaved, "p")} (${formatDistanceToNowStrict(
+    lastSaved
+  )} ago)`;
+};
+
+SaveMessage.propTypes = {
+  lastSaved: PropTypes.oneOfType([
+    PropTypes.instanceOf(Date),
+    PropTypes.string,
+  ]),
+};
+
+export default SaveMessage;

services/ui-src/src/components/layout/SaveMessage.test.jsx

@@ -1,5 +1,4 @@
 import { mount, shallow } from "enzyme";
-import moment from "moment";
 import React from "react";
 import SaveMessage from "./SaveMessage";
 
@@ -10,9 +9,6 @@ describe("SaveMessage Component", () => {
   const dateProp = { lastSaved: new Date() };
   const saveMessageDateProp = <SaveMessage {...dateProp} />;
 
-  const momentProp = { lastSaved: moment() };
-  const saveMessageMomentProp = <SaveMessage {...momentProp} />;
-
   const nullProp = { lastSaved: null };
   const saveMessageNullProp = <SaveMessage {...nullProp} />;
 
@@ -24,10 +20,6 @@ describe("SaveMessage Component", () => {
     expect(shallow(saveMessageDateProp).exists()).toBe(true);
   });
 
-  it("should accept moment as prop", () => {
-    expect(shallow(saveMessageMomentProp).exists()).toBe(true);
-  });
-
   it("should accept null as prop and return not saved", () => {
     const wrapper = mount(saveMessageNullProp);
     expect(wrapper.text().includes("Not yet saved")).toBe(true);

services/ui-src/src/components/layout/Timeout.jsx

@@ -3,19 +3,16 @@ import { useSelector } from "react-redux";
 import { useHistory } from "react-router-dom";
 //components
 import { Dialog } from "@cmsgov/design-system";
-import moment from "moment";
 //auth
 import {
   refreshCredentials,
   updateTimeout,
   useUser,
 } from "../../hooks/authHooks";
-//types
-import PropTypes from "prop-types";
 
 const calculateTimeLeft = (expiresAt) => {
   if (!expiresAt) return 0;
-  return expiresAt.diff(moment()) / 1000;
+  return (new Date(expiresAt).valueOf() - Date.now()) / 1000;
 };
 
 const Timeout = () => {
@@ -50,7 +47,7 @@ const Timeout = () => {
 
   if (!showTimeout) return <></>;
 
-  const expired = expiresAt.isBefore();
+  const expired = new Date(expiresAt).valueOf() < Date.now();
   const body = expired
     ? "You have been logged out due to inactivity. Please log in again."
     : `Due to inactivity, you will be logged out in ${Math.floor(
@@ -94,9 +91,4 @@ const Timeout = () => {
   );
 };
 
-Timeout.propTypes = {
-  showTimeout: PropTypes.bool.isRequired,
-  expiresAt: PropTypes.any.isRequired,
-};
-
 export default Timeout;

services/ui-src/src/components/layout/Timeout.test.jsx

@@ -4,7 +4,7 @@ import configureMockStore from "redux-mock-store";
 import { Provider } from "react-redux";
 import { screen, render, fireEvent } from "@testing-library/react";
 import Timeout from "./Timeout";
-import moment from "moment";
+import { add, sub } from "date-fns";
 
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),
@@ -17,19 +17,19 @@ const mockStore = configureMockStore();
 const store = mockStore({
   stateUser: {
     showTimeout: true,
-    expiresAt: moment().add(5, "minutes"),
+    expiresAt: add(Date.now(), { minutes: 5 }),
   },
 });
 const expiredStore = mockStore({
   stateUser: {
     showTimeout: true,
-    expiresAt: moment().subtract(5, "minutes"),
+    expiresAt: sub(Date.now(), { minutes: 5 }),
   },
 });
 const hiddenStore = mockStore({
   stateUser: {
     showTimeout: false,
-    expiresAt: moment().add(5, "minutes"),
+    expiresAt: add(Date.now(), { minutes: 5 }),
   },
 });
 const timeout = (