for aaron

song.nim

## This demo shows how you can develop your own stateful components with Karax.
include karax / prelude, json
import sugar, asyncdispatch, karax / [kajax]

type
  Song = ref object of VComponent
    uuid: string
    timestamp: int64
    updated: int64
    slug: kstring
    title: kstring
    rating: int
    opinion: kstring

  SongDetail = object
    id: int
    uuid: string
    timestamp: int64
    updated: int64
    slug: string
    title: string
    rating: int
    opinion: string

  SongResponse = object
    data:  seq[SongDetail]

  Data= object
    songs: seq[SongDetail]

proc renderSong(x: VComponent): VNode =
  echo "Render"
  let self = Song(x)
  result = buildHtml(tdiv()):
    text self.title
   
proc onContent(status: int, response: cstring, state: Song)  = 
    var jresp = parseJson($response)
    echo jresp
    var sr = to(jresp, SongResponse)
    echo sr.data[0]
    state.title =sr.data[0].title
    echo state.title
    

proc song(): Song =
  echo "song proc"
  var s = newComponent(Song, renderSong)
  ajaxGet("http://localhost:8080/api/content?type=Song&id=1", @[], (httpStatus: int, response: cstring) => onContent(httpStatus, response, s), false)
  echo "blue"
  result = s

proc createDom(): VNode =
  result = buildHtml(table):
    tr:
      td:
        song()

setRenderer createDom