Register Screen

import {
  View,
  StyleSheet,
  Image,
  TouchableOpacity,
  ScrollView,
  Text,
  Alert,
} from "react-native";
import { Button } from "../components/ButtonComponent";
import { Input } from "../components/InputComponent";
import { styles } from "../styles/style";
import { createProfile } from "../store/actions/profileAction";
import { useDispatch, useSelector } from "react-redux";
import { useEffect, useState } from "react";

const RegisterScreenJS = ({ navigation }) => {
  const data = useSelector((store) => store.profileReducer);
  const dispatch = useDispatch();
  const [isPassVisible, setIsPassVisible] = useState(false);
  const [isEmail, setIsEmail] = useState(false);
  const emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w\w+)+$/;
  const [form, setForm] = useState({
    username: "",
    password: "",
    email: "",
  });
  useEffect(() => {
    console.log(data);
  }, []);
  function changeInput(type, value) {
    if (type === "email") {
      emailRegex.test(value) ? setIsEmail(true) : setIsEmail(false);
    }
    setForm({
      ...form,
      [type]: value,
    });
  }

  function sendData() {
    if (
      form.username === "" ||
      form.email === "" ||
      form.password === "" ||
      !isEmail
    ) {
      Alert.alert(
        "Error",
        "Make sure you fill all the field with the right information!"
      );
    } else {
      dispatch(createProfile(form));
      Alert.alert("Success", "Successfully create an account!", [
        {
          text: "OK",
          onPress: () => navigation.navigate("Login"),
        },
      ]);
    }
  }

  return (
    <ScrollView contentContainerStyle={styles.scroll}>
      <View style={styles.mainContainerLogin}>
        <View style={styles.imageContainer}>
          <Image
            style={styles.image}
            source={require("../assets/images/login.png")}
          />
          <Text>Register</Text>
        </View>
        <View style={styles.inputContainerLogin}>
          <Input
            title="Username"
            placeholder="Username"
            onChangeText={(text) => {
              changeInput("username", text);
            }}
          />
        </View>
        <View style={styles.inputContainerLogin}>
          <Input
            title="Email"
            placeholder="Email"
            onChangeText={(text) => {
              changeInput("email", text);
            }}
          />
          {isEmail ? null : (
            <View style={styles.warningContainer}>
              <Text style={styles.warning}>
                Please input the right email format!
              </Text>
            </View>
          )}
        </View>
        <View style={styles.inputContainerLogin}>
          <Input
            title="Password"
            placeholder="Password"
            isPassword={true}
            secureTextEntry={isPassVisible}
            iconName={isPassVisible ? "eye-off" : "eye"}
            onPress={() => setIsPassVisible(!isPassVisible)}
            onChangeText={(text) => {
              changeInput("password", text);
            }}
          />
        </View>
        <Button text="Register" onPress={() => sendData()} />
        <View style={styles.textContainer}>
          <Text style={styles.textLogin}>Already have an account?</Text>
          <TouchableOpacity
            onPress={() => {
              navigation.navigate("Login");
            }}
          >
            <Text style={styles.registerText}>Login</Text>
          </TouchableOpacity>
        </View>
      </View>
    </ScrollView>
  );
};
export default RegisterScreenJS;