From 592230b11d2eda076dc12878c0885226b7361ad4 Mon Sep 17 00:00:00 2001
From: Hayleigh Thompson <me@hayleigh.dev>
Date: Wed, 31 Jan 2024 11:22:27 +0000
Subject: :construction: Scaffold an example using lustre_http.

---
 examples/05-http-requests/src/app.gleam | 100 ++++++++++++++++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 examples/05-http-requests/src/app.gleam

(limited to 'examples/05-http-requests/src')

diff --git a/examples/05-http-requests/src/app.gleam b/examples/05-http-requests/src/app.gleam
new file mode 100644
index 0000000..0abd9dc
--- /dev/null
+++ b/examples/05-http-requests/src/app.gleam
@@ -0,0 +1,100 @@
+import gleam/dynamic
+import gleam/option.{type Option, None, Some}
+import lustre
+import lustre/attribute
+import lustre/effect.{type Effect}
+import lustre/element.{type Element}
+import lustre/element/html
+import lustre/event
+// Lustre_http is a community package that provides a simple API for making
+// HTTP requests from your update function. You can find the docs for the package
+// here:
+//
+//   https://hexdocs.pm/lustre_http/index.html
+import lustre_http.{type HttpError}
+// These examples are written with lustre_ui in mind. They'll work regardless,
+// but to see what lustre_ui can do make sure to run each of these examples with
+// the `--include-styles` flag:
+//
+//   $ gleam run -m lustre/try -- --include-styles
+//
+// In your own apps, make sure to add the `lustre_ui` dependency and include the
+// stylesheet somewhere.
+import lustre/ui
+import lustre/ui/aside
+
+// MAIN ------------------------------------------------------------------------
+
+pub fn main() {
+  let app = lustre.application(init, update, view)
+  let assert Ok(_) = lustre.start(app, "#app", Nil)
+}
+
+// MODEL -----------------------------------------------------------------------
+
+type Model {
+  Model(quote: Option(Quote))
+}
+
+type Quote {
+  Quote(author: String, content: String)
+}
+
+fn init(_) -> #(Model, Effect(Msg)) {
+  #(Model(quote: None), effect.none())
+}
+
+// UPDATE ----------------------------------------------------------------------
+
+pub opaque type Msg {
+  Refresh
+  GotQuote(Result(Quote, HttpError))
+}
+
+fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) {
+  case msg {
+    Refresh -> #(model, get_quote())
+    GotQuote(Ok(quote)) -> #(Model(quote: Some(quote)), effect.none())
+    GotQuote(Error(_)) -> #(model, effect.none())
+  }
+}
+
+fn get_quote() -> Effect(Msg) {
+  let url = "https://api.quotable.io/random"
+  let decoder =
+    dynamic.decode2(
+      Quote,
+      dynamic.field("author", dynamic.string),
+      dynamic.field("content", dynamic.string),
+    )
+
+  lustre_http.get(url, lustre_http.expect_json(decoder, GotQuote))
+}
+
+// VIEW ------------------------------------------------------------------------
+
+fn view(model: Model) -> Element(Msg) {
+  let styles = [#("width", "100vw"), #("height", "100vh"), #("padding", "1rem")]
+
+  ui.centre(
+    [attribute.style(styles)],
+    ui.aside(
+      [aside.min_width(70), attribute.style([#("width", "60ch")])],
+      view_quote(model.quote),
+      ui.button([event.on_click(Refresh)], [element.text("New quote")]),
+    ),
+  )
+}
+
+fn view_quote(quote: Option(Quote)) -> Element(msg) {
+  case quote {
+    Some(quote) ->
+      ui.stack([], [
+        element.text(quote.author <> " once said..."),
+        html.p([attribute.style([#("font-style", "italic")])], [
+          element.text(quote.content),
+        ]),
+      ])
+    None -> html.p([], [element.text("Click the button to get a quote!")])
+  }
+}
-- 
cgit v1.2.3