Additional fixes for firebase login. Capture basic local state.

client/src/App/App.container.jsx

@@ -9,7 +9,7 @@ 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'
+import Spin from "../components/loading-spinner/loading-spinner.component";
 
 const UPSERT_USER = gql`
   mutation upsert_user($authEmail: String!, $authToken: String!) {
@@ -24,6 +24,12 @@ const UPSERT_USER = gql`
   }
 `;
 
+const SET_CURRENT_USER = gql`
+  mutation SetCurrentUser($user: User!) {
+    setCurrentUser(user: $user) @client
+  }
+`;
+
 const client = new ApolloClient({
   link: new HttpLink({
     uri: process.env.REACT_APP_GRAPHQL_ENDPOINT
@@ -44,8 +50,8 @@ export default function Auth() {
             mutation: UPSERT_USER,
             variables: { authEmail: user.email, authToken: user.uid }
           })
-          .then(r => console.log(r))
-          .catch(error => console.log("ERROR!!!!", error));
+          .then(r => console.log("Successful Upsert", r))
+          .catch(error => console.log("Upsert error!!!!", error));
 
         const token = await user.getIdToken();
         const idTokenResult = await user.getIdTokenResult();

client/src/App/App.js

@@ -6,13 +6,14 @@ 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 SignIn from "../components/landing-components/sign-in/sign-in.component";
-import LandingPage from "../pages/landing/landing.component";
-import Manage from "../pages/manage/manage.component";
+import SignIn from "../components/sign-in-form/sign-in-form.component";
+import LandingPage from "../pages/landing/landing.page";
+import Manage from "../pages/manage/manage.page";
 
 import PrivateRoute from "../utils/private-route";
 
@@ -31,8 +32,17 @@ export default function App({ authState }) {
     resolvers,
     typeDefs
   });
+
+  //Init local state.
   client.writeData({
-    data: { ...initialState, authState }
+    data: {
+      ...initialState,
+      currentUser: {
+        __typename: null,
+        email: authState.user.email,
+        displayName: authState.user.displayName
+      }
+    }
   });
 
   return (

client/src/components/header/header.container.jsx

@@ -5,6 +5,7 @@ import { Alert } from "antd";
 import Header from "./header.component";
 
 import Spin from "../loading-spinner/loading-spinner.component";
+// import Skeleton from "../loading-skeleton/loading-skeleton.component";
 
 import {
   GET_SELECTED_NAV_ITEM,

client/src/components/loading-skeleton/loading-skeleton.component.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import './loading-skeleton.styles.scss'
+
+import { Skeleton } from "antd";
+
+export default function LoadingSkeleton() {
+    return (
+        <Skeleton className="loading-skeleton" active/>
+    )
+}

client/src/components/loading-skeleton/loading-skeleton.styles.scss

@@ -0,0 +1,3 @@
+.loading-skeleton {
+  text-align: center;
+}

client/src/components/loading-spinner/loading-spinner.component.jsx

@@ -3,5 +3,5 @@ import { Spin } from "antd";
 import "./loading-spinner.styles.scss";
 
 export default function LoadingSpinner() {
-  return <Spin className="spinner" size="large" delay="500" />;
+  return <Spin className="loading-spinner" size="large" delay="500" />;
 }

client/src/components/loading-spinner/loading-spinner.styles.scss

@@ -1,3 +1,3 @@
-.spinner {
+.loading-spinner {
   text-align: center;
 }

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

@@ -1,8 +1,8 @@
 import React from "react";
-import { auth } from "../../../firebase/firebase.utils";
+import { auth } from "../../firebase/firebase.utils";
 import { Form, Icon, Input, Button, Alert } from "antd";
 
-class SignIn extends React.Component {
+class SignInForm extends React.Component {
   constructor() {
     super();
     this.state = {
@@ -74,4 +74,4 @@ class SignIn extends React.Component {
     );
   }
 }
-export default Form.create({ name: "sign_in" })(SignIn);
+export default Form.create({ name: "sign_in" })(SignInForm);

client/src/graphql/initial-state.js

@@ -1,5 +1,5 @@
 export default {
-  authState: null,
+
   selectedNavItem: "Home",
   recentItems: []
 };

client/src/graphql/metadata.queries.js

@@ -20,3 +20,15 @@ export const GET_SELECTED_NAV_ITEM = gql`
     selectedNavItem @client
   }
 `;
+
+export const GET_CURRENT_USER = gql`
+  query GetCurrentUser {
+    currentUser @client
+  }
+`;
+
+// export const SET_CURRENT_USER = gql`
+// mutation SetCurrentUser($user User!){
+//   setCurrentUser(currentUser: $user)
+// }
+// `;

client/src/graphql/resolvers.js

@@ -4,6 +4,12 @@ export const typeDefs = gql`
   extend type Mutation {
     SetCurrentUser(user: User!): User!
   }
+
+  type User {
+    displayName: String!,
+    email: String!,
+    photoUrl: String!
+  }
 `;
 
 const GET_CURRENT_USER = gql`

client/src/pages/landing/landing.page.jsx

@@ -13,3 +13,4 @@ export default function LandingPage() {
     </div>
   );
 }
+

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

@@ -0,0 +1,13 @@
+import React from "react";
+import signInComponent from "../../components/sign-in-form/sign-in-form.component";
+
+import { Redirect } from "react-router-dom";
+
+
+export default function SignInPage() {
+  return (
+    <div>
+      <signInComponent />
+    </div>
+  );
+}