diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationAutoComplete.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationAutoComplete.js index 4dac751654965ee60d1758cdc8f5e8a3c031bac3..972fe3834556db9fe7b0bfef1cb2e0a64e2c98e7 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationAutoComplete.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationAutoComplete.js @@ -6,16 +6,17 @@ import './StationAutoComplete.css' /** - * StationAutoCompleteC; class to render an input field for station name with auto-completion + * StationAutoCompleteC; class to render an input field for station name with auto-completion. + * + * The parent component is notified about a new entered station name (through the onChange callback) + * when the user presses 'Enter' in the input field or when an item from the list of + * suggestions is chosen. */ class StationAutoCompleteC extends Component { - // Timeout for updating the main redux state - _timeoutId = null; - // Autosuggest is a controlled component. - // This means that you need to provide an input value - // and an onChange handler that updates this value (see below). + // However the input value is decoupled from Redux state but gets its + // initial value from the props. state = { suggestions: this.props.stations, value: this.props.selectedStation @@ -43,16 +44,17 @@ class StationAutoCompleteC extends Component { ); // Change handler for input - onChange = (event, { newValue }) => { - console.log(`changed `); - clearTimeout(this._timeoutId); + onChange = (event, { newValue, method }) => { this.setState({ value: newValue }); - // Call the callback provided by parent component to announce the change - this._timeoutId = setTimeout(() => { - this.props.onChange(newValue); - }, 1000); + }; + + onKeyPress = (event) => { + if (event.key === "Enter" && this.state.value !== this.props.selectedStation) { + // Call the callback provided by parent component to announce the change + this.props.onChange(this.state.value); + } }; // Autosuggest calls this function when the list of suggestions need to be updated @@ -69,6 +71,12 @@ class StationAutoCompleteC extends Component { }); }; + // onSuggestionSelected(event, { suggestion, suggestionValue, suggestionIndex, sectionIndex, method }) + onSuggestionSelected = (event, { suggestion, suggestionValue, suggestionIndex, sectionIndex, method }) => { + // Call the callback provided by parent component to announce the change + this.props.onChange(suggestionValue); + } + // Always show suggestions, also when input gets the initial focus shouldRenderSuggestions = (value) => { return true; @@ -82,6 +90,7 @@ class StationAutoCompleteC extends Component { placeholder: 'Type station name..', value: this.state.value, onChange: this.onChange, + onKeyPress: this.onKeyPress, className: 'form-control form-control-sm react-autosuggest__input' }; @@ -90,6 +99,7 @@ class StationAutoCompleteC extends Component { suggestions={this.state.suggestions} onSuggestionsFetchRequested={this.onSuggestionsFetchRequested} onSuggestionsClearRequested={this.onSuggestionsClearRequested} + onSuggestionSelected={this.onSuggestionSelected} shouldRenderSuggestions={this.shouldRenderSuggestions} getSuggestionValue={this.getSuggestionValue} renderSuggestion={this.renderSuggestion} @@ -102,6 +112,7 @@ class StationAutoCompleteC extends Component { // Get full list of stations from redux const mapStateToPropsToolBar = state => { return { + //stations: [{name:'cs001c'},{name:'cs002c'},{name:'cs003c'}] stations: state.appInitData.stations }; }; diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage.js index c864c7bd3a48b7ce4397d5d67252515f6908097b..8e6b085c29e59a6f3465bbc073fbdc9d01fda4eb 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage.js @@ -11,11 +11,13 @@ import moment from 'moment'; import 'react-datepicker/dist/react-datepicker.css'; +// History handling +import { push } from 'connected-react-router'; +import { store } from "../redux/store.js"; const ResponsiveGridLayout = WidthProvider(Responsive); - /** * Class to display a secondary header for selecting data filters. * The state is managed by the LandingPage class. @@ -72,12 +74,14 @@ class ToolBarC extends Component { // Callback for StationAutoComplete onStationChange(station) { - this.props.setStation(station); + //this.props.setStation(station); + store.dispatch(push(`?station=${station}`)) } render() { + console.log('render toolbar '+this.props.selectedStation); return (<div className="toolbar-top"> - <StationAutoComplete selectedStation={this.props.selectedStation} onChange={this.onStationChange}/> + <StationAutoComplete key={this.props.selectedStation} selectedStation={this.props.selectedStation} onChange={this.onStationChange}/> <label>Type </label> <ButtonGroup size="sm"> @@ -146,7 +150,7 @@ class StationOverviewPageC extends Component { } render() { - console.log('render'); + console.log('render stationoverview '+this.props.selectedStation); return ( <React.Fragment> <Header active_page={this.props.location} /> @@ -172,15 +176,11 @@ class StationOverviewPageC extends Component { } } -const mapDispatchToPropsToolBar2 = { - setStation -}; - const StationOverviewPage = connect(state => { return { ...state.mainFilters, ...state.station_page }; -}, mapDispatchToPropsToolBar2)(StationOverviewPageC); +})(StationOverviewPageC); export default StationOverviewPage; diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/utils/autoLoader.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/utils/autoLoader.js index 953aff966014dfd194cd03bf0af26b3b426e40ee..1ea1aef870bbfb11e7e38cfc62bc190426d07eaf 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/utils/autoLoader.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/utils/autoLoader.js @@ -45,10 +45,8 @@ function AutoLoadWrapper(WrappedComponent) { }); } - // Create cancellation token - if (typeof this._source !== typeof undefined) { - this._source.cancel('Operation canceled due to new request.') - } + // Create new cancellation token + this.cancelFetchData('Operation canceled due to new request.'); this._source = axios.CancelToken.source(); // Handle the request @@ -76,6 +74,13 @@ function AutoLoadWrapper(WrappedComponent) { }); } + cancelFetchData(reason) { + if (typeof this._source !== typeof undefined) { + this._source.cancel(reason) + this._source = undefined; + } + } + componentDidMount() { this.fetchData(); this._intervalId = setInterval(() => this.fetchData(), this.props.reloadInterval); @@ -89,6 +94,7 @@ function AutoLoadWrapper(WrappedComponent) { componentWillUnmount() { clearInterval(this._intervalId); + this.cancelFetchData('Component is unmounting'); } render() {