module GetDrivers = [%graphql
  {|
  query getDrivers{
    all_drivers {
      id
      name
      email
    }
  }
  |}
];

module Driver = {
  [@react.component];
  let make = (~driver) =>
    switch (driver##name) {
    | Some(name) => <div> {ReasonReact.string(name)} </div>
    | None => React.null
    };
};

module Drivers = {
  [@react.component];
  let make = (~drivers) =>
    <div>
      {
        React.array(
          Array.of_list(List.map(driver => <Driver driver />, drivers)),
        )
      }
    </div>;
};

module GetDriversQuery = ReasonApollo.CreateQuery(GetDrivers);
[@react.component]
let make = () =>
  <GetDriversQuery>
    ...{
         ({result}) =>
           switch (result) {
           | Loading => <div> {ReasonReact.string("Loading")} </div>
           | Error(error) =>
             <div> {ReasonReact.string(error##message)} </div>
           | Data(response) =>
             response##all_drivers
             |> Js.Option.getWithDefault([||])
             |> Array.map(
                  fun
                  | Some(drivers) => <Drivers drivers />
                  | None => React.null,
                )
             |> ReasonReact.array
           }
       }
  </GetDriversQuery>;