fix: date range formatting

Cover the cases when not all dates are defined.

Author: maxceem

src/routes/MyTeamsDetails/components/TeamMembers/index.jsx

@@ -7,16 +7,16 @@ import React, { useState, useCallback, useMemo } from "react";
 import PT from "prop-types";
 import "./styles.module.scss";
 import _ from "lodash";
-import moment from "moment";
 import User from "components/User";
 import CardHeader from "components/CardHeader";
 // import Rating from "components/Rating";
 import SkillsSummary from "components/SkillsSummary";
 import ActionsMenu from "components/ActionsMenu";
 import Button from "components/Button";
 import Pagination from "components/Pagination";
-import { DAY_FORMAT, TEAM_MEMBERS_PER_PAGE } from "constants";
+import { TEAM_MEMBERS_PER_PAGE } from "constants";
 import {
+  formatDateRange,
   formatMoney,
   formatReportIssueUrl,
   formatRequestExtensionUrl,
@@ -121,8 +121,7 @@ const TeamMembers = ({ team }) => {
                 <div styleName="table-group-first-inner">
                   <div styleName="table-cell cell-role">{member.job.title}</div>
                   <div styleName="table-cell cell-date">
-                    {moment(member.startDate).format(DAY_FORMAT)} -{" "}
-                    {moment(member.endDate).format(DAY_FORMAT)}
+                    {formatDateRange(member.startDate, member.endDate)}
                   </div>
                   <div styleName="table-cell cell-money">
                     {member.customerRate && member.customerRate > 0

src/routes/MyTeamsDetails/components/TeamPositions/index.jsx

@@ -5,17 +5,12 @@
  */
 import React from "react";
 import PT from "prop-types";
-import moment from "moment";
 import CardHeader from "components/CardHeader";
 import SkillsList, { skillShape } from "components/SkillsList";
 import Button from "components/Button";
-import {
-  DAY_FORMAT,
-  POSITION_STATUS,
-  POSITION_STATUS_TO_TEXT,
-  RATE_TYPE,
-} from "constants";
+import { POSITION_STATUS, POSITION_STATUS_TO_TEXT, RATE_TYPE } from "constants";
 import "./styles.module.scss";
+import { formatDateRange } from "utils/format";
 
 const TeamPositions = ({ teamId, positions }) => {
   return (
@@ -33,8 +28,7 @@ const TeamPositions = ({ teamId, positions }) => {
                 </div>
                 <div styleName="table-group-first-inner">
                   <div styleName="table-cell cell-date">
-                    {moment(position.startDate).format(DAY_FORMAT)} -{" "}
-                    {moment(position.endDate).format(DAY_FORMAT)}
+                    {formatDateRange(position.startDate, position.endDate)}
                   </div>
                   <div styleName="table-cell cell-money">
                     {/* Hide rate as we don't have data for it */}

src/routes/MyTeamsList/components/TeamCard/index.jsx

@@ -14,6 +14,7 @@ import IconClock from "../../../../assets/images/icon-clock.svg";
 import IconMoney from "../../../../assets/images/icon-money.svg";
 import IconPeople from "../../../../assets/images/icon-people.svg";
 import {
+  formatDateRange,
   formatMoney,
   formatRemainingTimeForTeam,
   formatReportIssueUrl,
@@ -45,14 +46,9 @@ const TeamCard = ({ team }) => {
 
       <div styleName="data-items">
         <DataItem title="Start - End Date" icon={<IconCalendar />}>
-          {team.startDate && team.endDate ? (
-            <>
-              {moment(team.startDate).format(DAY_FORMAT)} -{" "}
-              {moment(team.endDate).format(DAY_FORMAT)}
-            </>
-          ) : (
-            <>TBD</>
-          )}
+          {team.startDate && team.endDate
+            ? formatDateRange(team.startDate, team.endDate)
+            : "TBD"}
         </DataItem>
 
         <DataItem title="Time Remaining" icon={<IconClock />}>

src/utils/format.js

@@ -5,6 +5,7 @@ import _ from "lodash";
 import { RATE_TYPE } from "constants";
 import { EMAIL_REPORT_ISSUE, EMAIL_REQUEST_EXTENSION } from "../../config";
 import moment from "moment";
+import { DAY_FORMAT } from "constants/";
 
 /**
  * Formats number with base word in singular or plural form depend on the number.
@@ -133,3 +134,18 @@ export const formatRequestExtensionUrl = (subject) => {
     subject
   )}`;
 };
+
+/**
+ * Form date range
+ *
+ * @param {string|Date|moment.Moment} startDate start date
+ * @param {string|Date|moment.Moment} endDate   end date
+ *
+ * @returns {string} formatted date range
+ */
+export const formatDateRange = (startDate, endDate) => {
+  const startDateStr = startDate ? moment(startDate).format(DAY_FORMAT) : "";
+  const endDateStr = endDate ? moment(endDate).format(DAY_FORMAT) : "";
+
+  return `${startDateStr} - ${endDateStr}`;
+};