fix(web): countdown fix

Author: alcercu

web/src/hooks/useCountdown.ts

@@ -1,11 +1,18 @@
 import { useState, useEffect } from "react";
 import { getTimeLeft } from "utils/date";
 
-export function useCountdown(deadline: number): number {
-  const timeLeft = getTimeLeft(deadline);
-  const [counter, setCounter] = useState<number>(timeLeft);
+export function useCountdown(deadline?: number): number | undefined {
+  const [counter, setCounter] = useState<number | undefined>();
   useEffect(() => {
-    counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
+    if (typeof deadline !== "undefined") {
+      const timeLeft = getTimeLeft(deadline);
+      setCounter(timeLeft);
+    }
+  }, [deadline]);
+  useEffect(() => {
+    typeof counter !== "undefined" &&
+      counter > 0 &&
+      setTimeout(() => setCounter(counter - 1), 1000);
   }, [counter]);
   return counter;
 }

web/src/pages/Cases/CaseDetails/Timeline.tsx

@@ -4,7 +4,7 @@ import { Periods } from "consts/periods";
 import { DisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 import { Box, Steps } from "@kleros/ui-components-library";
 import { useCountdown } from "hooks/useCountdown";
-import { secondsToDayHourMinute, getTimeLeft } from "utils/date";
+import { secondsToDayHourMinute } from "utils/date";
 
 const Timeline: React.FC<{
   dispute: DisputeDetailsQuery["dispute"];
@@ -32,7 +32,7 @@ const currentPeriodToCurrentItem = (
   if (currentPeriodIndex <= Periods.commit) return currentPeriodIndex;
   else if (currentPeriodIndex < Periods.execution)
     return currentPeriodIndex - 1;
-  else return ruled ? currentPeriodIndex : currentPeriodIndex - 1;
+  else return ruled ? 5 : currentPeriodIndex - 1;
 };
 
 const useTimeline = (
@@ -46,31 +46,51 @@ const useTimeline = (
     "Appeal Period",
     "Executed",
   ];
-  const parsedLastPeriodChange = parseInt(dispute?.lastPeriodChange, 10);
-  const parsedTimeCurrentPeriod =
-    dispute && dispute?.court.timesPerPeriod.length > currentPeriodIndex
-      ? parseInt(dispute?.court.timesPerPeriod[currentPeriodIndex])
-      : 0;
-  const countdown = useCountdown(
-    parsedLastPeriodChange + parsedTimeCurrentPeriod
+  const deadlineCurrentPeriod = getDeadline(
+    currentPeriodIndex,
+    dispute?.lastPeriodChange,
+    dispute?.court.timesPerPeriod
   );
+  const countdown = useCountdown(deadlineCurrentPeriod);
   const getSubitems = (index: number): string[] => {
-    if (index < currentItemIndex) {
-      return ["Done!"];
-    } else if (index === 3) {
-      return currentItemIndex === 3 ? ["Pending"] : [];
-    } else if (index === currentItemIndex) {
-      return [secondsToDayHourMinute(countdown)];
-    } else {
-      return [secondsToDayHourMinute(dispute?.court.timesPerPeriod[index])];
+    if (typeof countdown !== "undefined" && dispute) {
+      if (index < currentItemIndex) {
+        return ["Done!"];
+      } else if (index === 3) {
+        return currentItemIndex === 3 ? ["Pending"] : [];
+      } else if (index === currentItemIndex) {
+        return [secondsToDayHourMinute(countdown)];
+      } else {
+        return [secondsToDayHourMinute(dispute?.court.timesPerPeriod[index])];
+      }
     }
+    return ["Loading..."];
   };
   return titles.map((title, i) => ({
     title,
     subitems: getSubitems(i),
   }));
 };
 
+const getDeadline = (
+  currentPeriodIndex: number,
+  lastPeriodChange?: string,
+  timesPerPeriod?: string[]
+): number | undefined => {
+  if (
+    lastPeriodChange &&
+    timesPerPeriod &&
+    currentPeriodIndex < timesPerPeriod.length
+  ) {
+    const parsedLastPeriodChange = parseInt(lastPeriodChange, 10);
+    const parsedTimeCurrentPeriod = parseInt(
+      timesPerPeriod[currentPeriodIndex]
+    );
+    return parsedLastPeriodChange + parsedTimeCurrentPeriod;
+  }
+  return undefined;
+};
+
 const TimeLineContainer = styled(Box)`
   width: 100%;
   height: 100px;