Fixed selected nav item. Added lazy loading for WS client to resolve token issue. Added some filtering to jobs list.

client/src/components/global-search/global-search.component.jsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { Icon, Button, Input, AutoComplete } from "antd";
+
+const { Option } = AutoComplete;
+
+function onSelect(value) {
+  console.log("onSelect", value);
+}
+
+function getRandomInt(max, min = 0) {
+  return Math.floor(Math.random() * (max - min + 1)) + min; // eslint-disable-line no-mixed-operators
+}
+
+function searchResult(query) {
+  return new Array(getRandomInt(5))
+    .join(".")
+    .split(".")
+    .map((item, idx) => ({
+      query,
+      category: `${query}${idx}`,
+      count: getRandomInt(200, 100)
+    }));
+}
+
+function renderOption(item) {
+  return (
+    <Option key={item.category} text={item.category}>
+      <div className="global-search-item">
+        <span className="global-search-item-desc">
+          Found {item.query} on
+          <a
+            href={`https://s.taobao.com/search?q=${item.query}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {item.category}
+          </a>
+        </span>
+        <span className="global-search-item-count">{item.count} results</span>
+      </div>
+    </Option>
+  );
+}
+
+export default class GlobalSearch extends React.Component {
+  state = {
+    dataSource: []
+  };
+
+  handleSearch = value => {
+    this.setState({
+      dataSource: value ? searchResult(value) : []
+    });
+  };
+
+  render() {
+    const { dataSource } = this.state;
+    return (
+      <div style={{ width: 300 }}>
+        <AutoComplete
+          size="large"
+          style={{ width: "100%" }}
+          dataSource={dataSource.map(renderOption)}
+          onSelect={onSelect}
+          onSearch={this.handleSearch}
+          placeholder="input here"
+          optionLabelProp="text"
+        >
+          <Input
+            suffix={
+              <Button style={{ marginRight: -12 }} size="large" type="primary">
+                <Icon type="search" />
+              </Button>
+            }
+          />
+        </AutoComplete>
+      </div>
+    );
+  }
+}

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

@@ -8,38 +8,56 @@ import {
   GET_LANDING_NAV_ITEMS,
   GET_NAV_ITEMS
 } from "../../graphql/metadata.queries";
+import { GET_CURRENT_SELECTED_NAV_ITEM } from "../../graphql/local.queries";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import AlertComponent from "../alert/alert.component";
+import ManageSignInButton from "../manage-sign-in-button/manage-sign-in-button.component";
+import { useApolloClient } from "@apollo/react-hooks";
+import GlobalSearch from "../global-search/global-search.component";
 
-export default ({ landingHeader }) => {
-  let HookNavItems;
+export default ({ landingHeader, signedIn }) => {
+  const apolloClient = useApolloClient();
+  const hookSelectedNavItem = useQuery(GET_CURRENT_SELECTED_NAV_ITEM);
 
+  let hookNavItems;
   if (landingHeader) {
-    HookNavItems = useQuery(GET_LANDING_NAV_ITEMS);
+    hookNavItems = useQuery(GET_LANDING_NAV_ITEMS, {
+      fetchPolicy: "network-only"
+    });
   } else {
-    HookNavItems = useQuery(GET_NAV_ITEMS);
+    hookNavItems = useQuery(GET_NAV_ITEMS, {
+      fetchPolicy: "network-only"
+    });
   }
 
   const handleClick = e => {
-    console.log("click ", e);
-    // this.setState({
-    //   current: e.key
-    // });
+    apolloClient.writeData({ data: { selectedNavItem: e.key } });
   };
 
-  if (HookNavItems.loading) return <LoadingSpinner />;
-  if (HookNavItems.error)
-    return <AlertComponent message={HookNavItems.error.message} />;
+  if (hookNavItems.loading || hookSelectedNavItem.loading)
+    return <LoadingSpinner />;
+  if (hookNavItems.error)
+    return <AlertComponent message={hookNavItems.error.message} />;
+  if (hookSelectedNavItem.error)
+    return console.log(
+      "Unable to load Selected Navigation Item.",
+      hookSelectedNavItem.error
+    );
+
+  const { selectedNavItem } = hookSelectedNavItem.data;
+  const navItems = JSON.parse(hookNavItems.data.masterdata_by_pk.value);
 
-  const navItems = JSON.parse(HookNavItems.data.masterdata_by_pk.value);
   return (
     <Menu
       theme="dark"
       className="header"
       onClick={handleClick}
-      selectedKeys="Home"
+      selectedKeys={selectedNavItem}
       mode="horizontal"
     >
+      <Menu.Item>
+        <GlobalSearch />
+      </Menu.Item>
       {navItems.map(navItem => (
         <Menu.Item key={navItem.title}>
           <Link to={navItem.path}>
@@ -48,11 +66,16 @@ export default ({ landingHeader }) => {
           </Link>
         </Menu.Item>
       ))}
+
       {!landingHeader ? (
         <Menu.Item>
           <SignOut />
         </Menu.Item>
-      ) : null}
+      ) : (
+        <Menu.Item>
+          <ManageSignInButton />
+        </Menu.Item>
+      )}
     </Menu>
   );
 };

client/src/components/manage-sign-in-button/manage-sign-in-button.component.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { useQuery } from "react-apollo";
+import { Link } from "react-router-dom";
+import { GET_CURRENT_USER } from "../../graphql/local.queries";
+import { Icon } from "antd";
+
+export default function ManageSignInButton() {
+  const {
+    loading,
+    error,
+    data: { currentUser }
+  } = useQuery(GET_CURRENT_USER);
+
+  if (loading) return "MSI Loading";
+  if (error) return error.message;
+  console.log("currentUser", currentUser);
+  return currentUser ? (
+    <div>
+      {" "}
+      <Link to="/manage">
+        <Icon type="build" />
+        Manage
+      </Link>
+    </div>
+  ) : (
+    <div>
+      <Link to="/signin">
+        <Icon type="login" />
+        Sign In
+      </Link>
+    </div>
+  );
+}