import Exponent from 'exponent'
import firebase from 'firebase'
import React, {Component} from 'react'
import {View, StyleSheet, ActivityIndicator,Text,Image,Dimensions,StatusBar,TouchableOpacity} from 'react-native'
import { NavigationActions } from 'react-navigation'
import FacebookButton from '../components/facebookButton'
import Swiper from 'react-native-swiper';
const {width, height} = Dimensions.get('window')
export default class Login extends Component {
state = {
showSpinner: true,
status:"gray",
prosesFB:"Loading",
}
componentDidMount() {
// firebase.auth().signOut()
firebase.auth().onAuthStateChanged(auth => {
if (auth) {
this.firebaseRef = firebase.database().ref('users')
this.firebaseRef.child(auth.uid).on('value', snap => {
const user = snap.val()
if (user != null) {
this.firebaseRef.child(auth.uid).off('value')
this.goHome(user)
}
})
} else {
this.setState({showSpinner:false})
}
})
}
goHome(user) {
const resetAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'Home', params:{user}}),
],
})
this.props.navigation.dispatch(resetAction)
}
authenticate = (token) => {
const provider = firebase.auth.FacebookAuthProvider
const credential = provider.credential(token)
return firebase.auth().signInWithCredential(credential)
}
createUser = (uid, userData) => {
const defaults = {
uid,
distance:6,
ageRange: [18,24],
serumpun: [0],
marga: "",
margaTitle:"",
marpadan: [0],
margaIbu: "",
margaIbuTitle:"",
ompungBoru:"",
ompungBoruTitle: "",
filter_religion: false,
lokasi: false,
religion: 'false',
work : [ {
"employer" : {
"id" : "",
"name" : ""
},
"id" : "",
"position" : {
"id" : "",
"name" : ""
}
} ]
}
this.setState({status:"red"})
firebase.database().ref('users').child(uid).once('value', (snap) => {
firebase.database().ref('users').child(uid).update({...userData, ...defaults,...snap.val()})
})
}
tutorialImage = () => {
return (
<Swiper style={styles.wrapper} >
<View style={styles.slide}>
<Image style={{resizeMode: 'contain', width: width-50}} source={require('../components/login/1.png')}/>
</View>
<View style={styles.slide}>
<Image style={{resizeMode: 'contain', width: width-50}} source={require('../components/login/2.png')}/>
</View>
<View style={styles.slide}>
<Image style={{resizeMode: 'contain', width: width-50}} source={require('../components/login/3.png')}/>
</View>
<View style={styles.slide}>
<Image style={{resizeMode: 'contain', width: width-50}} source={require('../components/login/4.png')}/>
</View>
<View style={styles.slide}>
<Image style={{resizeMode: 'contain', width: width-50}} source={require('../components/login/5.png')}/>
</View>
<View style={styles.slide}>
<Image style={{resizeMode: 'contain', width: width-50}} source={require('../components/login/6.png')}/>
</View>
</Swiper>
)
}
login = async () => {
this.setState({showSpinner:true})
this.setState({status:"blue"})
const APP_ID = '1374193259339584'
const options = {
permissions: ['public_profile', 'user_birthday', 'user_work_history', 'email'],
}
const {type, token} = await Exponent.Facebook.logInWithReadPermissionsAsync(APP_ID, options)
this.setState({status:"purple"})
if (type === 'success') {
this.setState({status:"yellow"})
const fields = ['id', 'first_name', 'last_name', 'gender', 'birthday', 'work']
const response = await fetch(`https://graph.facebook.com/me?fields=${fields.toString()}&access_token=${token}`)
const userData = await response.json()
const {uid} = await this.authenticate(token)
this.createUser(uid, userData)
this.setState({status:"green"})
}else{
this.setState({showSpinner:false})
}
}
render() {
return (
<View style={styles.container}>
<StatusBar hidden={true} />
{ this.state.showSpinner ?
<ActivityIndicator color={this.state.status} animating={this.state.showSpinner} /> :
<View>
<View style={{flex:5,
alignItems: 'center',
justifyContent: 'center',}}>
{this.tutorialImage()}
</View>
<View style={{flex:3,
alignItems: 'center',
justifyContent: 'center',}}>
<View style={{marginTop:80, justifyContent:'center', alignItems:'center'}}>
<FacebookButton onPress={this.login} />
<Text style={{fontSize:11 ,color:'#b5b5b5',textAlign:'center',justifyContent:'center', alignItems:'center'}}>
Kami tidak akan memposting apapun ke akun Facebook Anda. {"\n"}Dengan login, Anda setuju dengan
<Text onPress={() => {
this.props.navigation.navigate('Info')
}} style={{color:'#5f5f5f'}}> Syarat & Ketentuan </Text> dan
<Text onPress={() => {
this.props.navigation.navigate('KP')
}} style={{color:'#5f5f5f'}}> Kebijakan Privasi</Text> Kami.
</Text>
</View>
</View>
</View>
}
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex:1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#f5f5f5'
},
wrapper: {
},
slide: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
color: '#fff',
fontSize: 30,
fontWeight: 'bold',
}
})
when redirecting to the facebook app it redirects back to the app and not doing anything. i add an activity indicator to find out the problem. and it stack with the blue activity indicator. BUT if i delete the app from my facebook acount and i try to login again it work perfectly