Fix timer

Author: bortoz

packages/quizms/src/web/components/timer.tsx

@@ -1,29 +1,17 @@
 import { useEffect, useState } from "react";
 
 import clsx from "clsx";
-import { addMinutes, differenceInSeconds, isAfter } from "date-fns";
+import { differenceInSeconds, isAfter } from "date-fns";
 
-type TimerProps =
-  | {
-      startTime?: undefined;
-      duration?: undefined;
-      endTime: Date;
-      noAnimation?: boolean;
-      hideMinutes?: boolean;
-    }
-  | {
-      startTime: Date;
-      duration: number;
-      endTime?: undefined;
-      noAnimation?: boolean;
-      hideMinutes?: boolean;
-    };
+type TimerProps = {
+  endTime: Date;
+  noAnimation?: boolean;
+  hideMinutes?: boolean;
+};
 
-export function Timer(props: TimerProps) {
+export function Timer({ endTime, noAnimation, hideMinutes }: TimerProps) {
   const [currentTime, setCurrentTime] = useState(Date.now());
 
-  const endTime = props.endTime ?? addMinutes(props.startTime, props.duration);
-
   useEffect(() => {
     const id = setInterval(() => {
       const now = Date.now();
@@ -35,26 +23,20 @@ export function Timer(props: TimerProps) {
     return () => clearInterval(id);
   }, [endTime]);
 
-  let timeLeft = Math.max(differenceInSeconds(endTime!, currentTime), 0);
-
-  if (props.duration) {
-    timeLeft = Math.min(timeLeft, props.duration * 60);
-  }
+  const timeLeft = Math.max(differenceInSeconds(endTime!, currentTime), 0);
 
   const hours = Math.floor(timeLeft / 3600);
   const minutes = Math.floor(timeLeft / 60) % 60;
   const seconds = timeLeft % 60;
 
   return hours > 0 ? (
-    <span
-      className={clsx("countdown font-mono", props.noAnimation && "[&_*:before]:transition-none")}>
+    <span className={clsx("countdown font-mono", noAnimation && "[&_*:before]:transition-none")}>
       <span style={{ "--value": hours } as any} />h
       <span style={{ "--value": minutes } as any} />m
     </span>
   ) : (
-    <span
-      className={clsx("countdown font-mono", props.noAnimation && "[&_*:before]:transition-none")}>
-      {!props.hideMinutes && (
+    <span className={clsx("countdown font-mono", noAnimation && "[&_*:before]:transition-none")}>
+      {!hideMinutes && (
         <>
           <span style={{ "--value": minutes } as any} />m
         </>

packages/quizms/src/web/student/layout.tsx

@@ -122,14 +122,10 @@ export function StudentLayout({
               {progress}%
             </Progress>
             <div className="px-3">
-              {terminated || !participation.startingTime || !contest.hasOnline ? (
+              {terminated || !student.finishedAt || !contest.hasOnline ? (
                 <span className="font-mono">00:00</span>
               ) : (
-                <Timer
-                  startTime={participation.startingTime}
-                  duration={contest.duration}
-                  noAnimation
-                />
+                <Timer endTime={student.finishedAt} noAnimation />
               )}
             </div>
             {terminated && reset ? (