Создание таймера в React

Простите меня, если это кажется слишком простым ... это первое, что я когда-либо делал в React, поэтому я просто пытаюсь осмыслить вещи. Я уже понимаю, что у меня должен быть меньший компонент, такой как кнопки, и отображать их с помощью реквизита и всего прочего (цель - провести рефакторинг позже!), Но в настоящее время мне трудно понять, как использовать метод setInterval для изменения состояния, и тогда прекратите это.

Я создаю таймер pomodoro, и общая идея заключается в том, что мое состояние поддерживает общее количество секунд, которые таймер должен был оставить. У меня есть еще одна функция, которая преобразует общее количество секунд в формат времени, который я хочу отобразить.

Моя борьба находится в моем методе startStop (), я бы хотел изменить состояние работы (таймер работает) на t / f, и это сработает, но я явно делаю что-то с помощью setInterval. Я хочу установить интервал (когда остается время) для изменения состояния каждую секунду на 1 секунду меньше. Когда я снова нажимаю кнопку, интервальный таймер останавливается, и текущее «состояние» оставшихся секунд будет таким же, поэтому, если вы снова нажмете кнопку, он просто снова запустит таймер.

Спасибо за помощь! (Все это отображается из приложения create-response-app, поэтому в моем github требуется больше: https://github.com/ryanmdoyle/web-pomodoro)

    import React, { Component } from "react ";

    class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sessionTimeEntry: 25, //in min
      breakTimeEntry: 5, //in min
      sessionRemainingSeconds: 1500, //in seconds
      breakRemainingSeconds: 300, //in seconds
      running: false,
      timerLabel: "Session"
    }
    this.addSession = this.addSession.bind(this);
    this.subSession = this.subSession.bind(this);
    this.addBreak = this.addBreak.bind(this);
    this.subBreak = this.subBreak.bind(this);
    this.startStop = this.startStop.bind(this);
    this.resetTimer = this.resetTimer.bind(this);
    this.formatMinutes = this.formatMinutes.bind(this);
  }

  addSession() { //adding and subtracting methods need to also chage the session remaining in seconds to mirrow the entry time if ever changed
    this.setState({
      sessionTimeEntry: this.state.sessionTimeEntry + 1,
      sessionRemainingSeconds: this.state.sessionRemainingSeconds + 60
    })
  }

  subSession() {
    this.setState({
      sessionTimeEntry: this.state.sessionTimeEntry - 1,
      sessionRemainingSeconds: this.state.sessionRemainingSeconds - 60

    })
  }

  addBreak() {
    this.setState({
      breakTimeEntry: this.state.breakTimeEntry + 1,
      breakRemainingSeconds: this.state.breakRemainingSeconds + 60
    })
  }

  subBreak() {
    this.setState({
      breakTimeEntry: this.state.breakTimeEntry - 1,
      breakRemainingSeconds: this.state.breakRemainingSeconds - 60
    })
  }

  startStop() {

    let timer;
    const status = this.state.running;

    switch (status) {
      case false:
        console.info("should start!")
        this.setState({
          running: true
        })

        while (this.state.breakRemainingSeconds > 0) {
          timer = setInterval(() => {
            this.setState({
              breakRemainingSeconds: this.state.breakRemainingSeconds - 1
            });
            console.info(this.state.breakRemainingSeconds);
          }, 1000)
        }

        break;
      case true:
        console.info("should stop")
        this.setState({
          running: false
        })
        clearInterval(timer)
        break;
      default:
        break;
    }

  }

  resetTimer() {
    this.setState({
      sessionTimeEntry: 25,
      breakTimeEntry: 5,
      sessionRemainingSeconds: 1500,
      breakRemainingSeconds: 300,
      running: false,
      timerLabel: "Session"
    })
  }

  formatMinutes(time) {
    let seconds = time;
    const minutes = (seconds % 60 === 0) ? ((seconds / 60) < 10 ? "0" + seconds / 60 : seconds / 60) : (Math.floor(seconds / 60) < 10 ? "0" + Math.floor(seconds / 60) : Math.floor(seconds / 60));
    seconds = (seconds % 60 === 0) ? "00" : ((seconds % 60 < 10) ? "0" + (seconds % 60) : seconds % 60)
    console.info(minutes + ":" + seconds);
    return minutes + ":" + seconds;
  }

  render() {
    return ( <
      div >
      <
      h1 > Pomodoro Clock < /h1> <
      h2 > {
        this.state.sessionTimeEntry
      } < /h2> <
      div id = 'timerContainer' >
      <
      h3 id = "session-label" > Session Time < /h3> <
      h3 id = "session-length" > {
        this.formatMinutes(this.state.sessionRemainingSeconds)
      } < /h3> <
      button onClick = {
        this.addSession
      }
      id = "session-increment" > ^ < /button> <
      button onClick = {
        this.subSession
      }
      id = "session-decrement" > v < /button> <
      /div> <
      div id = 'timerContainer' >
      <
      h3 id = "break-label" > Break Time < /h3> <
      h3 id = "break-length" > {
        this.state.breakTimeEntry
      } < /h3> <
      button onClick = {
        this.addBreak
      }
      id = "break-increment" > ^ < /button> <
      button onClick = {
        this.subBreak
      }
      id = "break-decrement" > v < /button> <
      /div> <
      div >
      <
      button onClick = {
        this.startStop
      }
      id = "start-stop" > Start / Stop < /button> <
      button onClick = {
        this.resetTimer
      }
      id = "reset" > Reset < /button> <
      /div> <
      /div>
    )
  }

}

export default App;

**************** ОБНОВИТЬ *****************

Во всем разобрался! Вот ссылка на рабочий код, чтобы увидеть его в действии.

https://codepen.io/ryanmdoyle/pen/vaxoaG