25+5 Clock 4 tests failing

JavaScript
1

4 tests are failing in my code. Even though everything that those tests are saying, I can see those in my output, still don’t know why they are failing.
Codepen of the project with test suite

2

It won’t be much of a help, but I think any reply is better than no replies, so here’s my reply. I looked at your code and your logic seems fine to me.

One thing I noticed is that the app should not allow the break and session lengths to be adjusted while the timer is running. Oddly, when I added the test

if (timerState == 'running') return

to the four methods, I got more errors.

I wonder if the asynchronous setState method of React is messing with the timing.

I’m not sure how much it relates to your case, but we discussed timing issues here

3

Thanks for replying. I tried that as well, but as you said, more errors popped up. The asynchronous property of setState was definitely being problematic while making this, I solved it using intermediate variable. But dont know what else is the issue.
EDIT:
I tried making the state updates from setTimeLeft({mm:mm,ss:ss}) to setTimeLeft(()=>({mm:mm,ss:ss})) as this is supposed to solve that state updating asynchronously problem.
But still those tests fail.
most of those test cases that failed are saying “timer didnt reach 00” but some other tests which are exactly same that requires the timer to reach 00 passes.

4

Sorry to hear that. I was not comfortable enough to start using React, so I did the Calculator and Clock in straight JavaScript and succeeded in passing FCC tests.

After studying React some more, I managed to get the React version of Calculator done. I started working on the React version of the Clock project. I plan to implement a very simplistic version of a count down timer first.

Let us know if you make any progress with your Clock.

1 Like
5

Okay, I got my React version of 25+5 Clock working. I wanted to play around with multiple components, so I defined Clock, TimerDisplay, TimerLength, and TimerControls components. Clock is a class and the other three functional components. I used two instances for TimerLength to manage the break and session timer length.

To make the timer function work correctly, I specify a callback function in the setState method. It looked like this

countdown = () => {
    this.setState(
      (prev) => ({timeLeft: prev.timeLeft - 1}),
      () => {
              if (this.state.timeLeft < 0) {
                this.switchClock() //switchClock will call updateDisplayValue()
              } else {
                this.updateDisplayValue()
              }             
            }
    )
  }

The countdown function is called every second. I keep track of time left in seconds. After timeLeft is decremented, I issue a call back. This callback checks to switch the clock type (session or break) or simply update the display value. In the updateDisplayValue method, I convert timeLeft to mm:ss format.

In other places I call setState, I use updateDisplayValue as a callback, and this is the key. I need to make sure that the states are updated fully before the updateDisplayValue is called. My switchClock is like this:

  switchClock = () => {
    this.playBeep()

    this.stopTimer(); //stop the currently running timer

    if (this.state.clockType === SESSION) {
      this.setState({
        clockType: BREAK,
        timeLeft: this.state.breakLength * 60
      },
      this.updateDisplayValue)
    } else {
      this.setState({
        clockType: SESSION,
        timeLeft: this.state.sessionLength * 60
      },
      this.updateDisplayValue)
    }
  
    this.startTimer(); //start a new timer
  }

I believe the key is to make sure states are updated fully before making any change to the clock display. At least, this is the case for me. If I didn’t use the callback for setState, I got erratic behavior. If you’re interested in seeing the full code, I can provide a link to my CodePen.

6

I was thinking this as well, because of that I used callback type of setState which updates the old value. But after seeing your code. I think I can do something. But unfortunately this is the real problem in difference between classes and hooks. The callback you used in setState, I have to think of some way of using useEffect to get that same effect,
I’ll try. Thanks

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.