sign components refactored, now using hooks...

Author: ajavieralejandro

src/App.js

@@ -32,7 +32,7 @@ class App extends React.Component {
   }
 
   componentWillUnmount() {
-    this.unsubscribeFromAuth();
+    //this.unsubscribeFromAuth();
   }
 
   handleRedirect = () => {

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

@@ -1,70 +1,53 @@
-import React from "react";
+import React,{useState} from "react";
 import FormInput from "../form-input/form-input.component";
 import CustomButton from "../custom-button/custom-button.component";
-import {googleSignInStart,emailSignInStart,proob} from "../../redux/user/user.actions";
+import {googleSignInStart,emailSignInStart} from "../../redux/user/user.actions";
 import { connect } from "react-redux";
 import "./sign-in.styles.scss";
 
-class SignIn extends React.Component {
+const SignIn = ({googleSignInStart,emailSignInStart}) => {
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      email: "",
-      password: ""
-    };
-  }
+  const [userCredentials, setUserCredentials] = useState({email:'',password:''});
+  const {email,password} = userCredentials;
 
-  handleChange = event => {
+  const handleChange = event => {
     //extraigo el valor y el nombr
     const { value, name } = event.target;
-    this.setState({ [name]: value });
+    setUserCredentials({...userCredentials, [name]: value });
 
   };
 
-  handleSubmit = async event => {
+  const handleSubmit = async event => {
     event.preventDefault();
-    const { email, password } = this.state;
-    const {emailSignInStart} = this.props;
+    const { email, password } = userCredentials;
     emailSignInStart(email,password);
-    /*try {
-      await auth.signInWithEmailAndPassword(email, password);
-      //Limpio la cache del estado actual
-      this.setState({
-        email: "",
-        password: ""
-      });
-    } catch (error) {
-      console.log(error);
-    }*/
+    
   };
 
+  
 
 
-  render() {
-    const {googleSignInStart} = this.props;
-
     return (
       <div className="sign-in">
         <h2>I already have an account</h2>
         <span>Sign in with your email and password</span>
 
-        <form onSubmit={this.handleSubmit}>
+        <form onSubmit={handleSubmit}>
           <FormInput
-            handleChange={this.handleChange}
+            handleChange={handleChange}
             name="email"
             label="email"
             type="email"
-            value={this.state.email}
+            value={email}
             required
           />
 
           <FormInput
-            handleChange={this.handleChange}
+            handleChange={handleChange}
             label="password"
             name="password"
             type="password"
-            value={this.state.password}
+            value={password}
             required
           />
           <div className="buttons">
@@ -77,7 +60,7 @@ class SignIn extends React.Component {
       </div>
     );
   }
-}
+
 
 const mapDispatchToProps = dispatch => ({
   googleSignInStart: () => dispatch(googleSignInStart()),

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

@@ -1,70 +1,46 @@
-import React from "react";
+import React,{useState} 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() {
-    super();
-    this.state = {
-      displayName: "",
-      email: "",
-      password: "",
-      confirmPassword: ""
-    };
-  }
+const SignUp = ({signUpStart}) => {
+  const [userCredentials, setUserCredentials] = useState({
+    displayName: "",
+    email: "",
+    password: "",
+    confirmPassword: ""
+  });
+  const {  displayName,email,password, confirmPassword } = userCredentials;
+
 
-  handleSubmit = async event => {
+  const handleSubmit = async event => {
 
     event.preventDefault();
-    const { displayName, email, password, confirmPassword } = this.state;
-    const user = {displayName,email,password,confirmPassword};
-    const {signUpStart} = this.props;
     if (password !== confirmPassword) {
       alert("passwords don't match");
       return;
     }
-    signUpStart(user);
+    signUpStart(userCredentials);
 
-    /*
-
-    try {
-      const { user } = await auth.createUserWithEmailAndPassword(
-        email,
-        password
-      );
-      //vuelvo a los valores por defecto, no estoy muy seguro para que es esto...
-      this.setState({
-        displayName: "",
-        email: "",
-        password: "",
-        confirmPassword: ""
-      });
-    } catch (error) {
-      console.log(error);
-    }
-    */
   };
 
-  handleChange = event => {
+  const handleChange = event => {
     const { name, value } = event.target;
-    this.setState({ [name]: value });
+    setUserCredentials({...userCredentials, [name]: value });
   };
 
-  render() {
-    const { displayName, email, password, confirmPassword } = this.state;
-    return (
+  return(
       <div className="sign-up">
         <h2 className="title">I do not have an account</h2>
         <span>Sign up with your email and password</span>
-        <form onSubmit={this.handleSubmit}>
+        <form onSubmit={handleSubmit}>
           <FormInput
             type="text"
             name="displayName"
             value={displayName}
-            onChange={this.handleChange}
+            onChange={handleChange}
             label="Display Name"
             required
           />
@@ -73,7 +49,7 @@ class SignUp extends React.Component {
             type="email"
             name="email"
             value={email}
-            onChange={this.handleChange}
+            onChange={handleChange}
             label="Email"
             required
           />
@@ -82,7 +58,7 @@ class SignUp extends React.Component {
             type="password"
             name="password"
             value={password}
-            onChange={this.handleChange}
+            onChange={handleChange}
             label="Password"
             required
           />
@@ -91,7 +67,7 @@ class SignUp extends React.Component {
             type="password"
             name="confirmPassword"
             value={confirmPassword}
-            onChange={this.handleChange}
+            onChange={handleChange}
             label="Confirm Password"
             required
           />
@@ -101,7 +77,7 @@ class SignUp extends React.Component {
       </div>
     );
   }
-}
+
 
 const mapDispatchToProps = dispatch =>({
   signUpStart : user => dispatch(signUpStart(user)),

src/redux/user/user.sagas.js

@@ -4,14 +4,14 @@ import {signInSuccess,signInFailure, signOutFailure, signOutSuccess, signUpSucce
 import {auth, googleProvider, createUserProfileDocument,getCurrentUser} from "../../firebase/firebase.utils";
 
 export function* getSnapshotFromUserAuth(userAuth){
-    console.log("Me esta llegando : ",userAuth);
-
+ 
     try{
+        yield console.log("voy a llamar al metodo con :",userAuth);
         const userRef = yield call(createUserProfileDocument,userAuth);
+        yield console.log("Aparentemente todo salio como esperamos...");
         const userSnapshot = yield userRef.get();
+        console.log("Ahora todo se desmadra");
         yield put(signInSuccess({id : userSnapshot.id,...userSnapshot.data}));
-
-
     }
     catch(error){
         yield put(signInFailure(error))
@@ -51,12 +51,14 @@ export function* signInWithGoogle(){
 
 export function* signInWithEmail({payload : {email,password}}){
     try{
-        const {user} =  auth.signInWithEmailAndPassword(email,password);
+        const {user} = yield  auth.signInWithEmailAndPassword(email,password);
+        console.log("I am an error");
         yield getSnapshotFromUserAuth(user);
 
 
     }
     catch(error){
+        console.log("NO VEN QUE ESTOY ATAJANDO EL ERROR !!!");
         yield put(signInFailure(error))
 
 
@@ -104,7 +106,10 @@ export function* onGoogleSignInStart(){
 }
 
 export function* onEmailSignInStart(){
-    yield takeLatest(UserActionTypes.EMAIL_SIGN_IN_START,signInWithEmail)
+    try{
+        yield takeLatest(UserActionTypes.EMAIL_SIGN_IN_START,signInWithEmail)
+    }
+    catch(error){console.log(error)}
 }
 
 export function* onSingUpStart(){