sign up into sagas pattern

Author: ajavieralejandro

src/components/sign-in/sign-in.component.jsx

@@ -1,8 +1,8 @@
 import React from "react";
 import FormInput from "../form-input/form-input.component";
 import CustomButton from "../custom-button/custom-button.component";
-import {googleSignInStart,emailSignInStart} from "../../redux/user/user.actions";
-import {connect} from 'react-redux'
+import {googleSignInStart,emailSignInStart,proob} from "../../redux/user/user.actions";
+import { connect } from "react-redux";
 import "./sign-in.styles.scss";
 
 class SignIn extends React.Component {
@@ -19,6 +19,7 @@ class SignIn extends React.Component {
     //extraigo el valor y el nombr
     const { value, name } = event.target;
     this.setState({ [name]: value });
+    
   };
 
   handleSubmit = async event => {

src/components/sing-up/sign-up.component.jsx

@@ -2,6 +2,8 @@ import React from "react";
 import FormInput from "../form-input/form-input.component";
 import CustomButton from "../custom-button/custom-button.component";
 import { auth, createUserProfileDocument } from "../../firebase/firebase.utils";
+import {signUpStart,proob, checkUserSession} from '../../redux/user/user.actions';
+import {connect} from 'react-redux';
 
 class SignUp extends React.Component {
   constructor() {
@@ -15,9 +17,14 @@ class SignUp extends React.Component {
   }
 
   handleSubmit = async event => {
-    console.log("ESTOY AQUII ESPERANDOTE");
+    
     event.preventDefault();
     const { displayName, email, password, confirmPassword } = this.state;
+    const user = {displayName,email,password,confirmPassword};
+    const {signUpStart} = this.props;
+    signUpStart(user);
+    
+    /*
     if (password !== confirmPassword) {
       alert("passwords don't match");
       return;
@@ -39,6 +46,7 @@ class SignUp extends React.Component {
     } catch (error) {
       console.log(error);
     }
+    */
   };
 
   handleChange = event => {
@@ -96,4 +104,10 @@ class SignUp extends React.Component {
   }
 }
 
-export default SignUp;
+const mapDispatchToProps = dispatch =>({
+  signUpStart : user => dispatch(signUpStart(user)),
+  checkUserSession : () => dispatch(checkUserSession())
+  
+})
+
+export default connect(null,mapDispatchToProps) (SignUp);

src/redux/cart/cart.actions.js

@@ -18,3 +18,7 @@ export const deleteItem = item => ({
   type: CartActionTypes.DELETE_ITEM,
   payload: item
 });
+
+export const clearCart = () => ({
+  type : CartActionTypes.CLEAR_CART
+})

src/redux/cart/cart.reducer.js

@@ -36,6 +36,13 @@ const cartReducer = (state = INITIAL_STATE, action) => {
         cartItems: removeItemToCart(state.cartItems, action.payload)
       };
 
+      case CartActionTypes.CLEAR_CART : 
+      return {
+        ...state,
+        cartItems : [],
+        cartHidden : true
+      }
+
     default:
       return state;
   }

src/redux/cart/cart.sagas.js

@@ -0,0 +1,17 @@
+import {all, call,takeLatest, put} from 'redux-saga/effects';
+import UserActionTypes from '../user/user.types';
+import {clearCart} from './cart.actions';
+
+
+export function* clearCartOnSignOut(){
+    yield put(clearCart());
+}
+
+export function* onSignOutSuccess(){
+    yield takeLatest(UserActionTypes.SIGN_OUT_SUCCESS,clearCartOnSignOut);
+}
+
+
+export function* cartSagas() {
+    yield(all([call(onSignOutSuccess)]));
+}

src/redux/cart/cart.types.js

@@ -2,6 +2,7 @@ const CartActionTypes = {
   TOGGLE_CART_HIDDEN: "TOGGLE_CART_HIDDEN",
   ADD_ITEM: "ADD_ITEM",
   DELETE_ITEM: "DELETE_ITEM",
-  REMOVE_ITEM: "REMOVE_ITEM"
+  REMOVE_ITEM: "REMOVE_ITEM",
+  CLEAR_CART : 'CLEAR_CART'
 };
 export default CartActionTypes;

src/redux/root-saga.js

@@ -1,7 +1,9 @@
 import {all, call} from 'redux-saga/effects';
-import {fetchCollectionsStart} from './shop/shop.sagas';
+import { shopSagas} from './shop/shop.sagas';
 import {userSagas} from "./user/user.sagas";
+import {cartSagas} from "./cart/cart.sagas";
+
 //Aplica todas las sagas al middleware
 export default function* rootSaga(){
-    yield all([call(fetchCollectionsStart),call(userSagas)]);
+    yield all([call(shopSagas),call(userSagas),call(cartSagas)]);
 }

src/redux/shop/shop.actions.js

@@ -1,5 +1,4 @@
 import { ShopActionTypes } from './shop.types';
-import { firestore, convertCollectionsSnapshotToMap } from '../../firebase/firebase.utils';
 
 export const fetchCollectionsStart = ()=> {
     return {

src/redux/shop/shop.sagas.js

@@ -1,4 +1,4 @@
-import {takeLatest,call,put} from 'redux-saga/effects';
+import {takeLatest,call,put,all} from 'redux-saga/effects';
 import {firestore,convertCollectionsSnapshotToMap} from '../../firebase/firebase.utils';
 
 import ShopActionTypes from  "./shop.types";
@@ -33,3 +33,7 @@ export function* fetchCollectionsStart(){
         fetchCollecionsAsync);
 
 }
+
+export function* shopSagas() {
+    yield all([call(fetchCollectionsStart)]);
+}

src/redux/user/user.actions.js

@@ -12,13 +12,15 @@ export const emailSignInStart = (emailAndPassword) => ({
   payload : emailAndPassword
 })
 
+
+
 export const signInSuccess = (user) => {
-  console.log("todo marcha bien");
+  //console.log("todo marcha bien");
   const toR = {
   type : UserActionTypes.SIGN_IN_SUCCESS,
   payload : user,
   }
-  console.log("despacho : ",toR);
+  //console.log("despacho : ",toR);
   return toR;
 }
 
@@ -45,5 +47,21 @@ export const signOutStart = () =>({
   type : UserActionTypes.SIGN_OUT_START
 })
 
+export const signUpStart = (user) =>({
+  type : UserActionTypes.SIGNUP_START,
+  payload : user
+})
+
+export const signUpFailure = (error) => ({
+  type : UserActionTypes.SIGN_UP_FAILURE,
+  payload : error
+})
+
+export const signUpSuccess = (user)=>({
+  type : UserActionTypes.SIGN_IN_SUCCESS,
+  payload : user
+})
+
+