Replace moment with date fns #973

common/components/chrome/AlertHeader.jsx

@@ -9,16 +9,17 @@ import url from "../utils/url.js";
 import utils from "../utils/utils.js";
 import Section from "../enums/Section.js";
 import NavigationStore from "../stores/NavigationStore.js";
-import moment from "moment";
 import _ from "lodash";
+import type { duration } from "../utils/datetime.js";
+import datetime from "../utils/datetime.js"; //checked
 
 type AlertShownStats = {|
   lastHidden: number /* Time since alert was last hidden in Milliseconds */,
 |};
 
 type AlertConfiguration = {|
   name: string /* Identifier for tracking AlertShownStats in session storage */,
-  waitTimeBeforeShowAgain: ?string /* ISO 8601 duration string */,
+  waitTimeBeforeShowAgain: ?duration /* duration object */,
   shouldShowAlert: () => boolean /* Whether to show alert */,
   getAlertBody: () => React$Node /* Alert HTML body */,
 |};
@@ -57,23 +58,23 @@ class AlertHeader extends React.Component<Props, State> {
       },
       {
         name: "emailVerificationAlert",
-        waitTimeBeforeShowAgain: "PT1M" /* 1 Minute */,
+        waitTimeBeforeShowAgain: { minutes: 1 },
         shouldShowAlert: () => {
           return CurrentUser.isLoggedIn() && !CurrentUser.isEmailVerified();
         },
         getAlertBody: this._renderEmailNotVerifiedAlert.bind(this),
       },
       {
         name: "renewVolunteeringAlert",
-        waitTimeBeforeShowAgain: "P1D" /* 1 day */,
+        waitTimeBeforeShowAgain: { days: 1 },
         shouldShowAlert: () => {
           return CurrentUser.isVolunteeringUpForRenewal();
         },
         getAlertBody: this._renderVolunteerUpForRenewal.bind(this),
       },
       {
         name: "eventAlert",
-        waitTimeBeforeShowAgain: "P1D" /* 1 day */,
+        waitTimeBeforeShowAgain: { days: 1 },
         shouldShowAlert: () => {
           return window.HEADER_ALERT;
         },
@@ -117,7 +118,7 @@ class AlertHeader extends React.Component<Props, State> {
     url.removeArgs(_.keys(AlertMessages));
     if (this.state.currentAlert.waitTimeBeforeShowAgain) {
       const alertShownStats: AlertShownStats = {
-        lastHidden: moment.now().valueOf(),
+        lastHidden: Date.now(),
       };
 
       sessionStorage[this.state.currentAlert.name] = JSON.stringify(
@@ -147,14 +148,16 @@ class AlertHeader extends React.Component<Props, State> {
     const alertShownStats: AlertShownStats =
       sessionStorage[alertConfig.name] &&
       JSON.parse(sessionStorage[alertConfig.name]);
+
     if (!alertShownStats) {
       return true;
     }
 
-    const durationSinceLastHidden = moment.duration(
-      moment().diff(moment(alertShownStats.lastHidden))
+    const durationSinceLastHidden = datetime.getDifferenceInMilliseconds(
+      new Date(),
+      new Date(alertShownStats.lastHidden)
     );
-    const durationBeforeShowAgain = moment.duration(
+    const durationBeforeShowAgain = datetime.getMillisecondsFromDuration(
       alertConfig.waitTimeBeforeShowAgain
     );
     return durationSinceLastHidden > durationBeforeShowAgain;
@@ -180,9 +183,9 @@ class AlertHeader extends React.Component<Props, State> {
 
   _renderTriggeredAlert(): React$Node {
     const key: string = _.keys(AlertMessages).find(key => url.argument(key));
-    const message: string = url.decodeNameFromUrlPassing(AlertMessages[key].replace(
-       "{value}", url.argument(key)
-     ));
+    const message: string = url.decodeNameFromUrlPassing(
+      AlertMessages[key].replace("{value}", url.argument(key))
+    );
     return <div className="AlertHeader-text">{message}</div>;
   }
 

common/components/common/event_projects/AboutProjectEventDisplay.jsx

@@ -2,7 +2,6 @@
 
 import React from "react";
 import _ from "lodash";
-import type Moment from "moment";
 import Button from "react-bootstrap/Button";
 import AboutPositionEntry from "../positions/AboutPositionEntry.jsx";
 import IconLinkDisplay from "../../componentsBySection/AboutProject/IconLinkDisplay.jsx";
@@ -13,7 +12,7 @@ import url from "../../utils/url.js";
 import Section from "../../enums/Section.js";
 import type { EventProjectAPIDetails } from "../../utils/EventProjectAPIUtils.js";
 import ProjectOwnersSection from "../owners/ProjectOwnersSection.jsx";
-import datetime from "../../utils/datetime.js";
+import datetime from "../../utils/datetime.js"; // checked
 import { Glyph, GlyphStyles, GlyphSizes } from "../../utils/glyphs.js";
 import urlHelper from "../../utils/url.js";
 import CurrentUser, {
@@ -66,7 +65,7 @@ class AboutProjectEventDisplay extends React.PureComponent<Props, State> {
     const isProjectOwner: boolean = CurrentUser.isCoOwnerOrOwner(
       props.eventProject
     );
-    const endDate: Moment = datetime.parse(props.eventProject.event_date_end);
+    const endDate: Number = datetime.parse(props.eventProject.event_date_end);
     const isRSVPedForThisEventProject: boolean = _.some(
       rsvp_events,
       (rsvp: MyRSVPData) =>
@@ -92,7 +91,7 @@ class AboutProjectEventDisplay extends React.PureComponent<Props, State> {
       videoLink: videoLink,
       isRSVPedForThisEventProject: isRSVPedForThisEventProject,
       isProjectOwner: isProjectOwner,
-      isPastEvent: endDate < datetime.now(),
+      isPastEvent: endDate < Date.now(),
     };
     this.cancelRSVP = this.cancelRSVP.bind(this, props.eventProject);
     this.handleShowVolunteerModal = this.handleShowVolunteerModal.bind(this);
@@ -151,11 +150,10 @@ class AboutProjectEventDisplay extends React.PureComponent<Props, State> {
     const showVideo: boolean = !_.isEmpty(this.state.videoLink);
     const showEdit: boolean =
       CurrentUser.isCoOwnerOrOwner(eventProject) || CurrentUser.isStaff();
-    const editUrl: string =
-      urlHelper.section(Section.CreateEventProject, {
-        event_id: eventProject.event_id,
-        project_id: eventProject.project_id,
-      });
+    const editUrl: string = urlHelper.section(Section.CreateEventProject, {
+      event_id: eventProject.event_id,
+      project_id: eventProject.project_id,
+    });
 
     return (
       <div className="AboutProjectEvent-top-content">

common/components/common/projects/ProjectVolunteerModal.jsx

@@ -13,7 +13,7 @@ import TagSelector, { tagOptionDisplay } from "../tags/TagSelector.jsx";
 import { TagDefinition } from "../../utils/ProjectAPIUtils.js";
 import { SelectOption } from "../../types/SelectOption.jsx";
 import Select from "react-select";
-import moment from "moment";
+import datetime, { DateFormat } from "../../utils/datetime.js"; // checked
 import _ from "lodash";
 import type { PositionInfo } from "../../forms/PositionInfo";
 
@@ -147,10 +147,12 @@ class ProjectVolunteerModal extends React.PureComponent<Props, State> {
       "/volunteer/" + this.props.projectId + "/",
       {
         message: this.state.message,
-        projectedEndDate: moment()
-          .utc()
-          .add(this.state.daysToVolunteerForOption.value, "days")
-          .format(),
+        projectedEndDate: datetime.formatByStringUTC(
+          datetime.addToDate(new Date(), {
+            days: this.state.daysToVolunteerForOption.value,
+          }),
+          DateFormat.DATE_TIME_ZULU
+        ),
         roleTag: this._selectedTag(),
       },
       response => this.closeModal(true),

common/components/common/projects/ProjectVolunteerRenewModal.jsx

@@ -6,9 +6,9 @@ import Button from "react-bootstrap/Button";
 import Modal from "react-bootstrap/Modal";
 import Form from "react-bootstrap/Form";
 import ProjectAPIUtils from "../../utils/ProjectAPIUtils.js";
+import datetime, { DateFormat } from "../../utils/datetime.js"; //checked
 import { SelectOption } from "../../types/SelectOption.jsx";
 import Select from "react-select";
-import moment from "moment";
 
 type Props = {|
   applicationId: number,
@@ -70,10 +70,12 @@ class ProjectVolunteerRenewModal extends React.PureComponent<Props, State> {
     ProjectAPIUtils.post(
       "/volunteer/renew/" + this.props.applicationId + "/",
       {
-        projectedEndDate: moment()
-          .utc()
-          .add(this.state.daysToVolunteerForOption.value, "days")
-          .format(),
+        projectedEndDate: datetime.formatByStringUTC(
+          datetime.addToDate(new Date(), {
+            days: this.state.daysToVolunteerForOption.value,
+          }),
+          DateFormat.DATE_TIME_ZULU
+        ),
         message: this.state.message,
       },
       response => this.closeModal(true),

common/components/common/projects/RecentActivityCard/components/ActionAuthorLine.jsx

@@ -1,8 +1,8 @@
 // @flow
 
 import React from "react";
-import moment from "moment";
 import ActivityFeedDefaultAvatar from "../../../../svg/default-activity-feed-avatar.svg";
+import datetime from "../../../../utils/datetime.js"; //checked
 
 type ActionAuthorLineCommitProps = {
   user_name: string,
@@ -15,10 +15,9 @@ export default class ActionAuthorLine extends React.PureComponent<ActionAuthorLi
     const {
       user_name,
       user_avatar_link,
-      action_date,
+      action_date, //2023-08-14T16:25:20.946Z
       action_string = "committed",
     } = this.props;
-
     return (
       <div className="ProjectCommitCard-line ProjectCommitCard-author-line">
         <div className="ProjectCommitCard-avatar">
@@ -35,7 +34,8 @@ export default class ActionAuthorLine extends React.PureComponent<ActionAuthorLi
         </div>
         <div className="ProjectCommitCard-user">{user_name || "unknown"}</div>
         <div className="ProjectCommitCard-date">
-          {action_string} {moment(action_date).fromNow()}
+          {action_string}{" "}
+          {datetime.getDisplayDistance(new Date(), new Date(action_date))}
         </div>
       </div>
     );

common/components/componentsBySection/CreateEvent/AboutEventDisplay.jsx

@@ -1,10 +1,9 @@
 // @flow
 
 import React from "react";
-import type Moment from "moment";
 import _ from "lodash";
 import Button from "react-bootstrap/Button";
-import datetime, { DateFormat } from "../../utils/datetime.js";
+import datetime, { DateFormat, timezone } from "../../utils/datetime.js"; //checked
 import CurrentUser, {
   MyEventProjectData,
   MyProjectData,
@@ -52,17 +51,17 @@ type State = {|
   showCancelRSVPConfirmModal: boolean,
   showPostRSVPToast: boolean,
   showPostCancelRSVPToast: boolean,
-  startDate: Moment,
-  endDate: Moment,
+  startDate: Number,
+  endDate: Number,
   isPastEvent: boolean,
 |};
 
 class AboutEventDisplay extends React.PureComponent<Props, State> {
   constructor(props: Props): void {
     super();
     const userContext: UserContext = CurrentUser?.userContext();
-    const startDate: Moment = datetime.parse(props.event.event_date_start);
-    const endDate: Moment = datetime.parse(props.event.event_date_end);
+    const startDate: Number = datetime.parse(props.event.event_date_start);
+    const endDate: Number = datetime.parse(props.event.event_date_end);
     const isProjectOwnerRSVPed: boolean = !_.isEmpty(
       userContext?.event_projects
     );
@@ -86,7 +85,7 @@ class AboutEventDisplay extends React.PureComponent<Props, State> {
       showCancelRSVPConfirmModal: false,
       startDate: startDate,
       endDate: endDate,
-      isPastEvent: endDate < datetime.now(),
+      isPastEvent: endDate < Date.now(),
       showPostRSVPToast: false,
       showPostCancelRSVPToast: false,
     };
@@ -117,12 +116,11 @@ class AboutEventDisplay extends React.PureComponent<Props, State> {
 
   render(): ?$React$Node {
     const event: EventData = this.state.event;
-    const startDate: Moment = this.state.startDate;
-    const endDate: Moment = this.state.endDate;
-    const isSingleDayEvent: boolean = datetime.isOnSame(
-      "day",
-      startDate,
-      endDate
+    const startDate: Number = this.state.startDate;
+    const endDate: Number = this.state.endDate;
+    const isSingleDayEvent: boolean = datetime.isSameDay(
+      new Date(startDate),
+      new Date(endDate)
     );
     return !event ? null : (
       <React.Fragment>
@@ -150,7 +148,12 @@ class AboutEventDisplay extends React.PureComponent<Props, State> {
                   CurrentUser.isStaff()) &&
                 this._renderEditButton()}
               <div className="AboutEvent-title-date">
-                <h4>{startDate.format(DateFormat.MONTH_DATE_YEAR)}</h4>
+                <h4>
+                  {datetime.formatByString(
+                    new Date(startDate),
+                    DateFormat.MONTH_DATE_YEAR
+                  )}
+                </h4>
               </div>
               <h1>{event.event_name}</h1>
               <p>{event.event_short_description}</p>
@@ -220,28 +223,46 @@ class AboutEventDisplay extends React.PureComponent<Props, State> {
     );
   }
 
-  _renderDatesSection(startDate: Moment, endDate: Moment): $React$Node {
+  _renderDatesSection(startDate: Number, endDate: Number): $React$Node {
     return (
       <React.Fragment>
         <h5 className="AboutEvent-info-header">Dates</h5>
-        <p>{startDate.format(DateFormat.DAY_MONTH_DATE_YEAR_TIME)}</p>
+        <p>
+          {datetime.formatbyStringWithTimeZone(
+            new Date(startDate),
+            DateFormat.DAY_MONTH_DATE_YEAR_TIME
+          )}
+        </p>
         <h6>To</h6>
-        <p>{endDate.format(DateFormat.DAY_MONTH_DATE_YEAR_TIME)}</p>
+        <p>
+          {datetime.formatbyStringWithTimeZone(
+            new Date(endDate),
+            DateFormat.DAY_MONTH_DATE_YEAR_TIME
+          )}
+        </p>
       </React.Fragment>
     );
   }
 
-  _renderDateTimeSections(startDate: Moment, endDate: Moment): $React$Node {
+  _renderDateTimeSections(startDate: Number, endDate: Number): $React$Node {
     return (
       <React.Fragment>
         <h5 className="AboutEvent-info-header">Date</h5>
-        <p>{startDate.format(DateFormat.DAY_MONTH_DATE_YEAR)}</p>
+        <p>
+          {datetime.formatByString(
+            new Date(startDate),
+            DateFormat.DAY_MONTH_DATE_YEAR
+          )}
+        </p>
 
         <h5 className="AboutEvent-info-header">Time</h5>
         <p>
-          {startDate.format(DateFormat.TIME) +
+          {datetime.formatByString(new Date(startDate), DateFormat.TIME) +
             " - " +
-            endDate.format(DateFormat.TIME_TIMEZONE)}
+            datetime.formatbyStringWithTimeZone(
+              new Date(endDate),
+              DateFormat.TIME_TIMEZONE
+            )}
         </p>
       </React.Fragment>
     );