import { connectApiClient } from "api-client-react";

const ExampleconnectApiClientComponent = ({ loading, users, complete, error }) => {
  if (loading) {
    return <p>loading</p>;
  }

  if (error) {
    return <p>Error</p>;
  }

  if (users) {
    return (
      <ol>
        {users.map(b => (
          <li key={b.name}>{b.name}</li>
        ))}
      </ol>
    );
  }

  return <strong>{complete}</strong>;
}

// Same object: https://github.com/axios/axios#axios-api
const apiSettings = {
  method: "get",
  url: "https://jsonplaceholder.typicode.com/users"
};

const mapApiProps = ({ loading, data, error }) => ({
  loading,
  users: data,
  error,
  complete: !loading && data && !error ? "true" : "false"
});

export const ExampleconnectApiClient = connectApiClient(apiSettings, mapApiProps)(ExampleconnectApiClientComponent);