package app import ( "strconv" "strings" "kjol/httputil" . "kjol/vdom" ui "kjol/webui" ) // Quote is the payload the /api/quotes endpoint returns. The server encodes a // []Quote with httputil.RespondGob; the client decodes it straight back into // []Quote — the SAME Go type, no JSON, no hand-written unmarshalling. type Quote struct { Author string Text string } // repoInfo is a subset of GitHub's repo JSON (a third-party API), tagged for // json decoding. type repoInfo struct { FullName string `json:"full_name"` Description string `json:"description"` Stars int `json:"stargazers_count"` } //gowasm:page /data layout=app func DataPage(d Deps) func() *VNode { // (1) gob from our own server via httputil.RespondGob / FetchGob. quotes := NewSignal([]Quote{}) qLoading := NewSignal(true) qErr := NewSignal("") // (2) JSON from a third-party API (GitHub), for a user-entered repo. repo := NewSignal(repoInfo{}) rLoading := NewSignal(true) rErr := NewSignal("") repoQuery := NewSignal("golang/go") started := false // fetchRepo loads owner/name from the GitHub API into the repo signal. fetchRepo := func(q string) { q = strings.Trim(strings.TrimSpace(q), "/") if q == "" { rErr.Set("enter a repo as owner/name") rLoading.Set(false) return } rErr.Set("") rLoading.Set(true) httputil.FetchJSON("https://api.github.com/repos/"+q, func(r repoInfo, err error) { if err != nil { rErr.Set(err.Error()) } else { repo.Set(r) } rLoading.Set(false) }) } return func() *VNode { // Fire the initial fetches once, on the client (no transport on the server, // so SSR ships the loading state and the client takes over). if !started { started = true httputil.FetchGob("/api/quotes", func(qs []Quote, err error) { if err != nil { qErr.Set(err.Error()) } else { quotes.Set(qs) } qLoading.Set(false) }) fetchRepo(repoQuery.Get()) } return Div(Attr("class", "space-y-8"), Div( H2(Attr("class", "text-2xl font-semibold tracking-tight text-text-heading"), Text("Data fetching")), P(Attr("class", "mt-1 text-neutral-500"), Text("Two client-side fetches: gob from our own server, and JSON from a third-party API you choose.")), ), ui.Card("", ui.CardHeader("", Text("gob — from our server")), P(Attr("class", "mb-3 text-sm text-neutral-500"), Text("The client GETs /api/quotes; the server responds with httputil.RespondGob "+ "(a gob-encoded []Quote) and httputil.FetchGob decodes it straight into []Quote — "+ "the same Go type on both ends, no JSON.")), quotesBody(qLoading.Get(), qErr.Get(), quotes.Get()), ), ui.Card("", ui.CardHeader("", Text("JSON — from a third-party API")), P(Attr("class", "mb-3 text-sm text-neutral-500"), Text("Enter a GitHub repo; the client GETs api.github.com and httputil.FetchJSON "+ "decodes the response into a Go struct with `json:\"…\"` tags.")), row("mb-4 flex items-end gap-2", row("flex grow flex-col gap-1 max-w-sm", ui.FormLabel(ui.FormLabelProps{}, Text("GitHub repo (owner/name)")), ui.FormInput(ui.FormInputProps{ Value: repoQuery.Get(), Placeholder: "golang/go", OnInput: func(v string) { repoQuery.Set(v) }, }), ), ui.Button(ui.ButtonProps{Color: ui.ButtonPrimary, Text: "Fetch", OnClick: func() { fetchRepo(repoQuery.Get()) }}), ), repoBody(rLoading.Get(), rErr.Get(), repo.Get()), ), ) } } func quotesBody(loading bool, failed string, quotes []Quote) *VNode { switch { case failed != "": return ui.Alert(ui.AlertRed, "Fetch failed", Text(failed)) case loading: return ui.Loader() default: cards := make([]*VNode, 0, len(quotes)) for _, q := range quotes { cards = append(cards, ui.BorderCard("", P(Attr("class", "text-neutral-800"), Text("“"+q.Text+"”")), P(Attr("class", "mt-2 text-sm text-neutral-500"), Text("— "+q.Author)), )) } return row("grid gap-3 sm:grid-cols-2", cards...) } } func repoBody(loading bool, failed string, r repoInfo) *VNode { switch { case failed != "": return ui.Alert(ui.AlertRed, "Fetch failed", Text(failed)) case loading: return ui.Loader() default: return ui.BorderCard("", row("flex items-center gap-2", Strong(Attr("class", "text-neutral-800"), Text(r.FullName)), ui.Badge(ui.BadgeProps{Color: ui.BadgeAmber}, Text("★ "+strconv.Itoa(r.Stars))), ), P(Attr("class", "mt-2 text-sm text-neutral-600"), Text(r.Description)), ) } }