Complete rewrite of local state management.

client/src/App/App.js

@@ -1,71 +1,105 @@
 import React from "react";
-import { Switch, Route, Redirect } from "react-router";
-import { ApolloProvider } from "react-apollo";
-import { HttpLink } from "apollo-link-http";
-import ApolloClient from "apollo-client";
-import { InMemoryCache } from "apollo-cache-inmemory";
-import { resolvers, typeDefs } from "../graphql/resolvers";
-import initialState from "../graphql/initial-state";
-import { gql } from "apollo-boost";
-//Styling imports
+import { Switch, Route } from "react-router-dom";
+import firebase from "../firebase/firebase.utils";
+
 import "./App.css";
 
 //Component Imports
 import LandingPage from "../pages/landing/landing.page";
 import Manage from "../pages/manage/manage.page";
-
 import PrivateRoute from "../utils/private-route";
-import SignInContainer from "../pages/sign-in/sign-in.container";
+import SignInPage from "../pages/sign-in/sign-in.page";
 import Unauthorized from "../pages/unauthorized/unauthorized.component";
 
-const graphqlEndpoint = process.env.REACT_APP_GRAPHQL_ENDPOINT;
+import { auth } from "../firebase/firebase.utils";
 
-export default function App({ authState }) {
-  const isIn = authState.status === "in";
-  const headers = isIn ? { Authorization: `Bearer ${authState.token}` } : {};
-  const httpLink = new HttpLink({
-    uri: graphqlEndpoint,
-    headers
-  });
-  const client = new ApolloClient({
-    link: httpLink,
-    cache: new InMemoryCache(),
-    resolvers,
-    typeDefs
-  });
+class App extends React.Component {
+  unsubscribeFromAuth = null;
 
-  //Init local state.
-  client.writeData({
-    data: {
-      ...initialState,
-      currentUser: {
-        __typename: null,
-        email: authState.user ? authState.user.email : null,
-        displayName: authState.user ? authState.user.displayName : null
+  componentDidMount() {
+    const { setCurrentUser } = this.props;
+
+    this.unsubscribeFromAuth = auth.onAuthStateChanged(async user => {
+      console.log("Current User:", user);
+      if (user) {
+        // client
+        //   .mutate({
+        //     mutation: UPSERT_USER,
+        //     variables: { authEmail: user.email, authToken: user.uid }
+        //   })
+        //   .then(r => console.log("Successful Upsert", r))
+        //   .catch(error => console.log("Upsert error!!!!", error));
+
+        const token = await user.getIdToken();
+        const idTokenResult = await user.getIdTokenResult();
+        const hasuraClaim =
+          idTokenResult.claims["https://hasura.io/jwt/claims"];
+        if (hasuraClaim) {
+          setCurrentUser({
+            email: user.email,
+            displayName: user.displayName,
+            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);
+            setCurrentUser({
+              email: user.email,
+              displayName: user.displayName,
+              token
+            });
+          });
+        }
+
+        //add the bearer token to the headers.
+        localStorage.setItem("token", token);
+      } else {
+        setCurrentUser({
+          email: null,
+          displayName: null,
+          token: null
+        });
+        localStorage.removeItem("token");
       }
-    }
-  });
+    });
+  }
 
-  return (
-    <ApolloProvider client={client}>
-      <div>{authState.status}</div>
-      <Switch>
-        <Route exact path="/" component={LandingPage} />
-        <Route exact path="/unauthorized" component={Unauthorized} />
-        <Route
-          exact
-          path="/signin"
-          render={() =>
-            authState.status == "in" ? (
-              <Redirect to="/manage" />
-            ) : (
-              <SignInContainer />
-            )
-          }
-        />
-        {/* <Route path="/signin" component={SignInContainer} /> */}
-        <PrivateRoute isAuthorized={isIn} path="/manage" component={Manage} />
-      </Switch>
-    </ApolloProvider>
-  );
+  componentWillUnmount() {
+    this.unsubscribeFromAuth();
+  }
+
+  render() {
+    return (
+      <div>
+        <Switch>
+          <Route exact path="/" component={LandingPage} />
+          <Route exact path="/unauthorized" component={Unauthorized} />
+          {/* <Route
+            exact
+            path="/signin"
+            render={() =>
+              this.props.currentUser.email != null ? (
+                <Redirect to="/manage" />
+              ) : (
+                <SignInContainer />
+              )
+            }
+          /> */}
+          <Route path="/signin" component={SignInPage} />
+          <PrivateRoute
+            isAuthorized={this.props.currentUser.email != null}
+            path="/manage"
+            component={Manage}
+          />
+        </Switch>
+      </div>
+    );
+  }
 }
+
+export default App;