sesion refactored with saga

Author: ajavieralejandro

src/App.js

@@ -7,6 +7,7 @@ import { connect } from "react-redux";
 import ShopPage from "./pages/shop/shop.component";
 import Header from "./components/header/header.component";
 import SignInAndSignUpPage from "./pages/sign-in-and-sign-up/sign-in-and-sign-up.component";
+import {checkUserSession } from "./redux/user/user.actions";
 //proob comment
 //Firebase
 import { selectToArray } from "./redux/shop/shop.selectors";
@@ -23,27 +24,11 @@ class App extends React.Component {
   unsubscribeFromAuth = null;
 
   componentDidMount() {
-    /*
-    this.unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth => {
-      if (userAuth) {
-        const userRef = await createUserProfileDocument(userAuth);
-
-        userRef.onSnapshot(snapShot => {
-          setCurrentUser({
-            id: snapShot.id,
-            ...snapShot.data()
-          });
-        });
-      }
-      
-
-      setCurrentUser(userAuth);
-      //Insercion en la base de datos...
-      /*addCollectionAndDocuments(
-        "collections",
-        collectionsArray.map(({ title, items }) => ({ title, items }))
-      );
-    });*/
+    console.log("Me estoy fijando que esta pasando");
+    const {checkUserSession} = this.props;
+    const aux = checkUserSession();
+    console.log("vino : ",aux);
+ 
   }
 
   componentWillUnmount() {
@@ -81,4 +66,8 @@ const mapStateToProps = createStructuredSelector({
   collectionsArray: selectToArray
 });
 
-export default connect(mapStateToProps)(App);
+const mapDispatchToProps = dispatch => ({
+  checkUserSession : () => dispatch(checkUserSession())
+})
+
+export default connect(mapStateToProps,mapDispatchToProps)(App);

src/components/header/header.component.jsx

@@ -7,14 +7,16 @@ import CartIcon from "../cart-icon/cart-icon.component";
 import CartDropdown from "../cart-dropdown/cart-dropdown";
 import { selectCartHidden } from "../../redux/cart/cart.selectors";
 import { selectCurrentUser } from "../../redux/user/user.selectors";
+import {signOutStart} from "../../redux/user/user.actions";
 import {
   LogoContainer,
   OptionsContainer,
   OptionLink,
+  OptionDiv,
   HeaderContainer
 } from "./header.styles";
 
-const Header = ({ currentUser, cartHidden }) => (
+const Header = ({ currentUser, cartHidden,signOut }) => (
   <HeaderContainer>
     <LogoContainer to="/">
       <Logo className="logo" />
@@ -23,9 +25,9 @@ const Header = ({ currentUser, cartHidden }) => (
       <OptionLink to="/shop">SHOP</OptionLink>
       <OptionLink to="/shop">CONTACT</OptionLink>
       {currentUser ? (
-        <OptionLink to="/" as="div" onClick={() => auth.signOut()}>
+        <OptionDiv  as="div" onClick={signOut}>
           SIGN OUT
-        </OptionLink>
+        </OptionDiv>
       ) : (
         <OptionLink to="/signin">SIGN IN</OptionLink>
       )}
@@ -40,4 +42,9 @@ const mapStateToProps = createStructuredSelector({
   cartHidden: selectCartHidden
 });
 
-export default connect(mapStateToProps)(Header);
+const mapDispatchToProps = dispatch =>({
+  signOut: () => dispatch(signOutStart())
+})
+
+
+export default connect(mapStateToProps,mapDispatchToProps)(Header);

src/components/header/header.styles.jsx

@@ -31,3 +31,7 @@ export const OptionsContainer = styled.div`
 export const OptionLink = styled(Link)`
   ${OptionsContainerStyles}
 `;
+
+export const OptionDiv = styled.div`
+${OptionsContainerStyles}
+`;

src/firebase/firebase.utils.js

@@ -91,4 +91,13 @@ export const googleProvider = new firebase.auth.GoogleAuthProvider();
 googleProvider.setCustomParameters({ prompt: "select_account" });
 export const signInWithGoogle = () => auth.signInWithPopup(googleProvider);
 
+export const getCurrentUser = () => {
+  return new Promise((resolve, reject) => {
+    const unsubscribe = auth.onAuthStateChanged(userAuth => {
+      unsubscribe();
+      resolve(userAuth);
+    }, reject);
+  });
+};
+
 export default firebase;

src/redux/user/user.actions.js

@@ -27,5 +27,23 @@ export const signInFailure = (error) => ({
   payload : error
 })
 
+export const signOutFailure = (error) =>({
+  type : UserActionTypes.SIGN_OUT_FAILURE,
+  payload : error
+})
+
+export const signOutSuccess = (error) =>({
+  type : UserActionTypes.SIGN_OUT_SUCCESS,
+  payload : error
+})
+
+export const checkUserSession = () => ({
+  type : UserActionTypes.CHECK_USER_SESSION
+})
+
+export const signOutStart = () =>({
+  type : UserActionTypes.SIGN_OUT_START
+})
+
 
 

src/redux/user/user.reducer.js

@@ -24,6 +24,19 @@ const userReducer = (state = INITIAL_STATE, action) => {
 
       }
 
+      case UserActionTypes.SIGN_OUT_SUCCESS : 
+      return{
+        ...state,
+        currentUser : null,
+        error : null
+      }
+
+      case UserActionTypes.SIGN_IN_FAILURE :
+        return{
+          ...state,
+          error : action.payload
+        }
+
 
     default:
       return state;

src/redux/user/user.sagas.js

@@ -1,9 +1,9 @@
 import {takeLatest, put, all, call} from "redux-saga/effects";
 import UserActionTypes from "./user.types";
-import {signInSuccess,signInFailure} from "./user.actions";
-import {auth, googleProvider, createUserProfileDocument} from "../../firebase/firebase.utils";
+import {signInSuccess,signInFailure, signOutFailure, signOutSuccess} from "./user.actions";
+import {auth, googleProvider, createUserProfileDocument,getCurrentUser} from "../../firebase/firebase.utils";
 
-export function* getSnapShotFromUserAuth(userAuth){
+export function* getSnapshotFromUserAuth(userAuth){
     console.log("Me esta llegando : ",userAuth);
 
     try{
@@ -20,24 +20,39 @@ export function* getSnapShotFromUserAuth(userAuth){
 
 }
 
-export function* signInWithGoogle(){
+export function* isUserAthenticated(){
     try{
-        const {user} = yield (auth.signInWithPopup(googleProvider));
-        yield getSnapShotFromUserAuth(user);
-       
+        const userAuth = yield getCurrentUser();
+        if(!userAuth) return; 
+        yield getSnapshotFromUserAuth(userAuth);
+
 
     }
     catch(error){
         yield put(signInFailure(error))
-    }
-  
+    } 
+
+}
+
+export function* onCheckUserSession(){
+    yield takeLatest(UserActionTypes.CHECK_USER_SESSION,isUserAthenticated)
+
+}
+
+export function* signInWithGoogle(){
+    try {
+        const { user } = yield auth.signInWithPopup(googleProvider);
+        yield getSnapshotFromUserAuth(user);
+      } catch (error) {
+        yield put(signInFailure(error));
+      }
 
 }
 
 export function* signInWithEmail({payload : {email,password}}){
     try{
-        const {user} = yield auth.signInWithEmailAndPassword(email,password);
-        yield getSnapShotFromUserAuth(user);
+        const {user} =  auth.signInWithEmailAndPassword(email,password);
+        yield getSnapshotFromUserAuth(user);
 
 
     }
@@ -48,6 +63,24 @@ export function* signInWithEmail({payload : {email,password}}){
     }
 }
 
+export function* signOut(){
+    console.log("Estoy viendo como estoy...");
+    try{
+        
+        yield auth.signOut();
+        console.log("por ahora voy bien");
+        yield put(signOutSuccess());
+
+    }
+    catch(error){
+        yield put(signOutFailure(error))
+    }
+}
+
+export function* onSignOutStart(){
+    yield takeLatest(UserActionTypes.SIGN_OUT_START,signOut)
+}
+
 export function* onGoogleSignInStart(){
     yield takeLatest(UserActionTypes.GOOGLE_SIGN_IN_START,signInWithGoogle)
 }
@@ -58,6 +91,6 @@ export function* onEmailSignInStart(){
 
 export function* userSagas() {
     yield all([
-      call(onGoogleSignInStart),call(onEmailSignInStart)
+      call(onGoogleSignInStart),call(onCheckUserSession),call(onSignOutStart)
     ]);
   }

src/redux/user/user.types.js

@@ -4,6 +4,10 @@ const UserActionTypes = {
   SIGN_IN_SUCCESS : 'SIGN_IN_SUCCESS',
   SIGN_IN_FAILURE : 'SIGN_IN_FAILURE',
   EMAIL_SIGN_IN_START : 'EMAIL_SIGN_IN_START',
+  CHECK_USER_SESSION : 'CHECK_USER_SESSION',
+  SIGN_OUT_FAILURE : 'SIGN_OUT_FAILURE',
+  SIGN_OUT_SUCCESS : 'SIGN_OUT_SUCCESS',
+  SIGN_OUT_START : 'SIGN_OUT_START'
 
 };