diff --git a/frontend/src/components/RouteTab/index.tsx b/frontend/src/components/RouteTab/index.tsx new file mode 100644 index 0000000000..12ce2d2a70 --- /dev/null +++ b/frontend/src/components/RouteTab/index.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { Tabs, TabsProps } from 'antd'; + +const { TabPane } = Tabs; +import history from 'lib/history'; + +const RouteTab = ({ + routes, + activeKey, + onChangeHandler, + ...rest +}: RouteTabProps & TabsProps): JSX.Element => { + const onChange = (activeRoute: string) => { + onChangeHandler && onChangeHandler(); + + const selectedRoute = routes.find((e) => e.name === activeRoute); + + if (selectedRoute) { + history.push(selectedRoute.route); + } + }; + + return ( + + {routes.map( + ({ Component, name }): JSX.Element => ( + + + + ), + )} + + ); +}; + +interface RouteTabProps { + routes: { + name: string; + route: string; + Component: () => JSX.Element; + }[]; + activeKey: TabsProps['activeKey']; + onChangeHandler?: VoidFunction; +} + +export default RouteTab; diff --git a/frontend/src/container/EditAlertChannels/index.tsx b/frontend/src/container/EditAlertChannels/index.tsx index e947f65dd2..bd707ee2b3 100644 --- a/frontend/src/container/EditAlertChannels/index.tsx +++ b/frontend/src/container/EditAlertChannels/index.tsx @@ -9,17 +9,10 @@ import FormAlertChannels from 'container/FormAlertChannels'; import history from 'lib/history'; import { Store } from 'rc-field-form/lib/interface'; import React, { useCallback, useState } from 'react'; -import { connect } from 'react-redux'; import { useParams } from 'react-router'; -import { bindActionCreators } from 'redux'; -import { ThunkDispatch } from 'redux-thunk'; -import { ToggleSettingsTab } from 'store/actions'; -import AppActions from 'types/actions'; -import { SettingTab } from 'types/reducer/app'; const EditAlertChannels = ({ initialValue, - toggleSettingsTab, }: EditAlertChannelsProps): JSX.Element => { const [formInstance] = Form.useForm(); const [selectedConfig, setSelectedConfig] = useState>({ @@ -52,7 +45,6 @@ const EditAlertChannels = ({ message: 'Success', description: 'Channels Edited Successfully', }); - toggleSettingsTab('Alert Channels'); setTimeout(() => { history.replace(ROUTES.SETTINGS); @@ -100,18 +92,8 @@ const EditAlertChannels = ({ ); }; -interface DispatchProps { - toggleSettingsTab: (props: SettingTab) => void; -} - -const mapDispatchToProps = ( - dispatch: ThunkDispatch, -): DispatchProps => ({ - toggleSettingsTab: bindActionCreators(ToggleSettingsTab, dispatch), -}); - -interface EditAlertChannelsProps extends DispatchProps { +interface EditAlertChannelsProps { initialValue: Store; } -export default connect(null, mapDispatchToProps)(EditAlertChannels); +export default EditAlertChannels; diff --git a/frontend/src/container/SettingsWrapper/index.tsx b/frontend/src/container/SettingsWrapper/index.tsx deleted file mode 100644 index afe59fe7bd..0000000000 --- a/frontend/src/container/SettingsWrapper/index.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { Tabs } from 'antd'; -import ROUTES from 'constants/routes'; -import history from 'lib/history'; -import React, { useCallback } from 'react'; -import { connect, useSelector } from 'react-redux'; -import { bindActionCreators } from 'redux'; -import { ThunkDispatch } from 'redux-thunk'; -import { ToggleSettingsTab } from 'store/actions'; -import { AppState } from 'store/reducers'; -import AppActions from 'types/actions'; -import AppReducer, { SettingTab } from 'types/reducer/app'; -const { TabPane } = Tabs; - -const SettingsWrapper = ({ - AlertChannels, - General, - toggleSettingsTab, - defaultRoute, -}: SettingsWrapperProps): JSX.Element => { - const { settingsActiveTab } = useSelector( - (state) => state.app, - ); - - const onChangeHandler = useCallback( - (value: SettingTab) => { - toggleSettingsTab(value); - if (value === 'General') { - history.push(ROUTES.SETTINGS); - } - - if (value === 'Alert Channels') { - history.push(ROUTES.ALL_CHANNELS); - } - }, - [toggleSettingsTab], - ); - - return ( - onChangeHandler(value as SettingTab)} - activeKey={defaultRoute || settingsActiveTab} - > - - - - - - - - ); -}; - -interface DispatchProps { - toggleSettingsTab: (props: SettingTab) => void; -} - -const mapDispatchToProps = ( - dispatch: ThunkDispatch, -): DispatchProps => ({ - toggleSettingsTab: bindActionCreators(ToggleSettingsTab, dispatch), -}); - -interface SettingsWrapperProps extends DispatchProps { - General: () => JSX.Element; - AlertChannels: () => JSX.Element; - defaultRoute?: SettingTab; -} - -export default connect(null, mapDispatchToProps)(SettingsWrapper); diff --git a/frontend/src/pages/AlertChannelCreate/index.tsx b/frontend/src/pages/AlertChannelCreate/index.tsx index e7063085d2..226f2ca2c2 100644 --- a/frontend/src/pages/AlertChannelCreate/index.tsx +++ b/frontend/src/pages/AlertChannelCreate/index.tsx @@ -1,18 +1,32 @@ +import RouteTab from 'components/RouteTab'; +import ROUTES from 'constants/routes'; import CreateAlertChannels from 'container/CreateAlertChannels'; import GeneralSettings from 'container/GeneralSettings'; -import SettingsWrapper from 'container/SettingsWrapper'; +import history from 'lib/history'; import React from 'react'; const SettingsPage = (): JSX.Element => { - const AlertChannels = (): JSX.Element => { - return ; - }; + const pathName = history.location.pathname; return ( - { + return ; + }, + name: 'Alert Channels', + route: ROUTES.ALL_CHANNELS, + }, + ], + activeKey: + pathName === ROUTES.SETTINGS ? 'General Settings' : 'Alert Channels', }} /> ); diff --git a/frontend/src/pages/AllAlertChannels/index.tsx b/frontend/src/pages/AllAlertChannels/index.tsx index 716795500c..e557f4e861 100644 --- a/frontend/src/pages/AllAlertChannels/index.tsx +++ b/frontend/src/pages/AllAlertChannels/index.tsx @@ -1,16 +1,33 @@ import AlertChannels from 'container/AllAlertChannels'; import GeneralSettings from 'container/GeneralSettings'; -import SettingsWrapper from 'container/SettingsWrapper'; import React from 'react'; +import RouteTab from 'components/RouteTab'; +import ROUTES from 'constants/routes'; +import history from 'lib/history'; -const AllAlertChannels = (): JSX.Element => ( - -); +const AllAlertChannels = (): JSX.Element => { + const pathName = history.location.pathname; + + return ( + + ); +}; export default AllAlertChannels; diff --git a/frontend/src/pages/Settings/index.tsx b/frontend/src/pages/Settings/index.tsx index 3a8687c48a..c5310107f3 100644 --- a/frontend/src/pages/Settings/index.tsx +++ b/frontend/src/pages/Settings/index.tsx @@ -1,14 +1,30 @@ import AlertChannels from 'container/AllAlertChannels'; import GeneralSettings from 'container/GeneralSettings'; -import SettingsWrapper from 'container/SettingsWrapper'; import React from 'react'; +import RouteTab from 'components/RouteTab'; +import ROUTES from 'constants/routes'; +import history from 'lib/history'; const SettingsPage = (): JSX.Element => { + const pathName = history.location.pathname; + return ( - ); diff --git a/frontend/src/store/actions/app/index.ts b/frontend/src/store/actions/app/index.ts index e6c98da1d9..7a067e8542 100644 --- a/frontend/src/store/actions/app/index.ts +++ b/frontend/src/store/actions/app/index.ts @@ -1,3 +1,2 @@ export * from './toggleDarkMode'; -export * from './toggleSettingsTab'; export * from './userLoggedIn'; diff --git a/frontend/src/store/actions/app/toggleSettingsTab.ts b/frontend/src/store/actions/app/toggleSettingsTab.ts deleted file mode 100644 index d60ee26afe..0000000000 --- a/frontend/src/store/actions/app/toggleSettingsTab.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Dispatch } from 'redux'; -import AppActions from 'types/actions'; -import { SettingTab } from 'types/reducer/app'; - -export const ToggleSettingsTab = ( - props: SettingTab, -): ((dispatch: Dispatch) => void) => { - return (dispatch: Dispatch): void => { - dispatch({ - type: 'TOGGLE_SETTINGS_TABS', - payload: { - activeTab: props, - }, - }); - }; -}; diff --git a/frontend/src/store/reducers/app.ts b/frontend/src/store/reducers/app.ts index d0ab0fef79..8a786919b9 100644 --- a/frontend/src/store/reducers/app.ts +++ b/frontend/src/store/reducers/app.ts @@ -1,10 +1,5 @@ import { IS_LOGGED_IN } from 'constants/auth'; -import { - AppAction, - LOGGED_IN, - SWITCH_DARK_MODE, - TOGGLE_SETTINGS_TABS, -} from 'types/actions/app'; +import { AppAction, LOGGED_IN, SWITCH_DARK_MODE } from 'types/actions/app'; import getTheme from 'lib/theme/getTheme'; import InitialValueTypes from 'types/reducer/app'; import getLocalStorageKey from 'api/browser/localstorage/get'; @@ -12,7 +7,6 @@ import getLocalStorageKey from 'api/browser/localstorage/get'; const InitialValue: InitialValueTypes = { isDarkMode: getTheme() === 'darkMode' ? true : false, isLoggedIn: getLocalStorageKey(IS_LOGGED_IN) === 'yes', - settingsActiveTab: 'General', }; const appReducer = ( @@ -34,13 +28,6 @@ const appReducer = ( }; } - case TOGGLE_SETTINGS_TABS: { - return { - ...state, - settingsActiveTab: action.payload.activeTab, - }; - } - default: return state; } diff --git a/frontend/src/types/actions/app.ts b/frontend/src/types/actions/app.ts index 968ee5f89f..4a8495aafe 100644 --- a/frontend/src/types/actions/app.ts +++ b/frontend/src/types/actions/app.ts @@ -1,8 +1,5 @@ -import { SettingTab } from 'types/reducer/app'; - export const SWITCH_DARK_MODE = 'SWITCH_DARK_MODE'; export const LOGGED_IN = 'LOGGED_IN'; -export const TOGGLE_SETTINGS_TABS = 'TOGGLE_SETTINGS_TABS'; export interface SwitchDarkMode { type: typeof SWITCH_DARK_MODE; @@ -12,11 +9,4 @@ export interface LoggedInUser { type: typeof LOGGED_IN; } -export interface ToggleSettingsTab { - type: typeof TOGGLE_SETTINGS_TABS; - payload: { - activeTab: SettingTab; - }; -} - -export type AppAction = SwitchDarkMode | LoggedInUser | ToggleSettingsTab; +export type AppAction = SwitchDarkMode | LoggedInUser; diff --git a/frontend/src/types/reducer/app.ts b/frontend/src/types/reducer/app.ts index d0e82f0153..2ec974c399 100644 --- a/frontend/src/types/reducer/app.ts +++ b/frontend/src/types/reducer/app.ts @@ -1,6 +1,4 @@ -export type SettingTab = 'General' | 'Alert Channels'; export default interface AppReducer { isDarkMode: boolean; isLoggedIn: boolean; - settingsActiveTab: SettingTab; }