Fix/app freeze after login

client/screens/LoginScreen.js

@@ -12,11 +12,10 @@ import {
   View,
 } from "native-base";
 
-
 import { FontAwesome } from "@expo/vector-icons";
 
-import * as WebBrowser from 'expo-web-browser';
-import * as Google from 'expo-auth-session/providers/google';
+import * as WebBrowser from "expo-web-browser";
+import * as Google from "expo-auth-session/providers/google";
 import { useState, useEffect } from "react";
 import useLogin from "../hooks/useLogin";
 import { useAuth } from "../auth/provider";
@@ -25,30 +24,30 @@ import { useRouter } from "expo-router";
 import { theme } from "../theme";
 // import { signInWithGoogle } from "../auth/firebase";
 import { signInWithGoogle } from "../auth/firebase";
-
-
-
+import { useDispatch } from "react-redux";
+import { signIn } from "../store/authStore";
 
 export default function Login() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-  const [code, setCode] = useState("")
+  const [code, setCode] = useState("");
 
-  const [status, setStatus] = useState("login")
-  const [error, setError] = useState("")
+  const [status, setStatus] = useState("login");
+  const [error, setError] = useState("");
+
+  const dispatch = useDispatch();
 
   const { signInWithEmailPasswordProvider } = useAuth();
   const { loginUser } = useLogin();
 
-  const router = useRouter(); 
-
+  const router = useRouter();
 
   const [token, setToken] = useState("");
   const [userInfo, setUserInfo] = useState(null);
 
-
-
-
+  const handleLogin = () => {
+    dispatch(signIn({ email, password }));
+  };
 
   // useEffect(() => {
   //   if (response?.type === 'success') {
@@ -144,11 +143,14 @@ export default function Login() {
             </FormControl>
             <Button
               disabled={!email || !password}
-              onPress={() => {
-                loginUser.mutate({ email, password, from: "UserSignIn" });
-                signInWithEmailPasswordProvider({ email, password, from: "UserSignIn" });
-                router.push("/");
-              }}
+              // onPress={() => {
+
+              //   loginUser.mutate({ email, password, from: "UserSignIn" });
+              // signInWithEmailPasswordProvider({ email, password, from: "UserSignIn" });
+              //   console.log("sign in");
+              //   router.push("/home");
+              // }}
+              onPress={handleLogin}
               mt="2"
               colorScheme="indigo"
             >
@@ -211,5 +213,4 @@ export default function Login() {
       {loginUser.isSuccess && router.push("/")}
     </Center>
   );
-
 }

client/store/authStore.js

@@ -0,0 +1,94 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import { auth } from "../auth/firebase";
+import { signInWithEmailAndPassword } from "firebase/auth";
+
+const initialState = {
+  user: null,
+  loading: false,
+  error: null,
+};
+
+export const signUp = createAsyncThunk(
+  "auth/signUp",
+  async ({ email, password }, { rejectWithValue }) => {
+    try {
+      const response = await createUserWithEmailAndPassword(email, password);
+      console.log(response);
+      return response.user;
+    } catch (error) {
+      console.log(error);
+      return rejectWithValue(error.message);
+    }
+  }
+);
+
+export const signIn = createAsyncThunk(
+  "auth/signIn",
+  async ({ email, password }, { rejectWithValue }) => {
+    try {
+      const response = await signInWithEmailAndPassword(auth, email, password);
+      return response.user;
+    } catch (error) {
+      return rejectWithValue(error.message);
+    }
+  }
+);
+
+export const signOut = createAsyncThunk(
+  "auth/signOut",
+  async (_, { rejectWithValue }) => {
+    try {
+      await signOut();
+    } catch (error) {
+      return rejectWithValue(error.message);
+    }
+  }
+);
+
+export const authSlice = createSlice({
+  name: "auth",
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(signUp.pending, (state) => {
+        state.loading = true;
+        state.error = null;
+      })
+      .addCase(signUp.fulfilled, (state, action) => {
+        state.user = action.payload;
+        state.loading = false;
+      })
+      .addCase(signUp.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.payload;
+      })
+      .addCase(signIn.pending, (state) => {
+        state.loading = true;
+        state.error = null;
+      })
+      .addCase(signIn.fulfilled, (state, action) => {
+        // console.log("userinfo", action.payload);
+        state.user = action.payload;
+        state.loading = false;
+      })
+      .addCase(signIn.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.payload;
+      })
+      .addCase(signOut.pending, (state) => {
+        state.loading = true;
+        state.error = null;
+      })
+      .addCase(signOut.fulfilled, (state) => {
+        state.user = null;
+        state.loading = false;
+      })
+      .addCase(signOut.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.payload;
+      });
+  },
+});
+
+export default authSlice.reducer;

client/store/store.js

@@ -1,10 +1,12 @@
 import { configureStore } from "@reduxjs/toolkit";
 import weatherReducer from "./weatherStore";
 import dropdownReducer from "./dropdownStore";
+import authReducer from "./authStore";
 
 export default configureStore({
   reducer: {
     weather: weatherReducer,
     dropdown: dropdownReducer,
+    auth: authReducer
   },
 });