Timer

Timer.js

import React, { useState } from "react";

function Timer(props) {
  const { countdownState } = props;

  let [minutes, setMinutes] = useState(0);
  let [seconds, setSeconds] = useState(10);

  switch (countdownState) {
    case 0:
      //do nothing
      //pause timer
      break;
    case -1:
      setTimeout(() => {
        console.log("asd");
        setSeconds(10);
      }, 0);
      break;
    case 1:
      setTimeout(() => setSeconds(seconds - 1), 1000);
      break;
    default:
    //do nothing
  }

  return (
    <div>
      <span>{minutes < 10 ? `0${minutes}` : minutes}</span>
      <span>:</span>
      <span>{seconds < 10 ? `0${seconds}` : seconds}</span>
    </div>
  );
}

function Button(props) {
  return (
    <>
      <button onClick={props.onClick}>
        {props.use === "start"
          ? "Mulai"
          : props.use === "stop"
          ? "Berhenti"
          : "Reset"}
      </button>
    </>
  );
}

function App() {
  let [countdownState, setPauseTimer] = useState(0);
  //countdownState code meaning
  //1 timer counting
  //0 timer paused
  //-1 timer resetted

  function startCountdown() {
    setPauseTimer(1);
  }

  function pauseCountdown() {
    setPauseTimer(0);
  }

  function resetCountdown() {
    setPauseTimer(-1);
  }

  return (
    <div className="App">
      <Timer countdownState={countdownState} />
      <Button use="start" onClick={startCountdown} />
      <Button use="stop" onClick={pauseCountdown} />
      <Button use="reset" onClick={resetCountdown} />
    </div>
  );
}

export default App;