Как вызвать одну из нескольких функций - JavaScript? - PullRequest
Новая
       15

Как вызвать одну из нескольких функций - JavaScript?

1 голос
/ 12 июня 2019

У меня есть три функции:

  1. Изменить адрес электронной почты
  2. Изменить пароль
  3. Изменить другие данные

И одна кнопка, чтобы вызвать их, когда пользователь изменяет свои данные без изменения Email или пароля, я не хочу вызывать другую функцию Change Email или Change Password просто вызывать функцию Change другие данные, а при изменении своего электронного адреса с другими данными, такими как имя пользователя, местоположение Я просто хочу позвонить Изменить адрес электронной почты, изменить другие данные Функция НЕ Изменить пароль

Итак, как с этим справиться, как получить текущий пароль и сохранитьв моем состоянии, потому что, когда я написал неправильный пароль, измените функцию «Другие данные»?

Я использую Firebase в качестве бэкэнда

Экран редактирования

Edit Screen

вот мой код [React Native App] 

import React, { Component } from 'react';
import firebase from "react-native-firebase";

import Icon from 'react-native-vector-icons/Ionicons';
import styles from "../Style/styles";

import AsyncStorage from '@react-native-community/async-storage';

import {
    View,
    Text,
    KeyboardAvoidingView,
    StyleSheet,
    ActivityIndicator,
    TouchableOpacity,
    TextInput,
    ScrollView
} from 'react-native';


class profileEdit extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentPassword: "",
            newPassword: "",
            currentUser: {
                username: "",
                email: "",
                city: "",
                mobileNumber: "",
            },
            data: {},
            loading: true
        }
    }
    async componentDidMount() {
        try {
            const userId = firebase.auth().currentUser.uid;
            await this.setState({ userId });
            console.log("@uid", this.state.userId);
            let recentPostsRef = firebase.database().ref(`users/${userId}`);
            await recentPostsRef.once('value').then(snapshot => {
                this.setState({ currentUser: snapshot.val(), loading: false })
                console.log(this.state.currentUser)
            }).catch((error) => console.log("@error", error));
        } catch (error) {
            console.log("@CError", error);
        }
    }

    reauthenticate = (currentPassword) => {
        var user = firebase.auth().currentUser;
        var cred = firebase.auth.EmailAuthProvider.credential(
            user.email, currentPassword);
        return user.reauthenticateWithCredential(cred);
    }

    _updateProfileData = async () => {
        if (this.state.currentPassword === "") {
            alert("please write your current password first!")
            return;
        } else {
            await this._updateData();
            await this.changeEmail();
            await this.changePassword();
        }
    }
    changePassword = () => {
        if (this.state.currentPassword === "" || this.state.newPassword === "") {
            return
        } else {
            this.reauthenticate(this.state.currentPassword).then(() => {
                var user = firebase.auth().currentUser;
                user.updatePassword(this.state.newPassword).then(() => {
                    console.log("Pssword updated!");
                    this._updateData();
                    this.setState({ newPassword: "", currentPassword: "" });
                }).catch((error) => console.log(error.message));
            }).catch((error) => console.log(error.message));
        }
    }
    changeEmail = () => {
        this.reauthenticate(this.state.currentPassword).then(() => {
            var user = firebase.auth().currentUser;
            user.updateEmail(this.state.currentUser.email).then(() => {
                console.log("Email updated!");
                this._updateData();
            }).catch((error) => { console.log(error) });
        }).catch((error) => { console.log(error) });
    }
    _updateData = () => {
        const { userId, currentUser } = this.state;
        let recentPostsRef = firebase.database().ref(`users/${userId}`);
        recentPostsRef.update({
            username: currentUser.username,
            email: currentUser.email,
            city: currentUser.city,
            mobileNumber: currentUser.mobileNumber,
        }).then(async () => {
            let Data = await AsyncStorage.mergeItem('@MyProfile:data', JSON.stringify(currentUser))
            console.log(Data)
            alert("Great, your profile updated right now!")
        }).then(async () => {
            await AsyncStorage.getItem('@MyProfile:data')
                .then(json => JSON.parse(json))
                .then(currentUser => this.setState({ currentUser }))
                .catch(error => console.log('@error' + error));
        })
    }
    // _logout = () => {
    //     firebase.auth().signOut().then(() => {
    //         alert("Logout successfuly")
    //         setTimeout(() => {
    //             this.props.navigation.navigate("SignIn")
    //         }, 500)
    //     }).catch((error) => console.log("@error", error));
    // }

    render() {
        const { currentUser, loading } = this.state;
        if (loading) {
            return (
                <View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
                    <Text>Just a moment.</Text>
                    <ActivityIndicator size="large" color="#1567d3" />
                </View>
            )
        } else {
            console.log("Loading False");
            return (
                <ScrollView scrollEnabled={true}>
                    <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={70}>
                        <View style={{ flex: 1 }}>
                            <View style={styles.logoSection}>
                                {/* <SvgComponent height={100} /> */}
                                <Icon name="ios-contact" size={90} color='#4d8dd6' style={{ marginTop: 9 }} />

                                <Text style={{ fontSize: 18, color: "#000", margin: 35, marginTop: 7 }}>
                                    {currentUser.username}
                                </Text>
                            </View>

                            {/* //username */}
                            <View style={style.child}>
                                <Icon name="ios-contact" size={30} color='#4285f4' style={{ marginTop: 9 }} />
                                <TextInput
                                    style={style.textInput}
                                    autoCapitalize="words"
                                    value={currentUser.username}
                                    onChangeText={(username) => { this.setState(Object.assign(currentUser, { username: username })) }}
                                />
                            </View>

                            {/* //Email */}
                            <View style={style.child}>
                                <Icon name="md-at" size={30} color='#4285f4' style={{ marginTop: 9 }} />
                                <TextInput
                                    style={style.textInput}
                                    keyboardType="email-address"
                                    autoCapitalize="words"
                                    value={currentUser.email}
                                    onChangeText={
                                        (email) => { this.setState(Object.assign(currentUser, { email: email })) }
                                    }
                                />
                            </View>

                            {/* //Password */}

                            <View style={style.child}>
                                <Icon name="md-lock" size={30} color='#4285f4' style={{ marginTop: 9 }} />
                                <TextInput
                                    style={style.textInput}
                                    autoCapitalize="words"
                                    placeholder="current password"
                                    value={this.state.currentPassword}
                                    onChangeText={(currentPassword) => this.setState({ currentPassword })}
                                />
                            </View>
                            <View style={style.child}>
                                <Icon name="md-lock" size={30} color='#4285f4' style={{ marginTop: 9 }} />
                                <TextInput
                                    style={style.textInput}
                                    autoCapitalize="words"
                                    placeholder="New password"
                                    value={this.state.newPassword}
                                    onChangeText={(newPassword) => { this.setState({ newPassword }) }}
                                />
                            </View>

                            {/* //Location */}
                            <View style={style.child}>
                                <Icon name="ios-navigate" size={30} color='#4285f4' style={{ marginTop: 9 }} />
                                <TextInput
                                    style={style.textInput}
                                    autoCapitalize="words"
                                    placeholder="New City"
                                    value={currentUser.city}
                                    onChangeText={(city) => { this.setState(Object.assign(currentUser, { city: city })) }}
                                />
                            </View>

                            <View style={style.child}>
                                <Icon name="ios-call" size={30} color='#4285f4' style={{ marginTop: 9 }} />
                                <TextInput
                                    style={style.textInput}
                                    autoCapitalize="words"
                                    keyboardType="number-pad"
                                    placeholder="New Mobile Number"
                                    value={currentUser.mobileNumber}
                                    onChangeText={(mobileNumber) => { this.setState(Object.assign(currentUser, { mobileNumber: mobileNumber })) }}
                                />
                            </View>

                            {/* Logout 
                            <TouchableOpacity style={style.logout} onPress={this._logout}>
                                <Icon name="md-power" size={25} color='#0496FF' style={{ marginTop: -2 }} />
                                <Text style={{ paddingLeft: 10 }}>Logout</Text>
                            </TouchableOpacity>
                            */}
                        </View>

                        {/* Save */}
                        <TouchableOpacity onPress={this._updateProfileData}
                            style={[styles.button, style.saveBtn]}>
                            <Text style={styles.TextButton}>Save</Text>
                        </TouchableOpacity>

                    </KeyboardAvoidingView>
                </ScrollView>
            );
        }
    }
}

export default profileEdit;

Ответы [ 2 ]

0 голосов
/ 15 июня 2019

Я думаю, что у вас есть два варианта: параметр добавить больше переменных в состояние, с которым вы можете сравнивать новые данные, и второй вариант - использовать три логических значения, одно для пароля, адреса электронной почты и другое.

Вариант 1 

constructor(props) {
  super(props);
  this.state = {
    currentPassword: "",
    newPassword: "",
    email: '',
    currentUser: {
      username: "",
      email: "",
      city: "",
      mobileNumber: "",
    },
    username: '',
    city: '',
    mobileNumber: '',
    data: {},
    loading: true
  }
}

_updateProfileData = async () => {

  const { currentPassword, email, currentUser, newPassword,
    mobileNumber, username, city } = this.state;

  if (currentPassword === "") {
    alert("please write your current password first!")
    return;
  }

  if (email !== currentUser.email) {
    // email changed update
    await this.changeEmail();
  }

  if (newPassword !== currentPassword) {
    // password changed update
    await this.changePassword();
  }

  if (city !== currentUser.city || mobileNumber !== currentUser.mobileNumber || username !== currentUser.username) {
    await this._updateData();
  }
}

async componentDidMount() {
  try {
    const userId = firebase.auth().currentUser.uid;
    await this.setState({ userId });
    console.log("@uid", this.state.userId);
    let recentPostsRef = firebase.database().ref(`users/${userId}`);
    await recentPostsRef.once('value').then(snapshot => {
      const currentUser = snapshot.val();
      this.setState({ currentUser: currentUser, email: currentUser.email, username: currentUser.username, city: currentUser.city, mobileNumber: currentUser.mobileNumber, loading: false })
      console.log(this.state.currentUser)
    }).catch((error) => console.log("@error", error));
  } catch (error) {
    console.log("@CError", error);
  }
}

Опция 2 , имеет три логических значения, passwordChanged,emailChanged,otherChanged, когда пользователь вводит один из входов, задает значение true и в _updateProfileData проверяет, является ли значение true, затем обновите значение. 

constructor(props) {
  super(props);
  this.state = {
    currentPassword: "",
    newPassword: "",
    currentUser: {
      username: "",
      email: "",
      city: "",
      mobileNumber: "",
    },
    data: {},
    // boolean values for email, password and other
    passwordChanged: false,
    emailChanged: false,
    otherChanged: false,
    loading: true
  }
}

_updateProfileData = async () => {

  const { currentPassword, passwordChanged, emailChanged, otherChanged } = this.state;

  if (currentPassword === "") {
    alert("please write your current password first!")
    return;
  }

  if (emailChanged) {
    // email changed update
    await this.changeEmail();
  }

  if (passwordChanged) {
    // password changed update
    await this.changePassword();
  }

  if (otherChanged) {
    await this._updateData();
  }
}
0 голосов
/ 13 июня 2019

Пожалуйста, сделайте следующее: 

// You have to change the method _updateProfileData as following
_updateProfileData = async () => {
        if (this.state.currentPassword === "") {
            alert("please write your current password first!")
            return;
        } if (this.state.currentUser.email === "") {
            alert("Email can't be blank")
            return;
        } if (this.state.currentUser.username === "") {
            alert("Username can't be blank")
            return;
        } if (this.state.currentUser.city === "") {
            alert("City can't be blank")
            return;
        } if (this.state.currentUser.mobileNumber === "") {
            alert("Mobile number can't be blank")
            return;
        } else {
            this._getCurrentUserData((oldUserData) => {
            if(oldUserData.email !== this.state.currentUser.email) {
                 await this.changeEmail();
            }

            if(this.state.newPassword !== this.state.currentPassword) {
                 await this.changePassword();
            }

            if(oldUserData.username !== this.state.currentUser.username || oldUserData.city !== this.state.currentUser.city || oldUserData.mobileNumber !== this.state.currentUser.mobileNumber ) {
                 await this._updateData();
            }
            );
        }
    }

// You have to add this method in your component
_getCurrentUserData = (callBack) => {
   AsyncStorage.getItem('@MyProfile:data')
            .then(json => JSON.parse(json))
            .then(currentUser => callBack(currentUser))
            .catch(error => console.log('@error' + error));
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...