diff --git a/src/App.js b/src/App.js index 438aad5..74d0875 100644 --- a/src/App.js +++ b/src/App.js @@ -12,13 +12,22 @@ import Header from "./components/header/header"; import CheckoutPage from "./pages/checkout/checkout"; import { auth } from "./firebase/firebase-utils"; -import { createUserProfileDocument } from "./firebase/firebase-utils"; +import { + createUserProfileDocument, +} from "./firebase/firebase-utils"; import { setCurrentUser } from "./redux/user/user-actions"; import { selectCurrentUser } from "./redux/user/user-selectors"; class App extends Component { unsubscribeFromAuth = null; + /** componentDidMount function + * [1] keep track of the authenticated user status using: onAuthStateChanged(authenticated user) + * [2] check if user is authenticated + * [3] store the user in firebase && get back his documentReference using: createUserProfileDocument(user) + * [4] setup a listener on user snapshot that stores the user in the state + */ + // open connection to watch user auth changes componentDidMount() { const { setCurrentUser } = this.props; @@ -26,19 +35,23 @@ class App extends Component { this.unsubscribeFromAuth = auth.onAuthStateChanged(async (user) => { // if user signed in if (user) { - // get the user obj + // get the user documentReference. after, storing it in firestore. const userRef = await createUserProfileDocument(user); // after db updates with new user userRef.onSnapshot((snapshot) => { + // trigger redux action creator func && set snapshot data as a payload setCurrentUser({ id: snapshot.id, ...snapshot.data(), }); - console.log(this.state); }); } else { setCurrentUser({ user }); + // addCollectionAndDocuments( + // "collection", + // collectionsArray.map(({ title, items }) => ({ title, items })) + // ); } }); } @@ -59,25 +72,24 @@ class App extends Component {

contact

} /> currentUser ? : } /> -

404 Not Found

} /> ); } } -// access to state +// Access the current user from the state const mapStateToProps = createStructuredSelector({ currentUser: selectCurrentUser, + // collectionsArray: selectCollectionForPreview, }); -// set state +// Store the user in the state const mapDispatchToProps = (dispatch) => ({ setCurrentUser: (user) => dispatch(setCurrentUser(user)), }); diff --git a/src/firebase/firebase-utils.js b/src/firebase/firebase-utils.js index ebc3318..0f29edc 100644 --- a/src/firebase/firebase-utils.js +++ b/src/firebase/firebase-utils.js @@ -21,7 +21,8 @@ export const firestore = firebase.firestore(); * [1] get the user && any additional data parameters * [2] check if user is authenticated or not * [3] get the user documentReference && get userSnapshot - * [4] + * [4] check if snapshot exists or not + * * */ @@ -34,38 +35,61 @@ export const createUserProfileDocument = async ( // Request user document reference object const userRef = firestore.doc(`users/${userAuth.uid}`); - console.log(userRef); // get user document snapshot obj using user document reference const snapshot = await userRef.get(); - console.log(snapshot); - - // // if user is not registered - // if (!snapshot.exists) { - // // Get displayName and email from the authenticated user - // const { displayName, email } = userAuth; - // const createdAt = new Date(); - - // // Create user document && account - // try { - // await userRef.set({ - // displayName, - // email, - // createdAt, - // ...additionalData, - // }); - // } catch (err) { - // console.log("Error registering user", err.message); - // } - // } - - // return userRef; + + // if user is not registered + if (!snapshot.exists) { + // Get displayName and email from the authenticated user + const { displayName, email } = userAuth; + const createdAt = new Date(); + + // Create user document && account + try { + await userRef.set({ + displayName, + email, + createdAt, + ...additionalData, + }); + } catch (err) { + console.log("Error registering user", err.message); + } + } + + return userRef; +}; + +/** addCollectionAndDocuments func + * [1] get the collection key && the document to be added + * [2] get the reference of the collection + * [3] make sure to use firestore.batch() to avoid half fail errors (all success || all fail) + * [4] loop through the documents to add && create documentReferences for each document + * [5] bind each document with documentReference using batch.set() func + * [6] don't forget to commit batches + */ + +export const addCollectionAndDocuments = async ( + collectionKey, + documentsToAdd +) => { + const collectionRef = firestore.collection(collectionKey); + console.log(collectionRef); + + const batch = firestore.batch(); + documentsToAdd.forEach((document) => { + const newDocRef = collectionRef.doc(); + batch.set(newDocRef, document); + }); + + return await batch.commit(); }; // Use google as an authentication provider const googleProvider = new firebase.auth.GoogleAuthProvider(); // trigger auth pop up -googleProvider.setCustomParameters({ prompet: "select_account" }); +googleProvider.setCustomParameters({ prompt: "select_account" }); // Use pop-up as a way of authenticating export const signInWithGoogle = () => auth.signInWithPopup(googleProvider);