Rewrote app to use hooks and fixed multiple re-renders.

client/src/components/alert/alert.component.jsx

@@ -0,0 +1,7 @@
+import { Alert } from "antd";
+
+import React from "react";
+
+export default function AlertComponent({ props }) {
+  return <Alert {...props} />;
+}

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

@@ -3,20 +3,41 @@ import { Link } from "react-router-dom";
 import { Menu, Icon } from "antd";
 import "./header.styles.scss";
 import SignOut from "../sign-out/sign-out.component";
+import { useQuery } from "react-apollo";
+import {
+  GET_LANDING_NAV_ITEMS,
+  GET_NAV_ITEMS
+} from "../../graphql/metadata.queries";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import AlertComponent from "../alert/alert.component";
+
+export default ({ landingHeader }) => {
+  let HookNavItems;
+
+  if (landingHeader) {
+    HookNavItems = useQuery(GET_LANDING_NAV_ITEMS);
+  } else {
+    HookNavItems = useQuery(GET_NAV_ITEMS);
+  }
 
-export default ({ landingHeader, selectedNavItem, navItems }) => {
   const handleClick = e => {
     console.log("click ", e);
     // this.setState({
     //   current: e.key
     // });
   };
+
+  if (HookNavItems.loading) return <LoadingSpinner />;
+  if (HookNavItems.error)
+    return <AlertComponent message={HookNavItems.error.message} />;
+
+  const navItems = JSON.parse(HookNavItems.data.masterdata_by_pk.value);
   return (
     <Menu
       theme="dark"
       className="header"
       onClick={handleClick}
-      selectedKeys={selectedNavItem}
+      selectedKeys="Home"
       mode="horizontal"
     >
       {navItems.map(navItem => (

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

@@ -1,45 +0,0 @@
-import React from "react";
-import { Query } from "react-apollo";
-
-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,
-  GET_LANDING_NAV_ITEMS,
-  GET_NAV_ITEMS
-} from "../../graphql/metadata.queries";
-
-const HeaderContainer = ({ landingHeader }) => {
-  let GET_METADATA;
-  if (landingHeader) GET_METADATA = GET_LANDING_NAV_ITEMS;
-  else GET_METADATA = GET_NAV_ITEMS;
-
-  return (
-    <Query query={GET_SELECTED_NAV_ITEM}>
-      {({ loading, error, data: { selectedNavItem } }) => {
-        return (
-          <Query query={GET_METADATA}>
-            {({ loading, error, data }) => {
-              if (loading) return <Spin />;
-              if (error) return <Alert message={error.message} />;
-              const parsedNavItems = JSON.parse(data.masterdata_by_pk.value);
-              return (
-                <Header
-                  landingHeader={landingHeader}
-                  selectedNavItem={selectedNavItem}
-                  navItems={parsedNavItems}
-                />
-              );
-            }}
-          </Query>
-        );
-      }}
-    </Query>
-  );
-};
-
-export default HeaderContainer;

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

@@ -2,7 +2,6 @@ import React from "react";
 import { auth } from "../../firebase/firebase.utils";
 import { Form, Icon, Input, Button, Alert } from "antd";
 
-import { UPSERT_USER } from "../../graphql/user.queries";
 class SignInForm extends React.Component {
   constructor() {
     super();
@@ -24,16 +23,6 @@ class SignInForm extends React.Component {
             password
           );
 
-          apolloClient
-            .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);
-            });
-
           this.props.form.resetFields();
         } catch (error) {
           this.setState({ ...this.state, errorMessage: error.message });

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

@@ -15,7 +15,7 @@ export default function SignInFormContainer() {
           <Layout>
             <Content>
               <Row align="middle">
-                <Col span="2" offset="8">
+                <Col span={2} offset={8}>
                   <div>
                     <img
                       src={Logo}
@@ -25,12 +25,12 @@ export default function SignInFormContainer() {
                     />
                   </div>
                 </Col>
-                <Col span="6">
+                <Col span={6}>
                   <Typography.Title>Bodyshop.app</Typography.Title>
                 </Col>
               </Row>
               <Row>
-                <Col span="8" offset="8">
+                <Col span={8} offset={8}>
                   <SignInFormComponent apolloClient={client} />
                 </Col>
               </Row>

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

@@ -1,15 +1,33 @@
-import React from "react";
+import React, { Component } from "react";
+import { Redirect } from "react-router-dom";
 import firebase from "../../firebase/firebase.utils";
+export default class SignOut extends Component {
+  state = {
+    redirect: false
+  };
 
-export default function SignOut({ match }) {
-  const signOut = async () => {
+  signOut = async () => {
     try {
       await firebase.auth().signOut();
-      console.log("match", match);
+      this.setState({
+        redirect: true
+      });
     } catch (error) {
       console.log(error);
     }
   };
 
-  return <div onClick={signOut}>Sign Out</div>;
+  renderRedirect = () => {
+    if (this.state.redirect) {
+      //return <Redirect to="/signin" />;
+    }
+  };
+  render() {
+    return (
+      <div>
+        {this.renderRedirect()}
+        <div onClick={this.signOut}>Sign Out</div>
+      </div>
+    );
+  }
 }