gistfile1.txt

import React, { useState, useEffect, useRef } from "react";

const TimerFunction = ({ minutes, seconds }) => {
  const [min, setMin] = useState(minutes);
  const [sec, setSec] = useState(seconds);
  const [active, setActive] = useState(false);
  const intervalRef = useRef();

  useEffect(() => {
    setMin(minutes);
  }, [minutes]);

  useEffect(() => {
    setSec(seconds);
  }, [seconds]);

  // 3 20s
  // 60000 * 3 + 20000 -- 182000
  useEffect(() => {
    if (active) {
      intervalRef.current = setInterval(() => {
        setMin(min => {
          if (min > 0) {
            return min - 1;
          }
          return min;
        });
        setSec(sec => {
          if (sec > 0) {
            return sec - 1;
          }
          return sec;
        });
      }, 1000);
    } else {
      clearInterval(intervalRef.current);
    }

    // return () => clearInterval(interval);
  }, [active, minutes, seconds]);

  // var min = Math.floor(timeLeft / 6000).toFixed(0);
  // var sec = timeLeft % 60;

  // const startStop = e => {
  // e.preventDefault();
  // if (!active) {
  // setActive(true);
  // } else {
  // setActive(false);
  // }
  // };

  return (
    <div style={{ display: "flex" }}>
      <p>{min}</p>
      <p>:</p>
      <p>{sec}</p>
      <button onClick={() => setActive(!active)}>
        {active === true ? "Stop" : "Start"}
      </button>
    </div>
  );
};

export default TimerFunction;