refactor(appmenu): move the duplicate logic into hook

Author: OggyKUN

src/components/appMenu/CircularMenu/CircularMenu.tsx

@@ -1,10 +1,8 @@
-import { useState, useEffect } from 'react';
 import getMenuItems from 'src/utils/appsMenu';
 import styles from './CircularMenu.module.scss';
-import { MenuItem } from 'src/types/menu';
-import { useLocation } from 'react-router-dom';
 import _ from 'lodash';
 import CircularMenuItem from './CircularMenuItem';
+import { useActiveMenuItem } from 'src/hooks/useActiveMenuItem';
 
 declare module 'react' {
   interface CSSProperties {
@@ -15,43 +13,18 @@ declare module 'react' {
 }
 
 function CircularMenu({ circleSize }) {
-  const [activeItem, setActiveItem] = useState<MenuItem | null>(null);
   const chunkSize = 7;
   const linkChunks = _.chunk(getMenuItems(), chunkSize);
-  const location = useLocation();
+
+  const { isActiveItem, activeItem } = useActiveMenuItem(getMenuItems());
 
   const calculateDiameter = (index, circleSize) => {
     const menuCircleDiameter = circleSize / 2 + 45 * (index + 1) - 10;
     const nextLevelMenuAngle = index === 1 ? -28 : 0; // decreases the angle of second menu layer
-    const menuItemsAngle = index === 1 ? 16 : 23; // angle in wich menu items spreads around brain
+    const menuItemsAngle = index === 1 ? 16 : 23; // angle in which menu items spread around the brain
     return { menuCircleDiameter, nextLevelMenuAngle, menuItemsAngle };
   };
 
-  const isActiveItem = (item: MenuItem) => {
-    if (location.pathname === item.to) {
-      return true;
-    }
-    if (
-      item.to === '/robot' &&
-      (location.pathname.includes('@') || location.pathname.includes('neuron/'))
-    ) {
-      return true;
-    }
-    if (item.to === '/senate' && location.pathname.startsWith('/senate/')) {
-      return true;
-    }
-    return item.subItems?.some((subItem) => location.pathname === subItem.to);
-  };
-
-  useEffect(() => {
-    const activeMenuItem = getMenuItems().find((item) => isActiveItem(item));
-    setActiveItem(activeMenuItem || null);
-  }, [location]);
-
-  const handleItemClick = (item: MenuItem) => {
-    setActiveItem(item);
-  };
-
   return (
     <div>
       {linkChunks.map((chunk, index) => {
@@ -77,7 +50,7 @@ function CircularMenu({ circleSize }) {
                   <li key={index}>
                     <CircularMenuItem
                       item={item}
-                      onClick={() => handleItemClick(item)}
+                      onClick={() => isActiveItem(item)}
                       selected={isSelected}
                     />
                   </li>

src/components/appMenu/CircularMenu/CircularMenuItem.module.scss

@@ -1,6 +1,6 @@
 @import '../../../style/mixins.scss';
 
-.menu_item {
+.menuItem {
   box-shadow: 0px 0px 13px #ffffff54;
   opacity: 1;
   background-color: #101010;
@@ -13,14 +13,14 @@
   pointer-events: auto;
 }
 
-.menu_item.active {
+.menuItem.active {
   border: 1px solid #ffffff6b;
   box-shadow: 0px 0px 8px #ffffff98 inset, 0px 0px 13px #ffffff98;
   width: 100%;
   height: 100%;
 }
 
-.menu_item:hover {
+.menuItem:hover {
   border: 1px solid #4ed6ae;
   box-shadow: 0px 0px 8px #4ed6ae inset, 0px 0px 13px #4ed6ae;
 }

src/components/appMenu/CircularMenu/CircularMenuItem.tsx

@@ -14,7 +14,7 @@ function CircularMenuItem({ item, onClick, selected }: Props) {
   const isExternal = item.to.startsWith('http');
 
   return (
-    <div className={cx(styles.menu_item, { [styles.active]: selected })}>
+    <div className={cx(styles.menuItem, { [styles.active]: selected })}>
       <AdviserHoverWrapper adviserContent={item.name}>
         <NavLink
           to={item.to}

src/components/appMenu/MobileMenu/MobileMenu.tsx

@@ -1,39 +1,18 @@
 import { useState, useRef } from 'react';
-import { useLocation, NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import getMenuItems from 'src/utils/appsMenu';
 import styles from './MobileMenu.module.scss';
-import { MenuItem } from 'src/types/menu';
 import cx from 'classnames';
 import useOnClickOutside from 'src/hooks/useOnClickOutside';
+import { useActiveMenuItem } from 'src/hooks/useActiveMenuItem';
 
 const MobileMenu = () => {
   const [isOpen, setIsOpen] = useState(false);
-  const location = useLocation();
   const menuRef = useRef<HTMLDivElement>(null);
 
   const toggleMenu = () => setIsOpen(!isOpen);
 
-  const isActiveItem = (item: MenuItem) => {
-    if (location.pathname === item.to) {
-      return true;
-    }
-    if (
-      item.to === '/robot' &&
-      (location.pathname.includes('@') || location.pathname.includes('neuron/'))
-    ) {
-      return true;
-    }
-    if (item.to === '/senate' && location.pathname.startsWith('/senate/')) {
-      return true;
-    }
-    return item.subItems?.some((subItem) => location.pathname === subItem.to);
-  };
-
-  const getActiveItem = () => {
-    return getMenuItems().find((item) => isActiveItem(item)) || null;
-  };
-
-  const activeItem = getActiveItem();
+  const { isActiveItem, activeItem } = useActiveMenuItem(getMenuItems());
 
   useOnClickOutside(menuRef, () => setIsOpen(false));
 

src/hooks/useActiveMenuItem.ts

@@ -0,0 +1,24 @@
+import { MenuItem } from 'src/types/menu';
+import { useLocation } from 'react-router-dom';
+
+export const useActiveMenuItem = (menuItems: MenuItem[]) => {
+  const location = useLocation();
+  const isActiveItem = (item: MenuItem) => {
+    if (location.pathname === item.to) {
+      return true;
+    }
+    if (
+      item.to === '/robot' &&
+      (location.pathname.includes('@') || location.pathname.includes('neuron/'))
+    ) {
+      return true;
+    }
+    if (item.to === '/senate' && location.pathname.startsWith('/senate/')) {
+      return true;
+    }
+    return item.subItems?.some((subItem) => location.pathname === subItem.to);
+  };
+
+  const activeItem = menuItems.find((item) => isActiveItem(item)) || null;
+  return { isActiveItem, activeItem };
+};