Timer not stopping in Pomodoro Clock

1

Hi,

I am creating the pomodoro timer. For this project, I thought I would build it using redux as that would help me get proficient in it. I do have a problem though that has become quite a hinderance.

In one part of the code, I use setinterval to reduce my variable by 1 for the seconds timer. In this case, the state is set to true, so that the timer is running. Clicking the pause button sets the state to false and the clearInterval is triggered. But then, my timer is still running.

Here’s my code:

import React from "react";
import "./App.css";
import { useSelector, useDispatch } from "react-redux";
import { playToggle, reset } from "./actions/indexAction";

function Timer() {
  const timer = useSelector((state) => state.timer);
  const sessionLength = useSelector((state) => state.sessionLength);
  let minutes = sessionLength;
  let seconds = 60;
  let refreshIntervalID;

  const dispatch = useDispatch();

  let resetClick = () => {
    return dispatch(reset());
  };

  let timerFunction = () => {
    if (timer == true) {
      seconds--;
      console.log(seconds);
    }
  };

  if (timer == "reset") {
    minutes = sessionLength;
    seconds = 60;
    console.log("Is Reset");
  }

  if (timer == true) {
    console.log("timer is playing");
    refreshIntervalID = setInterval(timerFunction, 1000);
  } else {
    console.log("timer is paused");
    clearInterval(refreshIntervalID);
  }
  return (
    <div>
      <h1>Minutes: {minutes}</h1>
      <h1>Minutes: {seconds}</h1>
      <div>
        <button onClick={() => dispatch(playToggle())}>PLAY/PAUSE</button>
      </div>
      <div>
        <button onClick={resetClick}>RESET</button>
      </div>
    </div>
  );
}

export default Timer;

I have looked around for answers but no luck,

Thanks!