[WIP] Categories hook & custom menu component

config/webpack.config.js

@@ -329,27 +329,27 @@ module.exports = function (webpackEnv) {
         // Disable require.ensure as it's not a standard language feature.
         { parser: { requireEnsure: false } },
 
-        // First, run the linter.
-        // It's important to do this before Babel processes the JS.
-        {
-          test: /\.(ts|tsx)$/,
-          enforce: 'pre',
-          use: [
-            {
-              options: {
-                formatter: require.resolve('react-dev-utils/eslintFormatter'),
-                eslintPath: require.resolve('eslint'),
+        // // First, run the linter.
+        // // It's important to do this before Babel processes the JS.
+        // {
+        //   test: /\.(ts|tsx)$/,
+        //   enforce: 'pre',
+        //   use: [
+        //     {
+        //       options: {
+        //         formatter: require.resolve('react-dev-utils/eslintFormatter'),
+        //         eslintPath: require.resolve('eslint'),
 
-              },
-              loader: require.resolve('eslint-loader'),
-            },
-          ],
-          include: isEnvDevelopment && workspacesConfig.development
-            ? [paths.appSrc, workspacesConfig.paths]
-            : isEnvProduction && workspacesConfig.production
-              ? [paths.appSrc, workspacesConfig.paths]
-              : paths.appSrc,
-        },
+        //       },
+        //       loader: require.resolve('eslint-loader'),
+        //     },
+        //   ],
+        //   include: isEnvDevelopment && workspacesConfig.development
+        //     ? [paths.appSrc, workspacesConfig.paths]
+        //     : isEnvProduction && workspacesConfig.production
+        //       ? [paths.appSrc, workspacesConfig.paths]
+        //       : paths.appSrc,
+        // },
         {
           // "oneOf" will traverse all following loaders until one will
           // match the requirements. When no loader matches it will fall

package.json

@@ -6,9 +6,11 @@
   "dependencies": {
     "@babel/core": "^7.7.7",
     "@babel/plugin-transform-react-jsx-development": "^7.9.0",
+    "@babel/plugin-transform-typescript": "^7.9.6",
     "@react-workspaces/react-scripts": "^3.0.1-alpha-07",
+    "@rehooks/local-storage": "^2.2.3",
     "@svgr/webpack": "4.3.0",
-    "@types/react": "^16.8.23",
+    "@types/react": "^16.9.23",
     "@types/react-slick": "^0.23.4",
     "@typescript-eslint/eslint-plugin": "1.10.2",
     "@typescript-eslint/parser": "1.10.2",
@@ -46,6 +48,7 @@
     "eslint-plugin-react-hooks": "^2.2.0",
     "fetch-mock": "^8.2.0-beta.2",
     "file-loader": "4.0.0",
+    "formik": "^2.1.4",
     "fs-extra": "8.0.1",
     "gh-pages": "^2.0.1",
     "html-webpack-plugin": "4.0.0-beta.5",
@@ -68,11 +71,11 @@
     "postcss-normalize": "8.0.1",
     "postcss-preset-env": "6.6.0",
     "postcss-safe-parser": "4.0.1",
-    "react": "^16.12.0",
+    "react": "^16.13.1",
     "react-app-polyfill": "^1.0.0",
-    "react-dev-utils": "^10.0.0",
+    "react-dev-utils": "10.1.0",
     "react-docgen-typescript-loader": "^3.6.0",
-    "react-dom": "^16.12.0",
+    "react-dom": "^16.13.1",
     "react-ga": "^2.5.3",
     "react-intl-universal": "^2.0.4",
     "react-router-dom": "^5.1.2",
@@ -91,6 +94,7 @@
     "styled-components": "^4.4.1",
     "terser-webpack-plugin": "1.3.0",
     "url-loader": "2.0.0",
+    "use-onclickoutside": "^0.3.1",
     "webpack": "^4.41.4",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "3.7.1",
@@ -150,6 +154,6 @@
     "storybook-readme": "^5.0.8",
     "ts-loader": "^6.2.1",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
-    "typescript": "^3.7.3"
+    "typescript": "^3.8.3"
   }
 }

src/components/src/AppHeader/appheader.main.tsx

@@ -33,6 +33,7 @@ import { cortexFetch } from '../utils/Cortex';
 import { login } from '../utils/AuthService';
 import ImageContainer from '../ImageContainer/image.container';
 import Config from '../../../ep.config.json';
+import { AppHeaderNavigationMainFC } from '../AppHeaderNavigation/appheadernavigation-fc';
 
 import './appheader.main.scss';
 
@@ -403,20 +404,13 @@ class AppHeaderMain extends Component<AppHeaderMainProps, AppHeaderMainState> {
 
         <div className="central-container">
           <div className="horizontal-menu">
-            {isDesktop && (!isOffline && !isLoading) ? (
-              <AppHeaderNavigationMain
-                isOfflineCheck={this.handleIsOffline}
-                isOffline={isOffline}
-                isMobileView={false}
-                onFetchNavigationError={redirectToMainPage}
-                checkedLocation={checkedLocation}
-                appHeaderNavigationLinks={appHeaderNavigationLinks}
-              />
-            ) : ('')}
+            {(isDesktop && !isOffline && !isLoading) && (
+              <AppHeaderNavigationMainFC isMobileView={false} />
+            )}
           </div>
         </div>
 
-        <div className="collapsable-container collapse collapsed">
+        <div className="collapsable-container collapse collapsed" style={{ border: '3px solid #f00;' }}>
           <div className="search-container">
             {Config.bloomreachSearch.enable ? (
               <BloomreachAppHeaderSearchMain isMobileView isFocused={isSearchFocused} onSearchPage={onSearchPage} />

src/components/src/AppHeaderNavigation/appheadernavigation-fc.scss

@@ -0,0 +1,85 @@
+
+@import './../../../theme/common.scss';
+
+.app-header-navigation-component-fc {
+
+  .navmenu {
+    &__item-list {
+      padding: 0;
+      list-style-image: none;
+      list-style-type: none;
+      margin: 0;
+      text-align: center;
+    }
+
+    &__item {
+      display: inline-block;
+      padding: 0 15px;
+    }
+
+    &__item-content {
+      .navlink {
+        display: inline-block;
+        padding: 15px 7px;
+        color: #fff;
+        font-weight: bold;
+        font-size: 13px;
+        text-decoration: none;
+        cursor: pointer;
+
+        &.has-children {
+          &:after {
+            content: ' ';
+            display: inline-block;
+            margin-left: 5px;
+            width: 0px;
+            height: 0px;
+            border-top: 4px solid #fff;
+            border-right: 4px solid transparent;
+            border-left: 4px solid transparent;
+            border-bottom: 2px solid transparent;
+          }
+        }
+      }
+    }
+
+    &__submenu-container {
+      text-align: center;
+    }
+
+    &__submenu-container {
+      position: absolute;
+      width: 100%;
+    }
+
+    &__item-list--level-1, &__item-list--level-2 {
+      background-color: #fff;
+      box-shadow: 0px 4px 4px -2px rgba(0, 0, 0, 0.5);
+    }
+
+    &__item-list--level-2 {
+      border-top: 1px solid #888;
+    }
+
+    &__item-content--level-1, &__item-content--level-2 {
+      .navlink {
+        color: $mainTextColor;
+
+        &.has-children {
+          &:after {
+            content: ' ';
+            display: inline-block;
+            margin-left: 5px;
+            width: 0px;
+            height: 0px;
+            border-top: 4px solid $mainTextColor;
+            border-right: 4px solid transparent;
+            border-left: 4px solid transparent;
+            border-bottom: 2px solid transparent;
+          }
+        }
+      }
+    }
+  }
+
+}

src/components/src/AppHeaderNavigation/appheadernavigation-fc.tsx

@@ -0,0 +1,74 @@
+/**
+ * Copyright © 2019 Elastic Path Software Inc. All rights reserved.
+ *
+ * This is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This software is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this license. If not, see
+ *
+ *     https://www.gnu.org/licenses/
+ *
+ *
+ */
+
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import Config from '../../../ep.config.json';
+import { useFetchCategories, CategoryResult } from '../../../hooks/use-fetch-categories';
+import { Menu, MenuItem } from '../Menu/Menu';
+
+import './appheadernavigation-fc.scss';
+
+
+const categoryToMenuItem = (category: CategoryResult): MenuItem => ({
+  key: category.name,
+  content: (category.children && category.children.length > 0)
+    ? (
+      <div className="navlink has-children">
+        {category.displayName}
+      </div>
+    )
+    : (<Link
+        className="navlink"
+        to={`/category/${category.name}`}
+        aria-haspopup="true"
+        aria-expanded="false"
+      >
+        {category.displayName}
+      </Link>
+    ),
+  items: (category.children && category.children.length > 0) ? category.children.map(c => categoryToMenuItem(c)) : null,
+});
+
+interface AppHeaderNavigationMainProps {
+  isMobileView: boolean;
+}
+
+export const AppHeaderNavigationMainFC: React.FC<AppHeaderNavigationMainProps> = (props) => {
+  const { categories } = useFetchCategories();
+  const menuItems = categories ? categories.map(c => categoryToMenuItem(c)) : [];
+  const menuItemsFinal = Config.b2b.enable
+    ? [
+      { key: 'home', content: <Link className="navlink" to="/">Home</Link> },
+      { key: 'company', content: <Link className="navlink" to="/company">Company</Link> },
+      { key: 'products', content: <div className="navlink has-children">Products</div>, items: menuItems },
+      { key: 'industries', content: <Link className="navlink" to="/industries">Industries</Link> },
+      { key: 'services', content: <Link className="navlink" to="/services">Services</Link> },
+      { key: 'support', content: <Link className="navlink" to="/support">Support</Link> },
+    ]
+    : menuItems;
+
+  return (
+    <div className="app-header-navigation-component-fc">
+      <Menu className="navmenu" items={menuItemsFinal} subMenuPlacement="after" />
+    </div>
+  );
+}

src/components/src/Menu/Menu.tsx

@@ -0,0 +1,94 @@
+import React, { ReactChild, useState } from 'react';
+import useOnClickOutside from 'use-onclickoutside';
+
+
+export interface MenuItem {
+  key: string;
+  content: string | ReactChild;
+  items?: MenuItem[];
+}
+
+interface SubMenuProps {
+  className?: string;
+  items: MenuItem[];
+  level?: number;
+  prefix?: string[];
+  selectedKeys: string[];
+  subMenuPlacement?: 'within' | 'after';
+  onItemSelected: (keys: string[]) => void;
+}
+
+const SubMenu: React.FC<SubMenuProps> = (props) => {
+  const level = props.level ?? 0;
+  const prefix = props.prefix ?? [];
+  const selectedItem = props.items.filter(item => item.key === props.selectedKeys[level])[0];
+  const subMenuPlacement = props.subMenuPlacement ?? 'within';
+
+  const handleItemClicked = (item: MenuItem) => {
+    props.onItemSelected(item.items ? [...prefix, item.key] : []);
+  };
+
+  const className = props.className ?? 'menu';
+
+  const renderSubMenu = () => {
+    return selectedItem.items && (
+      <div className={`${className}__submenu-container ${className}__submenu-container--level-${level}`}>
+        <SubMenu {...props} items={selectedItem.items} prefix={[...prefix, selectedItem.key]} level={level + 1} />
+      </div>
+    );
+  };
+
+  return (
+    <div className={`${className} ${className}--level-${level}`}>
+      <ul className={`${className}__item-list ${className}__item-list--level-${level}`}>
+        {props.items.map(item => (
+          <li key={item.key} className={`${className}__item ${className}__item--level-${level}`}>
+            <div className={`${className}__item-content ${className}__item-content--level-${level}`} onClick={() => handleItemClicked(item)}>
+              {item.content}
+            </div>
+            {subMenuPlacement === 'within' && item === selectedItem && renderSubMenu()}
+          </li>
+        ))}
+      </ul>
+      {subMenuPlacement === 'after' && selectedItem && renderSubMenu()}
+    </div>
+  );
+}
+
+interface MenuProps {
+  className?: string;
+  items: MenuItem[];
+  selectedKeys?: string[];
+  subMenuPlacement?: 'within' | 'after';
+  onOutsideClicked?: () => void;
+  onItemSelected?: (keys: string[]) => void;
+}
+
+export const Menu: React.FC<MenuProps> = (props) => {
+  const ref = React.useRef(null);
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+
+  const handleItemSelected = (keys: string[]) => {
+    props.onItemSelected
+      ? props.onItemSelected(keys)
+      : setSelectedKeys(keys);
+  };
+
+  useOnClickOutside(ref, () => {
+    props.onOutsideClicked ? props.onOutsideClicked() : handleItemSelected([]);
+  });
+
+  const className = props.className ?? 'menu';
+
+  return (
+    <div className={`${className} ${className}__menu-container`} ref={ref}>
+      <SubMenu
+        className={props.className}
+        items={props.items}
+        selectedKeys={props.selectedKeys ?? selectedKeys}
+        onItemSelected={handleItemSelected}
+        subMenuPlacement={props.subMenuPlacement}
+      />
+    </div>
+  );
+}

src/ep.config.json

@@ -2,7 +2,7 @@
   "cortexApi": {
     "path": "/cortex",
     "scope": "vestri",
-    "pathForProxy": "http://localhost:9080",
+    "pathForProxy": "https://reference.epdemos.com",
     "reqTimeout": "30000"
   },
   "supportedLocales": [