Untitled

import React ,{useState, useEffect}from 'react'
import { useSelector, useDispatch} from 'react-redux'
import { View, Text, ScrollView , StyleSheet, TouchableOpacity, Image} from 'react-native'

import { Button } from '../component/ButtonComponent'
import { Input } from '../component/InputComponent'
import { loginUser } from '../../store/actions/profileAction'

const LoginScreen = (props) => {
  const {navigation} =props;
  
  const [isPassVisible, setIsPassVisible] =useState(false)
  const globalProfileData = useSelector(store=> store.profileReducer)
  const [username, setUsername]= useState('');
  const [password, setPassword]= useState('');
 
  const dispatch = useDispatch();

  const checckData=()=>{
    if(username==='' || password===''){
      alert('Please Input your username and password')
    }else if((username.toLowerCase()=== globalProfileData.username.toLowerCase()) && (password.toLowerCase() === globalProfileData.password.toLowerCase())){
       navigation.navigate('Start')
       dispatch(loginUser(true))
    }else{
      alert(`Your username and password didn't match`)
    }

    setUsername('')
    setPassword('')
  }
  useEffect(()=>{
    console.log('GLOBAL STATE ON REGISTER PAGE')
    console.log(globalProfileData)
  }, [globalProfileData])

  return (
    <ScrollView contentContainerStyle={styles.scroll}>
      <View style={styles.mainContainer}>
        <View style={styles.imageContainer}>
        <Image style={styles.image} source={require('../../assets/images/Login.png')}/>
        </View>
        <View style={styles.inputContainer}> 
          <Input title="Username" placeholder="Username"
                  onChangeText ={(text)=>setUsername(text)}
                  value={username}
            
          />
          <Input title="Password" placeholder="Password"
                  isPassword = {true}
                  secureTextEntry={isPassVisible? false:true}
                  iconName ={isPassVisible ? 'eye-off':'eye'}
                  onPress={()=> setIsPassVisible(!isPassVisible)}
                  onChangeText ={(text)=>setPassword(text)}
                  value={password}
          />
        </View>

        <Button text="Login" onPress={()=> checckData()}/>
        
        <View style={styles.textContainer}>
          <Text style={styles.textContainer}>
              Don't have an account?
              
          </Text>
          <TouchableOpacity
            onPress={
              ()=>navigation.navigate('Register')
            }
          >
              <Text style={styles.registerText}>
                Register
              </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',
  }
})
export default LoginScreen