live blogs hooks.js

import { OrderedMap } from 'immutable'
import React, { useState, useEffect } from 'react'
import { LiveBlogStream } from './stream' // imaginary
import { LiveBlogPost } from '@financial-times/x-live-blog-post'


// e.g. <LiveBlogList initialPosts={dataFromCatchupRequest} eventUrl='https://next-live-event.ft.com/?eventid=the-world/liveblogs/2020-05-05-2/' />
export function LiveBlogList({ serverConnection = false, initialPosts = [] }) {
  const [posts, setPosts] = useState(
    // using an OrderedMap means that new posts will be iterated
    // last and later-edited posts will stay in place
    OrderedMap(
      initialPosts.map(post => [post.id, post])
    )
  )
  
  useEffect(() => {
    if(eventUrl) {
      // an imaginary connection to a server stream of live blog events
      const channel = new LiveBlogStream(eventUrl)

      channel.on('post', post => {
        setPosts(posts => posts.set(post.id, post))
      })
      
      return () => {
        channel.close()
      }
    }
  }, [serverConnection])
  
  return posts.map(post => <LiveBlogPost post={post} key={post.id} />)
}