example code for meteor hook

meteor-hook-examples.jsx

// Hook, basic use, everything in one component
const MyAccount = () => {
  const { user, isLoggedIn } = useTracker(() => {
    const user = Meteor.user()
    const userId = Meteor.userId()
    return {
      user,
      userId,
      isLoggedIn: !!userId
    }
  }, [])
  
  if (!isLoggedIn) {
    return <div>
      <Link to="/register">Create an Account</Link>
      <Link to="/login">Log in</Link>
    </div>
  }
  
  return <div>
    <h1>{user.username}</h1>
    <a href="#" onClick={(e) => { e.preventDefault(); Meteor.logout(); }}>Log out</a>
  </div>)
}

// With prefab account hook

// Create a reusable hook
const useAccount = () => useTracker(() => {
  const user = Meteor.user()
  const userId = Meteor.userId()
  return {
    user,
    userId,
    isLoggedIn: !!userId
  }
}, [])

// simply use the hook
const MyAccount = () => {
  const { user, isLoggedIn } = useAccount()
  
  if (!isLoggedIn) {
    return <div>
      <Link to="/register">Create an Account</Link>
      <Link to="/login">Log in</Link>
    </div>
  }
  
  return <div>
    <h1>{user.username}</h1>
    <a href="#" onClick={(e) => { e.preventDefault(); Meteor.logout() }}>Log out</a>
  </div>
}

// Create the Container
const withMyAccount = withTracker((props) => {
  const user = Meteor.user()
  const userId = Meteor.userId()
  return {
    user,
    userId,
    isLoggedIn: !!userId
  }
})

// Create the component
const MyAccountComponent = ({user, isLoggedIn} => {
  if (!isLoggedIn) {
    return <div>
      <Link to="/register">Create an Account</Link>
      <Link to="/login">Log in</Link>
    </div>
  }
  
  return <div>
    <h1>{user.username}</h1>
    <a href="#" onClick={(e) => { e.preventDefault(); Meteor.logout() }}>Log out</a>
  </div>
})

// Now create the containerized component - gets messy with more than one container
const MyAccount = withMyAccount(MyAccountComponent)


// A more complex component with subscribe and queries and complex deps
const MyPage = ({ pageId }) => {
  const {page, isLoading} = useTracker(() => {
    const handle = Meteor.subscribe('pages', pageId)
    return {
      isLoading: !handle.ready(),
      page: Pages.findOne(pageId)
    }
  }, [pageId])

  if (isLoading) {
    return <div>Page is loading</div>
  }

  return <div>
    <h1>{page.title}</h1>
    <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(page.content)}} />
  </div>
}

// Breaking the more complex component apart
const MyPage = ({ pageId }) => {
  const isLoading = useTracker(
    () => !Meteor.subscribe('pages', pageId).ready(),
    [pageId]
  )
  const page = useTracker(
    () => Pages.findOne(pageId),
    [pageId]
  )

  if (isLoading) {
    return <div>Page is loading</div>
  }

  return <div>
    <h1>{page.title}</h1>
    <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(page.content)}} />
  </div>
}

// the same, with generic hooks
const usePageSubscribe = (pageId) => useTracker(
  () => !Meteor.subscribe('pages', pageId).ready(),
  [pageId]
)

const usePage = (pageId) => useTracker(
  () => Pages.findOne(pageId),
  [pageId]
)

const MyPage = ({ pageId }) => {
  const isLoading = usePageSubscribe(pageId)
  const page = usePage(pageId)

  if (isLoading) {
    return <div>Page is loading</div>
  }

  return <div>
    <h1>{page.title}</h1>
    <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(page.content)}} />
  </div>
}

// Same - with Suspense!
const usePageSubscribe = (pageId) => useTracker(
  () => {
    // This is a little tricky. We want to be able to resolve the promise 
    // when the subscription is ready, but we only want to throw if the 
    // subscription is not ready yet.
    let handle
    const promise = new Promise((resolve, reject) => {
      handle = Meteor.subscribe('pages', pageId, () => { resolve(false) })
    })
    const isLoading = !handle.ready()
    if (isLoading) {
      throw promise
    }
    return isLoading
  },
  [pageId]
)

const usePage = (pageId) => useTracker(
  () => Pages.findOne(pageId),
  [pageId]
)

const MyPage = ({ pageId }) => {
  // Now usePageSubscribe will throw to the parent Suspense
  // when the subscription is not ready!
  const isLoading = usePageSubscribe(pageId)
  const page = usePage(pageId)

  return <div>
    <h1>{page.title}</h1>
    <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(page.content)}} />
  </div>
}

const ExampleUsingSuspense = () => {
  return <Suspsene fallback={<Loading />}>
    <MyPage pageId='my-page-id' />
  </Suspsene>
}