ProductList.re

type loadableData('e) =
  | Loading
  | Loaded(list('e));

type loadableDataAction('e) =
  | DidLoad(list('e));

type state = {data: loadableData(Api.product)};

/* Action declaration */
type action =
  | DataAction(loadableDataAction(Api.product));

let component = ReasonReact.reducerComponent("ProductList");

let make = _children => {
  ...component,
  initialState: () => {data: Loading},
  didMount: self =>
    Api.fetchProducts()
    |> Js.Promise.then_(products => {
         self.send(DataAction(DidLoad(products)));
         Js.Promise.resolve(products);
       })
    |> ignore,
  reducer: (action, _) =>
    switch (action) {
    | DataAction(DidLoad(products)) =>
      ReasonReact.Update({data: Loaded(products)})
    },
  render: self =>
    switch (self.state.data) {
    | Loading => <label> (ReasonReact.string("Loading...")) </label>
    | Loaded(products) =>
      let items =
        products
        |> List.map((p: Api.product) =>
             <li key=p.id> (ReasonReact.string(p.name)) </li>
           );
      <ul> (ReasonReact.array(Array.of_list(items))) </ul>;
    },
};