Untitled

import { View, Text, ScrollView, StyleSheet, TouchableOpacity } from 'react-native'
import React,{useEffect, useState} from 'react'
import { Button } from '../component/ButtonComponent'
import { Input } from '../component/InputComponent'
import { useSelector, useDispatch } from 'react-redux'
import { createProfile } from '../../store/actions/profileAction'
import { Alert } from 'react-native'

const RegisterScreen = (props) => {

  const {navigation} = props;
  const dispatch = useDispatch();
  const globalProfileData = useSelector(store => store.profileReducer);
  const [form, setForm] = useState({
    username :'',
    email:'',
    password :''
  })
  

  const [ isEmailFormat, setIsEmailFormat ] = useState(true)
  const [isPassVisible, setIsPassVisible] =useState(false)

  const onChangeInput =(inputType, value)=>{
    const emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\ w+)*(\.\w\w+)+$/;
    if(inputType === 'email'){
      if(!emailRegex.test(value)){
        setIsEmailFormat(false);
      }else{
        setIsEmailFormat(true)
      }
    }
    
    setForm({
      ...form,
      [inputType] : value
    })

  }

  const sendData=()=>{
    if(form.username ==='' || form.email==='' || form.password==='' || !isEmailFormat ){
      alert('Make sure you fill all the field with the right information');
    }else{
      dispatch(createProfile(form))
      Alert.alert(
        "Success",
        "Succesfully create an account",
        [
          {
            text:"OK",
            onPress:()=> navigation.navigate('Login')
          }
        ]
      )
    }
  }
  useEffect(()=>{
    console.log('GLOBAL STATE ON REGISTER PAGE')
    console.log(globalProfileData)
  }, [globalProfileData])

  useEffect(()=>{
    console.log('LOCAL STATE');
    console.log('username: ' + form.username)
    console.log('email :' +form.email)
    console.log('pasword :' +form.password)
  }, [form])

  useEffect(()=>{
    if(form.email===''){
      setIsEmailFormat(true)
    }
  },[form.email])

  // useEffect(()=>{
  //     dispatch(createProfile({
  //         username:'ayukrisnasari',
  //         email:'ayukrisnasari15@gmail.com',
  //         password:'1234'
  //     }))
  // }, [])
  return (
    <ScrollView contentContainerStyle={styles.scroll}>
      <View style={styles.mainContainer}>
        
        <View style={styles.inputContainer}> 
          <Input title="Username" placeholder="Username" onChangeText={(text =>onChangeInput('username', text))}/>
          <Input title="Email" placeholder="Email" onChangeText={(text =>onChangeInput('email', text))}/>
          {
            isEmailFormat ? 
              null 
              : 
              <View style={styles.warningContainer}>
                <Text style={styles.warning}>Please Input the right email format!</Text>
              </View>
          }
          
          <Input title="Password" placeholder="Password" onChangeText={(text =>onChangeInput('password', text))}
                   isPassword = {true}
                   secureTextEntry={isPassVisible? false:true}
                   iconName ={isPassVisible ? 'eye-off':'eye'}
                   onPress={()=> setIsPassVisible(!isPassVisible)}
          />
        </View>

        <Button 
          text="Register" 
          onPress={()=>sendData()}
        />
        <View style={styles.textContainer}>
          <Text style={styles.textContainer}>
             Already have an account?
              
          </Text>
          <TouchableOpacity
            onPress={
                () => navigation.navigate('Login')
            }
          >
              <Text style={styles.registerText}>
                Login
              </Text>
            </TouchableOpacity>
        </View>
      </View>
    </ScrollView>
  )
}
const styles = StyleSheet.create({
  scroll:{
    flexGrow:1
  },
  mainContainer:{
    backgroundColor:'white',
    flex:1, 
    alignItems:'center',
    justifyContent:'center'
  },
  imageContainer:{
    marginTop:32, 
    marginBottom:16
  },
  image:{
    width:180,
    height:180
  },
  inputContainer:{
    padding:16,
    width:'100%'
  },
  textContainer:{
    flexDirection:'column',
    marginTop:16, 
    alignItems:'center'
  },
  text:{
    fontSize:16
  },
  registerText:{
    fontSize:16,
    color: '#1A5B0A',
  },
  warningContainer:{
    marginBottom:16,
    marginLeft:16
  },
  warning:{
    color:'red'
  }
})
export default RegisterScreen