From 59f175122ee057186a6adc257bddbc259afe872a Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Tue, 23 Jun 2020 15:25:48 -0400
Subject: [PATCH] chore: refactored navitem into component and fixes

---
 src/components/NavigationItems.js          | 204 ++++++++++-----------
 src/components/NavigationItems.module.scss |   8 -
 2 files changed, 102 insertions(+), 110 deletions(-)

diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
index 9e44dce9f..4003b9edb 100644
--- a/src/components/NavigationItems.js
+++ b/src/components/NavigationItems.js
@@ -23,15 +23,6 @@ const NavigationItems = ({
   searchTerm,
   depthLevel = 0,
 }) => {
-  const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
-  const isHomePage = crumbs.length === 0 && depthLevel === 0;
-  const iconLibrary = {
-    'Collect data': 'collectData',
-    'Build apps': 'buildApps',
-    'Automate workflows': 'automation',
-    'Explore docs': 'developerDocs',
-  };
-
   const groupedPages = pages.reduce((groups, page) => {
     const { group = '' } = page;
 
@@ -52,103 +43,112 @@ const NavigationItems = ({
         {showGroup && (
           <li className={cx(styles.navLink, styles.groupName)}>{group}</li>
         )}
-        {pages.map((page) => {
-          // eslint-disable-next-line react-hooks/rules-of-hooks
-          const [isExpanded, setIsExpanded] = useState(
-            isHomePage || crumbs.includes(page.displayName)
-          );
+        {pages.map((page) => (
+          <NavItem
+            page={page}
+            depthLevel={depthLevel}
+            searchTerm={searchTerm}
+            filteredPageNames={filteredPageNames}
+          />
+        ))}
+      </Fragment>
+    );
+  });
+};
 
-          const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
-          const headerIcon = depthLevel === 0 && (
-            <NewRelicIcon
-              className={styles.headerIcon}
-              name={iconLibrary[page.displayName]}
-            />
-          );
-          const display = filteredPageNames
-            ? getHighlightedText(page.displayName, searchTerm)
-            : page.displayName;
+const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
+  const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
+  const isHomePage = crumbs.length === 0 && depthLevel === 0;
+
+  const [isExpanded, setIsExpanded] = useState(
+    isHomePage || crumbs.includes(page.displayName)
+  );
+
+  const iconLibrary = {
+    'Collect data': 'collectData',
+    'Build apps': 'buildApps',
+    'Automate workflows': 'automation',
+    'Explore docs': 'developerDocs',
+  };
+  const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
+  const headerIcon = depthLevel === 0 && (
+    <NewRelicIcon
+      className={styles.headerIcon}
+      name={iconLibrary[page.displayName]}
+    />
+  );
+  const display = filteredPageNames
+    ? getHighlightedText(page.displayName, searchTerm)
+    : page.displayName;
+
+  if (filteredPageNames && !filteredPageNames.includes(page.displayName))
+    return null;
 
-          const navItemClasses = cx(
+  return (
+    <li
+      key={page.displayName}
+      data-depth={depthLevel}
+      className={cx(
+        { [styles.isCurrentPage]: isCurrentPage },
+        { [styles.filterOn]: filteredPageNames }
+      )}
+    >
+      {page.url ? (
+        <Link
+          className={cx(
             { [styles.isCurrentPage]: isCurrentPage },
-            {
-              [styles.notMatchesFilter]:
-                filteredPageNames &&
-                !filteredPageNames.includes(page.displayName),
-            },
-            {
-              [styles.matchesFilter]:
-                filteredPageNames &&
-                filteredPageNames.includes(page.displayName),
-            },
-            { [styles.filterOn]: filteredPageNames }
-          );
-          return (
-            <li
-              key={page.displayName}
-              data-depth={depthLevel}
-              className={navItemClasses}
-            >
-              {page.url ? (
-                <Link
-                  className={cx(
-                    { [styles.isCurrentPage]: isCurrentPage },
-                    styles.navLink
-                  )}
-                  to={page.url}
-                >
-                  <span>
-                    {headerIcon}
-                    {display}
-                  </span>
-                  {isCurrentPage && (
-                    <FeatherIcon
-                      className={styles.currentPageIndicator}
-                      name="chevron-right"
-                    />
-                  )}
-                </Link>
-              ) : (
-                <button
-                  type="button"
-                  className={styles.navLink}
-                  onClick={() => setIsExpanded(!isExpanded)}
-                  onKeyPress={() => setIsExpanded(!isExpanded)}
-                  tabIndex={0}
-                >
-                  {depthLevel > 0 && (
-                    <FeatherIcon
-                      className={cx(
-                        { [styles.isExpanded]: isExpanded },
-                        styles.nestedChevron
-                      )}
-                      name="chevron-right"
-                    />
-                  )}
-                  {headerIcon}
-                  {display}
-                </button>
-              )}
-              {page.children && (
-                <ul
-                  className={cx(styles.nestedNav, {
-                    [styles.isExpanded]: isExpanded,
-                  })}
-                >
-                  <NavigationItems
-                    pages={page.children}
-                    filteredPageNames={filteredPageNames}
-                    depthLevel={depthLevel + 1}
-                    searchTerm={searchTerm}
-                  />
-                </ul>
+            styles.navLink
+          )}
+          to={page.url}
+        >
+          <span>
+            {headerIcon}
+            {display}
+          </span>
+          {isCurrentPage && (
+            <FeatherIcon
+              className={styles.currentPageIndicator}
+              name="chevron-right"
+            />
+          )}
+        </Link>
+      ) : (
+        <button
+          type="button"
+          className={styles.navLink}
+          onClick={() => setIsExpanded(!isExpanded)}
+          onKeyPress={() => setIsExpanded(!isExpanded)}
+          tabIndex={0}
+        >
+          {depthLevel > 0 && (
+            <FeatherIcon
+              className={cx(
+                { [styles.isExpanded]: isExpanded },
+                styles.nestedChevron
               )}
-            </li>
-          );
-        })}
-      </Fragment>
-    );
-  });
+              name="chevron-right"
+            />
+          )}
+          {headerIcon}
+          {display}
+        </button>
+      )}
+      {page.children && (
+        <ul
+          className={cx(styles.nestedNav, {
+            [styles.isExpanded]: isExpanded,
+          })}
+        >
+          <NavigationItems
+            pages={page.children}
+            filteredPageNames={filteredPageNames}
+            depthLevel={depthLevel + 1}
+            searchTerm={searchTerm}
+          />
+        </ul>
+      )}
+    </li>
+  );
 };
 
 export default NavigationItems;
diff --git a/src/components/NavigationItems.module.scss b/src/components/NavigationItems.module.scss
index 59a7c120b..516dfb096 100644
--- a/src/components/NavigationItems.module.scss
+++ b/src/components/NavigationItems.module.scss
@@ -79,14 +79,6 @@ button.navLink {
   font-weight: bold;
 }
 
-.notMatchesFilter {
-  display: none;
-}
-
-.matchesFilter {
-  display: block;
-}
-
 .filterOn {
   ul {
     display: block;