koss-lebedev

type Props = {
  items: Array<Video | LiveStream>
}

const VideoList = ({ items }) => {
  return (
    <ul>
      {items.map(item => {
        if ('coverUrl' in item) {
          // it's a video

koss-lebedev

type LiveStream = {
  name: string
  previewUrl: string
}

koss-lebedev

type Props = {
  video: Video
}

const Thumbnail = ({ video }: Props) => {
  return <img src={video.coverUrl} />
}

koss-lebedev

const knownTypes = {}

export const messageFactory = {
  registerType: (type, Component) => knownTypes[type] = Component,
  
  render: (message) => {
    const Component = knownTypes[message.type]
    
    if (!Component) {
      throw new Error('Unknown message type')

koss-lebedev

export const Chat = (messages, props) => {
  // ...

  return (
    <ul>
      {messages.map(message => {
        const MessageComponent = messageFactory.render(message) 
        return <MessageComponent key={message.id} />
      })}
    </ul>

koss-lebedev

const TextMessage = ({ message }) => {
  // ...
  
  return <div>{message.text}</div>
}

messageFactory.registerType('text', TextMessage)

koss-lebedev

export const Chat = (messages, props) => {
  // ...

  return (
    <ul>
      {messages.map(message => {
        switch (message.type) {
          case 'text': return <TextMessage message={message} />
          case 'image': return <ImageMessage message={message} />
          case 'audio': return <AudioMessage message={message} />

koss-lebedev

const Header = () => {
  const { pathname } = useRouter()
  
  return (
    <header>
      <Logo />
      <Actions>
        {pathname === '/dashboard' && <Link to="/events/new">Create event</Link>}
        {pathname === '/' && <Link to="/dashboard">Go to dashboard</Link>}
      </Actions>

koss-lebedev

const Header = ({ children }) => (
  <header>
    <Logo />
    <Actions>
      {children}
    </Actions>
  </header>
)

const HomePage = () => (

koss-lebedev

const ActiveUsersList = () => {
  const [users, setUsers] = useState([])
  
  useEffect(() => {
    const loadUsers = async () => {  
      const response = await fetch('/some-api')
      const data = await response.json()
      setUsers(data)
    }