1 files changed, 58 insertions, 83 deletions

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<typeof mapProps, typeof mapDispatcher>;
+const ConnectApplicationComponent:  React.FC<{}> = () => {
 
-class ConnectApplicationComponent extends React.Component<ConnectApplicationComponentProps>{
+  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 (
-      <>
-        <AppBar enableColorOnDark position="static">
-          <Tabs indicatorColor="secondary" textColor="inherit" value={activePanelId} onChange={this.onHandleTabChange} aria-label="connect-app-tabs">
-            <Tab aria-label="network-elements-list-tab" label="NODES" value="NetworkElements" />
-            <Tab aria-label="connection-status-log-tab" label="Connection Status Log" value="ConnectionStatusLog" />
-          </Tabs>
-        </AppBar>
-        {activePanelId === 'NetworkElements'
-          ? <NetworkElementsList />
-          : activePanelId === 'ConnectionStatusLog'
-            ? <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 (
+    <>
+      <AppBar enableColorOnDark position="static">
+        <Tabs indicatorColor="secondary" textColor="inherit" value={panelId} onChange={onHandleTabChange} aria-label="connect-app-tabs">
+          <Tab aria-label="network-elements-list-tab" label="NODES" value="NetworkElements" />
+          <Tab aria-label="connection-status-log-tab" label="Connection Status Log" value="ConnectionStatusLog" />
+        </Tabs>
+      </AppBar>
+      {panelId === 'NetworkElements'
+        ? <NetworkElementsList />
+        : panelId === 'ConnectionStatusLog'
+          ? <ConnectionStatusLog />
+          : null
+      }
+    </>
+  );
+};
+
+export const ConnectApplication = ConnectApplicationComponent;
 export default ConnectApplication;
\ No newline at end of file