Adding signup and firebase integration

src/App.js

@@ -4,7 +4,7 @@ import Header from './components/header/header.component';
 import { Route,Switch } from 'react-router-dom';
 import ShopPage from './pages/shop/shop.component';
 import SignInAndSingUp from './pages/signin-and-singup/signin-and-singup.component';
-import { auth } from './fireabase/firebase.utils';
+import { auth,createUserProfileDocument } from './fireabase/firebase.utils';
 import './App.css';
 
 
@@ -21,8 +21,25 @@ class App extends React.Component {
   }
 
   componentDidMount(){
-    this.unsubscribeFromAuth = auth.onAuthStateChanged(user=>{
-      this.setState({currentUser:user});
+    this.unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth=>{
+      //this.setState({currentUser:user});
+      if(userAuth){
+        const userRef = await createUserProfileDocument(userAuth);
+
+        userRef.onSnapshot(snapShot=>{
+          this.setState({
+            currentUser:{
+              id: snapShot.id,
+              ...snapShot.data()
+            }
+          }, ()=>{
+            console.log(this.state);
+          });
+        });
+      }else{
+        this.setState({currentUser: userAuth});
+      }
+
     })
   }
 

src/components/form-input/form-input.component.jsx

@@ -4,7 +4,7 @@ import './form-input.styles.scss';
 
 const FormInput = ({handleChange, label, ...otherProps}) => (
     <div className='group'>
-        <input className='form-input' onChange={handleChange} />
+        <input className='form-input' onChange={handleChange} {...otherProps}/>
         {
             label ? 
             <label className={`${otherProps.value.lenght ? 'shrink':''} form-input-label`}> {label} </label>

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

@@ -44,7 +44,7 @@ class SignIn extends React.Component {
                         required />
                     <div className='buttons'>
                         <CustomButton type='submit'>Iniciar Sesión</CustomButton>
-                        <CustomButton onClick={signInWithGoogle} isGoogleSignIn>Iniciar Sesión Con Google</CustomButton>  
+                        <CustomButton onClick={signInWithGoogle} isGoogleSignIn>Entrar con Google</CustomButton>  
                     </div>
 
                 </form>

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

@@ -0,0 +1,95 @@
+import React from 'react';
+
+import FormInput from '../form-input/form-input.component';
+import CustomButton from '../custom-button/custom-button.component';
+
+import {auth, createUserProfileDocument } from '../../fireabase/firebase.utils';
+
+import './sign-up.styles.scss';
+
+class SignUp extends React.Component {
+    constructor(){
+        super();
+        this.state = {
+            displayName: '',
+            email: '',
+            password: '',
+            confirmPassword: ''
+        };
+    }
+    handleSubmit = async event => {
+        event.preventDefault();
+        const { displayName, email, password, confirmPassword } = this.state;
+
+        if(password !== confirmPassword){
+            alert("La contraseña no coincide con la confirmación.");
+            return;
+        }
+        try{
+
+            const {user} = await auth.createUserWithEmailAndPassword(email, password);
+            await createUserProfileDocument(user, {displayName});
+            this.setState({
+                displayName: '',
+                email: '',
+                password: '',
+                confirmPassword: ''
+            })
+        }catch(error){
+            console.log(error);
+        }        
+    }
+
+    handleChange = event => {
+
+        const {name, value} = event.target;
+        this.setState({[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>
+        )
+    }
+}   
+export default SignUp;

src/components/sign-up/sign-up.styles.scss

@@ -0,0 +1,9 @@
+.sign-up {
+  display: flex;
+  flex-direction: column;
+  width: 380px;
+
+  .title {
+    margin: 10px 0;
+  }
+}

src/fireabase/firebase.utils.js

@@ -11,9 +11,35 @@ const config = {
     messagingSenderId: "745149943574",
     appId: "1:745149943574:web:5e4d9e56554d82c35f8a37"
   };
-
+  
   firebase.initializeApp(config);
 
+  export const createUserProfileDocument = async (userAuth, additionalData) => {
+      if(!userAuth) {
+          //console.log(userAuth, "Sin valor");
+          return;
+      }
+        const userReft = firestore.doc(`users/${userAuth.uid}`);
+        const userSnapShot = await userReft.get();
+        console.log(userSnapShot);
+        if(!userSnapShot){
+            const {displayName, email} = userAuth;
+            const createdAt = new Date();
+            try{
+                await userReft.set({
+                    displayName,
+                    email,
+                    createdAt,
+                    ...additionalData
+                })
+
+            }catch(ex){
+                console.log("error",ex.message);
+            }
+        }
+    return userReft;
+  }
+
   export const auth = firebase.auth();
   export const firestore = firebase.firestore();
 

src/pages/signin-and-singup/sign-in-and-sign-up.styles.scss

@@ -0,0 +1,6 @@
+.sign-in-and-sign-up {
+  width: 850px;
+  display: flex;
+  justify-content: space-between;
+  margin: 30px auto;
+}

src/pages/signin-and-singup/signin-and-singup.component.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import SignIn from '../../components/sign-in/sign-in.component';
+import SignUp from '../../components/sign-up/sign-up.component';
 
-import './signin-and-singup.styles.scss';
+import './sign-in-and-sign-up.styles.scss';
 
 const SignInAndSignUp = () => (
     <div className='sign-in-and-sign-up '>
      <SignIn />
+     <SignUp />
     </div>
 )