Authentication

import React, { Component } from 'react';
import { View, Text, Alert, AsyncStorage } from 'react-native';
// import firebase from 'firebase';
import { Header, Spinner, Button, Card, CardSection, Input } from '../components/common';
// import LoginForm from '../components/LoginForm';

class Authentication extends Component {
    // state = { loggedIn: null, username: '', password: '' };

    // componentWillMount() {
    //     firebase.initializeApp({
    //         apiKey: "AIzaSyDGU-VemLGDev4saZzhVTF7_BJ5ff9PWx8",
    //         authDomain: "testapp-ffddb.firebaseapp.com",
    //         databaseURL: "https://testapp-ffddb.firebaseio.com",
    //         projectId: "testapp-ffddb",
    //         storageBucket: "testapp-ffddb.appspot.com",
    //         messagingSenderId: "890498565190",
    //     });

    //     firebase.auth().onAuthStateChanged((user) => {
    //         if (user) {
    //             this.setState({ loggedIn: true });
    //         } else {
    //             this.setState({ loggedIn: false });
    //         }
    //     });
    // }

    // renderContent() {
    //     switch (this.state.loggedIn) {
    //         case true:
    //             this.props.navigation.navigate("albums")
    //         case false:
    //             return <LoginForm />;
    //         default:
    //             return <Spinner size="large" />;
    //     }
    // }

    // funcClickLogin(){

    // }

    state = { username: '', password: '', error: '', loading: false };

    onButtonPress() {
        const { username, password } = this.state;
        this.setState({ error: '', loading: true });
        const {navigate} = this.props.navigation;
        // firebase.auth().signInWithEmailAndPassword(email, password)
        //     .then(this.onLoginSuccess.bind(this))
        //     .catch(this.onLoginFail.bind(this));
        //     // .catch(() => {
        //     //     this.onLoginFail.bind(this)
        //     //     firebase.auth().createUserWithEmailAndPassword(email, password)
        //     //         .then(this.onLoginSuccess.bind(this))
        //     //         .catch(this.onLoginFail.bind(this));
        //     // });
        var tempData = new FormData();
        tempData.append('username', username);
        tempData.append('password', password);

        fetch('https://authservices.herokuapp.com/api/user/login', {
            method: 'POST',
            headers: {
                'Accept':'application/json',
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            // body: JSON.stringify({
            //     "userName": username,
            //     "userPassword": password,
            //     "apnToken": userapncode.toString()
            // })
            body:tempData
        }).then((response) => response.json()).then((responseData) => {
            if(responseData.status == 200){
                this.setState({ error: '', loading: false });
                AsyncStorage.setItem('appId', responseData.data.id)
                this.props.navigation.navigate("albums");
                Alert.alert('udemy', responseData.message)
            } else {
                this.setState({ error: '', loading: false });
                Alert.alert('udemy', responseData.message)
            }
        }).done();
        // this.props.navigation.navigate("albums");
    }

    onPressRegister(){
        this.props.navigation.navigate("register");
    }

    onLoginFail() {
        this.setState({ error: 'Authentication Failed', loading: false });
    }

    onLoginSuccess() {
        this.setState({
            username: '',
            password: '',
            loading: false,
            error: ''
        });
    }

    renderButton(getData) {
        if (this.state.loading) {
            return <Spinner size="small" />;
        }
        if(getData == 'login'){
            return (
                <Button onPress={this.onButtonPress.bind(this)}>
                    Log In
                </Button>
            );
        }else{
            return (
                <Button onPress={()=>this.props.navigation.navigate("register")}>
                    Registrasi
                </Button>
            );
        }
    }

    render() {
        return (
            <View>
                <Header headerText="Authentication" />
                {/* {this.renderContent()} */}
                <Card>
                    <CardSection>
                        <Input
                            placeholder="username"
                            label="Username"
                            value={this.state.username}
                            onChangeText={username => this.setState({ username })}
                        />
                    </CardSection>

                    <CardSection>
                        <Input
                            secureTextEntry
                            placeholder="password"
                            label="Password"
                            value={this.state.password}
                            onChangeText={password => this.setState({ password })}
                        />
                    </CardSection>

                    <Text style={styles.errorTextStyle}>
                        {this.state.error}
                    </Text>

                    <CardSection>
                        {this.renderButton('login')}
                    </CardSection>
                    <CardSection>
                        {this.renderButton('registrasi')}
                    </CardSection>
                </Card>
            </View>
        );
    }
}

const styles = {
    errorTextStyle: {
        fontSize: 20,
        alignSelf: 'center',
        color: 'red'
    }
};

export default Authentication;