toggle tabs is updated

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 (
+		<Tabs
+			onChange={onChange}
+			destroyInactiveTabPane
+			activeKey={activeKey}
+			{...rest}
+		>
+			{routes.map(
+				({ Component, name }): JSX.Element => (
+					<TabPane tab={name} key={name}>
+						<Component />
+					</TabPane>
+				),
+			)}
+		</Tabs>
+	);
+};
+
+interface RouteTabProps {
+	routes: {
+		name: string;
+		route: string;
+		Component: () => JSX.Element;
+	}[];
+	activeKey: TabsProps['activeKey'];
+	onChangeHandler?: VoidFunction;
+}
+
+export default RouteTab;

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<Partial<SlackChannel>>({
@@ -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 {
+interface EditAlertChannelsProps {
-	toggleSettingsTab: (props: SettingTab) => void;
-}
-
-const mapDispatchToProps = (
-	dispatch: ThunkDispatch<unknown, unknown, AppActions>,
-): DispatchProps => ({
-	toggleSettingsTab: bindActionCreators(ToggleSettingsTab, dispatch),
-});
-
-interface EditAlertChannelsProps extends DispatchProps {
 	initialValue: Store;
 }
 
-export default connect(null, mapDispatchToProps)(EditAlertChannels);
+export default EditAlertChannels;

frontend/src/container/SettingsWrapper/index.tsx

@@ -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<AppState, AppReducer>(
-		(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 (
-		<Tabs
-			destroyInactiveTabPane
-			onChange={(value): void => onChangeHandler(value as SettingTab)}
-			activeKey={defaultRoute || settingsActiveTab}
-		>
-			<TabPane tab="General" key="General">
-				<General />
-			</TabPane>
-			<TabPane tab="Alert Channels" key="Alert Channels">
-				<AlertChannels />
-			</TabPane>
-		</Tabs>
-	);
-};
-
-interface DispatchProps {
-	toggleSettingsTab: (props: SettingTab) => void;
-}
-
-const mapDispatchToProps = (
-	dispatch: ThunkDispatch<unknown, unknown, AppActions>,
-): DispatchProps => ({
-	toggleSettingsTab: bindActionCreators(ToggleSettingsTab, dispatch),
-});
-
-interface SettingsWrapperProps extends DispatchProps {
-	General: () => JSX.Element;
-	AlertChannels: () => JSX.Element;
-	defaultRoute?: SettingTab;
-}
-
-export default connect(null, mapDispatchToProps)(SettingsWrapper);

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 => {
+	const pathName = history.location.pathname;
-		return <CreateAlertChannels />;
-	};
 
 	return (
-		<SettingsWrapper
+		<RouteTab
 			{...{
-				AlertChannels,
+				routes: [
-				General: GeneralSettings,
+					{
+						Component: GeneralSettings,
+						name: 'General Settings',
+						route: ROUTES.SETTINGS,
+					},
+					{
+						Component: () => {
+							return <CreateAlertChannels />;
+						},
+						name: 'Alert Channels',
+						route: ROUTES.ALL_CHANNELS,
+					},
+				],
+				activeKey:
+					pathName === ROUTES.SETTINGS ? 'General Settings' : 'Alert Channels',
 			}}
 		/>
 	);

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 => {
-	<SettingsWrapper
+	const pathName = history.location.pathname;
-		{...{
+
-			AlertChannels,
+	return (
-			General: GeneralSettings,
+		<RouteTab
-			defaultRoute: 'Alert Channels',
+			{...{
-		}}
+				routes: [
-	/>
+					{
-);
+						Component: GeneralSettings,
+						name: 'General Settings',
+						route: ROUTES.SETTINGS,
+					},
+					{
+						Component: AlertChannels,
+						name: 'Alert Channels',
+						route: ROUTES.ALL_CHANNELS,
+					},
+				],
+				activeKey:
+					pathName === ROUTES.SETTINGS ? 'General Settings' : 'Alert Channels',
+			}}
+		/>
+	);
+};
 
 export default AllAlertChannels;

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 (
-		<SettingsWrapper
+		<RouteTab
 			{...{
-				AlertChannels,
+				routes: [
-				General: GeneralSettings,
+					{
+						Component: GeneralSettings,
+						name: 'General Settings',
+						route: ROUTES.SETTINGS,
+					},
+					{
+						Component: AlertChannels,
+						name: 'Alert Channels',
+						route: ROUTES.ALL_CHANNELS,
+					},
+				],
+				activeKey:
+					pathName === ROUTES.ALL_CHANNELS ? 'Alert Channels' : 'General Settings',
 			}}
 		/>
 	);

frontend/src/store/actions/app/index.ts

@@ -1,3 +1,2 @@
 export * from './toggleDarkMode';
-export * from './toggleSettingsTab';
 export * from './userLoggedIn';

frontend/src/store/actions/app/toggleSettingsTab.ts

@@ -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<AppActions>) => void) => {
-	return (dispatch: Dispatch<AppActions>): void => {
-		dispatch({
-			type: 'TOGGLE_SETTINGS_TABS',
-			payload: {
-				activeTab: props,
-			},
-		});
-	};
-};

frontend/src/store/reducers/app.ts

@@ -1,10 +1,5 @@
 import { IS_LOGGED_IN } from 'constants/auth';
-import {
+import { AppAction, LOGGED_IN, SWITCH_DARK_MODE } from 'types/actions/app';
-	AppAction,
-	LOGGED_IN,
-	SWITCH_DARK_MODE,
-	TOGGLE_SETTINGS_TABS,
-} 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;
 	}

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 {
+export type AppAction = SwitchDarkMode | LoggedInUser;
-	type: typeof TOGGLE_SETTINGS_TABS;
-	payload: {
-		activeTab: SettingTab;
-	};
-}
-
-export type AppAction = SwitchDarkMode | LoggedInUser | ToggleSettingsTab;

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;
 }