Merge branch 'integrate-auth-backend-actions-with-FE-screens' into 'dev'

FEAT: Integrate auth backend actions with FE auth screens

See merge request !52

src/navigation/RootNavigator.tsx

@@ -4,14 +4,10 @@ import BottomTabNavigator from "./BottomTabNavigator";
 import { RootStackParamList } from "../types/navigation";
 import AuthStackNavigator from "./AuthStackNavigator";
 import SuccessChangePasswordScreen from "../screens/SuccessChangePasswordScreen";
-import { IUser } from "../types/firebase/User";
-import { RootState } from "../redux/store";
+import { IUser } from "../types/firestore/User";
 import { useAppDispatch, useAppSelector } from "../hooks/reduxHooks";
-import { getCurrentAuthUser } from "../service/firebase/auth";
 import { getUser } from "../redux/user/actions";
-import OnBoardingScreen from "../screens/auth/OnBoardingScreen";
 import LandingScreen from "../screens/auth/LandingScreen";
-import { useDispatch } from "react-redux";
 import firebase from "firebase";
 import { Alert } from "react-native";
 

src/redux/user/actions.tsx

 import { Dispatch } from "react-redux/node_modules/@types/react";
 import * as userService from "../../service/firestore/user";
-import { IUser } from "../../types/firebase/User";
+import { IUser } from "../../types/firestore/User";
 import * as authService from "../../service/firebase/auth";
 
 export const getUser = (uid: string) => {
@@ -23,7 +23,7 @@ export const setProfilePic = (url: string, id: string) => {
     try {
       await userService.addProfilePic(url, id);
 
-      dispatch({ type: "SET_PIC", payload: { ...getState, pic: url } });
+      dispatch({ type: "SET_PIC", payload: { pic: url } });
     } catch (e) {
       console.log(e);
     }
@@ -39,7 +39,7 @@ export const loginUser = (email: string, password: string) => {
 
       const uid = userCredential.user.uid;
 
-      dispatch(getUser(uid));
+      return dispatch(getUser(uid));
     } catch (e) {
       console.log(e);
     }
@@ -65,7 +65,7 @@ export const changePassword = (oldPassword: string, newPassword: string) => {
       await authService.reauthenticateUser(credential);
       await authService.changePassword(newPassword);
 
-      dispatch({ type: "CHANGE_PASSWORD" });
+      return dispatch({ type: "CHANGE_PASSWORD" });
     } catch (e) {
       console.log(e);
     }

src/redux/user/reducer.tsx

 import { AnyAction } from "redux";
-import { IUser } from "../../types/firebase/User";
+import { IUser } from "../../types/firestore/User";
 
 const initialState: IUser = {
   id: "",
@@ -8,6 +8,7 @@ const initialState: IUser = {
   phone: "",
   email: "",
   pic: "",
+  businessType: "",
 };
 
 const userReducer = (state = initialState, action: AnyAction): IUser => {
@@ -18,7 +19,7 @@ const userReducer = (state = initialState, action: AnyAction): IUser => {
     case "LOGOUT":
       return initialState;
     case "SET_PIC":
-      return action.payload as IUser;
+      return { ...state, pic: action.payload } as IUser;
     case "CHANGE_PASSWORD":
       return state;
     case "SIGNUP":

src/screens/auth/LoginScreen.tsx

@@ -9,11 +9,19 @@ import { Text, View } from "../../components/Themed";
 import Colors from "../../constants/Colors";
 import { RootTabScreenProps } from "../../types/navigation";
 import Spacer from "../../components/Spacer/Spacer";
+import { useAppDispatch } from "../../hooks/reduxHooks";
+import { loginUser } from "../../redux/user/actions";
 
 const LoginScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
   const nav = useNavigation();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const dispatch = useAppDispatch();
+
+  const handleSubmit = () => {
+    dispatch(loginUser(email, password));
+  };
+
   return (
     <View style={styles.container}>
       <View style={styles.componentWrapper}>
@@ -60,11 +68,7 @@ const LoginScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
       </View>
       <Spacer variant={"xl"} />
       <View style={styles.componentWrapper}>
-        <MainButton
-          text="Masuk"
-          colors="primary"
-          onPress={() => nav.navigate("Profile", { screen: "ProfileScreen" })}
-        />
+        <MainButton text="Masuk" colors="primary" onPress={handleSubmit} />
       </View>
       <Spacer variant={"l"} />
       <View style={styles.componentWrapper}>

src/screens/auth/RegisterScreen.tsx

@@ -15,6 +15,8 @@ import { RootTabScreenProps } from "../../types/navigation";
 import { useNavigation } from "@react-navigation/core";
 import { validateEmail, validateEmpty } from "../../helpers/Validators";
 import RegisterGoogleFacebookScreen from "./RegisterGoogleFacebookScreen";
+import { useAppDispatch } from "../../hooks/reduxHooks";
+import { signupUser } from "../../redux/user/actions";
 
 const RegisterScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
   const nav = useNavigation();
@@ -29,7 +31,7 @@ const RegisterScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
     { label: "Agrikultur", value: "B" },
     { label: "Pertanian", value: "D" },
   ]);
-  
+  const dispatch = useAppDispatch();
   // useEffect(() => {
   //   getCategories().then((res) =>
   //     setCategories(ddConverter<ICategory>("name", "id", res))
@@ -45,12 +47,9 @@ const RegisterScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
       validateEmpty(password) &&
       validateEmpty(picked)
     ) {
-      setIsError(true);
+      dispatch(signupUser(firstName, lastName, email, password));
     } else {
-      setIsError(false);
-    }
-    if (!isError) {
-      //TODO: Register User
+      setIsError(true);
     }
   };
 

src/screens/profile/AccountSettingsScreen.tsx

@@ -11,21 +11,22 @@ import Spacer from "../../components/Spacer/Spacer";
 import { pickImage, uploadImgToFirebase } from "../../helpers/images";
 import { ImageInfo } from "expo-image-picker/build/ImagePicker.types";
 import { setProfilePic } from "../../redux/user/actions";
-import { IUser } from "../../types/firebase/User";
+import { IUser } from "../../types/firestore/User";
 import { useAppDispatch, useAppSelector } from "../../hooks/reduxHooks";
 
 export default function AccountSettingsScreen({
   navigation,
 }: RootTabScreenProps<"Profile">) {
-  const [namaDepan, setNamaDepan] = useState("");
-  const [namaBelakang, setNamaBelakang] = useState("");
-  const [email, setEmail] = useState("");
-  const [hp, setHp] = useState("");
-  const [bisnis, setBisnis] = useState("");
+  const user: IUser = useAppSelector((state) => state.user);
+
+  const [namaDepan, setNamaDepan] = useState(user.firstName);
+  const [namaBelakang, setNamaBelakang] = useState(user.lastName);
+  const [email, setEmail] = useState(user.email);
+  const [hp, setHp] = useState(user.phone);
+  const [bisnis, setBisnis] = useState(user.businessType);
   const nav = useNavigation();
   const [isLoading, setIsLoading] = useState(false);
   const dispatch = useAppDispatch();
-  const user: IUser = useAppSelector((state) => state.user);
   const handlePickImage = () => {
     setIsLoading(true);
     pickImage().then((res) => {

src/screens/profile/ChangePasswordScreen.tsx

@@ -6,19 +6,28 @@ import MainButton from "../../components/button/MainButton";
 import IconForm from "../../components/Forms/IconForm";
 import Spacer from "../../components/Spacer/Spacer";
 import Colors from "../../constants/Colors";
+import { useAppDispatch } from "../../hooks/reduxHooks";
 import { RootTabScreenProps } from "../../types/navigation";
-import { useDispatch } from "react-redux";
 import { changePassword } from "../../redux/user/actions";
 
 const ChangePasswordScreen = ({
   navigation,
 }: RootTabScreenProps<"Profile">) => {
   const nav = useNavigation();
-  const dispatch = useDispatch();
 
   const [oldPassword, onChangeOldPassword] = useState("");
   const [newPassword, onChangeNewPassword] = useState("");
 
+  const dispatch = useAppDispatch();
+
+  const handleSubmit = () => {
+    Keyboard.dismiss();
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    dispatch(changePassword(oldPassword, newPassword)).then(() =>
+      nav.navigate("SuccessChangePassword")
+    );
+  };
+
   return (
     <View style={styles.container}>
       <Spacer variant={"xl"} />
@@ -34,7 +43,7 @@ const ChangePasswordScreen = ({
       </View>
       <Spacer variant={"m"} />
       <View style={styles.componentWrapper}>
-        <TouchableOpacity 
+        <TouchableOpacity
           onPress={() => {
             nav.navigate("Auth", { screen: "InputForgotPassword" });
           }}
@@ -57,13 +66,7 @@ const ChangePasswordScreen = ({
       <View style={styles.componentWrapper}>
         <MainButton
           text={"Ganti Password"}
-          onPress={() => {
-            Keyboard.dismiss();
-            dispatch(changePassword(oldPassword, newPassword));
-            onChangeOldPassword("");
-            onChangeNewPassword("");
-            nav.navigate("SuccessChangePassword");
-          }}
+          onPress={handleSubmit}
           colors={"Secondary"}
         />
       </View>

src/screens/profile/ProfileScreen.tsx

 import { useNavigation } from "@react-navigation/core";
 import * as React from "react";
 import { useState } from "react";
-import { StyleSheet, Image } from "react-native";
+import { StyleSheet, Image, TouchableOpacity } from "react-native";
+
 import { Text, View } from "../../components/Themed";
 import Colors from "../../constants/Colors";
 import { RootTabScreenProps } from "../../types/navigation";
@@ -9,15 +10,21 @@ import SmallButton from "../../components/button/SmallButton";
 import { Title } from "react-native-paper";
 import { MaterialIcons } from "@expo/vector-icons";
 import Spacer from "../../components/Spacer/Spacer";
-import { useSelector } from "react-redux";
-import { RootState } from "../../redux/store";
-import { IUser } from "../../types/firebase/User";
+import { useAppDispatch, useAppSelector } from "../../hooks/reduxHooks";
+import { logoutUser } from "../../redux/user/actions";
+import { IUser } from "../../types/firestore/User";
 
 export default function ProfileScreen({
   navigation,
 }: RootTabScreenProps<"Profile">) {
   const nav = useNavigation();
-  const user: IUser = useSelector((state: RootState) => state.user);
+  const user: IUser = useAppSelector((state) => state.user);
+  const dispatch = useAppDispatch();
+  // const [image, setImage] = useState("");
+  const handleExit = () => {
+    dispatch(logoutUser());
+  };
+
   return (
     <View style={styles.container}>
       <View style={styles.imageWrapper}>
@@ -57,12 +64,12 @@ export default function ProfileScreen({
         </View>
       </View>
       <Spacer variant={"xl"} />
-      <View style={styles.imageWrapper}>
+      <TouchableOpacity style={styles.imageWrapper} onPress={handleExit}>
         <MaterialIcons name={"exit-to-app"} style={styles.iconExit} size={30} />
         <View style={styles.textWrapper}>
           <Text style={styles.textExit}>Keluar</Text>
         </View>
-      </View>
+      </TouchableOpacity>
     </View>
   );
 }

src/types/firebase/User.ts → src/types/firestore/User.ts

@@ -5,4 +5,5 @@ export type IUser = {
   email: string;
   phone: string;
   pic: string;
+  businessType?: string;
 };