Help - Pomodoro. Clock is working correct, but not passing 2 tests

Hi.
Here is git: https://github.com/TyroniUA/Pomodoro
GH-Pages: https://tyroniua.github.io/Pomodoro/

Problem. If a timer runs out - it should start the new timer (break f.e.) with a value from settings with id=‘break-length’. And the same for ‘session-length’. I pass 27 of 29 tests, however these two can’t pass.

With my manual testing everything works as it should. Can somebody help me identify the problem?

Code:

import React from 'react'

class TableofSettings extends React.Component {


    render() {
        return (
            <section id={this.props.sectionID}>
                <h3>{this.props.title}</h3>
                <div id={this.props.ID}>
                    <button id={this.props.minusID} value='-' onClick={this.props.method1} >{this.props.minName}
                    </button>
                    <div id={this.props.breakID}>{this.props.breakLength}</div>
                    <button id={this.props.plusID} onClick={this.props.method2} >{this.props.plusName}
                    </button>

                </div>
            </section>
        )
    }
}

class Pomodoro extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            breakTime: 5,
            sessionTime: 25,
            isSession: true,
            timerMinute: 25,
            timerSecond: 0,
            intervalID: '',
            running: false,
        }
        this.increaseTime = this.increaseTime.bind(this);
        this.decreaseTime = this.decreaseTime.bind(this);
        this.increaseSessionTime = this.increaseSessionTime.bind(this);
        this.decreaseSessionTime = this.decreaseSessionTime.bind(this);
        this.Reset = this.Reset.bind(this);
        this.Play = this.Play.bind(this);
        this.decreaseSeconds = this.decreaseSeconds.bind(this);
        this.updateTime = this.updateTime.bind(this);
        this.onToggleInterval = this.onToggleInterval.bind(this);
    }


    // INCREASING OR DECREASING TIME
    increaseTime = () => {
        if (!this.state.running){

        
        if (this.state.breakTime === 60) {
            return;
        }
        else {
            this.setState({
                breakTime: this.state.breakTime + 1
            })
        }
    }
    }
    decreaseTime() {
        if (!this.state.running){
        if (this.state.breakTime === 1) {
            return;
        }
        else {
            this.setState({
                breakTime: this.state.breakTime - 1
            })
        }
    }
    }
    increaseSessionTime() {
        if (!this.state.running){
        if (this.state.sessionTime === 60) {
            return;
        }
        else {
            this.setState({
                sessionTime: this.state.sessionTime + 1,
                timerMinute: this.state.timerMinute + 1
            })
        }
    }
    }
    decreaseSessionTime() {
        if (!this.state.running){
        if (this.state.sessionTime === 1) {
            return;
        }
        else {
            this.setState({
                sessionTime: this.state.sessionTime - 1,
                timerMinute: this.state.timerMinute - 1
            })
        }
    }
    }

    // Simple function to reduce minutes
    updateTime() {
        this.setState({
            timerMinute: this.state.timerMinute - 1
        })
    }

    //This switch timer displayed in render method as SESSION or BREAK 
    onToggleInterval(isSession) {
        if (isSession) {
            this.setState({
                timerMinute: this.state.sessionTime
            })
        } else {
            this.setState({
                timerMinute: this.state.breakTime
            })
        }
    }

    //Main function of reducing seconds. It checks if seconds equals 0.If yes => 
    //another check for minutes are 0 and if yes => and is it session or break? Switch timers and status. 
    // if seconds are not 0 - update seconds. If seconds are 0 but minutes are not zero - reducing minutes.
    decreaseSeconds() {
        switch (this.state.timerSecond) {
            case 0:
                if (this.state.timerMinute === 0){
                    if (this.state.isSession){
                        this.audioBeep.play()
                        this.setState({
                            isSession: false
                        })
                        this.onToggleInterval(this.state.isSession)
                    }
                    else {
                        this.audioBeep.play()
                        this.setState({
                            isSession: true
                        });
                        this.onToggleInterval(this.state.isSession)
                    }
                }
                this.setState({ timerSecond: 59 })
                this.updateTime()
                break;
            default:
                this.setState({
                    timerSecond: this.state.timerSecond - 1
                })
                break;
        }
    }

    // START button. It checks if timer is running. Yes => another click will stop it. No - timer will run. 
    Play = () => {
        if (this.state.running === false){let intervalID = setInterval(this.decreaseSeconds, 1000);
        this.setState({
            intervalID: intervalID,
            running: true,
        })
    }
        else{
            clearInterval(this.state.intervalID)
            this.setState({
                running: false
            })
        }
    }

    // Reset all stats to initial state.
    Reset() {
        clearInterval(this.state.intervalID)
        this.setState({
            breakTime: 5,
            timerMinute: 25,
            timerSecond: 0,
            sessionTime: 25,
            isSession: true,
            running: false
        })
        this.audioBeep.pause();
        this.audioBeep.currentTime = 0;
    }




    render() {
        return (
            <div id='pomodoro'>
                <div id='tables'>
                    <TableofSettings ID='break-label'
                        sectionID='break-name'
                        title='Break Length'
                        minusID='break-decrement'
                        method1={this.decreaseTime}
                        minName='-'
                        breakID='break-length'
                        breakLength={this.state.breakTime}
                        plusID='break-increment'
                        method2={this.increaseTime}
                        plusName='+' />
                    <TableofSettings ID='session-label'
                        sectionID='session-name'
                        title='Session Length'
                        minusID='session-decrement'
                        method1={this.decreaseSessionTime}
                        minName='-'
                        breakID='session-length'
                        breakLength={this.state.sessionTime
                        }
                        plusID='session-increment'
                        method2={this.increaseSessionTime}
                        plusName='+' />
                </div>
                <div id='timer-label'>
                    {this.state.isSession === true ? 'Session' : 'Break'}
                    <div id='time-left'>
                        <span>{this.state.timerMinute < 10 ? '0' + this.state.timerMinute 
                        :  this.state.timerMinute}</span>
                        <span>:</span>
                        <span>{this.state.timerSecond === 0 ? '00'
                            : this.state.timerSecond < 10 ? '0' + this.state.timerSecond
                                : this.state.timerSecond}
                        </span>
                    </div>
    <button id='start_stop' onClick={this.Play}>{this.state.running === false? 'Start' :'Stop'}</button>
                    <button id='reset' onClick={this.Reset} >Reset</button>
                </div>
                <audio id="beep" preload="auto" 
          src="https://goo.gl/65cBl1"
          ref={(audio) => { this.audioBeep = audio; }} />
            </div>
        )
    }
}
export default Pomodoro

My guess is that somewhere in your code you have an “off by 1” error.

The test errors are:
Timer has switched to Break time, but it didn't start with the correct value.: expected 4 to equal 5
i.e. 04:59 instead of 05:00
Timer has switched back to Session time, but it didn't start with the correct value.: expected 0 to equal 1
i.e. 00:59 instead of 01:00

Thanks for the reply. Fair point, but I also then don’t understnad how to make it work correctly. Because if 25:00 is having zeroes => it reducing correctly. If timer sets to 4 as a break - it I see in console.log that timer inserted correctly = 4. But on the display is already 3:59 second after. So shall I provide some booleans to stop decreasing for a second?

I actually solved it. Started to track problem and testing different. I didn’t understand that in decreaseSeconds function I made an update of the second instantly when new timer is putted in.
So re-made it a bit and looks like that right now

decreaseSeconds() {
        if (this.state.timerMinute ===0 && this.state.timerSecond ===0){
            if (this.state.isSession){
                this.audioBeep.play()
                this.setState({
                    isSession: false
                })
                this.onToggleInterval(this.state.isSession)
            }
            else {
                this.audioBeep.play()
                this.setState({
                    isSession: true
                });
                this.onToggleInterval(this.state.isSession)
            }

        }

        else if (this.state.timerSecond === 0) {
            
            this.setState({ timerSecond: 59 })
            this.updateTime()
        }
        else {
            this.setState({
                timerSecond: this.state.timerSecond - 1
            })
        }


    }
1 Like

Congrats!

When i was reviewing your code i added - 1 for both timers and it passed :slight_smile:

This was the hardest project for me of the whole curriculum, great work! Keep it up.

Happy coding!

1 Like

Can you show your -1 version? I added condition on if … <0 => change but timer always shows like 01 00 - 1 and then switched. So I’m curious.

Offtopic : for me the hardest was the calculator. I had a bug and was trying to fix it for 4 days I believe. Jesus, it was a breaking moment for me. But fixed :slight_smile:

1 Like

Thank you for share this solution!
I spent many days trying make to work my pomodore clock!

I implemented this approach and all was better!

Agreed, the actual clock itself was relatively straightforward, but getting the tests to pass is an absolute nightmare in this challenge.

1 Like