change favicon when mode changes and load previous timer used

MacielG1 · Jul 31, 2024 · 4456e0f · 4456e0f
1 parent 3feb607
commit 4456e0f
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 10 deletions.
diff --git a/src/components/MainMenu.tsx b/src/components/MainMenu.tsx
@@ -8,6 +8,8 @@ import vibrate from "../utils/Vibrate";
 import sound1 from "../assets/sounds/sound1.mp3";
 import sound2 from "../assets/sounds/sound2.mp3";
 import { inputSettings as lang } from "../utils/lang";
+import { changeFavicon } from "../utils/changeFavicon";
+import convertSecToMinSec from "../utils/convertSecToMinSec";
 
 export default function MainMenu() {
   const [totalRounds, currentRound, currentRoundIncrease] = useStore((state) => [state.roundsSelected, state.currentRound, state.currentRoundIncrease]);
@@ -32,6 +34,10 @@ export default function MainMenu() {
   const [enableSounds, enableVibrate, prepareonEveryRound] = useStore((state) => [state.enableSounds, state.enableVibrate, state.prepareonEveryRound]);
   const preferredLanguage = useStore((state) => state.preferredLanguage);
 
+  const totalTimePassed = useStore((state) => state.totalTimePassed);
+
+  const changeTitle = (title: string) => (document.title = title);
+
   useEffect(() => {
     let isMounted = true; //  used in the cleanup function
 
@@ -45,6 +51,8 @@ export default function MainMenu() {
       if (whichInterval === "prepare") {
         setProgressBarMax(prepTime);
         setCurrentProgressColor(prepColor);
+        changeFavicon("timer.svg");
+
         if (enableBackgroundColors) {
           setCurrentBackgroundColor(prepColor);
           setRemoveUIBorders(true);
@@ -54,6 +62,7 @@ export default function MainMenu() {
       } else if (whichInterval === "work") {
         setProgressBarMax(workTime);
         setCurrentProgressColor(workColor);
+        changeFavicon("timer-green.svg");
         if (enableBackgroundColors) {
           setCurrentBackgroundColor(workColor);
           setRemoveUIBorders(true);
@@ -63,6 +72,9 @@ export default function MainMenu() {
       } else if (whichInterval === "rest") {
         setProgressBarMax(restTime);
         setCurrentProgressColor(restColor);
+        changeFavicon("timer-red.svg");
+        changeTitle("Timer Interval");
+
         if (enableBackgroundColors) {
           setCurrentBackgroundColor(restColor);
           setRemoveUIBorders(true);
@@ -93,12 +105,17 @@ export default function MainMenu() {
         if (currentRound === totalRounds && skipLastRest) {
           timer?.stop();
           resetTimer();
+          changeFavicon("timer.svg");
+          changeTitle("Timer Interval");
           return;
         }
       } else if (whichInterval === "rest" && time > +restTime) {
         if (currentRound === totalRounds) {
           timer?.stop();
           resetTimer();
+          changeFavicon("timer.svg");
+          changeTitle("Timer Interval");
+
           return;
         } else {
           currentRoundIncrease();
@@ -112,11 +129,15 @@ export default function MainMenu() {
       } else if (time !== 0 && (whichInterval === "work" || whichInterval === "rest") && currentRound <= totalRounds) {
         increaseTotalTimePassed();
       }
+      changeTitle(convertSecToMinSec(time));
+
       setProgressBarValue(`${time}`);
     }
 
     return () => {
       isMounted = false;
+      changeFavicon("timer.svg");
+      changeTitle("Interval Timer");
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [time]);
 

diff --git a/src/components/Progress.tsx b/src/components/Progress.tsx
@@ -94,19 +94,20 @@ export default function Progress() {
         setWhichInterval("rest");
         changeInterval();
 
-        setTimer(
-          new Timer(1000, () => {
-            timeIncrease();
-          }),
-        );
-
         if (currentRound === totalRounds && skipLastRest) {
           timer?.stop();
           resetTimer();
           return;
+        } else {
+          setTimer(
+            new Timer(1000, () => {
+              timeIncrease();
+            }),
+          );
         }
       } else if (whichInterval === "rest") {
         setCurrentRound(currentRound + 1);
+
         if (currentRound === totalRounds) {
           timer?.stop();
           resetTimer();

diff --git a/src/components/SidebarItem.tsx b/src/components/SidebarItem.tsx
@@ -39,6 +39,7 @@ export default function SidebarItem({ item }: { item: savedWorkoutType }) {
       PrepareSeconds: timer.PrepareSeconds,
       PrepColor: timer.PrepColor,
     });
+    localStorage.setItem("latestTimer", JSON.stringify(timer));
 
     // adds an effect to the inputs when the button is clicked
     SetIsLoadingSavedTimer(true);

diff --git a/src/components/TimerApp.tsx b/src/components/TimerApp.tsx
@@ -5,11 +5,14 @@ import SaveTimer from "./SaveTimer";
 import useStore from "../store/useStore";
 import MenuButtons from "./MenuButtons";
 import { useState, useEffect } from "react";
+import { changeFavicon } from "../utils/changeFavicon";
 
 export default function TimerApp() {
   const [removeBorders, mainTimerBorder] = useStore((state) => [state.removeUIBorders, state.mainTimerBorder]);
   const [enableBackgroundColors, savedWorkouts] = useStore((state) => [state.enableBackgroundColors, state.savedWorkouts]);
   const [isSmallScreen, setIsSmallScreen] = useState(window.matchMedia("(max-width: 600px)").matches);
+  const whichInterval = useStore((state) => state.whichInterval);
+  const timer = useStore((state) => state.timer);
 
   function handleMediaQueryChange(mediaQuery: MediaQueryListEvent) {
     if (mediaQuery.matches) {

diff --git a/src/components/inputs/InputNumber.tsx b/src/components/inputs/InputNumber.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import useStore from "../../store/useStore";
 import pad from "../../utils/PadNum";
 
@@ -13,12 +13,21 @@ export default function InputNumber(props: InputNumberProps) {
   const { label, className, nogap, inputStoreType, maxLength = 3 } = props;
 
   const [isFocused, setIsFocused] = useState(false);
-  const count = useStore((state) => state[inputStoreType]);
+  let count = useStore((state) => state[inputStoreType]);
   const increase = useStore((state) => state[`increase${inputStoreType}`]);
   const decrease = useStore((state) => state[`decrease${inputStoreType}`]);
   const setCount = useStore((state) => state[`set${inputStoreType}`]);
   const isLoadingSavedTimer = useStore((state) => state.isLoadingSavedTimer);
 
+  useEffect(() => {
+    const latestTimer = localStorage.getItem("latestTimer");
+
+    if (latestTimer) {
+      const parsedTimer = JSON.parse(latestTimer);
+      setCount(parsedTimer[inputStoreType]);
+    }
+  }, []);
+
   const timerRef = useRef<number | null>(null);
 
   function incrementHold() {

diff --git a/src/store/slices/TimerStatus.ts b/src/store/slices/TimerStatus.ts
@@ -107,8 +107,8 @@ export type timerStatusType = {
   time: number;
   setTime: (value: number) => void;
   timeIncrease: () => void;
-  whichInterval: string;
-  setWhichInterval: (value: string) => void;
+  whichInterval: "work" | "rest" | "prepare";
+  setWhichInterval: (value: "work" | "rest" | "prepare") => void;
   currentRound: number;
   setCurrentRound: (value: number) => void;
   currentRoundIncrease: () => void;

diff --git a/src/store/slices/localStorage.ts b/src/store/slices/localStorage.ts
@@ -37,6 +37,7 @@ export default storageSlice;
 export type localStorageType = {
   savedWorkouts: savedWorkoutType[];
   setSavedWorkouts: (value: savedWorkoutType[]) => void;
+
   skipLastRest: boolean;
   setSkipLastRest: (value: boolean) => void;
   enableBackgroundColors: boolean;

diff --git a/src/utils/changeFavicon.ts b/src/utils/changeFavicon.ts
@@ -0,0 +1,7 @@
+export function changeFavicon(url: string) {
+  const link = (document.querySelector("link[rel*='icon']") || document.createElement("link")) as HTMLLinkElement;
+  link.type = "image/x-icon";
+  link.rel = "shortcut icon";
+  link.href = url;
+  document.getElementsByTagName("head")[0].appendChild(link);
+}