simplify with customNavigation component

src/client/js/components/Me/PersonalSettings.jsx

@@ -1,5 +1,5 @@
 
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import CustomNavigation from '../CustomNavigation';
@@ -7,41 +7,77 @@ import UserSettings from './UserSettings';
 import PasswordSettings from './PasswordSettings';
 import ExternalAccountLinkedMe from './ExternalAccountLinkedMe';
 import ApiSettings from './ApiSettings';
-import PageListIcon from '../Icons/PageListIcon';
 
 class PersonalSettings extends React.Component {
 
+
   render() {
     const { t } = this.props;
 
+    // const Icons = [
+    //   <i className="icon-fw icon-user"></i>,
+    //   <i className="icon-fw icon-share-alt"></i>,
+    //   <i className="icon-fw icon-lock"></i>,
+    //   <i className="icon-fw icon-paper-plane"></i>,
+    // ];
+    // console.log(`Icons = ${Icons}`);
+
+    // const setIcons = () => {
+    //   Icons.map((icon) => {
+    //     console.log(icon);
+    //     return (
+    //       <>
+    //         { icon }
+    //       </>
+    //     );
+    //   });
+    // };
+    // const setIcons = () => {
+    //   Icons.map(icon => icon);
+    // };
 
-    const UserSettingsIcon = () => {
+    const setIcon1 = () => {
       return (
         <i className="icon-fw icon-user"></i>
       );
     };
+    const setIcon2 = () => {
+      return (
+        <i className="icon-fw icon-share-alt"></i>
+      );
+    };
+    const setIcon3 = () => {
+      return (
+        <i className="icon-fw icon-lock"></i>
+      );
+    };
+    const setIcon4 = () => {
+      return (
+        <i className="icon-fw icon-paper-plan"></i>
+      );
+    };
 
     const navTabMapping = {
       user_infomation: {
-        Icon: UserSettingsIcon,
+        Icon: setIcon1,
         Content: UserSettings,
         i18n: t('User Information'),
         index: 0,
       },
       external_accounts: {
-        Icon: PageListIcon,
+        Icon: setIcon2,
         Content: ExternalAccountLinkedMe,
         i18n: t('admin:user_management.external_accounts'),
         index: 1,
       },
       password_settings: {
-        Icon: PageListIcon,
+        Icon: setIcon3,
         Content: PasswordSettings,
         i18n: t('Password Settings'),
         index: 2,
       },
       api_settings: {
-        Icon: PageListIcon,
+        Icon: setIcon4,
         Content: ApiSettings,
         i18n: t('API Settings'),
         index: 3,
@@ -50,47 +86,9 @@ class PersonalSettings extends React.Component {
 
 
     return (
-      <Fragment>
+      <>
         <CustomNavigation navTabMapping={navTabMapping} />
-        {/* <div className="personal-settings">
-          <ul className="nav nav-tabs" role="tablist">
-            <li className="nav-item">
-              <a className="nav-link active" href="#user-settings" data-toggle="tab" role="tab">
-                <i className="icon-fw icon-user"></i>{ t('User Information') }
-              </a>
-            </li>
-            <li className="nav-item">
-              <a className="nav-link" href="#external-accounts" data-toggle="tab" role="tab">
-                <i className="icon-fw icon-share-alt"></i>{ t('admin:user_management.external_accounts') }
-              </a>
-            </li>
-            <li className="nav-item">
-              <a className="nav-link" href="#password-settings" data-toggle="tab" role="tab">
-                <i className="icon-fw icon-lock"></i>{ t('Password Settings') }
-              </a>
-            </li>
-            <li className="nav-item">
-              <a className="nav-link" href="#apiToken" data-toggle="tab" role="tab">
-                <i className="icon-fw icon-paper-plane"></i>{ t('API Settings') }
-              </a>
-            </li>
-          </ul>
-          <div className="tab-content p-t-10">
-            <div id="user-settings" className="tab-pane active" role="tabpanel">
-              <UserSettings />
-            </div>
-            <div id="external-accounts" className="tab-pane" role="tabpanel">
-              <ExternalAccountLinkedMe />
-            </div>
-            <div id="password-settings" className="tab-pane" role="tabpanel">
-              <PasswordSettings />
-            </div>
-            <div id="apiToken" className="tab-pane" role="tabpanel">
-              <ApiSettings />
-            </div>
-          </div>
-        </div> */}
-      </Fragment>
+      </>
     );
   }