From 9114c16a97e7808c648494db7bf284adee617d6f Mon Sep 17 00:00:00 2001 From: Jake McDermott Date: Fri, 14 Dec 2018 03:39:33 -0500 Subject: [PATCH] refactor navitem factory function to wrapped router-hoc nav components --- src/App.jsx | 327 ++++++++++++++++--------------- src/components/NavExpandable.jsx | 44 +++++ src/components/NavItem.jsx | 7 + 3 files changed, 217 insertions(+), 161 deletions(-) create mode 100644 src/components/NavExpandable.jsx create mode 100644 src/components/NavItem.jsx diff --git a/src/App.jsx b/src/App.jsx index 69e300dd75..53cc835047 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -11,9 +11,7 @@ import { BackgroundImage, BackgroundImageSrc, Nav, - NavExpandable, NavList, - NavItem, Page, PageHeader, PageSidebar, @@ -30,6 +28,8 @@ import HelpDropdown from './components/HelpDropdown'; import LogoutButton from './components/LogoutButton'; import TowerLogo from './components/TowerLogo'; import ConditionalRedirect from './components/ConditionalRedirect'; +import NavExpandable from './components/NavExpandable'; +import NavItem from './components/NavItem'; import Applications from './pages/Applications'; import Credentials from './pages/Credentials'; @@ -67,41 +67,6 @@ const language = (navigator.languages && navigator.languages[0]) const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0]; -const SideNavItems = ({ items, history }) => { - const currentPath = history.location.pathname.split('/')[1]; - let activeGroup; - if (currentPath !== '') { - [{ groupName: activeGroup }] = items - .map(({ groupName, routes }) => ({ - groupName, - paths: routes.map(({ path }) => path) - })) - .filter(({ paths }) => paths.indexOf(currentPath) > -1); - } else { - activeGroup = 'views'; - } - - return (items.map(({ title, groupName, routes }) => ( - - {routes.map(({ path, title: itemTitle }) => ( - - {itemTitle} - - ))} - - ))); -}; class App extends React.Component { constructor (props) { @@ -160,7 +125,12 @@ class App extends React.Component { }} /> - api.isAuthenticated()} redirectPath="/" path="/login" component={() => } /> + api.isAuthenticated()} + redirectPath="/" + path="/login" + component={() => } + /> ( )} diff --git a/src/components/NavExpandable.jsx b/src/components/NavExpandable.jsx new file mode 100644 index 0000000000..b6cf0c7f0e --- /dev/null +++ b/src/components/NavExpandable.jsx @@ -0,0 +1,44 @@ +import React, { Component } from 'react'; +import { + withRouter +} from 'react-router-dom'; +import { + NavExpandable, + NavItem, +} from '@patternfly/react-core'; + +class NavExpandableWrapper extends Component { + constructor (props) { + super(props); + // introspect to get any child 'NavItem' components + const { children } = this.props; + const navItems = children.filter(({ type }) => type.componentType === NavItem.displayName); + + // Extract a list of 'to' params from the nav items and store it for later. This will create + // an array of the url paths associated with any child NavItem components. + this.navItemPaths = navItems.map(item => item.props.to.replace('/#', '')); + } + + isActiveGroup = () => { + const { history } = this.props; + + return this.navItemPaths.some(path => history.location.pathname.includes(path)); + }; + + render () { + const { children, staticContext, ...rest } = this.props; + const isActive = this.isActiveGroup(); + + return ( + + { children } + + ); + } +} + +export default withRouter(NavExpandableWrapper); diff --git a/src/components/NavItem.jsx b/src/components/NavItem.jsx new file mode 100644 index 0000000000..5610b09b4c --- /dev/null +++ b/src/components/NavItem.jsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { withRouter } from 'react-router-dom'; +import { NavItem } from '@patternfly/react-core'; + +export default withRouter(({ history, to, staticContext, ...props }) => ( + +));