From 6c95da18f17ce6ee1ea1265f9aae10bf6d076db7 Mon Sep 17 00:00:00 2001 From: Andrey Kruglik Date: Sat, 6 Nov 2021 01:37:26 +0700 Subject: [PATCH] Updated code to modern Firebase v9 --- src/App.js | 52 ++++++------ src/components/sign-up/sign-up.component.jsx | 89 +++++++++----------- src/firebase/firebase.utils.js | 73 +++++++++------- 3 files changed, 109 insertions(+), 105 deletions(-) diff --git a/src/App.js b/src/App.js index 7018c5c..54c47ac 100644 --- a/src/App.js +++ b/src/App.js @@ -1,43 +1,41 @@ -import React from 'react'; -import { Switch, Route } from 'react-router-dom'; +import React, { Component } from "react"; +import { Switch, Route } from "react-router-dom"; -import './App.css'; +import HomePage from "./pages/homepage/homepage.component"; +import Shop from "./pages/shop/shop.component"; +import Header from "./components/header/header.component"; +import SignInAndSignUpPage from "./pages/sign-in-and-sign-up/sign-in-and-sign-up.component"; +import { userAuth, createUserProfileDocument } from "./firebase/firebase.utils"; -import HomePage from './pages/homepage/homepage.component'; -import ShopPage from './pages/shop/shop.component'; -import SignInAndSignUpPage from './pages/sign-in-and-sign-up/sign-in-and-sign-up.component'; -import Header from './components/header/header.component'; -import { auth, createUserProfileDocument } from './firebase/firebase.utils'; +import "./App.scss"; -class App extends React.Component { - constructor() { - super(); - - this.state = { - currentUser: null - }; - } +class App extends Component { + state = { + currentUser: null, + }; unsubscribeFromAuth = null; componentDidMount() { - this.unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth => { + this.unsubscribeFromAuth = userAuth.onAuthStateChanged(async (userAuth) => { if (userAuth) { - const userRef = await createUserProfileDocument(userAuth); + const { userRef, onSnapshot } = await createUserProfileDocument( + userAuth + ); - userRef.onSnapshot(snapShot => { + onSnapshot(userRef, (snapshot) => { this.setState({ currentUser: { - id: snapShot.id, - ...snapShot.data() - } + id: snapshot.id, + ...snapshot.data(), + }, }); console.log(this.state); }); + } else { + this.setState({ currentUser: userAuth }); } - - this.setState({ currentUser: userAuth }); }); } @@ -50,9 +48,9 @@ class App extends React.Component {
- - - + + +
); diff --git a/src/components/sign-up/sign-up.component.jsx b/src/components/sign-up/sign-up.component.jsx index 7e70f9a..e20e937 100644 --- a/src/components/sign-up/sign-up.component.jsx +++ b/src/components/sign-up/sign-up.component.jsx @@ -1,26 +1,24 @@ -import React from 'react'; +import React, { Component } from "react"; +import FormInput from "../form-input/form-input.component"; +import CustomButton from "../custom-button/custom-button.component"; +import { + userAuth, + createUserProfileDocument, + createAccount, +} from "../../firebase/firebase.utils"; -import FormInput from '../form-input/form-input.component'; -import CustomButton from '../custom-button/custom-button.component'; +import "./sign-up.styles.scss"; -import { auth, createUserProfileDocument } from '../../firebase/firebase.utils'; - -import './sign-up.styles.scss'; - -class SignUp extends React.Component { - constructor() { - super(); - - this.state = { - displayName: '', - email: '', - password: '', - confirmPassword: '' - }; - } +class SignUp extends Component { + state = { + displayName: "", + email: "", + password: "", + confirmPassword: "", + }; - handleSubmit = async event => { - event.preventDefault(); + handleSubmit = async (e) => { + e.preventDefault(); const { displayName, email, password, confirmPassword } = this.state; @@ -30,25 +28,22 @@ class SignUp extends React.Component { } try { - const { user } = await auth.createUserWithEmailAndPassword( - email, - password - ); + const { user } = await createAccount(userAuth, email, password); await createUserProfileDocument(user, { displayName }); this.setState({ - displayName: '', - email: '', - password: '', - confirmPassword: '' + displayName: "", + email: "", + password: "", + confirmPassword: "", }); - } catch (error) { - console.error(error); + } catch (err) { + console.error(err); } }; - handleChange = event => { + handleChange = (event) => { const { name, value } = event.target; this.setState({ [name]: value }); @@ -57,43 +52,43 @@ class SignUp extends React.Component { render() { const { displayName, email, password, confirmPassword } = this.state; return ( -
-

I do not have a account

+
+

I do not have an account

Sign up with your email and password -
+ - SIGN UP + SIGN UP
); diff --git a/src/firebase/firebase.utils.js b/src/firebase/firebase.utils.js index e53d012..2f8db57 100644 --- a/src/firebase/firebase.utils.js +++ b/src/firebase/firebase.utils.js @@ -1,49 +1,60 @@ -import firebase from 'firebase/app'; -import 'firebase/firestore'; -import 'firebase/auth'; +import { initializeApp } from "firebase/app"; +import { + getAuth, + signInWithPopup, + GoogleAuthProvider, + createUserWithEmailAndPassword, +} from "firebase/auth"; +//prettier-ignore +import { getFirestore, doc, getDoc, setDoc, onSnapshot } from "firebase/firestore"; const config = { - apiKey: 'AIzaSyCdHT-AYHXjF7wOrfAchX4PIm3cSj5tn14', - authDomain: 'crwn-db.firebaseapp.com', - databaseURL: 'https://crwn-db.firebaseio.com', - projectId: 'crwn-db', - storageBucket: 'crwn-db.appspot.com', - messagingSenderId: '850995411664', - appId: '1:850995411664:web:7ddc01d597846f65' + apiKey: "AIzaSyCdHT-AYHXjF7wOrfAchX4PIm3cSj5tn14", + authDomain: "crwn-db.firebaseapp.com", + databaseURL: "https://crwn-db.firebaseio.com", + projectId: "crwn-db", + storageBucket: "crwn-db.appspot.com", + messagingSenderId: "850995411664", + appId: "1:850995411664:web:7ddc01d597846f65", }; -firebase.initializeApp(config); +const app = initializeApp(config); +const db = getFirestore(app); + +export const userAuth = getAuth(app); +export const firestore = getFirestore(app); +export const createAccount = createUserWithEmailAndPassword; + +const provider = new GoogleAuthProvider(); +provider.setCustomParameters({ prompt: "select_account" }); + +export const signInWithGoogle = () => + signInWithPopup(userAuth, provider).catch((error) => console.log(error)); export const createUserProfileDocument = async (userAuth, additionalData) => { if (!userAuth) return; - const userRef = firestore.doc(`users/${userAuth.uid}`); - - const snapShot = await userRef.get(); + const userRef = doc(db, "users", `${userAuth.uid}`); + const snapShot = await getDoc(userRef); - if (!snapShot.exists) { + if (!snapShot.exists()) { const { displayName, email } = userAuth; - const createdAt = new Date(); + const createAt = new Date(); + try { - await userRef.set({ + await setDoc(userRef, { displayName, email, - createdAt, - ...additionalData + createAt, + ...additionalData, }); - } catch (error) { - console.log('error creating user', error.message); + } catch (err) { + console.log("error creating user", err.message); } } - return userRef; + return { + userRef, + onSnapshot, + }; }; - -export const auth = firebase.auth(); -export const firestore = firebase.firestore(); - -const provider = new firebase.auth.GoogleAuthProvider(); -provider.setCustomParameters({ prompt: 'select_account' }); -export const signInWithGoogle = () => auth.signInWithPopup(provider); - -export default firebase;