0

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()
    }
pri
  • 620
  • 2
  • 9
  • 20
  • https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.ecavv2mji – azium May 29 '16 at 03:19
  • http://stackoverflow.com/questions/37493889/how-to-make-mixins-work-in-react-es6/37494252 – gu mingfeng May 29 '16 at 14:18
  • Possible duplicate of [React Router 1.0 using router.transitionTo() without Navigation mixin](http://stackoverflow.com/questions/31469091/react-router-1-0-using-router-transitionto-without-navigation-mixin) – Paul Sweatte Dec 23 '16 at 16:24
  • Possible duplicate of [React ES6 alternative for mixins](https://stackoverflow.com/questions/35103386/react-es6-alternative-for-mixins) – Paul Sweatte Aug 14 '17 at 15:47

0 Answers0