import ky from 'ky';
import { usePromise } from '@desync/use-promise';

type User = {
  userId: number;
  name: string;
  username: string;
  email: string;
};

const loadUsers = async (): Promise<User[]> => {
  return ky
    .get('https://jsonplaceholder.typicode.com/users', {
      credentials: 'include',
    })
    .json<User[]>();
};

const UserList: React.FC = () => {
  const { data, error, isLoading } = usePromise(loadUsers, {});
  return (
    <div>
      {isLoading && <span>loading...</span>}
      {error && <span>{error.message}</span>}
      {data && <pre>{JSON.stringify(data)}</pre>}
    </div>
  );
};