From 20523f2f5f77c2e69552c9de3ad904925b64c324 Mon Sep 17 00:00:00 2001
From: samilabud <samilabud@gmail.com>
Date: Sun, 22 Nov 2020 23:08:38 -0400
Subject: [PATCH] Adding signup and firebase integration

---
 src/App.js                                    | 23 ++++-
 .../form-input/form-input.component.jsx       |  2 +-
 src/components/sign-in/sign-in.component.jsx  |  2 +-
 src/components/sign-up/sign-up.component.jsx  | 95 +++++++++++++++++++
 src/components/sign-up/sign-up.styles.scss    |  9 ++
 src/fireabase/firebase.utils.js               | 28 +++++-
 .../sign-in-and-sign-up.styles.scss           |  6 ++
 .../signin-and-singup.component.jsx           |  4 +-
 .../signin-and-singup.styles.scss             |  0
 9 files changed, 162 insertions(+), 7 deletions(-)
 create mode 100644 src/components/sign-up/sign-up.component.jsx
 create mode 100644 src/components/sign-up/sign-up.styles.scss
 create mode 100644 src/pages/signin-and-singup/sign-in-and-sign-up.styles.scss
 delete mode 100644 src/pages/signin-and-singup/signin-and-singup.styles.scss

diff --git a/src/App.js b/src/App.js
index 95e9dbb..c5d1eb5 100644
--- a/src/App.js
+++ b/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});
+      }
+      
     })
   }
 
diff --git a/src/components/form-input/form-input.component.jsx b/src/components/form-input/form-input.component.jsx
index b2dc64e..3b33069 100644
--- a/src/components/form-input/form-input.component.jsx
+++ b/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>
diff --git a/src/components/sign-in/sign-in.component.jsx b/src/components/sign-in/sign-in.component.jsx
index 1daa426..fd9fb92 100644
--- a/src/components/sign-in/sign-in.component.jsx
+++ b/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>
diff --git a/src/components/sign-up/sign-up.component.jsx b/src/components/sign-up/sign-up.component.jsx
new file mode 100644
index 0000000..79443c6
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/components/sign-up/sign-up.styles.scss b/src/components/sign-up/sign-up.styles.scss
new file mode 100644
index 0000000..a4c3405
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/fireabase/firebase.utils.js b/src/fireabase/firebase.utils.js
index 8d9c1ec..bec967e 100644
--- a/src/fireabase/firebase.utils.js
+++ b/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();
 
diff --git a/src/pages/signin-and-singup/sign-in-and-sign-up.styles.scss b/src/pages/signin-and-singup/sign-in-and-sign-up.styles.scss
new file mode 100644
index 0000000..ec53f39
--- /dev/null
+++ b/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;
+}
diff --git a/src/pages/signin-and-singup/signin-and-singup.component.jsx b/src/pages/signin-and-singup/signin-and-singup.component.jsx
index 9f31690..d8588b2 100644
--- a/src/pages/signin-and-singup/signin-and-singup.component.jsx
+++ b/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>
 )
 
diff --git a/src/pages/signin-and-singup/signin-and-singup.styles.scss b/src/pages/signin-and-singup/signin-and-singup.styles.scss
deleted file mode 100644
index e69de29..0000000