Pomodoro Clock using React Hooks / ContextAPI

Hey there,

I am currently working on the last project of the Front end curriculum and I am getting frustrated by some test that do not pass.

  • Content 8. I can see an element with corresponding id=“time-left”. NOTE: Paused or running, the value in this field should always be displayed in mm:ss format (i.e. 25:00).

My code for displaying the time is the following:
I get the time (in seconds) from the props of the parent component, I convert it in minutes:seconds format and make sure I have two digits.

const Timer = (props) => {
    const [timer, setTimer] = React.useState(props.time);
    React.useEffect(() => {
        setTimer(props.time);
    }, [props.time]);

    function formatTime(time){
        let minutes = Math.floor(time / 60).toString();
        if(minutes.length === 1){
            minutes = "0"+minutes
        }
        let seconds = (time - minutes * 60).toString();
        if(seconds.length === 1){
            seconds = "0"+seconds
        }
        return `${minutes}:${seconds}`
    }
    
    return (
        <div className="wrapper">
            <div className="counter">
                <span className="counterType" id="timer-label">{props.mode}</span>
                <span id="time-left">{formatTime(timer.currentTime)}</span>
            </div>
        </div>
    );
}

The error I get is:

time-left is not formatted correctly: expected ‘59’ to equal '60’

However, my time is displayed correctly… (see picture below).

The full code can be found at https://codepen.io/MoreThanADoge/pen/PooeENB

Anyone knows why ?

1 Like

I had a similar issue with my project; failing 2 or 3 tests and it seemed random.

Although it looks right and working visually, the test might be seeming something different since it’s moving quickly; to check this I added a log on line 146.
If you watch the time tick, you’ll notice 2 logs at the same time. My situation was slightly different (i was starting new intervals on each pause/play without clearing the old one) but once fixed & getting only 1 number in the log it passed.

Good luck! This issue was by far the hardest I had to solve in any of the projects!

I fixed the two other tests that were failing and I am left with the same error…

8. I can see an element with corresponding id=“time-left”. NOTE: Paused or running, the value in this field should always be displayed in mm:ss format (i.e. 25:00). time-left is not formatted correctly: expected ‘59’ to equal ‘60’

I really don’t understand what the problem is here…

https://codepen.io/MoreThanADoge/pen/PooeENB

I took a look and couldn’t figure out why it’s not passing. Hopefully someone else can help solve it

That is strange. Yes I hope so…

Took another look into it and think I’ve found the issue.

What the test is doing is running the session all the way up to 60 minutes by pressing the increment button 35 times. Here is the test (line 212) :https://github.com/freeCodeCamp/testable-projects-fcc/blob/master/src/project-tests/pomodoro-clock-tests.js#L212

If you log the minutes in your format function, you’ll see that when you press the increment button 1 time it responds with the old value then the new value. I’m not sure why that is happening, but if you run the session all the way up to 60 minutes you’ll see it returns 59 first, then 60. The test is seeing the 59 when it presses increment 35 times.

2 Likes

You found the problem !

In the component controlling the Session time / Break time, I was changing the session / break time, then I had a change Effect which was running after the render phase.

So I was updating the timer first, then the current time.

I solved the problem like this:

const changeTimer = operator => {
        const mode = timer.mode;
        if (operator === 'decrement' && timer[props.type] > 60) {
            setTimer({ 
                ...timer, 
                [props.type]: timer[props.type] - 60,
                time: {
                    currentTime: timer[timer.mode]-60,
                    startingTime: timer[timer.mode]-60
                }
            });
        }
        if (operator === 'increment' && timer[props.type] < 3600) {
            setTimer({
                ...timer,
                [props.type]: timer[props.type] + 60,
                time: {
                    currentTime: timer[timer.mode]+60,
                    startingTime: timer[timer.mode]+60
                }
            });
        }
    };

Now all the tests are passing!

Thanks a lot @pjonp !

1 Like

I am facing the exactly same issue. What change should I make in my code to make the test pass. This is my time left component.

import React from ‘react’

import moment from ‘moment’

import momentDurationFormatSetup from ‘moment-duration-format’

momentDurationFormatSetup(moment)

const TimeLeft = ({timeleft, startStopButtonLabel, timerLabel, handleStartStopClick}) => {

const formattedTimeLeft = moment.duration(timeleft,'s').format('mm:ss', {trim:false})

return(

<div>

    <p id="timer-label">{timerLabel}</p>

    <div id="time-left">{formattedTimeLeft} </div>

{startStopButtonLabel}

</div>

)}

export default TimeLeft

Can anybody help?