refactor: signup - signin to asynk thunk

manismk · May 24, 2022 · 4ac38b4 · 4ac38b4
1 parent 40a1a28
commit 4ac38b4
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 68 deletions.
diff --git a/src/pages/login/Login.jsx b/src/pages/login/Login.jsx
@@ -1,9 +1,10 @@
 import { useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
-import { InputPassword, InputTextBox } from "../../components";
+import { InputPassword, InputTextBox, Loader } from "../../components";
 import "./auth.css";
 import { handleLoginValidation } from "../../utils/";
-import { handleSignIn } from "../../service";
+import { handleSignIn } from "../../store/features/authSlice";
+import { useDispatch, useSelector } from "react-redux";
 
 export const Login = () => {
   const [userData, setUserData] = useState({
@@ -12,6 +13,8 @@ export const Login = () => {
     mailError: "",
     passwordError: "",
   });
+  const { loginLoading } = useSelector((state) => state.auth);
+  const dispatch = useDispatch();
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -29,7 +32,14 @@ export const Login = () => {
       }));
     }
     if (mailError.length === 0 && passwordError.length === 0) {
-      handleSignIn(userData.userMail, userData.password, location, navigate);
+      dispatch(
+        handleSignIn({
+          email: userData.userMail,
+          password: userData.password,
+          location,
+          navigate,
+        })
+      );
     }
   };
 
@@ -112,6 +122,7 @@ export const Login = () => {
           </p>
         </div>
       </main>
+      {loginLoading && <Loader />}
     </>
   );
 };
diff --git a/src/pages/signup/Signup.jsx b/src/pages/signup/Signup.jsx
@@ -1,7 +1,8 @@
 import { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
-import { InputPassword, InputTextBox } from "../../components";
-import { handleSignUp } from "../../service";
+import { InputPassword, InputTextBox, Loader } from "../../components";
+import { handleSignUp } from "../../store/features/authSlice";
 import { handleSignUpValidation } from "../../utils";
 
 export const SignUp = () => {
@@ -20,6 +21,8 @@ export const SignUp = () => {
 
   const navigate = useNavigate();
   const location = useLocation();
+  const dispatch = useDispatch();
+  const { signUpLoading } = useSelector((state) => state.auth);
 
   const signUpHandler = () => {
     const {
@@ -59,13 +62,15 @@ export const SignUp = () => {
       lastNameError.length === 0 &&
       confirmPasswordError.length === 0
     ) {
-      handleSignUp(
-        userData.userMail,
-        userData.password,
-        userData.firstName,
-        userData.lastName,
-        location,
-        navigate
+      dispatch(
+        handleSignUp({
+          email: userData.userMail,
+          password: userData.password,
+          firstName: userData.firstName,
+          lastName: userData.lastName,
+          location,
+          navigate,
+        })
       );
     }
   };
@@ -175,6 +180,7 @@ export const SignUp = () => {
           </p>
         </div>
       </main>
+      {signUpLoading && <Loader />}
     </>
   );
 };
diff --git a/src/service/handleSignIn.js b/src/service/handleSignIn.js
diff --git a/src/service/handleSignUp.js b/src/service/handleSignUp.js
diff --git a/src/service/index.js b/src/service/index.js
@@ -8,6 +8,4 @@ export { handleComment } from "./handleComment";
 export { handleReply } from "./handleReply";
 export { handleCreatePost } from "./handleCreatePost";
 export { handleEditProfile } from "./handleEditProfile";
-export { handleSignIn } from "./handleSignIn";
 export { handleSignOut } from "./handleSignOut";
-export { handleSignUp } from "./handleSignUp";
diff --git a/src/store/features/authSlice.js b/src/store/features/authSlice.js
@@ -1,9 +1,67 @@
-import { createSlice } from "@reduxjs/toolkit";
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import { toast } from "react-toastify";
+import { auth, db } from "../../firebase";
 
 const initialState = {
   user: null,
+  loginLoading: false,
+  signUpLoading: false,
 };
 
+export const handleSignIn = createAsyncThunk(
+  "auth/signIn",
+  async ({ email, password, location, navigate }, thunkAPI) => {
+    const from = location.state?.from?.pathname || "/";
+    return auth
+      .signInWithEmailAndPassword(email, password)
+      .then(() => {
+        navigate(from, { replace: true });
+        toast.success("Logged In Successfully");
+      })
+      .catch((e) => {
+        console.log("Error in signIn", e);
+        toast.error(e.message);
+      });
+  }
+);
+export const handleSignUp = createAsyncThunk(
+  "auth/signUp",
+  async (
+    { email, password, firstName, lastName, location, navigate },
+    thunkAPI
+  ) => {
+    const from = location.state?.from?.pathname || "/";
+
+    return auth
+      .createUserWithEmailAndPassword(email, password)
+      .then((response) => {
+        db.collection(`users/`)
+          .doc(response.user.uid)
+          .set({
+            firstName,
+            lastName,
+            mailId: email,
+            bio: "I am a new socialoo user",
+            profilePictureUrl:
+              "https://firebasestorage.googleapis.com/v0/b/socialoo-e8f1c.appspot.com/o/profile-default.jpg?alt=media&token=2eaaa7f6-3f12-401b-b784-41deb1583aed",
+            portfolioLink: "",
+            uid: response.user.uid,
+            saved: [],
+            followers: [],
+            following: [],
+          })
+          .then(() => {
+            navigate(from, { replace: true });
+            toast.success("Signed Up Successfully");
+          });
+      })
+      .catch((e) => {
+        console.log("Error in signUp", e);
+        toast.error(e.message);
+      });
+  }
+);
+
 const authSlice = createSlice({
   name: "auth",
   initialState,
@@ -12,6 +70,26 @@ const authSlice = createSlice({
       state.user = payload;
     },
   },
+  extraReducers: {
+    [handleSignIn.pending]: (state) => {
+      state.loginLoading = true;
+    },
+    [handleSignIn.fulfilled]: (state) => {
+      state.loginLoading = false;
+    },
+    [handleSignIn.rejected]: (state) => {
+      state.loginLoading = false;
+    },
+    [handleSignUp.pending]: (state) => {
+      state.signUpLoading = true;
+    },
+    [handleSignUp.fulfilled]: (state) => {
+      state.signUpLoading = false;
+    },
+    [handleSignUp.rejected]: (state) => {
+      state.signUpLoading = false;
+    },
+  },
 });
 
 export const { setUser } = authSlice.actions;