Refactored header to pull from masterdata.

client/src/App/App.js

@@ -1,19 +1,20 @@
 import React from "react";
 import { ApolloProvider } from "react-apollo";
-import { gql } from "apollo-boost";
 import { HttpLink } from "apollo-link-http";
-import { getMainDefinition } from "apollo-utilities";
 import ApolloClient from "apollo-client";
 import { InMemoryCache } from "apollo-cache-inmemory";
 
 //Styling imports
 import "./App.css";
 
-import HeaderAppBar from "../components/header-app-bar/header-app-bar.component";
+import HeaderAppBarContainer from "../components/header-app-bar/header-app-bar.container";
 import SignIn from "../components/sign-in/sign-in.component";
 import initialState from "../graphql/initial-state";
 
-const graphqlEndpoint = process.env.REACT_APP_GRAPHQL_ENDPOINT || "https://bodyshop-dev-db.herokuapp.com/v1/graphql";
+//Todo: Issue with this line. Not sure why.
+const graphqlEndpoint =
+  process.env.REACT_APP_GRAPHQL_ENDPOINT ||
+  "https://bodyshop-dev-db.herokuapp.com/v1/graphql";
 
 export default function App({ authState }) {
   console.log("graphqlEndpoint", graphqlEndpoint);
@@ -36,10 +37,10 @@ export default function App({ authState }) {
     data: initialState
   });
 
-  console.log(client)
+  console.log(client);
   return (
     <ApolloProvider client={client}>
-      <HeaderAppBar />
+      <HeaderAppBarContainer />
       <SignIn />
     </ApolloProvider>
   );

client/src/components/header-app-bar/header-app-bar.component.jsx

@@ -3,10 +3,6 @@ import { Menu, Icon } from "antd";
 
 const { SubMenu } = Menu;
 class HeaderAppBar extends Component {
-  state = {
-    current: "alipay"
-  };
-
   handleClick = e => {
     console.log("click ", e);
     this.setState({
@@ -15,47 +11,53 @@ class HeaderAppBar extends Component {
   };
 
   render() {
+    const { selectedNavItem, navItems } = this.props;
     return (
       <Menu
         onClick={this.handleClick}
-        selectedKeys={[this.state.current]}
+        selectedKeys={selectedNavItem}
         mode="horizontal"
       >
-        <Menu.Item key="mail">
+        {navItems.map(navItem => (
-          <Icon type="mail" />
+          <Menu.Item key={navItem.title}>{navItem.title}</Menu.Item>
-          Navigation One
+        ))}
-        </Menu.Item>
-        <Menu.Item key="app" disabled>
-          <Icon type="appstore" />
-          Navigation Two
-        </Menu.Item>
-        <SubMenu
-          title={
-            <span className="submenu-title-wrapper">
-              <Icon type="setting" />
-              Navigation Three - Submenu
-            </span>
-          }
-        >
-          <Menu.ItemGroup title="Item 1">
-            <Menu.Item key="setting:1">Option 1</Menu.Item>
-            <Menu.Item key="setting:2">Option 2</Menu.Item>
-          </Menu.ItemGroup>
-          <Menu.ItemGroup title="Item 2">
-            <Menu.Item key="setting:3">Option 3</Menu.Item>
-            <Menu.Item key="setting:4">Option 4</Menu.Item>
-          </Menu.ItemGroup>
-        </SubMenu>
-        <Menu.Item key="alipay">
-          <a
-            href="https://ant.design"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Navigation Four - Link
-          </a>
-        </Menu.Item>
       </Menu>
+
+      //   <Menu.Item key="mail">
+      //     <Icon type="mail" />
+      //     Navigation One
+      //   </Menu.Item>
+      //   <Menu.Item key="app" disabled>
+      //     <Icon type="appstore" />
+      //     Navigation Two
+      //   </Menu.Item>
+      //   <SubMenu
+      //     title={
+      //       <span className="submenu-title-wrapper">
+      //         <Icon type="setting" />
+      //         Navigation Three - Submenu
+      //       </span>
+      //     }
+      //   >
+      //     <Menu.ItemGroup title="Item 1">
+      //       <Menu.Item key="setting:1">Option 1</Menu.Item>
+      //       <Menu.Item key="setting:2">Option 2</Menu.Item>
+      //     </Menu.ItemGroup>
+      //     <Menu.ItemGroup title="Item 2">
+      //       <Menu.Item key="setting:3">Option 3</Menu.Item>
+      //       <Menu.Item key="setting:4">Option 4</Menu.Item>
+      //     </Menu.ItemGroup>
+      //   </SubMenu>
+      //   <Menu.Item key="alipay">
+      //     <a
+      //       href="https://ant.design"
+      //       target="_blank"
+      //       rel="noopener noreferrer"
+      //     >
+      //       Navigation Four - Link
+      //     </a>
+      //   </Menu.Item>
+      // </Menu>
     );
   }
 }

client/src/components/header-app-bar/header-app-bar.container.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { Query } from "react-apollo";
+import { gql } from "apollo-boost";
+
+import { Spin, Alert } from "antd";
+
+import HeaderAppBar from "./header-app-bar.component";
+
+const GET_NAV_ITEMS = gql`
+  query nav_items {
+    masterdata_by_pk(key: "NAV_ITEMS") {
+      value
+    }
+  }
+`;
+
+const GET_SELECTED_NAV_ITEM = gql`
+  query selected_nav_item {
+    selectedNavItem @client
+  }
+`;
+
+const HeaderAppBarContainer = () => (
+  <Query query={GET_SELECTED_NAV_ITEM}>
+    {({ loading, error, data: { selectedNavItem } }) => {
+      console.log("Selected Nav item", selectedNavItem);
+      return (
+        <Query query={GET_NAV_ITEMS}>
+          {({ loading, error, data }) => {
+            if (loading) return <Spin size="large" />;
+            return (
+              <HeaderAppBar
+                selectedNavItem={selectedNavItem}
+                navItems={data.masterdata_by_pk.value}
+              />
+            );
+          }}
+        </Query>
+      );
+    }}
+  </Query>
+);
+
+export default HeaderAppBarContainer;

client/src/graphql/initial-state.js

@@ -1,3 +1,3 @@
 export default {
-  currentSelectedNavItem: "wat",
+  selectedNavItem: "Home",
 };

client/src/index.js

@@ -2,13 +2,6 @@ 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";
-import initialState from "./graphql/initial-state";
-
 import * as serviceWorker from "./serviceWorker";
 
 import "./index.css";
@@ -16,27 +9,10 @@ import { default as App } from "./App/App.container";
 
 require("dotenv").config();
 
-const httpLink = createHttpLink({
-  uri: "https://bodyshop-dev-db.herokuapp.com/v1/graphql"
-});
-
-const client = new ApolloClient({
-  link: httpLink,
-  cache: new InMemoryCache(),
-  typeDefs,
-  resolvers
-});
-
-client.writeData({
-  data: initialState
-});
-
 ReactDOM.render(
-  <ApolloProvider client={client}>
+  <BrowserRouter>
-    <BrowserRouter>
+    <App />
-      <App />
+  </BrowserRouter>,
-    </BrowserRouter>
-  </ApolloProvider>,
   document.getElementById("root")
 );