EPMRPP-76490 || code review fixes - 2

reportportal · Apr 15, 2022 · 11d8331 · 11d8331
1 parent 3a2d185
commit 11d8331
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 31 deletions.
diff --git a/...rojectSettingsPageContainer/menu/index.js → ...ectSettingsPageContainer/navMenu/index.js b/...rojectSettingsPageContainer/menu/index.js → ...ectSettingsPageContainer/navMenu/index.js
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { Menu } from './menu';
+export { NavMenu } from './navMenu';
diff --git a/...rojectSettingsPageContainer/menu/menu.jsx → ...SettingsPageContainer/navMenu/navMenu.jsx b/...rojectSettingsPageContainer/menu/menu.jsx → ...SettingsPageContainer/navMenu/navMenu.jsx
@@ -19,32 +19,32 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames/bind';
 import { useTracking } from 'react-tracking';
 import { NavLink } from 'components/main/navLink';
-import styles from './menu.scss';
+import styles from './navMenu.scss';
 
 const cx = classNames.bind(styles);
 
-export const Menu = ({ items }) => {
+export const NavMenu = ({ items }) => {
   const { trackEvent } = useTracking();
   const createTrackingFunction = (eventInfo) => (eventInfo ? () => trackEvent(eventInfo) : null);
 
   return (
     <ul className={cx('menu')}>
       {items &&
-        Object.keys(items).map((item) => (
+        Object.keys(items).map((key) => (
           <NavLink
-            to={items[item].link}
-            key={item}
-            onClick={createTrackingFunction(items[item].eventInfo)}
+            to={items[key].link}
+            key={key}
+            onClick={createTrackingFunction(items[key].eventInfo)}
             className={cx('item')}
             activeClassName={cx('active')}
           >
-            {items[item].name}
+            {items[key].name}
           </NavLink>
         ))}
     </ul>
   );
 };
-Menu.propTypes = {
+NavMenu.propTypes = {
   items: PropTypes.objectOf(
     PropTypes.shape({
       name: PropTypes.string,

diff --git a/...ojectSettingsPageContainer/menu/menu.scss → ...ettingsPageContainer/navMenu/navMenu.scss b/...ojectSettingsPageContainer/menu/menu.scss → ...ettingsPageContainer/navMenu/navMenu.scss
diff --git a/app/src/pages/inside/projectSettingsPageContainer/navigation/navigation.jsx b/app/src/pages/inside/projectSettingsPageContainer/navigation/navigation.jsx
@@ -18,7 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames/bind';
 import { ScrollWrapper } from 'components/main/scrollWrapper';
-import { Menu } from '../menu';
+import { NavMenu } from '../navMenu';
 import styles from './navigation.scss';
 
 const cx = classNames.bind(styles);
@@ -27,7 +27,7 @@ export const Navigation = ({ items, title }) => {
   return (
     <ScrollWrapper>
       {title && <div className={cx('header')}>{title}</div>}
-      <Menu items={items} />
+      <NavMenu items={items} />
     </ScrollWrapper>
   );
 };

diff --git a/app/src/pages/inside/projectSettingsPageContainer/projectSettingsPageContainer.jsx b/app/src/pages/inside/projectSettingsPageContainer/projectSettingsPageContainer.jsx
@@ -23,7 +23,7 @@ import {
   projectIdSelector,
   settingsTabSelector,
 } from 'controllers/pages';
-import { ProjectSettingsLayout } from 'layouts/projectSettingsLayout';
+import { SettingsLayout } from 'layouts/settingsLayout';
 import {
   ANALYSIS,
   DEFECT,
@@ -69,7 +69,7 @@ export const ProjectSettingsPageContainer = () => {
     [projectId],
   );
 
-  const createExtensionTabs = useCallback(() => {
+  const extensionsConfig = useMemo(() => {
     return extensions.reduce(
       (acc, extension) => ({
         ...acc,
@@ -85,8 +85,7 @@ export const ProjectSettingsPageContainer = () => {
     );
   }, [createTabLink, extensions]);
 
-  const createItemsConfig = useCallback(() => {
-    const extensionTabs = createExtensionTabs();
+  const config = useMemo(() => {
     const tabsConfig = {
       [GENERAL]: {
         name: formatMessage(messages.general),
@@ -140,38 +139,36 @@ export const ProjectSettingsPageContainer = () => {
     if (!canSeeDemoData(accountRole, userRole)) {
       delete tabsConfig[DEMO_DATA];
     }
-    Object.keys(extensionTabs).forEach((tab) => {
+    Object.keys(extensionsConfig).forEach((tab) => {
       if (tabsConfig[tab]) {
-        tabsConfig[tab].component = extensionTabs[tab].component;
+        tabsConfig[tab].component = extensionsConfig[tab].component;
 
-        delete extensionTabs[tab];
+        delete extensionsConfig[tab];
       }
     });
-    return { ...tabsConfig, ...extensionTabs };
-  }, [accountRole, createExtensionTabs, createTabLink, formatMessage, userRole]);
+    return { ...tabsConfig, ...extensionsConfig };
+  }, [accountRole, extensionsConfig, createTabLink, userRole]);
 
   const navigation = useMemo(() => {
-    const itemsConfig = createItemsConfig();
     const title = <FormattedMessage id="SettingsPage.title" defaultMessage="Project Settings" />;
-    return <Navigation items={itemsConfig} title={title} />;
-  }, [createItemsConfig]);
+    return <Navigation items={config} title={title} />;
+  }, [config]);
 
   const content = useMemo(() => {
-    const itemsConfig = createItemsConfig();
-    if (!activeTab || !itemsConfig[activeTab]) {
-      const firstItemName = Object.keys(itemsConfig)[0];
-      dispatch(itemsConfig[firstItemName].link);
+    if (!activeTab || !config[activeTab]) {
+      const firstItemName = Object.keys(config)[0];
+      dispatch(config[firstItemName].link);
       return null;
     }
-    return itemsConfig[activeTab].component;
-  }, [activeTab, createItemsConfig, dispatch]);
+    return config[activeTab].component;
+  }, [activeTab, config]);
 
   return (
-    <ProjectSettingsLayout navigation={navigation}>
+    <SettingsLayout navigation={navigation}>
       <ScrollWrapper>
         <div className={cx('header')}>{null}</div>
         <div className={cx('content')}>{content}</div>
       </ScrollWrapper>
-    </ProjectSettingsLayout>
+    </SettingsLayout>
   );
 };