From 8e2eb04e9115c0510861191c22bad467624ca688 Mon Sep 17 00:00:00 2001
From: Jelassi Aymen <jelassiaymen094@gmail.com>
Date: Sun, 12 Nov 2023 21:54:41 +0100
Subject: [PATCH] added localstorage for timer

---
 package-lock.json              |  4 ++--
 src/components/Timer/Timer.tsx | 29 ++++++++++++++++++++++++++++-
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 98731f89..17310869 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "client",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "client",
-      "version": "1.3.0",
+      "version": "1.3.1",
       "dependencies": {
         "@emotion/react": "^11.9.0",
         "@emotion/styled": "^11.8.1",
diff --git a/src/components/Timer/Timer.tsx b/src/components/Timer/Timer.tsx
index f7afe596..8c708843 100644
--- a/src/components/Timer/Timer.tsx
+++ b/src/components/Timer/Timer.tsx
@@ -25,7 +25,7 @@ export const Timer = () => {
   const { breakStarted, setBreakStarted } = useBreakStarted();
   const [breakLength, setBreakLength] = useState(shortBreakLength);
   const [timer, setTimer] = useState(60);
-  const { setTimerQueue } = useTimer();
+  const { timerQueue, setTimerQueue } = useTimer();
   const [timerMinutes, setTimerMinutes] = useState("00");
   const [timerSeconds, setTimerSeconds] = useState("00");
   const [timerIntervalId, setTimerIntervalId] = useState(null);
@@ -128,6 +128,33 @@ export const Timer = () => {
     }
   }, [hasStarted, timerMinutes, timerSeconds, sessionType]);
 
+  const localStorageKey = "timerState";
+
+  useEffect(() => {
+    // Load timer state from localStorage on component mount
+    const storedState = localStorage.getItem(localStorageKey);
+    if (storedState) {
+      const parsedState = JSON.parse(storedState);
+      setTimer(parsedState.timer);
+      setSessionType(parsedState.sessionType);
+      setBreakStarted(parsedState.breakStarted);
+      setTimerQueue(parsedState.timerQueue);
+      setHasStarted(parsedState.hasStarted);
+    }
+  }, []);
+
+  useEffect(() => {
+    // Save timer state to localStorage whenever it changes
+    const timerState = {
+      timer,
+      sessionType,
+      breakStarted,
+      timerQueue,
+      hasStarted,
+    };
+    localStorage.setItem(localStorageKey, JSON.stringify(timerState));
+  }, [timer, sessionType, breakStarted, timerQueue, hasStarted]);
+
   function toggleCountDown() {
     if (hasStarted) {
       // started mode