Select.re

module type SelectData = {
  type t;
  let id: t => string;
  let toString: t => string;
};

module Styles = {
  open Css;

  let search = style([width(px(300)), fontSize(px(20))]);
};

module MakeSelect = (Data: SelectData) => {
  type state = {
    searchTerm: string,
    results: Belt.List.t(Data.t),
  };

  type action =
    | SetSearch(string)
    | SetResults(list(Data.t));

  let reactList = list => list->Belt.List.toArray->ReasonReact.array;

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

  let make = (~findResult: string => Js.Promise.t(list(Data.t)), _children) => {
    ...component,
    initialState: () => {searchTerm: "", results: []},
    reducer: (action: action, state: state) =>
      switch (action) {
      | SetSearch(searchTerm) =>
        ReasonReact.UpdateWithSideEffects(
          {...state, searchTerm},
          (
            self =>
              findResult(searchTerm)
              |> Js.Promise.then_(dataList =>
                   self.send(SetResults(dataList)) |> Js.Promise.resolve
                 )
              |> ignore
          ),
        )
      | SetResults(results) => ReasonReact.Update({...state, results})
      },
    render: self => {
      let renderedResults =
        self.state.results
        ->Belt.List.map(result =>
            <li key={Data.id(result)}>
              {ReasonReact.string(result->Data.toString)}
            </li>
          );
      <div>
        <input
          className=Styles.search
          value={self.state.searchTerm}
          onChange={
            event =>
              self.send(SetSearch(event->ReactEvent.Form.target##value))
          }
        />
        <ol> {reactList(renderedResults)} </ol>
      </div>;
    },
  };
};