Best way to ensure props are ready (React createContainer)


#1

Hi guys, I am using meteor Meteor 1.3.4.1 and i’m trying to figure out a better way to ensure my props are ready (running into issues with the way i’m doing it for testing)

I have a Prospect Component:

imports/client/prospects/Prospect.jsx

import React from 'react'
import { FlowRouter as Router } from 'meteor/kadira:flow-router'
import { createContainer } from 'meteor/react-meteor-data'
import { Residents } from '/imports/collections/residents.jsx'
import Griddle from 'griddle-react'
import dbHelpers from '/imports/helpers/db_helpers'

class Prospects extends React.Component {
  componentWillReceiveProps(props){
    this.setState({prospects: props.prospects})
  }

  constructor(props) {
    super(props)

    this.filterProspects = this.filterProspects.bind(this)
  }

  prospectShow(id) {
    Router.go('prospectShow', {id: id});
  }

  filterProspects(items,query) {
    Meteor.call('residents.query', query, (error, result) => {
      this.setState({prospects: dbHelpers.griddleFormat(result)})
    })
  }

  render() {
    if(!this.props.ready){
      return(
        <span>Loading...</span>
      )
    }

    return(
      <div>
        <Griddle
          results={this.state.prospects}
          showFilter={true}
          showSettings={true}
          useCustomFilterer={true}
          customFilterer={this.filterProspects}
          noDataMessage={"No Prospects Yet. Click 'Add Prospects' to create one"}
        />
      </div>
    )
  }
}

export default createContainer(() => {
  const residents = Meteor.subscribe('residents')
  const ready = residents.ready()
  return {


    prospects: ready ?
      dbHelpers.griddleFormat(Residents.find({}, {sort: {'name.first': 1 }} ).fetch())
      : [],
    ready,
  }
}, Prospects)

The part in question is how i’m using the const ready to signal that the props are ready. Is there a better way to do this? Currently when I use Enzyme to Render my component, all it sees is