guillaumewuip

export const isText = MessageUnion.is.Text;
export const isImage = MessageUnion.is.Image;

export const fold = MessageUnion.fold;

guillaumewuip

import * as Message from ‘../path/to/message.ts’;

const message: Message = Message.createText({ text: ‘hello world’ });

if (Message.isText(message)) {
  return <p>This is a text</p>;
} else {
  return <p>This is an image</p>;
}

guillaumewuip

export function addSignature(signature: string) {
  return (text: Text) => {
    const $text = MessageUnion.Text.iso.unwrap(text); // get private type
    const $newText = {
      …$text,
      text: `${$message.text} - ${signature}`,
    };
    return MessageUnion.Text.iso.wrap($newText); // get opaque type
  };
}

guillaumewuip

// text :: (text: Text) => string
export const text = MessageUnion.Text.lensFromProp(‘text’).get;

// updateText :: (content: string) => (text: Text) => Text
export const updateText = MessageUnion.Text.lensFromProp(‘text’).set;

guillaumewuip

export const fetchUsers = () => ({
  type: "FETCH_USERS"
});
export const fetchUsersFailed = () => ({
  type: "FETCH_USERS_FAILED"
});
export const fetchUsersSucceeded = (users) => ({
  type: "FETCH_USERS_SUCCEEDED",
  payload: {
    users

guillaumewuip

const initialState = { loading: true, users: [], error: undefined };

export function reducer(state = initialState, action) {
  console.log({ type: action.type, action });
  switch (action.type) {
    case "FETCH_USERS_SUCCEEDED":
      return {
        ...state,
        loading: false,
        users: action.payload.users.filter(

guillaumewuip

import { fetchUsers, createUser } from "./fake-fetch";

import {
  fetchUsersSucceeded,
  fetchUsersFailed,
  createUserFailed,
  createUserSucceeded
} from "./actionCreators";

export const middleware = ({ dispatch, getState }) => (next) => (action) => {

guillaumewuip

export const getUsers = (state) =>
  state.users.map((user) => ({
    ...user,
    picture: user.picture || "https://i.pravatar.cc/300 "
  }));

guillaumewuip

import React from "react";
import { useDispatch, useSelector } from "react-redux";

import { getUsers } from "./selectors";
import { createUser } from "./actionCreators";

import Users from "./components/Users";
import UserForm from "./components/UserForm";

export default function App() {

guillaumewuip

import * as NonEmptyArray from "fp-ts/lib/NonEmptyArray";

import * as User from "./user";

export type State = Loading | Failure | Loaded;

export const initialState: Loading = "Loading";

type Loading = "Loading";
type Failure = Error;