redux saga implementation

package.json

@@ -15,6 +15,7 @@
     "react-scripts": "4.0.2",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
+    "redux-saga": "^1.1.3",
     "redux-thunk": "^2.3.0",
     "web-vitals": "^1.1.0"
   },

src/App.js

@@ -1,8 +1,7 @@
 import { Switch, Route } from "react-router-dom";
 import React, { useEffect } from "react";
-import { auth, handleUserProfile } from "./firebase/utils";
 import { useDispatch } from "react-redux";
-import { setCurrentUser } from "./redux/User/user.actions";
+import { checkUserSession } from "./redux/User/user.actions";
 import "./default.scss";
 
 // hoc
@@ -20,24 +19,7 @@ import Dashboard from "./pages/Dashboard";
 const App = () => {
   const dispatch = useDispatch();
   useEffect(() => {
-    const authListener = auth.onAuthStateChanged(async (userAuth) => {
-      if (userAuth) {
-        const userRef = await handleUserProfile(userAuth);
-        userRef.onSnapshot((snapshot) => {
-          dispatch(
-            setCurrentUser({
-              id: snapshot.id,
-              ...snapshot.data(),
-            })
-          );
-        });
-      }
-      dispatch(setCurrentUser(userAuth));
-    });
-
-    return () => {
-      authListener();
-    };
+    dispatch(checkUserSession());
   }, []);
 
   return (

src/components/EmailPassword/index.js

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import {
-  resetPassword,
-  resetAllAuthForms,
+  resetPasswordStart,
+  resetUserState,
 } from "./../../redux/User/user.actions";
 import { useHistory } from "react-router-dom";
 import "./styles.scss";
@@ -18,26 +18,24 @@ const EmailPassword = () => {
   const resetPasswordSuccess = useSelector(
     (state) => state.user.resetPasswordSuccess
   );
-  const resetPasswordError = useSelector(
-    (state) => state.user.resetPasswordError
-  );
+  const userErr = useSelector((state) => state.user.userErr);
 
   useEffect(() => {
     if (resetPasswordSuccess) {
-      dispatch(resetAllAuthForms());
+      dispatch(resetUserState());
       history.push("/login");
     }
   }, [resetPasswordSuccess]);
 
   useEffect(() => {
-    if (Array.isArray(resetPasswordError) && resetPasswordError.length > 0) {
-      setErrors(resetPasswordError);
+    if (Array.isArray(userErr) && userErr.length > 0) {
+      setErrors(userErr);
     }
-  }, [resetPasswordError]);
+  }, [userErr]);
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    dispatch(resetPassword({ email }));
+    dispatch(resetPasswordStart({ email }));
   };
 
   const configAuthWrapper = {

src/components/Header/index.js

@@ -1,12 +1,16 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
+import { signOutUserStart } from "./../../redux/User/user.actions";
 import "./styles.scss";
 import Logo from "./../../assets/logo.png";
-import { auth } from "./../../firebase/utils";
 
-const Header = (props) => {
+const Header = () => {
+  const dispatch = useDispatch();
   const currentUser = useSelector((state) => state.user.currentUser);
+  const signOut = () => {
+    dispatch(signOutUserStart());
+  };
   return (
     <header className="header">
       <div className="wrap">
@@ -22,7 +26,7 @@ const Header = (props) => {
                 <Link to="/dashboard">My Account</Link>
               </li>
               <li>
-                <span onClick={() => auth.signOut()}>LOGOUT</span>
+                <span onClick={signOut}>LOGOUT</span>
               </li>
             </ul>
           )}

src/components/SignIn/index.js

@@ -3,37 +3,35 @@ import "./styles.scss";
 import { Link, useHistory } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import {
-  signInUser,
-  signInWithGoogle,
-  resetAllAuthForms,
+  emailSignInStart,
+  googleSignInStart,
 } from "./../../redux/User/user.actions";
 import FormInput from "./../forms/FormInput";
 import Button from "./../forms/Button";
 import AuthWrapper from "./../AuthWrapper";
 
-const SignIn = (props) => {
+const SignIn = () => {
   const history = useHistory();
   const dispatch = useDispatch();
-  const signInSuccess = useSelector((state) => state.user.signInSuccess);
+  const currentUser = useSelector((state) => state.user.currentUser);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
 
   useEffect(() => {
-    if (signInSuccess) {
+    if (currentUser) {
       setEmail("");
       setPassword("");
-      dispatch(resetAllAuthForms());
       history.push("/");
     }
-  }, [signInSuccess]);
+  }, [currentUser]);
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    dispatch(signInUser({ email, password }));
+    dispatch(emailSignInStart({ email, password }));
   };
 
   const handleGoogleSignIn = () => {
-    dispatch(signInWithGoogle());
+    dispatch(googleSignInStart());
   };
 
   const configAuthWrapper = {

src/components/Signup/index.js

@@ -5,7 +5,7 @@ import AuthWrapper from "./../AuthWrapper";
 import "./styles.scss";
 import { useHistory } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
-import { signUpUser, resetAllAuthForms } from "./../../redux/User/user.actions";
+import { signOutUserStart } from "./../../redux/User/user.actions";
 
 const Signup = (props) => {
   const history = useHistory();
@@ -15,30 +15,31 @@ const Signup = (props) => {
   const [displayName, setDisplayName] = useState("");
   const [confirmPassword, setComfirmPassword] = useState("");
   const [errors, setErrors] = useState([]);
-  const signUpSuccess = useSelector((state) => state.user.signUpSuccess);
-  const signUpError = useSelector((state) => state.user.signUpError);
+  const currentUser = useSelector((state) => state.user.currentUser);
+  const userErr = useSelector((state) => state.user.userErr);
 
   useEffect(() => {
-    if (Array.isArray(signUpError) && signUpError.length > 0) {
-      setErrors(signUpError);
+    if (Array.isArray(userErr) && userErr.length > 0) {
+      setErrors(userErr);
     }
-  }, [signUpError]);
+  }, [userErr]);
 
   useEffect(() => {
-    if (signUpSuccess) {
+    if (currentUser) {
       setEmail("");
       setPassword("");
       setDisplayName("");
       setComfirmPassword("");
       setErrors([]);
-      dispatch(resetAllAuthForms());
       history.push("/");
     }
-  }, [signUpSuccess]);
+  }, [currentUser]);
 
   const handleFormSubmit = (e) => {
     e.preventDefault();
-    dispatch(signUpUser({ displayName, email, password, confirmPassword }));
+    dispatch(
+      signOutUserStart({ displayName, email, password, confirmPassword })
+    );
   };
 
   const configAuthWrapper = {

src/firebase/utils.js

@@ -11,7 +11,7 @@ export const firestore = firebase.firestore();
 export const GoogleProvider = new firebase.auth.GoogleAuthProvider();
 GoogleProvider.setCustomParameters({ prompt: "select_account" });
 
-export const handleUserProfile = async (userAuth, additionalData) => {
+export const handleUserProfile = async ({ userAuth, additionalData }) => {
   if (!userAuth) return;
   const { uid } = userAuth;
   const userRef = firestore.doc(`users/${uid}`);
@@ -33,3 +33,12 @@ export const handleUserProfile = async (userAuth, additionalData) => {
   }
   return userRef;
 };
+
+export const getCurrentUser = () => {
+  return new Promise((resolve, reject) => {
+    const unsubscribe = auth.onAuthStateChanged((userAuth) => {
+      unsubscribe();
+      resolve(userAuth);
+    }, reject);
+  });
+};