// presentation/components/timeTracker/Timer/Timer.tsx import React, { useState, useEffect } from 'react'; import { useTimeTracking } from '../../../hooks/useTimeTracking'; import { pipe, Option, fromNullable } from '../../../../utils/fp/option'; import { Button } from '../../common/Button'; import { formatDuration } from '../../../../utils/date/dateUtils'; interface TimerProps { onComplete?: (duration: number) => void; } export const Timer: React.FC = ({ onComplete }) => { const [isRunning, setIsRunning] = useState(false); const [startTime, setStartTime] = useState>(Option.none()); const [elapsedTime, setElapsedTime] = useState(0); const [selectedProject, setSelectedProject] = useState>(Option.none()); const [selectedActivity, setSelectedActivity] = useState>(Option.none()); const { lastTimeEntry, projects, activities } = useTimeTracking(); // Beim ersten Rendering die letzte Zeitbuchung laden useEffect(() => { pipe( fromNullable(lastTimeEntry), Option.map(entry => { setSelectedProject(Option.some(entry.projectId)); setSelectedActivity(Option.some(entry.activityId)); }) ); }, [lastTimeEntry]); // Timer-Logik useEffect(() => { let interval: NodeJS.Timeout | null = null; if (isRunning) { interval = setInterval(() => { const now = new Date(); pipe( startTime, Option.map(start => { const diff = now.getTime() - start.getTime(); setElapsedTime(Math.floor(diff / 1000)); }) ); }, 1000); } else if (interval) { clearInterval(interval); } return () => { if (interval) clearInterval(interval); }; }, [isRunning, startTime]); // Timer starten const handleStart = () => { setStartTime(Option.some(new Date())); setIsRunning(true); }; // Timer stoppen const handleStop = () => { setIsRunning(false); // Prüfen, ob Projekt und Aktivität ausgewählt wurden const projectId = pipe( selectedProject, Option.getOrElse(() => '') ); const activityId = pipe( selectedActivity, Option.getOrElse(() => '') ); if (projectId && activityId && onComplete) { onComplete(elapsedTime); } // Timer zurücksetzen setElapsedTime(0); setStartTime(Option.none()); }; return (
{formatDuration(elapsedTime)}
); };