CODEWITHSUNDEEP
meteor-react
Mankind1023
Mankind1023

Reputation: 7752

Meteor-React data not coming through

I just started experimenting with meter and react, I did the basic tutorial and some stuff online,and now I'm trying to create my own app, but I can't seem to get it to work properly, here is what I have:

App.jsx:

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';

import AccountsUIWrapper from './AccountsUIWrapper.jsx';
import { Customers } from '../api/customers.js';

// App component - represents the whole app
class App extends Component {

  getProfile() {
        if(Meteor.userId()){
            var cx = Meteor.call('customers.getProfile', Meteor.userId());

            if(cx && cx.account){
                console.log('FOUND');
                return (
                    <div>
                        <div>Owner: {cx.owner}</div>
                        <div>Account: {cx.account}</div>
                        <div>Agents: {cx.agents}</div>
                    </div>
                )
            }else{
                console.log('LOADING..');
                return ( <div>Loading</div> );
            }
        }else{
            return (
                <div>Please sign in</div>
            )
        }
  }

  render() {
    return (
      <div className="container">
        <header>
            <AccountsUIWrapper />
            <h1>Customer Portal</h1>
        </header>

        <ul>
            {this.getProfile()}
        </ul>
      </div>
    );
  }
}


App.propTypes = {
  profile: PropTypes.array.isRequired,
  currentUser: PropTypes.object,
};

export default createContainer(() => {
  return {
    profile: [],
    currentUser: Meteor.user(),
  };
}, App);

customers.js

import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';
import { check } from 'meteor/check';

export const Customers = new Mongo.Collection('customers');

Meteor.methods({
  'customers.getProfile'(userId) {
    check(userId, String);

    if (! this.userId) {
      throw new Meteor.Error('not-authorized');
    }

    const temp = Customers.findOne({owner: userId});
    return temp;
  },
});

I'm trying to get the particular customer profile from the database, in the tutorials they have xxxx.find().fetch() in createContainer, but that would bring in all data in the profile table which seems fairly risky.

As it stands, the app just says loading and nothing else happens.

Detailed help would be appreciated as I have been banging my head against a wall for two days!

Upvotes: 0

Views: 43

Answers (2)

Frazer Kirkman
Frazer Kirkman

Reputation: 1154

You also need to tell the server to publish the collection

if (Meteor.isServer) {
  // This code only runs on the server
  // Only publish data you want the current user to see
  Meteor.publish(null, function() {
    return Meteor.users.find(
      { 
         _id: this.userId  
      } {
        fields: 
          Meteor.users.fieldsYouWantThemToSee

      });
  });
}

Upvotes: 0

Frazer Kirkman
Frazer Kirkman

Reputation: 1154

Your problem is here

class App extends Component {

You need to use

class About extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
    };

  }
  ....
}

Im not sure if extends React.Component is the same as extends Component, but I think you have to call the constructor and super(props) to initialize all of the React functionality.

Upvotes: 0

Related Questions