In progress sign in changes.

client/src/App.js

@@ -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 (
-    <div>
-      <HeaderAppBar />
-    </div>
-  );
-};
-
-export default App;

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 = () => (
+  <Query query={GET_CURRENT_USER}>
+    {({ data: { currentUser } }) => (
+      <Mutation mutation={SET_CURRENT_USER}>
+        {setCurrentUser => (
+          <App
+            currentUser={currentUser}
+            setCurrentUser={user => {
+              setCurrentUser({ variables: { user } });
+            }}
+          />
+        )}
+      </Mutation>
+    )}
+  </Query>
+);
+
+export default AppContainer;

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 (
+      <div>
+        <HeaderAppBar />
+      </div>
+    );
+  }
+}
+
+export default App;

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;

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;
+    }
+  }
+};

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,
+    currentUser: null
-    cartItems: []
   }
 });
 
@@ -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();