Show All Users in Meteor React Client

Question

I am having some trouble getting all the registered users to display on the client side. std:accounts-ui package is included in .meteor/packages. autopublish package has been removed.

The data for all users are published in Users.js as allUsers, while the client subscribes to the allUsers publication from within createContainer provided by react-meteor-data.

However the page only renders the details of the user that is currently logged in. Running Meteor.users().find().fetch() in the browser JS console only shows the currently logged in user, and shows nothing if the user is not logged in.

Running console.log(Meteor.users.find().fetch() on the server side outputs all the users correctly.

Why is this happening on the browser?

/imports/api/Users.js

import { Meteor } from 'meteor/meteor';

if (Meteor.isServer) {
    Meteor.publish('allUsers', function() {
        return Meteor.users.find({});
    })
}

/imports/ui/App.jsx

import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { Accounts } from 'meteor/std:accounts-ui';
import { Table } from 'react-bootstrap';
import User from './User';


export class App extends Component {

    renderUsers() {
        return this.props.users.map((user) => (
            <User key={user._id} user={user} />
        ));
    }


    render() {
        return (
            <div>
                <h1>Users</h1>

                <Table>
                    <tbody>
                        <tr>
                            <td>ID</td>
                            <td>Email</td>
                            <td>createdAt</td>
                        </tr>

                        { this.renderUsers() }

                    </tbody>
                </Table>
            </div>
        )
    }
}

App.propTypes = {
    users: PropTypes.array.isRequired
}

export default createContainer(() => {
    Meteor.subscribe('allUsers');

    return {
        users: Meteor.users.find().fetch()
    }
}, App);

/imports/ui/User.jsx

import React, { Component } from 'react';

export default class Users extends Component {
    render() {
        return (
            <tr>
                <td>{ this.props.user._id}</td>
                <td>{ _.get(this.props, 'user.emails[0].address', 'UNKNOWN') }</td>
                <td>{ this.props.user.createdAt }</td>
            </tr>
        )
    }
}

Answer 1

i have faced the same problem when i was using angular 2 and meteor. i also tried to accesss data using Meteor.users.find({});

but this is not the correct way to use. for using this first you should create a new collection like this

export const Users = MongoObservable.fromExisting(Meteor.users);<-- most important line

then in

Meteor.publish("userData", function() {
        if (Roles.userIsInRole(this.userId, 'admin')) {
            return Meteor.users.find();
        } else {
            const selector = {
                '_id': this.userId
            };
            return Meteor.users.find(selector);
        }
    });

and use in your file by subscribe to it.

MeteorObservable.subscribe('userData').subscribe(() => { 
                     this.userlist=Users.find({});      
            });

i did it in angular 2.you plz use react syntax for last subscribe part.