sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx

   1 import * as React from 'react';
   2
   3 import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect';
   4 import { Panel } from '../../../../framework/src/components/material-ui';
   5
   6 import { requiredNetworkElementsReloadAction } from '../handlers/requiredNetworkElementsHandler';
   7 import { loadAllMountedNetworkElementsAsync } from '../actions/mountedNetworkElementsActions';
   8 import { connectionStatusLogReloadAction } from '../handlers/connectionStatusLogHandler';
   9
  10 import { RequiredNetworkElementsList } from '../components/requiredNetworkElements';
  11 import { ConnectionStatusLog } from '../components/connectionStatusLog';
  12 import { UnknownNetworkElementsList } from '../components/unknownNetworkElements';
  13
  14 const mapDispatcher = (dispatcher: IDispatcher) => ({
  15   onLoadUnknownNetworkElements: () => {
  16     dispatcher.dispatch(loadAllMountedNetworkElementsAsync);
  17   },
  18   onLoadRequiredNetworkElements: () => {
  19     dispatcher.dispatch(requiredNetworkElementsReloadAction);
  20   },
  21   onLoadConnectionStatusLog: () => {
  22     dispatcher.dispatch(connectionStatusLogReloadAction);
  23   }
  24 });
  25
  26 type PanelId = null | "RequiredNetworkElements" | "UnknownNetworkElements" | "ConnectionStatusLog";
  27
  28 type ConnectApplicationComponentProps = Connect<undefined, typeof mapDispatcher> ;
  29
  30 type ConnectApplicationComponentState = {
  31   activePanel: PanelId;
  32 };
  33
  34 class ConnectApplicationComponent extends React.Component<ConnectApplicationComponentProps, ConnectApplicationComponentState>{
  35   /**
  36    * Initialises this instance
  37    */
  38   constructor(props: ConnectApplicationComponentProps) {
  39     super(props);
  40
  41     this.state = {
  42       activePanel: null
  43     };
  44   }
  45
  46   private onTogglePanel = (panelId: PanelId) => {
  47     const nextActivePanel = panelId === this.state.activePanel ? null : panelId;
  48     this.setState({
  49       activePanel: nextActivePanel
  50     }, () => {
  51       switch (nextActivePanel) {
  52         case 'RequiredNetworkElements':
  53           this.props.onLoadRequiredNetworkElements();
  54           break;
  55         case 'UnknownNetworkElements':
  56           // todo: should we update the application state ?
  57           break;
  58         case 'ConnectionStatusLog':
  59           this.props.onLoadConnectionStatusLog();
  60           break;
  61         case null:
  62           // do nothing if all panels are closed
  63           break;
  64         default:
  65           console.warn("Unknown nextActivePanel [" + nextActivePanel + "] in connectView");
  66           break;
  67       }
  68     });
  69   };
  70
  71   render(): JSX.Element {
  72     const { activePanel } = this.state;
  73
  74     return (
  75       <>
  76         <Panel activePanel={ activePanel } panelId={ 'RequiredNetworkElements' } onToggle={ this.onTogglePanel } title={ "Required Network Elements" }>
  77           <RequiredNetworkElementsList />
  78         </Panel>
  79         <Panel activePanel={ activePanel } panelId={ 'UnknownNetworkElements' } onToggle={ this.onTogglePanel } title={ "Unknown Network Elements" }>
  80           <UnknownNetworkElementsList />
  81         </Panel>
  82         <Panel activePanel={ activePanel } panelId={ 'ConnectionStatusLog' } onToggle={ this.onTogglePanel } title={ "Connection Status Log" }>
  83           <ConnectionStatusLog />
  84         </Panel>
  85       </>
  86     );
  87   };
  88   public componentDidMount() {
  89     this.onTogglePanel("RequiredNetworkElements");
  90     this.props.onLoadUnknownNetworkElements();
  91   }
  92 }
  93
  94 export const ConnectApplication = (connect(undefined, mapDispatcher)(ConnectApplicationComponent));
  95 export default ConnectApplication;