gists.component.tsx

interface GistsProps {
  useGists: (page?: number) => [Gist[] | null, string?];
}

export const Gists: React.FC<GistsProps> = props => {
  const [page, setPage] = useState(0);
  const [gists, error] = props.useGists(page);

  if (error !== undefined) {
    return <div>{error}</div>;
  }
  
  if (gists === null) {
    return <div>Loading gists page {page}</div>;
  }

  return (
    <>
      <ul>
        {gists.map(gist => (
          <li>{gist.url}</li>
        ))}
      </ul>
      {page > 0 && <button onClick={() => setPage(page - 1)}>Prev</button>}
      <button onClick={() => setPage(page + 1)}>Next</button>
    </>
  );
};