Add SaveMessage component to Header

web/src/components/Header.js

@@ -8,6 +8,7 @@ import { getIsAdmin } from '../reducers/user.selector';
 import { t } from '../i18n';
 
 import DashboardButton from './DashboardButton';
+import SaveMessage from './SaveMessage';
 
 import Icon, {
   Check,
@@ -86,7 +87,7 @@ class Header extends Component {
                         </span>
                       ) : (
                         <span>
-                          <Check /> Saved {lastSaved}
+                          <Check /> <SaveMessage lastSaved={lastSaved} />
                         </span>
                       )}
                     </span>

web/src/components/Header.test.js

@@ -139,7 +139,7 @@ describe('Header component', () => {
           }}
           isAdmin={false}
           isSaving={false}
-          lastSaved="last save date"
+          lastSaved="2020-01-01T12:00:00.000Z"
           pushRoute={() => {}}
           showSiteTitle={false}
         />
@@ -159,7 +159,7 @@ describe('Header component', () => {
           }}
           isAdmin={false}
           isSaving
-          lastSaved="last save date"
+          lastSaved="2020-01-01T17:00:00.000Z"
           pushRoute={() => {}}
           showSiteTitle={false}
         />

web/src/components/SaveMessage.js

@@ -0,0 +1,87 @@
+import moment from "moment";
+import React from "react";
+import PropTypes from 'prop-types';
+
+// Configure moment to display '1 time-unit ago' instead of 'a time-unit ago'
+// https://github.com/moment/moment/issues/3764
+moment.updateLocale("en", {
+  relativeTime: {
+    s: "seconds",
+    m: "1 minute",
+    mm: "%d minutes",
+    h: "1 hour",
+    hh: "%d hours",
+    d: "1 day",
+    dd: "%d days",
+    M: "1 month",
+    MM: "%d months",
+    y: "1 year",
+    yy: "%d years",
+  },
+});
+
+class SaveMessage extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      currentMoment: moment(),
+    };
+  }
+
+  componentDidMount() {
+    this.timerID = setInterval(() => this.updateClock(), 1000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timerID);
+  }
+
+  updateClock() {
+    this.setState({
+      currentMoment: moment(),
+    });
+  }
+
+  render() {
+    const { lastSaved } = this.props;
+    const { currentMoment } = this.state;
+
+    const lastSavedMoment = moment(lastSaved);
+    const difference = currentMoment.diff(lastSavedMoment);
+    const duration = moment.duration(difference);
+    let result = "Last saved";
+
+    if (duration.asMinutes() < 1) return "Saved";
+
+    // eslint's "yoda": "Expected literal to be on the right side of <="
+    // Which is easier to visualize on a number line, Mr. Yoda?
+    // lowerBound <= object.value() && object.value() < upperBound  // or...
+    if (duration.asMinutes() >= 1 && duration.asDays() < 1) {
+      result = `${result} ${lastSavedMoment.format("hh:mm a")}`;
+    }
+    if (duration.asDays() >= 1 && duration.asYears() < 1) {
+      result = `${result} ${lastSavedMoment.format("MMMM D")}`;
+    }
+    if (duration.asYears() >= 1) {
+      result = `${result} ${lastSavedMoment.format("MMMM D, YYYY")}`;
+    }
+    result = `${result} (${lastSavedMoment.fromNow()})`;
+
+    return result;
+  }
+}
+
+SaveMessage.propTypes = {
+  lastSaved: PropTypes.oneOfType([
+    PropTypes.instanceOf(Date),
+    PropTypes.instanceOf(moment),
+    PropTypes.string
+  ].isRequred),
+};
+
+SaveMessage.defaultProps = {
+  lastSaved: moment(),
+};
+
+export default SaveMessage;

web/src/components/SaveMessage.test.js

@@ -0,0 +1,145 @@
+import React from "react";
+import { shallow } from "enzyme";
+import moment from "moment";
+import SaveMessage from "./SaveMessage";
+
+describe("<SaveMessage />", () => {
+  let lastSaved;
+  let subject;
+
+  describe('when saved less than 1 minute ago, it displays "Saved"', () => {
+    [
+      ["1 second ago", 1],
+      ["2 seconds ago", 2],
+      ["30 seconds ago", 30],
+      ["59 seconds", 59],
+    ].forEach(([testName, seconds]) => {
+      test(testName, () => {
+        lastSaved = moment().subtract(seconds, "seconds");
+        subject = shallow(
+          <SaveMessage lastSaved={lastSaved} />
+        );
+        expect(subject.text()).toEqual("Saved");
+      });
+    });
+  });
+
+  describe("when observed saved time changes to 1 minute ago", () => {
+    const now = new Date(2020, 0, 1, 12, 0);
+    const oneMinuteFromNow = new Date(2020, 0, 1, 12, 1);
+    let mockDateNow;
+
+    beforeEach(() => {
+      jest.useFakeTimers();
+      mockDateNow = jest
+        .spyOn(Date, "now")
+        .mockReturnValueOnce(now)
+        .mockReturnValue(oneMinuteFromNow);
+    });
+
+    afterEach(() => {
+      mockDateNow.mockRestore();
+      jest.clearAllTimers();
+    });
+
+    it('auto-updates', () => {
+      subject = shallow(
+        <SaveMessage isSaving={false} lastSaved={now} />
+      );
+      expect(subject.text()).toMatch("Saved");
+      jest.advanceTimersByTime(1000);
+      expect(subject.text()).toMatch(/\(1 minute ago\)$/);
+    });
+  });
+
+  describe("given current time is January 1, 2020 12:00 pm", () => {
+    const jan1AtNoon = new Date(2020, 0, 1, 12, 0);
+    let mockDateNow;
+
+    beforeEach(() => {
+      mockDateNow = jest
+        .spyOn(Date, "now")
+        .mockReturnValue(jan1AtNoon.getTime());
+    });
+
+    afterEach(() => {
+      mockDateNow.mockRestore();
+    });
+
+    describe("when saved 1 minute ago", () => {
+      it('displays "Last saved 11:59 am (1 minute ago)"', () => {
+        lastSaved = moment(jan1AtNoon).subtract(1, "minutes");
+        subject = shallow(
+          <SaveMessage lastSaved={lastSaved} />
+        );
+        expect(subject.text()).toMatch(/^Last saved/);
+        expect(subject.text()).toMatch(/11:59 am/);
+        expect(subject.text()).toMatch(/\(1 minute ago\)$/);
+      });
+    });
+
+    describe("when saved 23 hours and 59 minutes ago", () => {
+      it('displays "Last saved 12:01 pm (1 day ago)"', () => {
+        lastSaved = moment(jan1AtNoon)
+          .subtract(23, "hours")
+          .subtract(59, "minutes");
+        subject = shallow(
+          <SaveMessage lastSaved={lastSaved} />
+        );
+        expect(subject.text()).toMatch(/^Last saved/);
+        expect(subject.text()).toMatch(/12:01 pm/);
+        expect(subject.text()).toMatch(/\(1 day ago\)$/);
+      });
+    });
+
+    describe("when saved 1 day ago", () => {
+      it('displays "Last saved December 30 (1 day ago)"', () => {
+        lastSaved = moment().subtract(1, "day");
+        subject = shallow(
+          <SaveMessage lastSaved={lastSaved} />
+        );
+        expect(subject.text()).toMatch(/^Last saved/);
+        expect(subject.text()).toMatch(/December 31/);
+        expect(subject.text()).toMatch(/\(1 day ago\)$/);
+      });
+    });
+
+    describe("when saved 30 days ago", () => {
+      it('displays "Last saved December 2 (1 month ago)"', () => {
+        lastSaved = moment().subtract(30, "day");
+        subject = shallow(
+          <SaveMessage lastSaved={lastSaved} />
+        );
+        expect(subject.text()).toMatch(/^Last saved/);
+        expect(subject.text()).toMatch(/December 2/);
+        expect(subject.text()).not.toMatch(/2019/);
+        expect(subject.text()).toMatch(/\(1 month ago\)$/);
+      });
+    });
+
+    describe("when saved 364 days ago", () => {
+      it('displays "Last saved January 2 (1 year ago)"', () => {
+        lastSaved = moment().subtract(364, "day");
+        subject = shallow(
+          <SaveMessage lastSaved={lastSaved} />
+        );
+        expect(subject.text()).toMatch(/^Last saved/);
+        expect(subject.text()).toMatch(/January 2/);
+        expect(subject.text()).not.toMatch(/2019/);
+        expect(subject.text()).toMatch(/\(1 year ago\)$/);
+      });
+    });
+
+    describe("when saved 3 years ago", () => {
+      it('displays "Last saved January 1, 2017 (3 years ago)"', () => {
+        lastSaved = moment().subtract(3, "years");
+        subject = shallow(
+          <SaveMessage lastSaved={lastSaved} />
+        );
+        expect(subject.text()).toMatch(/^Last saved/);
+        expect(subject.text()).toMatch(/January 1, 2017/);
+        expect(subject.text()).toMatch(/\(3 years ago\)$/);
+      });
+    });
+  });
+});