• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • About
  • Life
  • Tech
  • Travel
  • Work
  • Questions
  • Contact

Welcome

.

switching back and forth between methods

April 10, 2020 by

Questions › switching back and forth between methods
0
Vote Up
Vote Down
Garmaine asked 4 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>
Are you looking for the answer?
Original Question and Possible Answers can be found on `http://stackoverflow.com`

Question Tags: javascript, methods, react-native

Please login or Register to submit your answer




Primary Sidebar

Tags

Advancements best Business strategies commercial convenience economic Finances Cognitive decline Financial growth firm Future Hidden Gems Home hydration Impact Innovations lighting line of work Mental health Must-See New York City office patronage Productivity profession Profitability tips Profit optimization pursuit recreation Revenue enhancement romance sippy cups social station Technological breakthroughs technology toddlers trading transaction Treasures Uncover undertaking Well-being Wonders Work Young onset dementia

Newsletter

Complete the form below, and we'll send you all the latest news.

Footer

Footer Funnies

Who knew that reading the footer could be such a hilarious adventure? As we navigate websites, books, and documents, we often stumble upon the unassuming space at the bottom, only to discover a treasure trove of amusement. In this side-splitting compilation, we present 100 jokes that celebrate the unsung hero of content – the footer. Get ready to chuckle, giggle, and maybe even snort as we dive into the world of footnotes, disclaimers, and hidden comedic gems. Brace yourself for a wild ride through the footer!

Recent

  • Unveiling the Enigma: Almost-Magical Lamp Lights Highway Turns
  • The Impact of Young Onset Dementia on Employment and Finances: Optimizing Post-Diagnostic Approaches
  • 11 Wonders of 2023 Technological Breakthrough – Unveiling the Future
  • Work from Home and Stay Mentally Sane – Achieve Productivity and Well-being
  • Hidden Gems of New York City – Uncover the Must-See Treasures!

Search

Tags

Advancements best Business strategies commercial convenience economic Finances Cognitive decline Financial growth firm Future Hidden Gems Home hydration Impact Innovations lighting line of work Mental health Must-See New York City office patronage Productivity profession Profitability tips Profit optimization pursuit recreation Revenue enhancement romance sippy cups social station Technological breakthroughs technology toddlers trading transaction Treasures Uncover undertaking Well-being Wonders Work Young onset dementia

Copyright © 2023