Countdown timer for multi page with zustand in Reactjs.

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

answer Countdown timer for multi page with zustand in Reactjs.

related c++ cout double 2 decimal places

Countdown timer for multi page with zustand 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 zustand

Link to this answer
Share Copy Link

Contributed on Jan 14 2025

Omar Faruk

0 Answers Avg Quality 2/10

Closely Related Answers

c++ cout double 2 decimal places

Comment

#include <iostream>
#include <iomanip>

int main()
{
    double d = 122.345;
	
  	// std::fixed and std::setprecision only need to be called once
    std::cout << std::fixed;
    std::cout << std::setprecision(2); // Set number of digits
  
    std::cout << d;
}

Popularity 3/10 Helpfulness 1/10 Language cpp

Source: stackoverflow.com

Tags: double cout decimal double-precision precision c++

Link to this answer
Share Copy Link

Contributed on Jan 17 2025

Plat00n

0 Answers Avg Quality 2/10

Countdown timer for multi page with zustand in Reactjs.

Contents

More Related Answers

Countdown timer for multi page with zustand in Reactjs.

Closely Related Answers

c++ cout double 2 decimal places

Grepper

Documentation

Social

Legal

Contact

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