Garmaine Staff asked 2 years ago

This interval timer that I'm trying to setup in React native. It has it's it's start, pause and reset at a method. I have it setup that the user can enter the minutes and seconds for the timer and then it runs the rest period (without user input at the moment) and then goes back to running the timer again for the input value.

How can I call the timer to pause while the timer.start() is still running? As mine is linked to startClickTimer which is linked to everything else?

Link to the intervail timer's npm: https://www.npmjs.com/package/interval-timer

code:

export default class IntervalTimer extends Component {

constructor(props) {
    super(props);
    this.state = {
        minutesInput: '',
        secondsInput:'',
        numberOfSets: '', //idk if this is even working...it use to be 4
        timer: null,
        currentSeconds: null,
        active: true,
    };

    this.startClickTimer = this.startClickTimer.bind(this);

}

componentWillUnmount() {
    const timer = this.state.timer;
    timer.stop()
}

startClickTimer() {

    console.log('<> <> in startClickTimer')
    const optionsActive = {
        startTime: parseInt(this.state.minutesInput) * 60 * 1000 + parseInt(this.state.secondsInput) * 1000, //how long the timer will be set to
        updateFrequency: 1000,
        selfAdjust: true,
        countdown: true,
    };
    const optionsRest = {
        startTime: 3000, //how long the timer will be set to
        updateFrequency: 1000,
        selfAdjust: true,
        countdown: true,
    };

    const timer = new Timer(optionsActive);
    this.setState({timer: timer});

    timer.on('update', () => {
        console.log(timer.getTime.seconds);
        this.setState({currentSeconds: timer.getTime.seconds});
    });

    timer.on('end', () => {
        const active = this.state.active;
        console.log('<> <> end timer, active', active);

        timer.reset(active ? optionsRest : optionsActive);

        this.setState({active: !active});
        timer.start();
        // this.setState({currentSeconds: timer.getTime.seconds});

    });

    timer.start();
    console.log('<> <> timer started')
}
// getMinutes(){
//     return this.timer.getTime.minutes;
// }

// navbar static navigationOptions = { title: ${Strings.ST204}, };

navigateToScreen = (route) => () => {
    const navigateAction = NavigationActions.navigate({
        routeName: route,
    });
    this.props.navigation.dispatch(navigateAction);
}

//end of navbar

render() {


    return (

        <View style={{flex:1, justifyContent:"space-between",margin:30}}>

            {this.state.timer && (
                <Text>{this.state.active ? 'Active Timer: ' : 'Rest Timer: '}{this.state.timer.getTime.minutes} : {this.state.timer.getTime.seconds}</Text>
            )}

            <View style={styles.SideBySide}>

            <TextInput
                placeholder='Min'
                keyboardType={'numeric'}
                style={{
                    alignSelf: 'center',
                    marginRight: 5,
                    Text: " + "
                }}

                value={this.state.minutesInput} //need to parse this into a string, right now its a number and react complains
                onChangeText={(text) => {
                    // console.log("<> <> text input onChange udpate")
                    this.setState({
                        minutesInput: text
                    })
                }
                }
            />
            {/*<Text>:</Text>*/}
            <TextInput
                placeholder='Sec'
                keyboardType={'numeric'}
                style={{
                    alignSelf: 'center',
                    // margin: 50
                }}

                value={this.state.secondsInput} //need to parse this into a string, right now its a number and react complains
                onChangeText={(text) => {
                    this.setState({
                        secondsInput: text
                    })
                }
                }
            />
            </View>