Complete rewrite of local state management.

client/package.json

@@ -4,9 +4,10 @@
   "private": true,
   "license": "UNLICENSED",
   "dependencies": {
-    "@apollo/react-hooks": "^3.1.3",
     "antd": "^3.26.0",
     "apollo-boost": "^0.4.4",
+    "apollo-link-context": "^1.0.19",
+    "apollo-link-logger": "^1.2.3",
     "dotenv": "^8.2.0",
     "firebase": "^7.5.0",
     "graphql": "^14.5.8",

client/src/App/App.container.jsx

@@ -1,91 +1,29 @@
-//Baselined on https://blog.hasura.io/authentication-and-authorization-using-hasura-and-firebase/
+import React from "react";
+import { Mutation, Query } from "react-apollo";
+import { GET_CURRENT_USER, SET_CURRENT_USER } from "../graphql/local.queries";
 
-import React, { useState, useEffect } from "react";
-import firebase from "../firebase/firebase.utils";
 import App from "./App";
-
-import { gql } from "apollo-boost";
-import { HttpLink } from "apollo-link-http";
-import ApolloClient from "apollo-client";
-import { InMemoryCache } from "apollo-cache-inmemory";
-
 import Spin from "../components/loading-spinner/loading-spinner.component";
 
-const UPSERT_USER = gql`
+export default () => {
-  mutation upsert_user($authEmail: String!, $authToken: String!) {
+  return (
-    insert_users(
+    <Query query={GET_CURRENT_USER}>
-      objects: [{ email: $authEmail, authid: $authToken }]
+      {({ loading, error, data: { currentUser } }) => {
-      on_conflict: { constraint: users_pkey, update_columns: [authid] }
+        if (loading) return <Spin />;
-    ) {
+        if (error) return error.message;
-      returning {
+        return (
-        authid
+          <Mutation mutation={SET_CURRENT_USER}>
-      }
+            {setCurrentUser => (
-    }
+              <App
-  }
+                currentUser={currentUser}
-`;
+                setCurrentUser={user => {
-
+                  setCurrentUser({ variables: { user } });
-const SET_CURRENT_USER = gql`
+                }}
-  mutation SetCurrentUser($user: User!) {
+              />
-    setCurrentUser(user: $user) @client
+            )}
-  }
+          </Mutation>
-`;
+        );
-
+      }}
-const client = new ApolloClient({
+    </Query>
-  link: new HttpLink({
+  );
-    uri: process.env.REACT_APP_GRAPHQL_ENDPOINT
+};
-  }),
-  cache: new InMemoryCache()
-});
-
-export default function Auth() {
-  const [authState, setAuthState] = useState({ status: "loading" });
-
-  useEffect(() => {
-    return firebase.auth().onAuthStateChanged(async user => {
-      if (user) {
-        console.log("Current User:", 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) {
-          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 });
-          });
-        }
-      } else {
-        setAuthState({ status: "out" });
-      }
-    });
-  }, []);
-
-  let content;
-  if (authState.status === "loading") {
-    content = <Spin />;
-  } else {
-    content = (
-      <>
-        <App authState={authState} />
-      </>
-    );
-  }
-
-  return <div className="app-container">{content}</div>;
-}

client/src/App/App.container.jsx.bak

@@ -0,0 +1,78 @@
+//Baselined on https://blog.hasura.io/authentication-and-authorization-using-hasura-and-firebase/
+
+import React, { useState, useEffect } from "react";
+import firebase from "../firebase/firebase.utils";
+import App from "./App";
+
+import { gql } from "apollo-boost";
+import { HttpLink } from "apollo-link-http";
+import ApolloClient from "apollo-client";
+import { InMemoryCache } from "apollo-cache-inmemory";
+
+import Spin from "../components/loading-spinner/loading-spinner.component";
+
+const UPSERT_USER = gql`
+  mutation upsert_user($authEmail: String!, $authToken: String!) {
+    insert_users(
+      objects: [{ email: $authEmail, authid: $authToken }]
+      on_conflict: { constraint: users_pkey, update_columns: [authid] }
+    ) {
+      returning {
+        authid
+      }
+    }
+  }
+`;
+
+export default function Auth() {
+  const [authState, setAuthState] = useState({ status: "loading" });
+
+  useEffect(() => {
+    return firebase.auth().onAuthStateChanged(async user => {
+      if (user) {
+        console.log("Current User:", 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) {
+          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 });
+          });
+        }
+      } else {
+        setAuthState({ status: "out" });
+      }
+    });
+  }, []);
+
+  let content;
+  if (authState.status === "loading") {
+    content = <Spin />;
+  } else {
+    content = (
+      <>
+        <App authState={authState} />
+      </>
+    );
+  }
+
+  return <div className="app-container">{content}</div>;
+}

client/src/App/App.js

@@ -1,71 +1,105 @@
 import React from "react";
-import { Switch, Route, Redirect } from "react-router";
+import { Switch, Route } from "react-router-dom";
-import { ApolloProvider } from "react-apollo";
+import firebase from "../firebase/firebase.utils";
-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 "./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 }) {
+class App extends React.Component {
-  const isIn = authState.status === "in";
+  unsubscribeFromAuth = null;
-  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
-  });
 
-  //Init local state.
+  componentDidMount() {
-  client.writeData({
+    const { setCurrentUser } = this.props;
-    data: {
+
-      ...initialState,
+    this.unsubscribeFromAuth = auth.onAuthStateChanged(async user => {
-      currentUser: {
+      console.log("Current User:", user);
-        __typename: null,
+      if (user) {
-        email: authState.user ? authState.user.email : null,
+        // client
-        displayName: authState.user ? authState.user.displayName : null
+        //   .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 (
+  componentWillUnmount() {
-    <ApolloProvider client={client}>
+    this.unsubscribeFromAuth();
-      <div>{authState.status}</div>
+  }
-      <Switch>
+
-        <Route exact path="/" component={LandingPage} />
+  render() {
-        <Route exact path="/unauthorized" component={Unauthorized} />
+    return (
-        <Route
+      <div>
-          exact
+        <Switch>
-          path="/signin"
+          <Route exact path="/" component={LandingPage} />
-          render={() =>
+          <Route exact path="/unauthorized" component={Unauthorized} />
-            authState.status == "in" ? (
+          {/* <Route
-              <Redirect to="/manage" />
+            exact
-            ) : (
+            path="/signin"
-              <SignInContainer />
+            render={() =>
-            )
+              this.props.currentUser.email != null ? (
-          }
+                <Redirect to="/manage" />
-        />
+              ) : (
-        {/* <Route path="/signin" component={SignInContainer} /> */}
+                <SignInContainer />
-        <PrivateRoute isAuthorized={isIn} path="/manage" component={Manage} />
+              )
-      </Switch>
+            }
-    </ApolloProvider>
+          /> */}
-  );
+          <Route path="/signin" component={SignInPage} />
+          <PrivateRoute
+            isAuthorized={this.props.currentUser.email != null}
+            path="/manage"
+            component={Manage}
+          />
+        </Switch>
+      </div>
+    );
+  }
 }
+
+export default App;

client/src/App/App.js.bak

@@ -0,0 +1,71 @@
+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 "./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 Unauthorized from "../pages/unauthorized/unauthorized.component";
+
+const graphqlEndpoint = process.env.REACT_APP_GRAPHQL_ENDPOINT;
+
+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
+  });
+
+  //Init local state.
+  client.writeData({
+    data: {
+      ...initialState,
+      currentUser: {
+        __typename: null,
+        email: authState.user ? authState.user.email : null,
+        displayName: authState.user ? authState.user.displayName : null
+      }
+    }
+  });
+
+  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>
+  );
+}

client/src/components/header/header.component.jsx

@@ -1,4 +1,4 @@
-import React, { Component, useState } from "react";
+import React from "react";
 import { Link } from "react-router-dom";
 import { Menu, Icon } from "antd";
 import "./header.styles.scss";
@@ -7,9 +7,9 @@ import SignOut from "../sign-out/sign-out.component";
 export default ({ selectedNavItem, navItems }) => {
   const handleClick = e => {
     console.log("click ", e);
-    this.setState({
+    // this.setState({
-      current: e.key
+    //   current: e.key
-    });
+    // });
   };
 
   return (

client/src/components/sign-in-form/sign-in-form.component.jsx

@@ -65,11 +65,7 @@ class SignInForm extends React.Component {
             Log in
           </Button>
         </Form.Item>
-        {errorMessage ? (
+        {errorMessage ? <Alert message={errorMessage} type="error" /> : null}
-          <Alert message={errorMessage} type="error" />
-        ) : (
-          null
-        )}
       </Form>
     );
   }

client/src/components/sign-out/sign-out.component.jsx

@@ -1,13 +1,11 @@
-import React, { useState } from "react";
+import React from "react";
 import firebase from "../../firebase/firebase.utils";
 
 export default function SignOut() {
-  const [authState, setAuthState] = useState();
-
   const signOut = async () => {
     try {
-      const p = await firebase.auth().signOut();
+      await firebase.auth().signOut();
-      setAuthState({ status: "out" });
+      console.log("Signin out!");
     } catch (error) {
       console.log(error);
     }

client/src/graphql/client.js

@@ -0,0 +1,34 @@
+import ApolloClient from "apollo-client";
+import { InMemoryCache } from "apollo-cache-inmemory";
+import { HttpLink } from "apollo-link-http";
+import { setContext } from "apollo-link-context";
+import { resolvers, typeDefs } from "./resolvers";
+import apolloLogger from "apollo-link-logger";
+import { ApolloLink } from "apollo-boost";
+
+const httpLink = new HttpLink({
+  uri: process.env.REACT_APP_GRAPHQL_ENDPOINT
+});
+
+const authLink = setContext((_, { headers }) => {
+  // get the authentication token from local storage if it exists
+  const token = localStorage.getItem("token");
+  // return the headers to the context so httpLink can read them
+  if (token) {
+    return {
+      headers: {
+        ...headers,
+        authorization: token ? `Bearer ${token}` : ""
+      }
+    };
+  } else {
+    return { headers };
+  }
+});
+
+export const client = new ApolloClient({
+  link: authLink.concat(httpLink),
+  cache: new InMemoryCache({ addTypename: false }),
+  typeDefs,
+  resolvers
+});

client/src/graphql/initial-state.js

@@ -1,7 +1,8 @@
 export default {
   currentUser: {
     email: null,
-    displayName: null
+    displayName: null,
+    token: null
   },
   selectedNavItem: "Home",
   recentItems: []

client/src/graphql/local.queries.js

@@ -0,0 +1,17 @@
+import { gql } from "apollo-boost";
+
+export const SET_CURRENT_USER = gql`
+  mutation SetCurrentUser($user: User!) {
+    setCurrentUser(user: $user) @client {
+      email
+    }
+  }
+`;
+
+export const GET_CURRENT_USER = gql`
+  {
+    currentUser @client {
+      email
+    }
+  }
+`;

client/src/graphql/metadata.queries.js

@@ -21,14 +21,7 @@ export const GET_SELECTED_NAV_ITEM = gql`
   }
 `;
 
-export const GET_CURRENT_USER = gql`
+
-  query GetCurrentUser {
-    currentUser @client {
-      email
-      displayName
-    }
-  }
-`;
 
 // export const SET_CURRENT_USER = gql`
 // mutation SetCurrentUser($user User!){

client/src/graphql/resolvers.js

@@ -1,20 +1,15 @@
 import { gql } from "apollo-boost";
+import { GET_CURRENT_USER } from "./local.queries";
 
 export const typeDefs = gql`
   extend type Mutation {
     SetCurrentUser(user: User!): User!
   }
 
-  type User {
+  extend type User {
-    displayName: String!,
+    email: String!
-    email: String!,
+    displayName: String!
-    photoUrl: String!
+    token: String!
-  }
-`;
-
-const GET_CURRENT_USER = gql`
-  {
-    currentUser @client
   }
 `;
 

client/src/index.js

@@ -5,14 +5,27 @@ import { BrowserRouter } from "react-router-dom";
 import * as serviceWorker from "./serviceWorker";
 
 import "./index.css";
-import { default as App } from "./App/App.container";
+import AppContainer from "./App/App.container";
+
+import { ApolloProvider } from "react-apollo";
+import { client } from "./graphql/client";
+import initialState from "./graphql/initial-state";
 
 require("dotenv").config();
 
+//Init local state.
+client.writeData({
+  data: {
+    ...initialState
+  }
+});
+
 ReactDOM.render(
-  <BrowserRouter>
+  <ApolloProvider client={client}>
-    <App />
+    <BrowserRouter>
-  </BrowserRouter>,
+      <AppContainer />
+    </BrowserRouter>
+  </ApolloProvider>,
   document.getElementById("root")
 );
 

client/src/pages/sign-in/sign-in.container.jsx

@@ -1,25 +0,0 @@
-import React from "react";
-import { Query } from "react-apollo";
-
-import { Alert } from "antd";
-
-import Spin from "../../components/loading-spinner/loading-spinner.component";
-// import Skeleton from "../loading-skeleton/loading-skeleton.component";
-
-import { GET_CURRENT_USER } from "../../graphql/metadata.queries";
-import SignInPage from "./sign-in.page";
-
-const SignInContainer = () => {
-  return (
-    <Query query={GET_CURRENT_USER}>
-      {({ loading, error, data: { currentUser } }) => {
-        if (loading) return <Spin />;
-        if (error) return <Alert message={error.message} />;
-
-        return <SignInPage signedIn={currentUser.email ? true : false} />;
-      }}
-    </Query>
-  );
-};
-
-export default SignInContainer;

client/src/pages/sign-in/sign-in.page.jsx

@@ -1,14 +1,6 @@
 import React from "react";
 import SignInComponent from "../../components/sign-in-form/sign-in-form.component";
 
-import { Redirect } from "react-router-dom";
+export default () => {
-
+  return <SignInComponent />;
-
-export default ({signedIn}) => {
-  console.log(signedIn)
-  return (
-    <div>
-      <SignInComponent />
-    </div>
-  );
 };

client/yarn.lock

@@ -2189,6 +2189,14 @@ apollo-client@^2.6.4:
     tslib "^1.9.3"
     zen-observable "^0.8.0"
 
+apollo-link-context@^1.0.19:
+  version "1.0.19"
+  resolved "https://registry.yarnpkg.com/apollo-link-context/-/apollo-link-context-1.0.19.tgz#3c9ba5bf75ed5428567ce057b8837ef874a58987"
+  integrity sha512-TUi5TyufU84hEiGkpt+5gdH5HkB3Gx46npNfoxR4of3DKBCMuItGERt36RCaryGcU/C3u2zsICU3tJ+Z9LjFoQ==
+  dependencies:
+    apollo-link "^1.2.13"
+    tslib "^1.9.3"
+
 apollo-link-error@^1.0.3:
   version "1.1.12"
   resolved "https://registry.yarnpkg.com/apollo-link-error/-/apollo-link-error-1.1.12.tgz#e24487bb3c30af0654047611cda87038afbacbf9"
@@ -2216,6 +2224,11 @@ apollo-link-http@^1.3.1:
     apollo-link-http-common "^0.2.15"
     tslib "^1.9.3"
 
+apollo-link-logger@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/apollo-link-logger/-/apollo-link-logger-1.2.3.tgz#1f3e6f7849ce7a7e3aa822141fe062cfa278b1e1"
+  integrity sha512-GaVwdHyXmawfvBlHfZkFkBHH3+YH7wibzSCc4/YpIbPVtbtZqi0Qop18w++jgpw385W083DMOdYe2eJsKkZdag==
+
 apollo-link@^1.0.0, apollo-link@^1.0.6, apollo-link@^1.2.13:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.2.13.tgz#dff00fbf19dfcd90fddbc14b6a3f9a771acac6c4"