Skip to content

Use formatDuration util for timer display instead of duplicated mm:ss formatting #758

Description

@gaidheal1

Summary

UnifiedTimerHome and ActivityInput both render the running timer with hand-rolled formatting instead of the existing formatDuration util in frontend/src/utils/formatUtils.ts:

{minutes}:{seconds.toString().padStart(2, "0")}
  • frontend/src/components/UnifiedTimerHome/UnifiedTimerHome.tsx:194
  • frontend/src/components/ActivityInput/ActivityInput.tsx:66

Both minutes/seconds values come from useActivityInput.ts:539-540:

const minutes = Math.floor(elapsed / 60);
const seconds = elapsed % 60;

This has a real bug, not just duplication: minutes never rolls over into hours, so a timer running for over an hour displays as e.g. 75:00 instead of 1:15:00.

formatDuration(duration: number) (frontend/src/utils/formatUtils.ts:1-12) already handles this correctly — for durations under an hour it produces the exact same m:ss output (unpadded minutes, zero-padded seconds), and for durations at or beyond an hour it rolls over to h:mm:ss.

Proposed change

  1. In useActivityInput.ts, stop computing/returning separate minutes/seconds. Instead return the raw elapsed seconds (already available) or a precomputed formattedElapsed: formatDuration(elapsed).
  2. In UnifiedTimerHome.tsx and ActivityInput.tsx, replace {minutes}:{seconds.toString().padStart(2, "0")} with {formatDuration(elapsed)} (or the precomputed string), importing formatDuration from ../../utils/formatUtils.
  3. Update useActivityInput.test.ts and any snapshot/unit tests that assert on minutes/seconds fields directly.

Why

  • Fixes the >1hr display bug for free.
  • Removes duplicated formatting logic in favor of an existing, already-tested util.
  • Low risk, self-contained, good scope for a first contribution.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    Status
    In progress

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions