import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; import { createSelector } from 'reselect'; import parseUrl from 'Utilities/String/parseUrl'; import { getSearchResults, clearSearchResults } from 'Store/Actions/searchActions'; import { fetchRootFolders } from 'Store/Actions/settingsActions'; import AddNewItem from './AddNewItem'; function createMapStateToProps() { return createSelector( (state) => state.search, (state) => state.router.location, (search, location) => { const { params } = parseUrl(location.search); return { term: params.term, ...search }; } ); } const mapDispatchToProps = { getSearchResults, clearSearchResults, fetchRootFolders }; class AddNewItemConnector extends Component { // // Lifecycle constructor(props, context) { super(props, context); this._searchTimeout = null; } componentDidMount() { this.props.fetchRootFolders(); } componentWillUnmount() { if (this._searchTimeout) { clearTimeout(this._searchTimeout); } this.props.clearSearchResults(); } // // Listeners onSearchChange = (term) => { if (this._searchTimeout) { clearTimeout(this._searchTimeout); } if (term.trim() === '') { this.props.clearSearchResults(); } else { this._searchTimeout = setTimeout(() => { this.props.getSearchResults({ term }); }, 300); } } onClearSearch = () => { this.props.clearSearchResults(); } // // Render render() { const { term, ...otherProps } = this.props; return ( ); } } AddNewItemConnector.propTypes = { term: PropTypes.string, getSearchResults: PropTypes.func.isRequired, clearSearchResults: PropTypes.func.isRequired, fetchRootFolders: PropTypes.func.isRequired }; export default connect(createMapStateToProps, mapDispatchToProps)(AddNewItemConnector);