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 {
-
I do not have a account
+
+
I do not have an account
Sign up with your email and password
-
);
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;