apply CustomNavigation

src/client/js/components/Admin/Notification/NotificationSetting.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import loggerFactory from '@alias/logger';
@@ -10,13 +10,17 @@ import { withLoadingSppiner } from '../../SuspenseUtils';
 
 import AdminNotificationContainer from '../../../services/AdminNotificationContainer';
 
-import NotificationSettingContents from './NotificationSettingContents';
+import CustomNavigation from '../../CustomNavigation';
+
+import SlackAppConfiguration from './SlackAppConfiguration';
+import UserTriggerNotification from './UserTriggerNotification';
+import GlobalNotification from './GlobalNotification';
 
 const logger = loggerFactory('growi:NotificationSetting');
 
 let retrieveErrors = null;
 function NotificationSetting(props) {
-  const { adminNotificationContainer } = props;
+  const { adminNotificationContainer, t } = props;
   if (adminNotificationContainer.state.webhookUrl === adminNotificationContainer.dummyWebhookUrl) {
     throw (async() => {
       try {
@@ -36,7 +40,30 @@ function NotificationSetting(props) {
     throw new Error(`${retrieveErrors.length} errors occured`);
   }
 
-  return <NotificationSettingContents />;
+  const navTabMapping = useMemo(() => {
+    return {
+      slack_configuration: {
+        Icon: () => <i className="icon-settings" />,
+        Content: SlackAppConfiguration,
+        i18n: 'Slack configuration',
+        index: 0,
+      },
+      user_trigger_notification: {
+        Icon: () => <i className="icon-settings" />,
+        Content: UserTriggerNotification,
+        i18n: 'User trigger notification',
+        index: 1,
+      },
+      global_notification: {
+        Icon: () => <i className="icon-settings" />,
+        Content: GlobalNotification,
+        i18n: 'Global notification',
+        index: 2,
+      },
+    };
+  }, []);
+
+  return <CustomNavigation navTabMapping={navTabMapping} />;
 }
 
 const NotificationSettingWithUnstatedContainer = withUnstatedContainers(withLoadingSppiner(NotificationSetting), [AdminNotificationContainer]);

src/client/js/components/Admin/Notification/NotificationSettingContents.jsx

@@ -1,73 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-import {
-  TabContent, TabPane, Nav, NavItem, NavLink,
-} from 'reactstrap';
-
-import SlackAppConfiguration from './SlackAppConfiguration';
-import UserTriggerNotification from './UserTriggerNotification';
-import GlobalNotification from './GlobalNotification';
-
-
-function NotificationSettingContents(props) {
-
-  const [activeTab, setActiveTab] = useState('slack-configuration');
-  const [activeComponents, setActiveComponents] = useState(new Set(['slack-configuration']));
-
-  const toggleActiveTab = (activeTab) => {
-    setActiveTab(activeTab);
-    setActiveComponents(activeComponents.add(activeTab));
-  };
-
-  return (
-    <React.Fragment>
-      <Nav tabs>
-        <NavItem>
-          <NavLink
-            className={`${activeTab === 'slack-configuration' && 'active'} `}
-            onClick={() => { toggleActiveTab('slack-configuration') }}
-            href="#slack-configuration"
-          >
-            <i className="icon-settings"></i> Slack configuration
-          </NavLink>
-        </NavItem>
-        <NavItem>
-          <NavLink
-            className={`${activeTab === 'user-trigger-notification' && 'active'} `}
-            onClick={() => { toggleActiveTab('user-trigger-notification') }}
-            href="#user-trigger-notification"
-          >
-            <i className="icon-settings"></i> User trigger notification
-          </NavLink>
-        </NavItem>
-        <NavItem>
-          <NavLink
-            className={`${activeTab === 'global-notification' && 'active'} `}
-            onClick={() => { toggleActiveTab('global-notification') }}
-            href="#global-notification"
-          >
-            <i className="icon-settings"></i> Global notification
-          </NavLink>
-        </NavItem>
-      </Nav>
-      <TabContent activeTab={activeTab}>
-        <TabPane tabId="slack-configuration">
-          {activeComponents.has('slack-configuration') && <SlackAppConfiguration />}
-        </TabPane>
-        <TabPane tabId="user-trigger-notification">
-          {activeComponents.has('user-trigger-notification') && <UserTriggerNotification />}
-        </TabPane>
-        <TabPane tabId="global-notification">
-          {activeComponents.has('global-notification') && <GlobalNotification />}
-        </TabPane>
-      </TabContent>
-    </React.Fragment>
-  );
-}
-
-NotificationSettingContents.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-};
-
-export default withTranslation()(NotificationSettingContents);