Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save josephmisiti/c1159c5d89c47c4a95d65306ab6135e5 to your computer and use it in GitHub Desktop.
Save josephmisiti/c1159c5d89c47c4a95d65306ab6135e5 to your computer and use it in GitHub Desktop.
debouce search in react
import React, { PropTypes } from 'react';
import _ from 'lodash';
import API from '../../utils/API';
import { TextInput } from '../common/inputs';
const propTypes = {
onHandleCodeSearch: PropTypes.func.isRequired,
currentClaim: PropTypes.object.isRequired,
searchResults: PropTypes.object.isRequired,
};
class ICDInput extends TextInput {
constructor(props, context) {
super(props, context);
let self = this;
this.handleSearch = this.handleSearch.bind(this);
this.onChange = this.onChange.bind(this);
this.handleSearchDebounced = _.debounce(function () {
self.handleSearch(self.state.fieldName, self.state.searchTerm);
})
this.state = {
searchResults: [],
searchTerm: '',
isSearching: false,
fieldName: null,
}
}
onChange(fieldName, e) {
this.setState({searchTerm: e.target.value, fieldName: fieldName});
this.handleSearchDebounced();
}
handleSearch(fieldName, value) {
let self = this;
self.setState({isSearching: true});
API.icd.get({
params: {
code__istartswith: value,
icd_indicator: 0,
format: 'json',
}
})
.then((response)=> {
self.setState({searchTerm: value});
self.setState({searchResults: response.data.results });
if (self.state.searchResults.length === 1 && self.state.searchResults[0].is_ok_for_cms) {
self.props.onHandleChange(self.props.name, self.state.searchResults[0].code);
self.setState({isSearching: false});
}
});
}
getContent() {
const self = this;
if(_.isEmpty(this.props.currentClaim)) {
return null;
}
let value = this.props.currentClaim[this.props.name];
if (this.state.isSearching) {
value = this.state.searchTerm;
}
let codesFound = self.state.searchResults.map((x)=>{
return x.code;
}).join(", ");
console.log(codesFound)
return <div className="row">
<div className="col-25 frm-lbl">
ICD Diagnosis Code 1 :
</div>
<div className="col-25 btn-add-on">
<input type="text" value={value}
onChange={this.onChange.bind(this, self.props.name)}/>
<If condition={self.state.searchResults.length === 1 && self.state.searchResults[0].is_ok_for_cms}>
<button className="n-hvr bkg-green">
<span className="icon-check"></span>
</button>
</If>
</div>
<div className="col-50 pd-lft">
<If condition={self.state.searchResults.length === 1}>
<summary>
{self.state.searchResults[0].long_description}
</summary>
</If>
<If condition={self.state.searchResults.length >= 5 }>
<summary>
Found {self.state.searchResults.length} results.
</summary>
</If>
<If condition={self.state.searchResults.length > 1 && self.state.searchResults.length < 5 }>
<summary>
Found: {codesFound}
</summary>
</If>
</div>
</div>;
}
}
ICDInput.propTypes = propTypes;
export default ICDInput;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment