Skip to content
This repository has been archived by the owner on Jun 27, 2022. It is now read-only.

Commit

Permalink
Changes for finish-navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
@tylermcginnis
tylermcginnis committed Aug 30, 2017
1 parent 7b2103a commit 18aeee6
Showing 1 changed file with 6 additions and 2 deletions.
8 changes: 6 additions & 2 deletions components/AddEntry.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { submitEntry, removeEntry } from '../utils/api'
import { connect } from 'react-redux'

This comment has been minimized.

Sign in to view

Copy link
@seanRoshan

seanRoshan Apr 15, 2020

Working code for V5

import React, {Component} from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {getDailyReminderValue, getMetricMetaInfo, timeToString} from "../utils/helpers";
import UdaciSlider from "./UdaciSlider";
import UdaciSteppers from "./UdaciSteppers";
import DateHeader from "./DateHeader";
import {Ionicons} from "@expo/vector-icons";
import TextButton from "./TextButton";
import {removeEntry, submitEntry} from "../utils/api";
import {connect} from 'react-redux';
import {addEntry} from "../actions";
import {purple, white} from "../utils/colors";
import {CommonActions} from '@react-navigation/native';

function SubmitBtn({onPress}) {
    return (
        <TouchableOpacity
            style={Platform.OS === 'ios' ? styles.iosSubmitBtn : styles.androidSubmitBtn}
            onPress={onPress}>
            <Text style={styles.submitBtnText}>Submit</Text>
        </TouchableOpacity>
    )
}


class AddEntry extends Component {

    state = {
        run: 0,
        bike: 0,
        swim: 0,
        sleep: 0,
        eat: 0,
    }


    increment = (metric) => {
        const {max, step} = getMetricMetaInfo(metric);
        this.setState((state) => {
            const count = state[metric] + step;
            return {
                ...state,
                [metric]: count > max ? max : count
            }
        })
    }

    decrement = (metric) => {
        const {step} = getMetricMetaInfo(metric);
        this.setState((state) => {
            const count = state[metric] - step;
            return {
                ...state,
                [metric]: count > 0 ? count : 0
            }
        })
    }

    slide = (metric, value) => {
        this.setState(() => ({
            [metric]: value
        }))
    }

    submit = () => {
        const key = timeToString();
        const entry = this.state;

        this.props.dispatch(addEntry({
            [key]: entry
        }));

        this.setState(() => ({
            run: 0,
            bike: 0,
            swim: 0,
            sleep: 0,
            eat: 0,
        }))

        this.toHome();

        submitEntry({entry, key});

        // todo: Clear local notification
    }


    reset = () => {
        const key = timeToString();

        this.props.dispatch(addEntry({
            [key]: getDailyReminderValue()
        }));

        this.toHome();

        removeEntry(key);
    }


    toHome = () => {
        this.props.navigation.dispatch(
            CommonActions.goBack({
                key: 'AddEntry',
            }))
    }

    render() {

        const metaInfo = getMetricMetaInfo();


        if (this.props.alreadyLogged) {
            return (
                <View style={styles.center}>
                    <Ionicons
                        name={Platform.OS === 'ios' ? 'ios-happy' : 'md-happy'}
                        size={100}
                    />
                    <Text>You already logged your information for today!</Text>
                    <TextButton style={{padding: 10}} onPress={this.reset}>Reset</TextButton>
                </View>
            )
        }


        return (
            <View style={styles.container}>
                <DateHeader date={new Date().toLocaleDateString()}/>
                {Object.keys(metaInfo).map((key) => {
                    const {getIcon, type, ...rest} = metaInfo[key];
                    const value = this.state[key];
                    return (
                        <View key={key} style={styles.row}>
                            {getIcon()}
                            {
                                type === 'slider'
                                    ? <UdaciSlider
                                        value={value}
                                        onChange={(value) => this.slide(key, value)}
                                        {...rest}
                                    />
                                    : <UdaciSteppers
                                        value={value}
                                        onIncrement={() => this.increment(key)}
                                        onDecrement={() => this.decrement(key)}
                                        {...rest}
                                    />
                            }
                        </View>)
                })}
                <SubmitBtn onPress={this.submit}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        backgroundColor: white
    },
    row: {
        flexDirection: 'row',
        flex: 1,
        alignItems: 'center'
    },
    iosSubmitBtn: {
        backgroundColor: purple,
        padding: 10,
        borderRadius: 7,
        height: 45,
        marginLeft: 40,
        marginRight: 40
    },
    androidSubmitBtn: {
        backgroundColor: purple,
        padding: 10,
        paddingLeft: 30,
        paddingRight: 30,
        height: 45,
        borderRadius: 2,
        alignSelf: 'flex-end',
        justifyContent: 'center'
    },
    submitBtnText: {
        color: white,
        fontSize: 22,
        textAlign: 'center'
    },
    center: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        marginRight: 30,
        marginLeft: 30,
    }
});

function mapStateToProps(state) {
    const key = timeToString();
    return {
        alreadyLogged: state[key] && !state[key].today
    }
}

export default connect(mapStateToProps)(AddEntry);

This comment has been minimized.

Sign in to view

Copy link
@AlbertVilaCalvo

AlbertVilaCalvo Feb 10, 2021

Note that CommonActions.goBack() doesn't take any parameter, so the correct code is:

toHome = () => {
  this.props.navigation.dispatch(CommonActions.goBack())
}

See the docs: https://reactnavigation.org/docs/navigation-actions/#goback
import { addEntry } from '../actions'
import { purple, white } from '../utils/colors'
import { NavigationActions } from 'react-navigation'

function SubmitBtn ({ onPress }) {
return (
Expand Down Expand Up @@ -69,7 +70,7 @@ class AddEntry extends Component {

this.setState(() => ({ run: 0, bike: 0, swim: 0, sleep: 0, eat: 0 }))

// Navigate to home
this.toHome()

submitEntry({ key, entry })

Expand All @@ -82,10 +83,13 @@ class AddEntry extends Component {
[key]: getDailyReminderValue()
}))

// Route to Home
this.toHome()

This comment has been minimized.

Sign in to view

Copy link
@mostafa-drz

mostafa-drz Nov 16, 2017

Since we have already implemented goBack() in the EntryDetail component, I think calling this function here is not necessary

This comment has been minimized.

Sign in to view

Copy link
@SherylHohman

SherylHohman Apr 11, 2018

If user was on the Home page, then clicked the Add Entry tab, then EntryDetail plays no role, and we do need to add navigation here.

However, I also do not see the advantage this methodology has over simply calling
this.props.navigation.goBack();

I did not need to import NavigationActions, or create a function in mapDispatchToProps.

What am I missing?

This comment has been minimized.

Sign in to view

Copy link
@danvayn

danvayn Apr 24, 2018 •
edited

Just wanted to say thank you to the above comments, glad I checked this. You two are right, it's a better refactor. addEntry has enough functions as it is and less imports is always nice :)

This comment has been minimized.

Sign in to view

Copy link
@xavierartot

xavierartot Sep 10, 2018

I think it helps to know, we have access to a dispatch method from navigation object. Similar to Redux.
It seems more consistent than to use back method as we stay on the navigation stack?
But you're right about the props.

This comment has been minimized.

Sign in to view

Copy link
@nokieng17

nokieng17 Jul 30, 2019

I think we you enter add Entry by Deep Link Android. (I have never tried, just in my opinion)

  1. You enter Add Entry by a deep link directly into the page.
  2. Then you add the entry.
  3. Then you call goBack. Where do go back since the stack only contain 1 stack of add Entry

So that importing NavigationActions would take benefit of that case.

This comment has been minimized.

Sign in to view

Copy link
@Eyongkevin

Eyongkevin Apr 17, 2020

If user was on the Home page, then clicked the Add Entry tab, then EntryDetail plays no role, and we do need to add navigation here.

However, I also do not see the advantage this methodology has over simply calling
this.props.navigation.goBack();

I did not need to import NavigationActions, or create a function in mapDispatchToProps.

What am I missing?

function mapDispatchToProps(dispatch, { navigation }){
 
    return{
        dispatch,
        goBack: () => navigation.goBack()
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(AddEntry)

and calling
this.props.goBack()
works just fine

removeEntry(key)
}
toHome = () => {
this.props.navigation.dispatch(NavigationActions.back({key: 'AddEntry'}))
}
render() {
const metaInfo = getMetricMetaInfo()

Expand Down

2 comments on commit 18aeee6

@hananfci
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

v5
this worked with me
import { CommonActions } from '@react-navigation/native';
then
toHome =
() => {
this.props.navigation.dispatch(
CommonActions.goBack({
key: 'AddEntry',
}))
}

@vaiden
Copy link

@vaiden vaiden commented on 18aeee6 Sep 9, 2021 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2021.09 Version 6 (v6)

Code:

    toHome = () =>{
        const { navigation } = this.props;
        navigation.dispatch(CommonActions.goBack());
    }

No need to supply a key because it gets filled in with the correct value (current route) automatically: https://reactnavigation.org/docs/navigation-actions#goback

Please sign in to comment.