From 15e2d3a29b0d1a304965e34f114a911e5a7abdb3 Mon Sep 17 00:00:00 2001 From: sai-neetha Date: Mon, 20 Mar 2023 08:05:47 +0100 Subject: Odlux Update Add eslint and custom icons update Issue-ID: CCSDK-3871 Signed-off-by: sai-neetha Change-Id: If6b676128cc9cff0437a5dc54f85eaafd3b8c586 Signed-off-by: highstreetherbert --- .../apps/connectApp/src/views/connectView.tsx | 141 +++++++++------------ 1 file changed, 58 insertions(+), 83 deletions(-) (limited to 'sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx') diff --git a/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx b/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx index 082839718..a6fcb7c32 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx @@ -15,113 +15,88 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from 'react'; +import React from 'react'; -import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect'; -import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; -import { Panel } from '../../../../framework/src/components/material-ui'; -import { networkElementsReloadAction, createNetworkElementsActions } from '../handlers/networkElementsHandler'; -import { connectionStatusLogReloadAction, createConnectionStatusLogActions } from '../handlers/connectionStatusLogHandler'; +import { AppBar, Tab, Tabs } from '@mui/material'; -import { NetworkElementsList } from '../components/networkElements'; +import { useApplicationDispatch, useSelectApplicationState } from '../../../../framework/src/flux/connect'; + +import { findWebUrisForGuiCutThroughAsyncAction, setPanelAction } from '../actions/commonNetworkElementsActions'; import { ConnectionStatusLog } from '../components/connectionStatusLog'; -import { setPanelAction, findWebUrisForGuiCutThroughAsyncAction, SetWeburiSearchBusy } from '../actions/commonNetworkElementsActions'; +import { NetworkElementsList } from '../components/networkElements'; +import { connectionStatusLogReloadAction } from '../handlers/connectionStatusLogHandler'; +import { networkElementsReloadAction } from '../handlers/networkElementsHandler'; +import { NetworkElementConnection } from '../models/networkElementConnection'; import { PanelId } from '../models/panelId'; -import { NetworkElementConnection } from 'models/networkElementConnection'; -import { AppBar, Tabs, Tab } from '@mui/material'; - -const mapProps = (state: IApplicationStoreState) => ({ - panelId: state.connect.currentOpenPanel, - user: state.framework.authenticationState.user, - netWorkElements: state.connect.networkElements, - availableGuiCutroughs: state.connect.guiCutThrough -}); - -const mapDispatcher = (dispatcher: IDispatcher) => ({ - networkElementsActions: createNetworkElementsActions(dispatcher.dispatch), - connectionStatusLogActions: createConnectionStatusLogActions(dispatcher.dispatch), - onLoadNetworkElements: () => dispatcher.dispatch(networkElementsReloadAction), - loadWebUris: (networkElements: NetworkElementConnection[]) => - dispatcher.dispatch(findWebUrisForGuiCutThroughAsyncAction(networkElements.map((ne) => ne.id!))), - isBusy: (busy: boolean) => dispatcher.dispatch(new SetWeburiSearchBusy(busy)), - onLoadConnectionStatusLog: () => { - dispatcher.dispatch(connectionStatusLogReloadAction); - }, - switchActivePanel: (panelId: PanelId) => { - dispatcher.dispatch(setPanelAction(panelId)); - } -}); -type ConnectApplicationComponentProps = Connect; +const ConnectApplicationComponent: React.FC<{}> = () => { -class ConnectApplicationComponent extends React.Component{ + const panelId = useSelectApplicationState(state => state.connect.currentOpenPanel); + const netWorkElements = useSelectApplicationState(state => state.connect.networkElements); - public componentDidMount() { - if (this.props.panelId === null) { //don't change tabs, if one is selected already - this.onTogglePanel("NetworkElements"); - } - //this.props.networkElementsActions.onToggleFilter(); - //this.props.connectionStatusLogActions.onToggleFilter(); - } - - public componentDidUpdate = () => { - - const networkElements = this.props.netWorkElements; - - if (networkElements.rows.length > 0) { - // Update all netWorkElements for propper WebUriClient settings in case of table data changes. - // e.G: Pagination of the table data (there is no event) - this.props.loadWebUris(networkElements.rows); - } - } + const dispatch = useApplicationDispatch(); + const onLoadNetworkElements = () => dispatch(networkElementsReloadAction); + const loadWebUris = (networkElements: NetworkElementConnection[]) => dispatch(findWebUrisForGuiCutThroughAsyncAction(networkElements.map((ne) => ne.id!))); + const onLoadConnectionStatusLog = () => dispatch(connectionStatusLogReloadAction); + const switchActivePanel = (panelId2: PanelId) => dispatch(setPanelAction(panelId2)); - private onTogglePanel = (panelId: PanelId) => { - const nextActivePanel = panelId; - this.props.switchActivePanel(nextActivePanel); + const onTogglePanel = (panelId2: PanelId) => { + const nextActivePanel = panelId2; + switchActivePanel(nextActivePanel); switch (nextActivePanel) { case 'NetworkElements': - this.props.onLoadNetworkElements(); + onLoadNetworkElements(); break; case 'ConnectionStatusLog': - this.props.onLoadConnectionStatusLog(); + onLoadConnectionStatusLog(); break; case null: // do nothing if all panels are closed break; default: - console.warn("Unknown nextActivePanel [" + nextActivePanel + "] in connectView"); + console.warn('Unknown nextActivePanel [' + nextActivePanel + '] in connectView'); break; } - }; - private onHandleTabChange = (event: React.SyntheticEvent, newValue: PanelId) => { - this.props.switchActivePanel(newValue); - } - - render(): JSX.Element { - const { panelId: activePanelId } = this.props; - - return ( - <> - - - - - - - {activePanelId === 'NetworkElements' - ? - : activePanelId === 'ConnectionStatusLog' - ? - : null} - - ); + const onHandleTabChange = (event: React.SyntheticEvent, newValue: PanelId) => { + switchActivePanel(newValue); }; + React.useEffect(()=>{ + if (panelId === null) { //don't change tabs, if one is selected already + onTogglePanel('NetworkElements'); + } + }, []); -} + React.useEffect(()=>{ + const networkElements = netWorkElements; -export const ConnectApplication = (connect(mapProps, mapDispatcher)(ConnectApplicationComponent)); + if (networkElements.rows.length > 0) { + // Search for weburi client for all netWorkElements in case of table data changes. + // e.G: Pagination of the table data (there is no event) + loadWebUris(networkElements.rows); + } + }, [netWorkElements]); + + return ( + <> + + + + + + + {panelId === 'NetworkElements' + ? + : panelId === 'ConnectionStatusLog' + ? + : null + } + + ); +}; + +export const ConnectApplication = ConnectApplicationComponent; export default ConnectApplication; \ No newline at end of file -- cgit 1.2.3-korg