CODEWITHSUNDEEP
javascriptreactjsmeteor
JenLikesCode
JenLikesCode

Reputation: 21

Passing Meteor.user() to a component?

I'm currently using themeteorchef/base boilerplate project. It's been really helpful as I move from the Meteor/Blaze to Meteor/React world.

It's straight forward to pass subscription data to components via containers. But, trying to create a basic profile page has been surprisingly hard and I feel like I'm missing something simple. So far I've managed to pass the user object as a json string (which is not ideal).

My question is- what is the best way to pass a logged in user's info to a react component?

In my container, I have...

import { Meteor } from 'meteor/meteor';
import { composeWithTracker } from 'react-komposer';
import ViewProfile from '../pages/ViewProfile.js';
import Loading from '../components/Loading.js';

const composer = ({ params }, onData) => {
  const currentUser = JSON.stringify( Meteor.user() );
  onData(null, { currentUser });
};

export default composeWithTracker(composer, Loading)(ViewProfile);

And my component is a simple display...

import React from 'react';
import NotFound from './NotFound';

const ViewProfile = ( { currentUser } ) => { 
  return currentUser ? (
    <p>{ currentUser }</p>
  ) : <NotFound />;
};

ViewProfile.propTypes = {
  currentUser: React.PropTypes.string
};

export default ViewProfile;

Upvotes: 1

Views: 365

Answers (2)

JenLikesCode
JenLikesCode

Reputation: 21

Finally got it working!

Passing Meteor.user (reactive data) via the container was still the right approach and it was getting to the component, however, in my component I simply needed to reference the specific object value (string or array).

So in my container:

import { composeWithTracker } from 'react-komposer';
import ViewProfile from '../pages/ViewProfile.js';
import Loading from '../components/Loading.js';

const composer = (params, onData) => {
  const user = Meteor.user();

  if (user) {
      const currentUser = {
          fname: user.profile.name.first,
          lname: user.profile.name.last,
          email: user.emails[0].address
      }

      onData(null, { currentUser });
  }

export default composeWithTracker(composer, Loading)(ViewProfile);

Then in my component:

import React from 'react';
import NotFound from './NotFound';

const ViewProfile = ( {currentUser} ) => {
  //console.log(currentUser);

  return (currentUser) ? (
    <p>{ currentUser.fname }</p>
    <p>{ currentUser.lname }</p>
    <p>{ currentUser.email }</p>
  ) : <NotFound />;  
};

ViewProfile.propTypes = {
  currentUser: React.PropTypes.object,
};

export default ViewProfile;

Upvotes: 1

thinhvo0108
thinhvo0108

Reputation: 2232

In fact, you can access "Meteor.user()" anywhere, so you don't need to pass it from either Composer or Parent-Component. Therefore, in your simple component, you may use:

import React from 'react';
import NotFound from './NotFound';

const ViewProfile = () => { 
  return (Meteor.user()) ? (
    <p>{JSON.stringify(Meteor.user())}</p>
  ) : <NotFound />;
};

export default ViewProfile;

Upvotes: 0

Related Questions