Meteor.user() undefined

react
1

Hello! Help me please. How i can get current user i this code? If i try console.log(Meteor.user()); I got undefined.

export default class Header extends React.Component {

}
2

Tell me please. Is it bad solution?

import React from 'react';
import { Meteor } from 'meteor/meteor';
import TrackerReact from 'meteor/ultimatejs:tracker-react';

// Activate Translations Variables
const Translate = require('react-i18nify').Translate;
const Localize = require('react-i18nify').Localize;

export default class Header extends TrackerReact(React.Component) {
    currentUser() {
        return Meteor.user();
    }

    render() {
        let currentUser = this.currentUser();
        if ( Meteor.loggingIn() ) {
            return (<div>Loading</div>);
        } else {
            return(
                <div className="navbar-wrapper">
                    <div className="logo-section">
                        <a href="/"><img src="/common/logo_main.png" alt="" /></a>
                    </div>
                    <div className="menu-navbar-section">
                        <ul className="nav-head-section">
                            <li><a href="#"><i className="fa fa-bell-o"> </i></a></li>
                            <li><a href="#"><img src={currentUser.profile.avatar} alt=""/>{currentUser.profile.name}</a></li>
                        </ul>
                    </div>
                </div>
            );
        }
    }
}
3

Almost right. Your render function and the user as if else statement is exactly how you should do it, because thats how you design a reactive component, but:

Although Meteor.user() and Meteor.loggingIn() are reactive methods and you use the right wrapper, its easier to use a so called higher order component. This component pushes properties to your component and when those properties change, the render function will be re-triggered. This makes your code cleaner, because all meteor related things will be separate from your react layer to go with your example. Here’s the refactored component:

import React, {Component} from 'react'; // Note: I've added Component
import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';
import TrackerReact from 'meteor/ultimatejs:tracker-react';

// Activate Translations Variables
const Translate = require('react-i18nify').Translate;
const Localize = require('react-i18nify').Localize;

class Header extends Component {
    render() {
        if ( this.props.loggingIn) ) {
            return (<div>Loading</div>);
        } else {
            return(
                <div className="navbar-wrapper">
                    <div className="logo-section">
                        <a href="/"><img src="/common/logo_main.png" alt="" /></a>
                    </div>
                    <div className="menu-navbar-section">
                        <ul className="nav-head-section">
                            <li><a href="#"><i className="fa fa-bell-o"> </i></a></li>
                            <li><a href="#"><img src={this.props.profile.avatar} alt=""/>{this.props.profile.name}</a></li>
                        </ul>
                    </div>
                </div>
            );
        }
    }
}
/**
 * higher order component to acquire data from one or many resources (using tracker)
 */
export default withTracker((props) => {
  const loggingIn = Meteor.loggingIn();
  const profile = Meteor.user() ? Meteor.user.profile : {};
  return {
    loggingIn,
    profile
  };
})(Header);
2 Likes
4

Thank you very much for help!