I’m currently using a solution as described in the guide to use a reactive var to handle subscribing to more data from my publications on the client. Code below
const tracksPerPage = new ReactiveVar(1);
const loadMore = () => {
tracksPerPage.set(tracksPerPage.get() + 1);
};
I’m using loadMore() to be fired by an onClick event thats attached to a button. When I do this for some reason I get a whole page refresh instead of just updating of the UI in question, the tracks that I’m rendering to the screen. Is there a way to get the data down to the child-component without a full page refresh? Is this a meteor thing or react-related?
Full container code below…
import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { Link } from 'react-router';
import Blaze from 'meteor/gadicc:blaze-react-component';
// mongo collection
import Tracks from '../../api/tracks/tracks.js';
//react components
import Charts from '../components/Charts.jsx';
import TracksCategories from '../components/TracksCategories';
const tracksPerPage = new ReactiveVar(1);
const loadMore = () => {
tracksPerPage.set(tracksPerPage.get() + 1);
};
/* -- BrowseContainer --
* Container responsible for the Browse view.
* Grabs data for all children views.
* Handles filtering state
*/
class BrowseContainer extends Component {
constructor(props){
super(props)
this.state = {
genre: 'all',
license: 'all',
price: 0,
}
}
componentDidMount() {
this.handleFilterChange();
}
handleFilterChange() {
const self = this;
$('#genre').on('change', 'select', function(e){
let value = $(this).val()
self.setState({ genre: value });
});
$('#license').on('change', 'select', function(e) {
let value = $(this).val()
self.setState({ license: value });
});
$('#price').on('change', 'select', function(e) {
let value = $(this).val()
self.setState({ price: parseInt(value) });
})
}
render() {
console.log('rendered');
return (
<div>
{this.props.loading ? <Blaze template="spinner" /> :
<div className="row">
<div className="col s12 m12 l10 offset-l1" id="browse-header">
<header className="background-header text-center" id="charts-header">
<h1 className="center">Browse</h1>
</header>
<TracksCategories
genre={this.state.genre}
license={this.state.license}
price={this.state.price}
trackCount={this.props.trackCount}
onFilterChange={this.handleFilterChange.bind(this)}
/>
</div>
<Charts
tracks={this.props.tracks}
currentUser={this.props.currentUser}
filters={this.state}
loadMore={loadMore}
/>
</div>
}
<div className="load-more center-align">
<button className="btn" onClick={loadMore}>Load More</button>
</div>
</div>
);
}
}
BrowseContainer.propTypes = {
tracks: PropTypes.array.isRequired,
currentUser: PropTypes.object,
loading: PropTypes.bool.isRequired,
}
export default createContainer( (props) => {
const subscription = Meteor.subscribe('Tracks.all', tracksPerPage.get());
const loading = !subscription.ready();
const tracks = Tracks.find({}, { sort: { createdAt: -1 } }).fetch();
const trackCount = Tracks.find({}).count();
const currentUser = Meteor.user();
return {
tracks: tracks,
currentUser: currentUser,
loading: loading,
trackCount: trackCount,
};
}, BrowseContainer);