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

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;