Meteor Containers

Meteor Containers.jsx

import { withTracker } from 'meteor/react-meteor-data'

// Create a reusable hook
const withAccount = withTracker((props) => {
  const user = Meteor.user()
  const userId = Meteor.userId()
  return {
    user,
    userId,
    isLoggedIn: !!userId
  }
})

// And another
const withPage = withTracker(({ pageId }) => {
  // The publication must also be secure
  const subscription = Meteor.subscribe('page', pageId)
  const page = Pages.findOne({ _id: pageId })
  return {
    page,
    isLoading: !subscription.ready()
  }
})

// Here we see the real benefit of hooks vs. containers
const MyProtectedPage = ({ isLoggedIn, user, isLoading, page }) => {
  if (!isLoggedIn) {
    return <div>
      <Link to="/register">Create an Account</Link>
      <Link to="/login">Log in</Link>
    </div>
  }

  return <div>
    <h1>{page.title}</h1>
    <p>{page.content}</p>
    <a href="#" onClick={(e) => { e.preventDefault(); Meteor.logout(); }}>Log out ({user.username})</a>
  </div>)
}

const withAccount(withPage(MyProtectedPage))