Merge branch 'development' into aseem-application-jobposting-avghours

Author: aseemdeshmukh

src/components/Timer/Countdown.jsx

@@ -57,19 +57,51 @@ export default function Countdown({
   const hourRef = useRef(null);
   const minRef = useRef(null);
 
-  const remainingHours = moment.duration(remaining).hours();
-  const remainingMinutes = moment.duration(remaining).minutes();
-  const remainingSeconds = moment.duration(remaining).seconds();
+  const remainingDuration = moment.duration(remaining);
+  const remainingHours = Math.floor(remainingDuration.asHours());
+  const remainingMinutes = remainingDuration.minutes();
+  const remainingSeconds = remainingDuration.seconds();
 
   const remainingHoursDisplay = remainingHours.toString().padStart(2, '0');
   const remainingMinutesDisplay = remainingMinutes.toString().padStart(2, '0');
   const remainingSecondsDisplay = remainingSeconds.toString().padStart(2, '0');
 
+  const goalDuration = moment.duration(goal);
+  const goalHoursDisplay = Math.floor(goalDuration.asHours()).toString();
+  const goalMinutesDisplay = goalDuration
+    .minutes()
+    .toString()
+    .padStart(2, '0');
+  const goalSecondsDisplay = goalDuration
+    .seconds()
+    .toString()
+    .padStart(2, '0');
+
+  const elapsedMs = Math.max(goal - remaining, 0);
+  const elapsedDuration = moment.duration(elapsedMs);
+  const elapsedHoursDisplay = Math.floor(elapsedDuration.asHours()).toString();
+  const elapsedMinutesDisplay = elapsedDuration
+    .minutes()
+    .toString()
+    .padStart(2, '0');
+  const elapsedSecondsDisplay = elapsedDuration
+    .seconds()
+    .toString()
+    .padStart(2, '0');
+
   const shouldDisplay = {
     hour: true,
     minute: true,
   };
 
+  const minGoalMs = MIN_MINS * 60 * 1000;
+  const maxGoalMs = MAX_HOURS * 60 * 60 * 1000;
+
+  const canSubtract15 = goal - 15 * 60 * 1000 >= minGoalMs;
+  const canAdd15 = goal + 15 * 60 * 1000 <= maxGoalMs && checkBtnAvail(15);
+  const canAdd30 = goal + 30 * 60 * 1000 <= maxGoalMs && checkBtnAvail(30);
+  const canAdd60 = goal + 60 * 60 * 1000 <= maxGoalMs && checkBtnAvail(60);
+
   const forceMinMax = (event, ref) => {
     const { value, min, max } = event.target;
     const updatedValue = Math.max(Number(min), Math.min(Number(max), Number(value)));
@@ -120,8 +152,8 @@ export default function Countdown({
     }
   };
 
-  const handleInitialMinuteChange = amout => {
-    const newMin = initialMinutes + amout;
+  const handleInitialMinuteChange = amount => {
+    const newMin = initialMinutes + amount;
     switch (true) {
       case initialHours === 0 && newMin < MIN_MINS:
         toast.error(`Timer cannot be set less than ${MIN_MINS} minutes!`);
@@ -150,15 +182,12 @@ export default function Countdown({
         onClick={toggleTimer}
         title="close timer dropdown"
       />
+
       <div className={css.infoDisplay}>
-        <h4>{`Goal: ${moment.utc(goal).format('HH:mm:ss')}`}</h4>
-        <h6>
-          {`Elapsed: ${moment
-            .utc(goal)
-            .subtract(remaining)
-            .format('HH:mm:ss')}`}
-        </h6>
+        <h4>{`Goal: ${goalHoursDisplay}:${goalMinutesDisplay}:${goalSecondsDisplay}`}</h4>
+        <h6>{`Elapsed: ${elapsedHoursDisplay}:${elapsedMinutesDisplay}:${elapsedSecondsDisplay}`}</h6>
       </div>
+
       <div className={css.countdownCircle}>
         <CircularProgressbarWithChildren
           value={started ? (moment.duration(remaining).asMilliseconds() / goal) * 100 : 100}
@@ -181,7 +210,9 @@ export default function Countdown({
                 title="Reset timer"
               />
             )}
+
             <span>Time Remaining</span>
+
             <div className={css.remainingTime}>
               {shouldDisplay.hour && (
                 <>
@@ -192,6 +223,7 @@ export default function Countdown({
                   <div className={css.timeColon}>:</div>
                 </>
               )}
+
               {shouldDisplay.minute && (
                 <>
                   <div>
@@ -201,11 +233,13 @@ export default function Countdown({
                   <div className={css.timeColon}>:</div>
                 </>
               )}
+
               <div>
                 <div className={css.timeDisplay}>{remainingSecondsDisplay}</div>
                 <div className={css.label}>seconds</div>
               </div>
             </div>
+
             <div className={css.operators}>
               {running ? (
                 <button type="button" onClick={sendPause} aria-label="Pause timer">
@@ -228,6 +262,7 @@ export default function Countdown({
                   />
                 </button>
               )}
+
               {started && (
                 <button
                   type="button"
@@ -245,40 +280,48 @@ export default function Countdown({
           </div>
         </CircularProgressbarWithChildren>
       </div>
+
       <div className={css.bottom}>
         {started ? (
           <div className={cs(css.addGrid, css.transitionColor)}>
             <button
               size="sm"
               type="button"
               aria-label="remove 15 minutes"
-              onClick={() => handleSubtractButton(15)}
+              onClick={() => canSubtract15 && handleSubtractButton(15)}
+              disabled={!canSubtract15}
             >
-              <span className={cs(css.btn, checkBtnAvail(-15) ? '' : css.btnDisabled)}>-15 m</span>
+              <span className={cs(css.btn, canSubtract15 ? '' : css.btnDisabled)}>-15 m</span>
             </button>
+
             <button
               size="sm"
               type="button"
               aria-label="add 15 minutes"
-              onClick={() => handleAddButton(15)}
+              onClick={() => canAdd15 && handleAddButton(15)}
+              disabled={!canAdd15}
             >
-              <span className={cs(css.btn, checkBtnAvail(15) ? '' : css.btnDisabled)}>+15 m</span>
+              <span className={cs(css.btn, canAdd15 ? '' : css.btnDisabled)}>+15 m</span>
             </button>
+
             <button
               size="sm"
               type="button"
               aria-label="add 30 minutes"
-              onClick={() => handleAddButton(30)}
+              onClick={() => canAdd30 && handleAddButton(30)}
+              disabled={!canAdd30}
             >
-              <span className={cs(css.btn, checkBtnAvail(30) ? '' : css.btnDisabled)}>+30 m</span>
+              <span className={cs(css.btn, canAdd30 ? '' : css.btnDisabled)}>+30 m</span>
             </button>
+
             <button
               size="sm"
               type="button"
               aria-label="add 1 hour"
-              onClick={() => handleAddButton(60)}
+              onClick={() => canAdd60 && handleAddButton(60)}
+              disabled={!canAdd60}
             >
-              <span className={cs(css.btn, checkBtnAvail(60) ? '' : css.btnDisabled)}>+1 h</span>
+              <span className={cs(css.btn, canAdd60 ? '' : css.btnDisabled)}>+1 h</span>
             </button>
           </div>
         ) : (
@@ -292,6 +335,7 @@ export default function Countdown({
                     onClick={() => handleInitialHourChange(1)}
                   />
                 )}
+
                 <Input
                   type="number"
                   className={editing ? css.editing : ''}
@@ -302,14 +346,17 @@ export default function Countdown({
                   disabled={!editing}
                   innerRef={hourRef}
                 />
+
                 {editing && (
                   <FaAngleDown
                     className={cs(css.transitionColor, css.down)}
                     onClick={() => handleInitialHourChange(-1)}
                   />
                 )}
               </div>
+
               <span className={css.timeColon}>:</span>
+
               <div className={css.numberWrapper}>
                 {editing && (
                   <FaAngleUp
@@ -319,6 +366,7 @@ export default function Countdown({
                     }
                   />
                 )}
+
                 <Input
                   type="number"
                   min={0}
@@ -330,6 +378,7 @@ export default function Countdown({
                   disabled={!editing}
                   innerRef={minRef}
                 />
+
                 {editing && (
                   <FaAngleDown
                     className={cs(css.transitionColor, css.down)}
@@ -341,6 +390,7 @@ export default function Countdown({
                   />
                 )}
               </div>
+
               {editing ? (
                 <FaSave
                   className={cs(css.transitionColor, css.goalBtn)}

src/components/Timer/Timer.jsx

@@ -125,6 +125,18 @@ function Timer({ authUser, darkMode, isPopout }) {
 
   const sendJsonMessageNoQueue = useCallback(msg => sendJsonMessage(msg, false), [sendMessage]);
 
+  const previewDuration = moment.duration(remaining);
+  const previewHoursDisplay = Math.floor(previewDuration.asHours()).toString();
+  const previewMinutesDisplay = previewDuration
+    .minutes()
+    .toString()
+    .padStart(2, '0');
+  const previewSecondsDisplay = previewDuration
+    .seconds()
+    .toString()
+    .padStart(2, '0');
+  const previewTimeDisplay = `${previewHoursDisplay}:${previewMinutesDisplay}:${previewSecondsDisplay}`;
+
   // Enhanced function to clear submitted time with better logging
   const clearSubmittedTime = useCallback(() => {
     console.log(' Clearing submitted time - Timer reset or user change detected');
@@ -913,7 +925,7 @@ function Timer({ authUser, darkMode, isPopout }) {
             className={css.preview}
             onClick={toggleTimer}
           >
-            {moment.utc(remaining).format('HH:mm:ss')}
+            {previewTimeDisplay}
           </button>
         ) : (
           <div className={css.disconnected}>Disconnected</div>

src/components/Timer/__test__/Countdown.test.jsx

@@ -33,8 +33,8 @@ describe('Countdown Component', () => {
   it('renders the countdown component with the correct initial values', () => {
     // eslint-disable-next-line react/jsx-props-no-spreading
     render(<Countdown {...defaultProps} />);
-    expect(screen.getByText('Goal: 01:00:00')).toBeInTheDocument();
-    expect(screen.getByText('Elapsed: 00:30:00')).toBeInTheDocument();
+    expect(screen.getByText('Goal: 1:00:00')).toBeInTheDocument();
+    expect(screen.getByText('Elapsed: 0:30:00')).toBeInTheDocument();
     expect(screen.getByText('Time Remaining')).toBeInTheDocument();
     expect(screen.getAllByText('00')).toHaveLength(2);
     expect(screen.getByText('30')).toBeInTheDocument();