[refactor] extract independent Countdown class component from Hackathon page with MobX

[Copilot]

useLiveCountdownState and useCountdown (in Hero.tsx) used chains of useState/useEffect/useMemo/useCallback for timer management. These are replaced following the pattern from BootCell's CountDown component: an independent MobX decorator class component for the visual countdown, and a plain function call for agenda-state resolution.

New: Countdown.tsx — independent MobX class component

The countdown logic is extracted into a self-contained @observer class component extending ObservedComponent from mobx-react-helper, decoupled from Hero. A dedicated initTimer() method carries the @reaction decorator watching observedProps.endTime, and componentDidMount starts it explicitly:

@observer
export class Countdown extends ObservedComponent<CountdownProps> {
  @observable accessor rest = 0;

  // BootCell-style TimeUnit[] algorithm — supports arbitrary number of units
  @computed get timeSections(): TimeSection[] { /* reduce over units with scale+label */ }

  tick = () => {
    const rest = this.target - Date.now();
    if (rest > 0) { this.rest = rest; }
    else { this.rest = 0; if (this.timer) { clearInterval(this.timer); this.props.onEnd?.(); } }
  };

  componentDidMount() { super.componentDidMount(); this.initTimer(); }

  @reaction((_this: Countdown) => _this.observedProps.endTime)
  initTimer() {
    if (this.timer) { window.clearInterval(this.timer); this.timer = undefined; }
    this.tick();
    this.timer = window.setInterval(this.tick, 1000);
  }

  componentWillUnmount() { super.componentWillUnmount(); if (this.timer) window.clearInterval(this.timer); }
}

Props:

• endTime?: string | Date | number — the target timestamp (replaces countdownTo)
• units: TimeUnit[] — arbitrary time units each with { scale: number, label: string }, porting BootCell's reduction algorithm
• className?: string — passed to the <ol> so callers (e.g. Hero) control grid layout via their own CSS module
• onEnd?: () => void — fired when the countdown reaches zero, allowing callers to decide whether to start a new phase

The component renders only a pure <ol> — no label or surrounding layout — keeping it fully customisable by callers. render() uses this.props directly; no internal CSS module classes are applied.

Hero.tsx — HackathonHero remains a simple functional component

The useCountdown hook is removed. The Hero owns the countdown wrapper, optional label, and grid styling, passing them to <Countdown>:

{countdownTo && (
  <div className={styles.countdownWrap}>
    {countdownLabel && <p className={`${styles.countdownLabel} m-0`}>{countdownLabel}</p>}
    <Countdown
      className={styles.countdownGrid}
      endTime={countdownTo}
      units={countdownUnitLabels.map((label, i) => ({ scale: DEFAULT_UNIT_SCALES[i] ?? 1, label }))}
    />
  </div>
)}

Hero.module.less — cell styles moved to .countdownGrid li

The separate .countdownCell class is removed. Its styles (border, background, min-height, typography) are now nested under .countdownGrid li, keeping all countdown-related styling in one place and removing the dependency on an internal class name from Countdown.

useLiveCountdownState.ts → removed

Replaced by a direct call to the already-existing resolveCountdownState() pure function in pages/hackathon/[id].tsx — no reactive state or lifecycle re-renders needed:

const { nextItem: nextAgendaItem, countdownTo } = resolveCountdownState(
  agendaItems,
  Date.now(),
  startTime,
  endTime,
);

[Copilot]

Pull request overview

Refactors the Hackathon countdown by extracting a reusable MobX-based Countdown component and moving agenda-driven countdown state resolution into a dedicated AgendaCountdown wrapper.

Changes:

• Added components/Base/Countdown.tsx MobX class component that renders an <ol> countdown for arbitrary time units.
• Replaced Hero’s hook-based countdown rendering with AgendaCountdown, and removed useLiveCountdownState.
• Moved countdown-specific styling out of Hero.module.less into AgendaCountdown.module.less.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
pages/hackathon/[id].tsx	Updates Hackathon page to pass agenda + time window + TimeUnit[] into the hero countdown flow.
components/Base/Countdown.tsx	Introduces the extracted MobX countdown component and time-unit section calculation.
components/Activity/Hackathon/useLiveCountdownState.ts	Removes the now-replaced countdown hook implementation.
components/Activity/Hackathon/constant.ts	Removes buildCountdownUnitLabels helper no longer used by the hero countdown.
components/Activity/Hackathon/Hero.tsx	Switches hero countdown rendering from local hooks to AgendaCountdown.
components/Activity/Hackathon/Hero.module.less	Removes countdown styles from hero and keeps only button styling updates.
components/Activity/Hackathon/AgendaCountdown.tsx	Adds agenda-aware countdown wrapper calling resolveCountdownState and re-arming on countdown end.
components/Activity/Hackathon/AgendaCountdown.module.less	Adds relocated countdown layout + cell styling and responsive behavior.

[Copilot]

render() spreads ...props from this.props onto the <ol>, but props still contains non-DOM fields like units, endTime, and onEnd. React will forward these as invalid attributes (and units will stringify as "[object Object]"). Destructure and omit the component-only props before spreading onto the DOM element.

[Copilot]

endTimestamp uses this.props.endTime || Date.now(). If endTime is a valid numeric timestamp of 0 (or another falsy-but-valid value), this will incorrectly fall back to Date.now(). Prefer nullish coalescing (??) or avoid the fallback since endTime is required by the props type.

Suggested change

	return +new Date(this.props.endTime || Date.now());
	return +new Date(this.props.endTime);

[Copilot]

~~(rest / scale) relies on 32-bit bitwise conversion and can overflow/wrap for large values. Use Math.floor(rest / scale) (or an equivalent safe integer conversion) to avoid incorrect countdown sections for longer durations or custom unit configurations.

Suggested change

	const value = ~~(rest / scale);
	const value = Math.floor(rest / scale);

[Copilot]

timeSections.map uses key={label}. label is user-provided (and may not be unique across units or locales), which can cause duplicate keys and unstable rendering. Use a guaranteed-unique key (e.g., include the index or use a stable id field in TimeUnit).