From 2a1bae6021ac14fc40e2c6901fa66132ea0981b4 Mon Sep 17 00:00:00 2001
From: Vyacheslav <sheptikhinv@gmail.com>
Date: Sat, 14 Jun 2025 19:43:26 +0500
Subject: [PATCH] unpack timers from localStorage

---
 src/components/Timer/Timer.tsx                | 38 +++++++++++++------
 .../{Formatters.ts => DateFunctions.ts}       | 11 +++++-
 src/helpers/TimeManager.ts                    | 14 +++++++
 src/pages/Timers/Timers.tsx                   |  2 +-
 4 files changed, 52 insertions(+), 13 deletions(-)
 rename src/helpers/{Formatters.ts => DateFunctions.ts} (66%)

diff --git a/src/components/Timer/Timer.tsx b/src/components/Timer/Timer.tsx
index 5c45989..f2c274d 100644
--- a/src/components/Timer/Timer.tsx
+++ b/src/components/Timer/Timer.tsx
@@ -2,7 +2,7 @@ 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, isToday} from '../../helpers/DateFunctions.ts';
 import LocalStorageManager from "../../helpers/LocalStorageManager.ts";
 
 interface TimerProps {
@@ -10,7 +10,25 @@ interface TimerProps {
 }
 
 const Timer = (props: TimerProps) => {
-    const [timeManager, recreateTimeManager] = useState(() => new TimeManager(0))
+    const [timeManager, recreateTimeManager] = useState(() => {
+        const localStorageManager = new LocalStorageManager<TimeManager>();
+        const storedRaw = localStorageManager.getItem(props.id);
+        let stored: TimeManager | null = null;
+
+        if (storedRaw === null) {
+            return new TimeManager(0);
+        }
+
+        stored = TimeManager.initFromJSON(storedRaw);
+
+        if (!isToday(stored.getStartDate())) {
+            localStorageManager.removeItem(props.id);
+            return new TimeManager(0);
+        }
+
+        return TimeManager.initFromJSON(storedRaw);
+
+    })
     const [remainingTime, setRemainingTime] = useState({minutes: 0, seconds: 0});
     const [startDate, setStartDate] = useState('00:00');
     const [endDate, setEndDate] = useState('00:00');
@@ -18,18 +36,12 @@ const Timer = (props: TimerProps) => {
 
     useEffect(() => {
         timeManager.start()
-        console.log("timer started")
         const interval = setInterval(() => {
             setRemainingTime(timeManager.getRemainingTime());
             const startString = formatTime(timeManager.getStartDate());
             const endString = formatTime(timeManager.getEndDate());
-            if (startString === endString) {
-                setStartDate('00:00');
-                setEndDate('00:00');
-            } else {
-                setStartDate(startString);
-                setEndDate(endString);
-            }
+            setStartDate(startString === endString ? '00:00' : startString);
+            setEndDate(startString === endString ? '00:00' : endString);
         }, 100);
 
         return () => {
@@ -46,6 +58,10 @@ const Timer = (props: TimerProps) => {
     const handlePause = () => handleUpdate(m => m.togglePause());
     const handleAdd = () => handleUpdate(m => m.addTime(1));
     const handleSubstraction = () => handleUpdate(m => m.subtractTime(1));
+    const handleClear = () => {
+        localStorageManager.removeItem(props.id);
+        recreateTimeManager(new TimeManager(0));
+    }
     const handleRecreation = (minutes: number) => {
         const newTimeManager = new TimeManager(minutes)
         recreateTimeManager(newTimeManager);
@@ -59,7 +75,7 @@ const Timer = (props: TimerProps) => {
                     <Button label='-1 мин' onClick={handleSubstraction}/>
                     <Button label='+1 мин' onClick={handleAdd}/>
                 </div>
-                <Button label='X' onClick={() => handleRecreation(-1)}/>
+                <Button label='X' onClick={() => handleClear()}/>
             </div>
             <div className={styles.clock}>
                 <a onClick={handlePause}
diff --git a/src/helpers/Formatters.ts b/src/helpers/DateFunctions.ts
similarity index 66%
rename from src/helpers/Formatters.ts
rename to src/helpers/DateFunctions.ts
index 94aea7f..2ddaa2f 100644
--- a/src/helpers/Formatters.ts
+++ b/src/helpers/DateFunctions.ts
@@ -9,4 +9,13 @@ export const formatTime = (date: Date) => {
     const hours = String(date.getHours()).padStart(2, '0');
     const minutes = String(date.getMinutes()).padStart(2, '0');
     return `${hours}:${minutes}`;
-};
\ No newline at end of file
+};
+
+export const isToday = (date: Date) => {
+    const today = new Date();
+    return (
+        date.getFullYear() === today.getFullYear() &&
+        date.getMonth() === today.getMonth() &&
+        date.getDate() === today.getDate()
+    );
+}
\ No newline at end of file
diff --git a/src/helpers/TimeManager.ts b/src/helpers/TimeManager.ts
index 48cb41c..42c815e 100644
--- a/src/helpers/TimeManager.ts
+++ b/src/helpers/TimeManager.ts
@@ -15,6 +15,20 @@ class TimeManager {
         this.endDate = new Date(this.endTime);
     }
 
+    static initFromJSON(json: TimeManager): TimeManager {
+        const manager = new TimeManager(0);
+
+        manager.startDate = new Date(json.startDate);
+        manager.endDate = new Date(json.endDate);
+        manager.initialTime = json.initialTime;
+        manager.endTime = json.endTime;
+        manager.pauseTime = json.pauseTime;
+        manager.remainingTimeOnPause = json.remainingTimeOnPause;
+        manager.isPaused = json.isPaused;
+
+        return manager;
+    }
+
     start(): void {
         if (this.intervalId !== null || this.pauseTime !== null) return;
 
diff --git a/src/pages/Timers/Timers.tsx b/src/pages/Timers/Timers.tsx
index 4b351d5..24a4410 100644
--- a/src/pages/Timers/Timers.tsx
+++ b/src/pages/Timers/Timers.tsx
@@ -1,7 +1,7 @@
 import {useEffect, useState} from 'react';
 import Timer from '../../components/Timer/Timer';
 import styles from './Timers.module.css';
-import {formatFullTime} from "../../helpers/Formatters.ts";
+import {formatFullTime} from "../../helpers/DateFunctions.ts";
 
 const Timers = () => {
     const [time, setTime] = useState(new Date());