Countdown timer for multi page in Reactjs.

Omar Faruk answered on January 14, 2025 Popularity 1/10 Helpfulness 1/10

answer Countdown timer for multi page in Reactjs.

Countdown timer for multi page in Reactjs.

Comment

import { create } from "zustand";
import { devtools, persist } from "zustand/middleware";

const useTimerStore = create()(
  devtools(
    persist(
      (set, get) => ({
       
        timeLeft: loadTimeFromLocalStorage(),
        intervalId: null,
        isRunning: false,

        startCountdown: () => {
          if (get().intervalId) return; // Prevent multiple intervals

          set({ isRunning: true });

          const interval = setInterval(() => {
            const timeLeft = get().timeLeft;
            if (timeLeft > 0) {
              const newTimeLeft = timeLeft - 1;
              set({ timeLeft: newTimeLeft });
              saveTimeToLocalStorage(newTimeLeft);
            } else {
              clearInterval(get().intervalId);
              set({ intervalId: null, isRunning: false });
              saveTimeToLocalStorage(0); // Timer stops when it reaches 0
            }
          }, 1000);

          set({ intervalId: interval });
        },

        resetTime: () => {
          set({ timeLeft: 1800, intervalId: null, isRunning: false });
          saveTimeToLocalStorage(1800); // Reset to 30 minutes when reset is called
        },

        stopCountdown: () => {
          if (get().intervalId) {
            clearInterval(get().intervalId);
            set({ intervalId: null, isRunning: false });
          }
        },
      }),
      
    )
  )
);

function saveTimeToLocalStorage(timeLeft) {
  if (typeof window !== "undefined") {
    localStorage.setItem("timeLeft", timeLeft);
  }
}

function loadTimeFromLocalStorage() {
  if (typeof window !== "undefined") {
    const storedTime = localStorage.getItem("timeLeft");
    // If storedTime is valid and not expired (i.e., not 0), return it
    if (storedTime && !isNaN(storedTime)) {
      const time = parseInt(storedTime, 10);
      return time > 0 ? time : 0; // If timeLeft is 0, keep it as 0
    }
    // If no valid time is stored, return default (30 minutes)
    return 1800;
  }
  return 1800;
}

export default useTimerStore;

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: countdown javascript timer

Link to this answer
Share Copy Link

Contributed on Jan 14 2025

Omar Faruk

0 Answers Avg Quality 2/10

Countdown timer for multi page in Reactjs.

Contents

More Related Answers

Countdown timer for multi page in Reactjs.

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.