Meteor Hooks Kitchen Sink

Meteor Hooks Kitchen Sink.jsx

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

// Create a reusable subscribe hook
const usePageSubscription = (pageId) => useTracker(() => {
  const subscription = Meteor.subscribe('page', pageId)
  return !subscription.ready()
}, [pageId])

// Separate page hook
const usePage = (pageId) => useTracker(() => {
  const page = Pages.findOne({ _id: pageId })
  return page
}, [pageId])

// A hook for account
const useAccount = () => useTracker(() => {
  const user = Meteor.user()
  const userId = Meteor.userId()
  return {
    user,
    userId,
    isLoggedIn: !!userId
  }
}, [])

const MyProtectedPage = (pageId) => {
  const isLoading = usePageSubscription(pageId)
  const page = usePage(pageId)
  const { isLoggedIn, user } = useAccount()

  if (!isLoggedIn) {
    return <Redirect to="/login" />
  } else if (isLoading) {
    <Loading />
  }

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

// We can easily make old style HOCs out of the hooks
const withUser = (Component) => (props) => {
  const accountProps = useAccount()
  return <Component {...props} {...accountProps} />
}
const withPage = (Component) => (props) => (
  const pageProps = usePage(props.pageId)
  return <Component {...props} {...pageProps} />
)

// Or, we can make a Context
const AccountContext = createContext('account')

export const AccountProvider = (props) => (
  <AccountContext.Provider value={useAccount()}>
    {props.children}
  </AccountContext.Provider>
)
export const AccountConsumer = AccountContext.Consumer

// This requires AccountProvider to be included in the app tree.
export const useAccountContext = () => useContext(AccountContext)

// ...and then make a HoC
export const withAccountContext = (Component) => (props) => {
  const account = useAccountContext()
  return <Component {...props} {...account} />
}