Merge branch 'issue-303' into develop

Author: birdofpreyru

__tests__/shared/components/challenge-listing/ChallengeCard/__snapshots__/Status.jsx.snap

@@ -112,7 +112,7 @@ exports[`Matches shallow shapshot shapshot 1 1`] = `
         <div
           className="src-shared-components-challenge-listing-ChallengeCard-Status-___style__time-left___1RyL7"
         >
-          897d 19:18h to go
+          168d 20h to go
         </div>
       </div>
     </ProgressBarTooltip>
@@ -123,7 +123,7 @@ exports[`Matches shallow shapshot shapshot 1 1`] = `
       target={undefined}
     >
       <span>
-        897d 19:18h
+        168d 20h
       </span>
       <span
         className="src-shared-components-challenge-listing-ChallengeCard-Status-___style__to-register___17rpT"
@@ -739,7 +739,7 @@ exports[`Matches shallow shapshot shapshot 1 6`] = `
         <div
           className="src-shared-components-challenge-listing-ChallengeCard-Status-___style__time-left___1RyL7"
         >
-          min to go
+          0min 0s to go
         </div>
       </div>
     </ProgressBarTooltip>

src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx

@@ -20,6 +20,9 @@ const DRAFT_MSG = 'In Draft';
 const STALLED_TIME_LEFT_MSG = 'Challenge is currently on hold';
 const FF_TIME_LEFT_MSG = 'Winner is working on fixes';
 
+const HOUR_MS = 60 * 60 * 1000;
+const DAY_MS = 24 * HOUR_MS;
+
 const getTimeLeft = (date, currentPhase) => {
   if (!currentPhase || currentPhase === 'Stalled') {
     return {
@@ -33,27 +36,18 @@ const getTimeLeft = (date, currentPhase) => {
     };
   }
 
-  const duration = moment.duration(moment(date).diff(moment()));
-  const h = duration.hours();
-  const d = duration.asDays();
-  const m = duration.minutes();
-  const late = (d < 0 || h < 0 || m < 0);
-  const suffix = h !== 0 ? 'h' : 'min';
-  let text = '';
-  if (d >= 1) text += `${Math.abs(parseInt(d, 10))}d `;
-  if (h !== 0) text += `${Math.abs(h)}`;
-  if (h !== 0 && m !== 0) text += ':';
-  if (m !== 0) text += `${Math.abs(m)}`;
-  text += suffix;
-  if (late) {
-    text = `Late by ${text}`;
-  } else {
-    text = `${text} to go`;
-  }
-  return {
-    late,
-    text,
-  };
+  let time = moment(date).diff();
+  const late = time < 0;
+  if (late) time = -time;
+
+  let format;
+  if (time > DAY_MS) format = 'DDD[d] H[h]';
+  else if (time > HOUR_MS) format = 'H[h] m[min]';
+  else format = 'm[min] s[s]';
+
+  time = moment(time).format(format);
+  time = late ? `Late by ${time}` : `${time} to go`;
+  return { late, text: time };
 };
 
 function numRegistrantsTipText(number) {
@@ -313,10 +307,18 @@ class ChallengeStatus extends Component {
       detailLink,
       openChallengesInNewTabs,
     } = this.props;
-    const lng = getTimeLeft(
+    const timeDiff = getTimeLeft(
       challenge.registrationEndDate || challenge.submissionEndDate,
       challenge.currentPhases[0] ? challenge.currentPhases[0].phaseType : '',
-    ).text.length;
+    );
+    let timeNote = timeDiff.text;
+    /* TODO: This is goofy, makes the trick, but should be improved. The idea
+     * here is that the standard "getTimeLeft" method, for positive times,
+     * generates a string like "H MM to go"; here we want to render just
+     * H MM part, so we cut the last 6 symbols. Not a good code. */
+    if (!timeDiff.late) {
+      timeNote = timeNote.substring(0, timeNote.length - 6);
+    }
     return (
       <a
         href={detailLink}
@@ -325,12 +327,7 @@ class ChallengeStatus extends Component {
         target={openChallengesInNewTabs ? '_blank' : undefined}
       >
         <span>
-          {
-            getTimeLeft(
-              challenge.registrationEndDate || challenge.submissionEndDate,
-              challenge.currentPhases[0] ? challenge.currentPhases[0].phaseType : '',
-            ).text.substring(0, lng - 6)
-          }
+          { timeNote }
         </span>
         <span styleName="to-register">to register</span>
       </a>