React timer not transitioning properly

[harel_avv]

I have my 25 + 5 clock almost ready and i added it an animation, but there are a problems:
First, when you go from session to break the timer kinda fricks out for 2 or 3 seconds of it (it first shows -01:60 on it and then the ring animation takes time to “refill”), how do i prevent the wierd rendering and the refilling of the ring? it has a transition property and i tried to set it to none or the duration to zero at that moment so it wom’t take time but it doesn’t seem to have any effect)

Second, when you pause an play the timer a lot, the seconds shown decrement by 3 while they should stop there, and also if i’ll be able to fix that then when I will pause and play the timer a lot the ring will not be syncronised with the timer (because the transition happens at the start of a seconds, so even if you pause the timer halfway through that seconds, the transition won`t stop)

link to pen: https://codepen.io/harel_avv/pen/RwGQEXy
thanks in advance

[MyTrueName]

I looked at your app and at your code.

When I press pause only display stops, clock is still ticking.
Clock can go below 0:00, that is undesired. There should be a check for time < 0 (or something similar);

Your code is really redundant. Finding a bug in it is… hard.

Try to rewrite your code and logic, so you (we) can understand it better.

Something like:

status = {
   "work": 10,
   "break":10,
   "time": 0,
   "running": false,
}

if (running){
    this.updateTime();
    this.displayTime();
    if (time === 0){
       this.changeStatus();
    }
}

updateTime(){
   this.circleDecrement();
   this.setState({"something": "something"});
}

Try to divide your app into small pieces. They take data from state, display it then update state.

There are some other things, but work on refactoring your code. After that it should be easier for you to find any bugs.