From 7084f9092e6a5f48935a09bb73f1e74b82b092ac Mon Sep 17 00:00:00 2001
From: samilabud <samilabud@gmail.com>
Date: Tue, 6 Jul 2021 17:06:24 -0400
Subject: [PATCH] updated our application App component, signin and signup to
 use hooks

---
 src/App.js                                    |  56 ++++-----
 src/components/sign-in/sign-in.component.jsx  |  78 ++++++------
 src/components/sign-up/sign-up.component.jsx  | 116 +++++++++---------
 src/pages/collection/collection.component.jsx |   1 +
 src/pages/shop/shop.component.jsx             |  13 +-
 5 files changed, 119 insertions(+), 145 deletions(-)

diff --git a/src/App.js b/src/App.js
index 649e8bb..5e3528b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect  } from 'react';
 
 import { Route,Switch, Redirect } from 'react-router-dom';
 import {connect} from 'react-redux';
@@ -16,38 +16,30 @@ import SignInAndSignUp from './pages/signin-and-singup/signin-and-singup.compone
 import { selectCurrentUser } from './redux/user/user.selectors';
 import { checkUserSession } from './redux/user/user.actions';
 
-class App extends React.Component {
-  unsubscribeFromAuth = null;
-  componentWillUnmount(){
-    //this.unsubscribeFromAuth();
-  }
-  
-  componentDidMount(){
-   const {checkUserSession } = this.props;
+const App=({checkUserSession,currentUser})=>{
+  useEffect(()=>{
    checkUserSession();
-  }
-
-  render() {
-    return(
-        <div>
-        <Header/>
-        <Switch>
-          <Route exact path="/" component={HomePage} />
-          <Route path="/shop" component={ShopPage} />
-          <Route exact path="/checkout" component={CheckoutPage} />
-          <Route exact path="/signin" 
-            render={()=>
-                    this.props.currentUser?(
-                      <Redirect to='/' />
-                    ):(
-                      <SignInAndSignUp/>
-                    )
-                  } 
-          />
-        </Switch>
-        </div>
-      );
-  }
+  },[checkUserSession])
+
+  return(
+      <div>
+      <Header/>
+      <Switch>
+        <Route exact path="/" component={HomePage} />
+        <Route path="/shop" component={ShopPage} />
+        <Route exact path="/checkout" component={CheckoutPage} />
+        <Route exact path="/signin" 
+          render={()=>
+                  currentUser?(
+                    <Redirect to='/' />
+                  ):(
+                    <SignInAndSignUp/>
+                  )
+                } 
+        />
+      </Switch>
+      </div>
+    );
 }
 const mapStateToProps = createStructuredSelector ({
   currentUser: selectCurrentUser
diff --git a/src/components/sign-in/sign-in.component.jsx b/src/components/sign-in/sign-in.component.jsx
index cd7d186..7da0cf3 100644
--- a/src/components/sign-in/sign-in.component.jsx
+++ b/src/components/sign-in/sign-in.component.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {connect} from 'react-redux';
 import FormInput from '../form-input/form-input.component';
 import CustomButton from '../custom-button/custom-button.component';
@@ -6,55 +6,47 @@ import { emailSignInStart, googleSignInStart } from '../../redux/user/user.actio
 
 import './sign-in.styles.scss';
 
-class SignIn extends React.Component {
+const SignIn = ({emailSignInStart, googleSignInStart}) =>{
+   const [userCredentials, setCredentials] = useState({email:'',password:''});
+   
+   const {email, password} = userCredentials;
 
-    constructor(props){
-        super(props);
-        this.state = {
-            email: '',
-            password: ''
-        }
-    }
-
-    handleSubmit = event => {
+   const handleSubmit = event => {
         event.preventDefault();
-        const { emailSignInStart } = this.props;
-        const {email, password} = this.state;
+        const {email, password} = userCredentials;
         emailSignInStart(email, password);
 
     }
-    handleOnChange = event => {
+    const handleOnChange = event => {
         const { value, name} = event.target;
-        this.setState({ [name]:value})
-    }
-    render(){
-        const { googleSignInStart } = this.props;
-        return (
-            <div className='sign-in'>
-                <h2>Actualmente tengo una cuenta</h2>
-                <span>Inicia sesión con tu correo y contraseña</span>
-                <form onSubmit={this.handleSubmit}>
-                    <FormInput name="email" type="email" 
-                        value={this.state.email} 
-                        handleChange={this.handleOnChange}
-                        label="Correo"
-                        required />
-                    <label>   </label>
-                    <FormInput name="password" type="password" 
-                        value={this.state.password} 
-                        handleChange={this.handleOnChange} 
-                        label="Contraseña"
-                        required />
-                    <div className='buttons'>
-                        <CustomButton type='submit'>Iniciar Sesión</CustomButton>
-                        <CustomButton type='button' onClick={googleSignInStart} isGoogleSignIn>Entrar con Google</CustomButton>  
-                    </div>
-                    
-                </form>
-            </div>
-            
-        );
+        setCredentials({...userCredentials,[name]:value})
+
     }
+    return (
+        <div className='sign-in'>
+            <h2>Actualmente tengo una cuenta</h2>
+            <span>Inicia sesión con tu correo y contraseña</span>
+            <form onSubmit={handleSubmit}>
+                <FormInput name="email" type="email" 
+                    value={email} 
+                    handleChange={handleOnChange}
+                    label="Correo"
+                    required />
+                <label>   </label>
+                <FormInput name="password" type="password" 
+                    value={password} 
+                    handleChange={handleOnChange} 
+                    label="Contraseña"
+                    required />
+                <div className='buttons'>
+                    <CustomButton type='submit'>Iniciar Sesión</CustomButton>
+                    <CustomButton type='button' onClick={googleSignInStart} isGoogleSignIn>Entrar con Google</CustomButton>  
+                </div>
+                
+            </form>
+        </div>
+        
+    );
 }
 const mapDispatchProps = dispatch => ({
     googleSignInStart: () => dispatch(googleSignInStart()),
diff --git a/src/components/sign-up/sign-up.component.jsx b/src/components/sign-up/sign-up.component.jsx
index 4a18bc2..610d2cf 100644
--- a/src/components/sign-up/sign-up.component.jsx
+++ b/src/components/sign-up/sign-up.component.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {connect} from 'react-redux';
 import FormInput from '../form-input/form-input.component';
 import CustomButton from '../custom-button/custom-button.component';
@@ -6,20 +6,17 @@ import { signupStart } from '../../redux/user/user.actions';
 
 import './sign-up.styles.scss';
 
-class SignUp extends React.Component {
-    constructor(){
-        super();
-        this.state = {
-            displayName: '',
-            email: '',
-            password: '',
-            confirmPassword: ''
-        };
-    }
-    handleSubmit = async event => {
-        const {signupStart} = this.props;
+const SignUp = ({signupStart}) => {
+    const [userData, setUserData] = useState({displayName:'',email:'',password:'',confirmPassword:''})
+            // displayName: '',
+            // email: '',
+            // password: '',
+            // confirmPassword: ''
+    const {displayName, email, password, confirmPassword} = userData;
+
+    const handleSubmit = async event => {
         event.preventDefault();
-        const { displayName, email, password, confirmPassword } = this.state;
+        const { displayName, email, password, confirmPassword } = userData;
         
         if(password !== confirmPassword){
             alert("La contraseña no coincide con la confirmación.");
@@ -33,57 +30,54 @@ class SignUp extends React.Component {
         }        
     }
 
-    handleChange = event => {
-        
+    const handleChange = event => {
         const {name, value} = event.target;
-        this.setState({[name]:value});
+        setUserData({...userData,[name]:value})
     }
 
-    render(){
-        const { displayName, email, password, confirmPassword } = this.state;
-        return(
-            <div className='sign-up'>
-                <h2 className='title'>No tengo una cuenta</h2>
-                <span>Registrate con tu correo electronico y contraseña</span>
-                <form className='sign-up-form' onSubmit={this.handleSubmit}>
-                    <FormInput 
-                        type='text'
-                        name='displayName'
-                        value={displayName}
-                        handleChange={this.handleChange} 
-                        label="Nombre"
-                        required
-                    />
-                    <FormInput 
-                        type='text'
-                        name="email"
-                        value={email}
-                        handleChange={this.handleChange} 
-                        label="Correo Electrónico"
-                        required
-                    />
-                    <FormInput 
-                        type='password'
-                        name='password'
-                        value={password}
-                        handleChange={this.handleChange} 
-                        label="Contraseña"
-                        required
-                    />
-                    <FormInput 
-                        type='password'
-                        name='confirmPassword'
-                        value={confirmPassword}
-                        handleChange={this.handleChange} 
-                        label="Confirmar Contraseña"
-                        required
-                    />
 
-                    <CustomButton type="submit">Registrarse</CustomButton>
-                </form>
-            </div>
-        )
-    }
+    return(
+        <div className='sign-up'>
+            <h2 className='title'>No tengo una cuenta</h2>
+            <span>Registrate con tu correo electronico y contraseña</span>
+            <form className='sign-up-form' onSubmit={handleSubmit}>
+                <FormInput 
+                    type='text'
+                    name='displayName'
+                    value={displayName}
+                    handleChange={handleChange} 
+                    label="Nombre"
+                    required
+                />
+                <FormInput 
+                    type='text'
+                    name="email"
+                    value={email}
+                    handleChange={handleChange} 
+                    label="Correo Electrónico"
+                    required
+                />
+                <FormInput 
+                    type='password'
+                    name='password'
+                    value={password}
+                    handleChange={handleChange} 
+                    label="Contraseña"
+                    required
+                />
+                <FormInput 
+                    type='password'
+                    name='confirmPassword'
+                    value={confirmPassword}
+                    handleChange={handleChange} 
+                    label="Confirmar Contraseña"
+                    required
+                />
+
+                <CustomButton type="submit">Registrarse</CustomButton>
+            </form>
+        </div>
+    )
 }
 const mapDispatchToProps = dispatch => ({
     signupStart: (displayName, email, password) => dispatch (signupStart({displayName,email,password}))
diff --git a/src/pages/collection/collection.component.jsx b/src/pages/collection/collection.component.jsx
index 20b9c79..a5e7438 100644
--- a/src/pages/collection/collection.component.jsx
+++ b/src/pages/collection/collection.component.jsx
@@ -9,6 +9,7 @@ import { selectShopCollection } from '../../redux/shop/shop.selector';
 import './collection.styles.scss';
 
 const CollectionPage = ({ collection }) => {
+
     const {title, items} = collection;
     return (
         <div className='collection-page'>
diff --git a/src/pages/shop/shop.component.jsx b/src/pages/shop/shop.component.jsx
index cb66258..6a3c7ed 100644
--- a/src/pages/shop/shop.component.jsx
+++ b/src/pages/shop/shop.component.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import { Route } from 'react-router-dom';
 import {connect} from 'react-redux';
 
@@ -9,14 +9,10 @@ import CollectionPageContainer from '../collection/collection.conatiner';
 import { fetchCollectionsStart } from '../../redux/shop/shop.actions';
 
 
-class ShopPage extends React.Component {
-    componentDidMount() {
-        const {fetchCollectionsStart} = this.props;
+const ShopPage = ({fetchCollectionsStart, match}) => {
+    useEffect(()=>{
         fetchCollectionsStart();
-    }
-
-    render() {
-    const { match } = this.props;
+    },[fetchCollectionsStart])
 
     return(<div className='shop-page'>
         <Route exact path={`${match.path}`} component={CollectionOverviewContainer} />
@@ -24,7 +20,6 @@ class ShopPage extends React.Component {
             
         </div>
         );
-    }
 }