Fix pagination conflict

app/actuators/component/Pagination.js

@@ -115,7 +115,6 @@ export class Pagination extends Component {
 		let title = null;
 		let titleExists = false;
 		if(this.props.title) {
-			titleExists = true;
 			title = (<h4 className="rbc-title col s12 col-xs-12">{this.props.title}</h4>);
 		}
 
@@ -148,4 +147,4 @@ Pagination.defaultProps = {
 Pagination.contextTypes = {
 	appbaseRef: React.PropTypes.any.isRequired,
 	type: React.PropTypes.any.isRequired
-};
+};

app/sensors/MultiDropdownRange.js

@@ -14,24 +14,39 @@ export class MultiDropdownRange extends Component {
 		this.state.data = this.props.data.map(item => {
 			item.value = item.label;
 			return item;
-		})
+		});
+		this.defaultSelected = this.props.defaultSelected;
 		this.handleChange = this.handleChange.bind(this);
 		this.defaultQuery = this.defaultQuery.bind(this);
 	}
 
 	// Set query information
 	componentDidMount() {
 		this.setQueryInfo();
-		if(this.props.defaultSelected) {
+		if(this.defaultSelected) {
 			let records = this.state.data.filter((record) => {
-				return this.props.defaultSelected.indexOf(record.label) > -1 ? true : false;
+				return this.defaultSelected.indexOf(record.label) > -1 ? true : false;
 			});
 			if(records && records.length) {
 				this.handleChange(records);
 			}
 		}
 	}
 
+	componentWillUpdate() {
+		setTimeout(() => {
+			if (this.defaultSelected != this.props.defaultSelected) {
+				this.defaultSelected = this.props.defaultSelected;
+				let records = this.state.data.filter((record) => {
+					return this.defaultSelected.indexOf(record.label) > -1 ? true : false;
+				});
+				if(records && records.length) {
+					this.handleChange(records);
+				}
+			}
+		}, 300);
+	}
+
 	// set the query type and input data
 	setQueryInfo() {
 		let obj = {

app/sensors/NativeList.js

@@ -22,23 +22,41 @@ export class NativeList extends Component {
 		this.previousSelectedSensor = {};
 		this.channelId = null;
 		this.channelListener = null;
+		this.defaultSelected = this.props.defaultSelected;
 		this.handleSelect = this.handleSelect.bind(this);
 		this.handleRemove = this.handleRemove.bind(this);
 		this.filterBySearch = this.filterBySearch.bind(this);
 		this.selectAll = this.selectAll.bind(this);
 		this.type = this.props.multipleSelect ? 'Terms' : 'Term';
 	}
 
-	componentWillMount() {
-		this.defaultSelected = this.props.defaultSelected;
-	}
-
 	// Get the items from Appbase when component is mounted
 	componentDidMount() {
 		this.setQueryInfo();
 		this.createChannel();
 	}
 
+	componentWillUpdate() {
+		setTimeout(() => {
+			if (this.defaultSelected != this.props.defaultSelected) {
+				this.defaultSelected = this.props.defaultSelected;
+				let items = this.state.items;
+
+				items = items.map((item) => {
+					item.key = item.key.toString();
+					item.status = this.defaultSelected && this.defaultSelected.indexOf(item.key) > -1 ? true : false;
+					return item;
+				});
+
+				this.setState({
+					items: items,
+					storedItems: items
+				});
+				this.handleSelect(this.defaultSelected);
+			}
+		}, 300);
+	}
+
 	// stop streaming request and remove listener when component will unmount
 	componentWillUnmount() {
 		if(this.channelId) {
@@ -120,8 +138,8 @@ export class NativeList extends Component {
 	// set value
 	setValue(value, isExecuteQuery=false) {
 		var obj = {
-				key: this.props.sensorId,
-				value: value
+			key: this.props.sensorId,
+			value: value
 		};
 		helper.selectedSensor.set(obj, isExecuteQuery);
 	}
@@ -159,7 +177,7 @@ export class NativeList extends Component {
 		// Checking if component is single select or multiple select
 		let listComponent,
 			searchComponent = null,
-			title =null;
+			title = null;
 
 		if (this.props.multipleSelect) {
 			listComponent = <ItemCheckboxList

app/sensors/SingleDropdownRange.js

@@ -11,23 +11,38 @@ export class SingleDropdownRange extends Component {
 			selected: null
 		};
 		this.type = 'range';
+		this.defaultSelected = this.props.defaultSelected;
 		this.handleChange = this.handleChange.bind(this);
 		this.defaultQuery = this.defaultQuery.bind(this);
 	}
 
 	// Set query information
 	componentDidMount() {
 		this.setQueryInfo();
-		if(this.props.defaultSelected) {
+		if(this.defaultSelected) {
 			let records = this.props.data.filter((record) => {
-				return record.label === this.props.defaultSelected;
+				return record.label === this.defaultSelected;
 			});
 			if(records && records.length) {
 				this.handleChange(records[0]);
 			}
 		}
 	}
 
+	componentWillUpdate() {
+		setTimeout(() => {
+			if (this.defaultSelected != this.props.defaultSelected) {
+				this.defaultSelected = this.props.defaultSelected;
+				let records = this.props.data.filter((record) => {
+					return record.label === this.defaultSelected;
+				});
+				if(records && records.length) {
+					this.handleChange(records[0]);
+				}
+			}
+		}, 300);
+	}
+
 	// set the query type and input data
 	setQueryInfo() {
 		let obj = {

app/sensors/SingleRange.js

@@ -10,23 +10,38 @@ export class SingleRange extends Component {
 			selected: null
 		};
 		this.type = 'range';
+		this.defaultSelected = this.props.defaultSelected;
 		this.handleChange = this.handleChange.bind(this);
 		this.defaultQuery = this.defaultQuery.bind(this);
 	}
 
 	// Set query information
 	componentDidMount() {
 		this.setQueryInfo();
-		if(this.props.defaultSelected) {
+		if(this.defaultSelected) {
 			let records = this.props.data.filter((record) => {
-				return record.label === this.props.defaultSelected;
+				return record.label === this.defaultSelected;
 			});
 			if(records && records.length) {
 				this.handleChange(records[0]);
 			}
 		}
 	}
 
+	componentWillUpdate() {
+		setTimeout(() => {
+			if(this.defaultSelected != this.props.defaultSelected) {
+				this.defaultSelected = this.props.defaultSelected;
+				let records = this.props.data.filter((record) => {
+					return record.label === this.defaultSelected;
+				});
+				if(records && records.length) {
+					this.handleChange(records[0]);
+				}
+			}
+		}, 300);
+	}
+
 	// set the query type and input data
 	setQueryInfo() {
 		let obj = {

app/sensors/ToggleButton.js

@@ -10,16 +10,31 @@ export class ToggleButton extends Component {
 			selected: []
 		};
 		this.type = 'term';
+		this.defaultSelected = this.props.defaultSelected;
 		this.handleChange = this.handleChange.bind(this);
 		this.defaultQuery = this.defaultQuery.bind(this);
 	}
 
 	// Set query information
 	componentDidMount() {
 		this.setQueryInfo();
-		if(this.props.defaultSelected) {
+		if(this.defaultSelected) {
 			let records = this.props.data.filter((record) => {
-				return this.props.defaultSelected.indexOf(record.label) > -1 ? true : false;
+				return this.defaultSelected.indexOf(record.label) > -1 ? true : false;
+			});
+			if(records && records.length) {
+				records.forEach((singleRecord) => {
+					this.handleChange(singleRecord);
+				});
+			}
+		}
+	}
+
+	componentWillUpdate() {
+		if(this.defaultSelected != this.props.defaultSelected) {
+			this.defaultSelected = this.props.defaultSelected;
+			let records = this.props.data.filter((record) => {
+				return this.defaultSelected.indexOf(record.label) > -1 ? true : false;
 			});
 			if(records && records.length) {
 				records.forEach((singleRecord) => {

app/sensors/component/ItemList.js

@@ -7,10 +7,18 @@ export class ItemList extends Component {
 		this.state = {
 			selectedItem: []
 		};
+		this.defaultSelected = this.props.defaultSelected;
 		this.defaultAllowed = true;
 		this.handleClick = this.handleClick.bind(this);
 	}
 
+	componentWillUpdate() {
+		if (this.defaultSelected != this.props.defaultSelected) {
+			this.defaultSelected = this.props.defaultSelected;
+			this.defaultSelection();
+		}
+	}
+
 	componentDidUpdate() {
 		if(this.props.items.length && this.defaultAllowed) {
 			this.defaultAllowed = false;

app/stories/index.js

@@ -125,8 +125,7 @@ storiesOf('ToggleButton', module)
 	)))
 	.add('Playground', withReadme(removeFirstLine(ToggleButtonReadme), () => (
 		<ToggleButtonDefault
-			title={text('Title', 'Meetup Categories')}
-			defaultSelected={text('Default Selected', ["Social"])} />
+			title={text('Title', 'Meetup Categories')} />
 	)));
 
 storiesOf('TextField', module)