diff --git a/client/src/App.js b/client/src/App.js deleted file mode 100644 index 16b7f89f4..000000000 --- a/client/src/App.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react"; -import "./App.css"; - -import "typeface-roboto"; - -import HeaderAppBar from "./components/header-app-bar/header-app-bar.component"; - -const App = () => { - return ( -
- -
- ); -}; - -export default App; diff --git a/client/src/App/App.container.jsx b/client/src/App/App.container.jsx new file mode 100644 index 000000000..8c62a3de4 --- /dev/null +++ b/client/src/App/App.container.jsx @@ -0,0 +1,36 @@ +import React from "react"; +import { Mutation, Query } from "react-apollo"; +import { gql } from "apollo-boost"; + +import App from "./App"; + +const SET_CURRENT_USER = gql` + mutation SetCurrentUser($user: User!) { + setCurrentUser(user: $user) @client + } +`; + +const GET_CURRENT_USER = gql` + { + currentUser @client + } +`; + +const AppContainer = () => ( + + {({ data: { currentUser } }) => ( + + {setCurrentUser => ( + { + setCurrentUser({ variables: { user } }); + }} + /> + )} + + )} + +); + +export default AppContainer; diff --git a/client/src/App.css b/client/src/App/App.css similarity index 100% rename from client/src/App.css rename to client/src/App/App.css diff --git a/client/src/App/App.js b/client/src/App/App.js new file mode 100644 index 000000000..ccaada8fd --- /dev/null +++ b/client/src/App/App.js @@ -0,0 +1,83 @@ +import React from "react"; +import "./App.css"; + +import { auth, createUserProfileDocument } from "../firebase/firebase.utils"; +import { gql } from "apollo-boost"; + +import HeaderAppBar from "../components/header-app-bar/header-app-bar.component"; + +const SET_CURRENT_USER = gql` + mutation SetCurrentUser($user: User!) { + setCurrentUser(user: $user) @client + } +`; + +const GET_CURRENT_USER = gql` + { + currentUser @client + } +`; + +class App extends React.Component { + unsubscribeFromAuth = null; + + componentDidMount() { + const { setCurrentUser } = this.props; + this.unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth => { + console.log("userAuth", userAuth); + if (userAuth) { + const token = await userAuth.getIdToken(); + console.log("token", token); + const idTokenResult = await userAuth.getIdTokenResult(); + const hasuraClaim = + idTokenResult.claims["https://hasura.io/jwt/claims"]; + + if (hasuraClaim) { + console.log("status should be in"); + //setAuthState({ status: "in", user, token }); + } else { + // Check if refresh is required. + const metadataRef = firebase + .database() + .ref("metadata/" + user.uid + "/refreshTime"); + + metadataRef.on("value", async () => { + // Force refresh to pick up the latest custom claims changes. + const token = await user.getIdToken(true); + //setAuthState({ status: "in", user, token }); + console.log("status should be in"); + }); + } + } else { + //setAuthState({ status: "out" }); + } + + // if (userAuth) { + // const userRef = await createUserProfileDocument(userAuth); + + // userRef.onSnapshot(snapShot => { + // setCurrentUser({ + // id: snapShot.id, + // ...snapShot.data() + // }); + // }); + // } else { + // setCurrentUser(userAuth); + // } + }); + } + + componentWillUnmount() { + this.unsubscribeFromAuth(); + } + + render() { + return ( +
+ +
+ ); + } +} + +export default App; diff --git a/client/src/App.test.js b/client/src/App/App.test.js similarity index 100% rename from client/src/App.test.js rename to client/src/App/App.test.js diff --git a/client/src/firebase/firebase.utils.js b/client/src/firebase/firebase.utils.js new file mode 100644 index 000000000..1dab035cb --- /dev/null +++ b/client/src/firebase/firebase.utils.js @@ -0,0 +1,51 @@ +import firebase from 'firebase/app'; +import 'firebase/firestore'; +import 'firebase/auth'; + +const config = { + apiKey: "AIzaSyDV9MsSHZmpLtjoaTK_ObvjFaJ-nMSd2KA", + authDomain: "bodyshop-dev-b1cb6.firebaseapp.com", + databaseURL: "https://bodyshop-dev-b1cb6.firebaseio.com", + projectId: "bodyshop-dev-b1cb6", + storageBucket: "bodyshop-dev-b1cb6.appspot.com", + messagingSenderId: "922785209028", + appId: "1:922785209028:web:96e9df15401eee5d784791", + measurementId: "G-2D5378VCHE" +}; + +firebase.initializeApp(config); + +export const createUserProfileDocument = async (userAuth, additionalData) => { + console.log('userAuth from firebase Utils', userAuth) + if (!userAuth) return; + + const userRef = firestore.doc(`users/${userAuth.uid}`); + + const snapShot = await userRef.get(); + + if (!snapShot.exists) { + const { displayName, email } = userAuth; + const createdAt = new Date(); + try { + await userRef.set({ + displayName, + email, + createdAt, + ...additionalData + }); + } catch (error) { + console.log('error creating user', error.message); + } + } + + return userRef; +}; + +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; diff --git a/client/src/graphql/resolvers.js b/client/src/graphql/resolvers.js new file mode 100644 index 000000000..dc71be9c1 --- /dev/null +++ b/client/src/graphql/resolvers.js @@ -0,0 +1,26 @@ +import { gql } from "apollo-boost"; + +export const typeDefs = gql` + extend type Mutation { + SetCurrentUser(user: User!): User! + } +`; + +const GET_CURRENT_USER = gql` + { + currentUser @client + } +`; + +export const resolvers = { + Mutation: { + setCurrentUser: (_root, { user }, { cache }) => { + cache.writeQuery({ + query: GET_CURRENT_USER, + data: { currentUser: user } + }); + + return user; + } + } +}; diff --git a/client/src/index.js b/client/src/index.js index 1045e6207..613e2cbae 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -1,16 +1,18 @@ import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter } from "react-router-dom"; + import { ApolloProvider } from "react-apollo"; import { createHttpLink } from "apollo-link-http"; import { InMemoryCache } from "apollo-cache-inmemory"; import { ApolloClient } from "apollo-boost"; +import { typeDefs, resolvers } from "./graphql/resolvers"; // require('dotenv').config() import * as serviceWorker from "./serviceWorker"; import "./index.css"; -import App from "./App"; +import { default as App } from "./App/App.container"; const httpLink = createHttpLink({ uri: "https://bodyshop-dev-db.herokuapp.com/v1/graphql" @@ -20,13 +22,14 @@ const cache = new InMemoryCache(); const client = new ApolloClient({ link: httpLink, - cache + cache, + typeDefs, + resolvers }); client.writeData({ data: { - cartHidden: true, - cartItems: [] + currentUser: null } }); @@ -39,7 +42,4 @@ ReactDOM.render( document.getElementById("root") ); -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.register();