25 + 5 Clock - help with useEffect

Hi there,

Im appreciate if anyone can provide feedback for my 25+5 clock project. I used useEffect to run the setInterval(). It didn’t go back to the Session after finished the Break, it kept running in the Break. (Problem Fixed)

Build 25 + 5 Clock - codepen

This is another problem:

  1. When a session countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of “timer-label” should display a string indicating a break has begun.

Timer has reached zero but didn’t switch back to Session time.: expected ‘Session’ to not equal ‘Session’

  1. When a break countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of “timer-label” should display a string indicating a session has begun.

Default timer label was not properly reset : expected ‘Break’ to equal ‘Session’

I did console.log to check the time-left and the status of onBreak. they looked normal. how to fix this bug?

> React.useEffect(() => {
    const timer1 = setInterval(() => {
      if (timeOn === true) {
        setDisplayTime((prev) => {
          if (prev <=0 && onBreak === false) {
            playAudio();
            setOnBreak(true);
            setTimerLabel("Break");
            return breakTime;
          } else if (prev <=0 && onBreak === true) {
            playAudio();
            setOnBreak(false);
            setTimerLabel("Session")
            return sessionTime;
          } else {
            return prev - 1;
          }
        })
      }
    }, 10);
    return () => clearInterval(timer1);
  }, [onBreak, timeOn, sessionTime, breakTime])

if you console.log your onBreak, you will find it never becomes true so it’s not updating inside your setInterval…

read the following javascript - State not updating when using React state hook within setInterval - Stack Overflow

1 Like

Yes you are right. Thank you! I did console.log it before. Now I fixed it by adding dependencies in the useEffect.

Still have 2 more tests didn’t pass, I’m figuring it out

I haven’t had a chance to dig deeply (busy at work) but your error message is:

When I click the element with the id of “reset”, any running timer should be stopped, the value within id=“break-length” should return to 5, the value within id=“session-length” should return to 25, and the element with id=“time-left” should reset to it’s default state.

Default timer label was not properly reset : expected ‘Session’ to equal ‘Break’
AssertionError: Default timer label was not properly reset : expected ‘Session’ to equal ‘Break’

Looking at the code on the repo, this is the test:

      it(`When I click the element with the id of "reset", any
      running timer should be stopped, the value within id="break-length" should
      return to 5, the value within id="session-length" should return to 25, and
      the element with id="time-left" should reset to it's default state.`, async function () {
        this.timeout(100000);

        hackGlobalTimerFunctions();
        // decrement session and break length
        clickButtonsById(Array(60).fill(seshMin));
        clickButtonsById(Array(60).fill(breakMin));
        // start the 25 + 5 clock
        clickButtonsById([startStop]);

        // wait while timer reaches 00:00
        await timerHasReachedZero();

        restoreGlobalTimerFunctions();
        // once timer has reached zero wait 1.5 seconds then reset and
        // see if every default value is reset
        await timeout(1500);

        resetTimer();
        const timerLabelAfterReset =
          document.getElementById('timer-label').innerText;
        const secondsAfterReset = getSeconds(
          document.getElementById('time-left').innerText
        );

        // see if timer label changed back
        assert.strictEqual(
          timerLabelAfterReset,
          originalTimerLabel,
          'Default timer label was not properly reset '
        );

        // wait another 1.5 seconds to be sure value has not changed
        // (25 + 5 clock is stopped)
        await timeout(1500);

        assert.strictEqual(
          getInputValue(document.getElementById('break-length')),
          '5',
          'Default values for break length were not properly reset'
        );

        assert.strictEqual(
          getInputValue(document.getElementById('session-length')),
          '25',
          'Default values for session length were not properly reset'
        );

        const secondsAfterAWhile = getSeconds(
          document.getElementById('time-left').innerText
        );

        assert.strictEqual(
          secondsAfterAWhile,
          secondsAfterReset,
          '25 + 5 has paused but time continued elapsing'
        );
      });

So, it looks like there is some issue with the label.

1 Like

Thank you so much for your time. I appreciate it.

May i know where i can find these testing messages?

I’m not sure I understand the question. But the code can be found here:

starting around line 248.

1 Like

So, looking at that first remaining error again…

The text is telling me:

Default timer label was not properly reset : expected ‘Session’ to equal ‘Break’

So, it is expecting that label to be “Session” after a reset, but it was “Break”. That makes sense - when you reset, it should go back to its default state. That label started out as “Session”.

So, I look at the sequence of events. I look at the test. The sequence of events is:

  1. click the session minutes 60 times
  2. clickButtonsById(Array(60).fill(seshMin));
  3. start the clock
  4. wait until the timer is 0 (i.e., the session is over, break starting)
  5. wait a little bit (make sure we’re in the break)
  6. press the reset button

We can sum that up as “run the clock until it is in break, then hit reset”. If I do that, I see this:

Why does it say “Break”? We’ve reset - I’d expect it to say “Session”, reinforced by the fact that the time is “25:00”.

I think that’s what the error message is telling you.

1 Like

Ended it up, I just found out i had a minor typo for a variable in my “reset” function that was supposed to reset the timer back to “Session”, cause it looked similar to the other variable name.

I am really thankful for someone like a teacher helping me out when Im learning coding online. Thank you again, Kevin

Cool, glad you figured it out.

Yeah, variable naming is a crucial aspect of coding. As the old saying goes, “There are 2 hard problems in computer science: cache invalidation, naming things, and off-by-one errors.”

1 Like