Loadable.re

open Js.Promise;

type state('a) = {
  data: option('a),
  isLoading: bool,
};

type action('a) =
  | Load
  | Loaded('a);

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

let make =
    (
      ~promise: unit => Js.Promise.t('a),
      children: 'a => ReasonReact.reactElement,
    ) => {
  ...component,

  initialState: () => {data: None, isLoading: false},

  didMount: self => self.send(Load),

  reducer: (action: action('a), state: state('a)) =>
    switch (action) {
    | Load =>
      ReasonReact.UpdateWithSideEffects(
        {...state, isLoading: true},
        self =>
          promise()
          |> then_(data => self.send(Loaded(data)) |> resolve)
          |> ignore,
      )
    | Loaded(data) =>
      ReasonReact.Update({data: Some(data), isLoading: false})
    },

  render: self =>
    switch (self.state) {
    | {isLoading: true} => <div> {ReasonReact.string("Loading...")} </div>
    | {data: None} => <div> {ReasonReact.string("No data")} </div>
    | {data: Some(data)} => <div> {children(data)} </div>
    },
};