I am learning meteor and react from building a social network tutorial series. There a tutor had used reactjs in es5 way. He is using several mixins. For example he has used ReactMeteorData mixins with only current user fetching for Navbar and SignupForm Component and same mixin is used but fetching posts, ads and friends in Main.jsx. How could i solve this in es6 way? I have tried using react-meteor-data but confuse with same mixin with different functionality in Navbar and Main component.
Main.jsx
Main = React.createClass({
mixins: [ReactMeteorData],
getMeteorData(){
let data = {};
data.posts = [];
data.ads = [];
var friends = Meteor.user() ? Meteor.user().profile.friends : [];
friends.push(Meteor.user() ? Meteor.user()._id :'');
var posthandle = Meteor.subscribe('postlist', friends,this.state.limit);
var adhandle = Meteor.subscribe('adlist');
if(posthandle.ready()){
data.posts = Posts.find({},{sort:{createdAt:-1}}).fetch();
}
if(adhandle.ready()){
data.ads = DBAds.find({},{}).fetch();
}
return data;
}
render(){
var posts = this.data.posts.map(function (record) {
return <Post key={record._id} post={record}/>
});
return(
);
}
Navbar.jsx
Navbar = React.createClass({
getInitialState(){
return {
searchText:''
};
},
mixins: [ReactMeteorData],
getMeteorData(){
let data = {};
data.currentUser = Meteor.user();
return data;
},
render(){
var fullname = '';
if(this.data.currentUser && this.data.currentUser.profile){
fullname = this.data.currentUser.profile.firstname + ' ' + this.data.currentUser.profile.lastname;
}
return ( );
}
Now my code in es6 is
ReactMeteorDataWrap.jsx
import Navbar from './navbar/Navbar.jsx';
import { createContainer } from 'meteor/react-meteor-data';
export default createContainer(() => {
return { user: Meteor.user() };
}, Navbar);
Main.jsx
import ReactMeteorDataWrap from '../ReactMeteorDataWrap.jsx';
export default class Main extends Component {
constructor(props){
super(props);
}
render() {
// let data = this.props.getMeteorAllData();
let adobj = {_id:1, text:'My First Ad', title:'Some Company', image:'http://placehold.it/350x150' };
let posts = data.posts.map(record => {
return <Post key={record._id} post={record} />
});
return()
}