Render public Casset data in React.

import { createCassetClient } from "@casset/apps"
import {
  CassetClientProvider,
  useCassetArtist,
  useCassetCatalog,
} from "@casset/react"

const client = createCassetClient({
  baseUrl: "http://127.0.0.1:3000",
})

function ConnorPage() {
  const artist = useCassetArtist("connor")
  const catalog = useCassetCatalog("connor")

  if (artist.status === "idle" || artist.status === "loading") {
    return <p>Loading Connor…</p>
  }
  if (artist.status === "error") throw artist.error
  if (catalog.status === "idle" || catalog.status === "loading") {
    return <p>Loading the Catalog…</p>
  }
  if (catalog.status === "error") throw catalog.error

  return (
    <main>
      <h1>{artist.data.artist.displayName}</h1>
      {catalog.data.tracks.length === 0 ? (
        <p>No public Tracks yet.</p>
      ) : (
        catalog.data.tracks.map((track, index) => (
          <p key={track.kind + "-" + track.title + "-" + index}>{track.title}</p>
        ))
      )}
    </main>
  )
}

export function App() {
  return (
    <CassetClientProvider client={client}>
      <ConnorPage />
    </CassetClientProvider>
  )
}