How to model your entities - 14

Example.ts

import {
  createText,
  createImage,
  createAudio,
  AudioMessage,
  description,
  url,
  fold,
} from ‘fabulous-Message-library’;

// data fetching
async function fetchMessages() {
  const { rawMessages } = await fetch.get(‘http://messages.io’)

  const messages = rawMessages
    .map(message => {
       if (...) {
         return createAudio(...)
       } 
       if (...) {
         return createImage(...)
       } 
      return createText(...);
    })

   return messages;
}

// Views
function AudioMessage({ message: AudioMessage }) {
  return <div>
     <p>{description(message)}</p>
     <Player source={url(message)}>
   </div>
}

function MessageComponent({ message: Message }) {
  return fold({
    isText: message => <TextMessage message={message} />,
    isImage: message => <ImageMessage  message={message} />,
    isAudio: message => <AudioMessage message={message} />,
  })(message);
}