guillaumewuip

import * as Union from ‘@iadvize-oss/opaque-union;

type $Text = {
  text: string;
}

type $Image = {
  url: string;
  description: string;
}

guillaumewuip

// message.ts
import { createOpaqueAPI } from ‘@iadvize-oss/opaque-type’;
import { createFoldObject } from ‘@iadvize-oss/foldable-helpers’;

type $Text = {
  text: string;
}

type $Image = {
  url: string;

guillaumewuip

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

guillaumewuip

export type $TextMessage = {
  text: string;
}

const { toOpaque, fromOpaque, isOpaque } = createOpaqueAPI<
  'TextMessage',
  $TextMessage,
>('TextMessage’);

export type TextMessage = ReturnType<typeof toOpaque>;

guillaumewuip

createText(text: string): TextMessage
text(message: TextMessage): string

createImage(url: string, description: string): ImageMessage
createAudio(url: string, description: string): AudioMessage
url(message: ImageMessage | AudioMessage): string,

toText(message: ImageMessage): TextMessage

...

guillaumewuip

import { createFold } from ‘@iadvize-oss/foldable-helpers’;

// fold :: (TextMessage -> R) -> (ImageMessage -> R) -> (AudioMessage -> R) -> Message -> R
// “feeding” the fold-creator with our previously created type guards
const fold = createFold(isText, isImage, isAudio);

// or, passing function with an object to give them names

import { createFoldObject } from ‘@iadvize-oss/foldable-helpers’;

guillaumewuip

import { TextMessage, ImageMessage, AudioMessage, fold } from ‘./Message’;

const renderMessage = fold(
  (textMessage: TextMessage) => <TextComponent text={message.text} />),
  (imageMessage: ImageMessage) => <ImageComponent url={message.url} description={message.description} />,
  (audioMessage: AudioMessage) => <AudioComponent url={message.url} description={message.description} />
)

// Somewhere in a component far, far away... 
return (

guillaumewuip

// Message.ts
function fold<R>(
  onText: (message: TextMessage) => R,
  onImage: (message: ImageMessage) => R,
  onAudio: (message: AudioMessage) => R,
) => {
  return (message: Message): R => {
    switch (message.messageType) {
      case ‘TEXT’:
        return onText(message);

guillaumewuip

import { Option, fold } from ‘fp-ts/lib/Option`;

const user: Option<User> = … // ie. None | Some<User>

return fold(
    () => <p>oops, no user!</p>,
    (user: User)  => <UserView user={user} />,
)(user);

guillaumewuip

if (isText(message)) {
  return <TextComponent text={message.text} />
}