diff --git a/src/components/Timer/Timer.tsx b/src/components/Timer/Timer.tsx index b2f4c6a..2b72149 100644 --- a/src/components/Timer/Timer.tsx +++ b/src/components/Timer/Timer.tsx @@ -1,16 +1,20 @@ -import { useEffect, useState } from 'react'; +import {useEffect, useState} from 'react'; import TimeManager from '../../helpers/TimeManager'; import Button from '../Button/Button'; import styles from './Timer.module.css' -import { formatTime } from '../../helpers/Formatters'; +import {formatTime} from '../../helpers/Formatters'; +import LocalStorageManager from "../../helpers/LocalStorageManager.ts"; -const Timer = () => { +interface TimerProps { + id: string +} + +const Timer = (props: TimerProps) => { const [timeManager, recreateTimeManager] = useState(() => new TimeManager(0)) - const [remainingTime, setRemainingTime] = useState({ minutes: 0, seconds: 0 }); + const [remainingTime, setRemainingTime] = useState({minutes: 0, seconds: 0}); const [startDate, setStartDate] = useState('00:00'); const [endDate, setEndDate] = useState('00:00'); - - + const localStorageManager = new LocalStorageManager(); useEffect(() => { timeManager.start() @@ -22,13 +26,12 @@ const Timer = () => { if (startString === endString) { setStartDate('00:00'); setEndDate('00:00'); - } - else { + } else { setStartDate(startString); setEndDate(endString); } }, 100); - + return () => { clearInterval(interval); timeManager.stop(); @@ -38,7 +41,11 @@ const Timer = () => { const handlePause = () => timeManager.togglePause(); const handleAdd = () => timeManager.addTime(1); const handleSubstract = () => timeManager.subtractTime(1); - const handleRecreation = (minutes: number) => recreateTimeManager(new TimeManager(minutes)) + const handleRecreation = (minutes: number) => { + const newTimeManager = new TimeManager(minutes) + recreateTimeManager(newTimeManager); + localStorageManager.setItem(props.id, newTimeManager); + } return (
@@ -50,7 +57,8 @@ const Timer = () => {
- {remainingTime.minutes}:{remainingTime.seconds < 10 ? '0' : ''}{remainingTime.seconds} + {remainingTime.minutes}:{remainingTime.seconds < 10 ? '0' : ''}{remainingTime.seconds}
diff --git a/src/pages/Timers/Timers.tsx b/src/pages/Timers/Timers.tsx index 6bcf596..4b351d5 100644 --- a/src/pages/Timers/Timers.tsx +++ b/src/pages/Timers/Timers.tsx @@ -22,10 +22,10 @@ const Timers = () => { {formatFullTime(time)}
- - - - + + + +
)