refactor: replace mocked time with injected clock prop and implement conversion logic

src/containers/BerlinClock.tsx

@@ -1,49 +1,24 @@
-import { useState } from 'react';
-import { Lamp } from '../components/Lamp';
-import { LampLine } from '../components/LampLine';
-import { useCurrentTime } from '../hooks/useCurrentTime';
-import { dateToBerlin } from '../utils';
+import { Lamp } from "../components/Lamp";
+import { LampLine } from "../components/LampLine";
+import type { BerlinClock as BerlinClockType } from "../types";
 
 interface BerlinClockProps {
   enabled: boolean;
+  clock: BerlinClockType;
 }
 
-export function BerlinClock({ enabled }: BerlinClockProps) {
-  const { currentTime } = useCurrentTime();
-  const berlin = dateToBerlin(currentTime);
-
+export function BerlinClock({ enabled, clock }: BerlinClockProps) {
   if (!enabled) return null;
 
   return (
     <div>
-      {/* Seconds lamp */}
-      <div data-testid="seconds-lamp">
-        {berlin.secondsRow.length > 0 && (
-          <span data-testid="lamp-0" aria-label={berlin.secondsRow[0]}>
-            {/* optional visual */}
-          </span>
-        )}
-      </div>
-
-      {/* Five hours row */}
-      <div data-testid="five-hours-row">
-        <LampLine states={berlin.fiveHours} />
-      </div>
-
-      {/* Single hours row */}
-      <div data-testid="single-hours-row">
-        <LampLine states={berlin.oneHour} />
-      </div>
-
-      {/* Five minutes row */}
-      <div data-testid="five-minutes-row">
-        <LampLine states={berlin.fiveMinutes} />
-      </div>
-
-      {/* Single minutes row */}
-      <div data-testid="single-minutes-row">
-        <LampLine states={berlin.oneMinute} />
+      <div data-testid="seconds-row">
+        <Lamp state={clock.secondsRow[0]} id="seconds-lamp" />
       </div>
+      <LampLine states={clock.fiveHours} rowTestId="five-hours-row" />
+      <LampLine states={clock.oneHour} rowTestId="single-hours-row" />
+      <LampLine states={clock.fiveMinutes} rowTestId="five-minutes-row" />
+      <LampLine states={clock.oneMinute} rowTestId="single-minutes-row" />
     </div>
   );
 }

src/containers/TimeConverter.tsx

@@ -1,15 +1,14 @@
-import { useState } from 'react';
-import { BerlinClock } from './BerlinClock';
-import { DigitalClock } from './DigitalClock';
-import { useCurrentTime } from '../hooks/useCurrentTime';
+import { useState } from "react";
+import { BerlinClock } from "./BerlinClock";
+import { DigitalClock } from "./DigitalClock";
+import { useCurrentTime } from "../hooks/useCurrentTime";
+import { dateToBerlin } from "../utils";
 
 export function TimeConverter() {
   const { currentTime, setCurrentTime } = useCurrentTime();
   const [useSystemTime, setUseSystemTime] = useState(false);
-
-  const handleTimeChange = (newTime: Date) => {
-    setCurrentTime(newTime);
-  };
+  const enabled = !useSystemTime;
+  const berlinClock = dateToBerlin(currentTime);
 
   return (
     <div>
@@ -22,11 +21,11 @@ export function TimeConverter() {
         />
         Use system time
       </label>
-      <BerlinClock enabled={!useSystemTime} />
+      <BerlinClock enabled={enabled} clock={berlinClock} />
       <DigitalClock
-        enabled={!useSystemTime}
+        enabled={enabled}
         currentTime={currentTime}
-        onTimeChange={handleTimeChange}
+        onTimeChange={setCurrentTime}
       />
     </div>
   );