aboutsummaryrefslogtreecommitdiff
path: root/examples/04-http-requests/src
diff options
context:
space:
mode:
Diffstat (limited to 'examples/04-http-requests/src')
-rw-r--r--examples/04-http-requests/src/app.gleam91
1 files changed, 0 insertions, 91 deletions
diff --git a/examples/04-http-requests/src/app.gleam b/examples/04-http-requests/src/app.gleam
deleted file mode 100644
index ac75d42..0000000
--- a/examples/04-http-requests/src/app.gleam
+++ /dev/null
@@ -1,91 +0,0 @@
-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 HttpOrJsonError}
-// 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(String))
-}
-
-fn init(_) -> #(Model, Effect(Msg)) {
- #(Model(quote: None), effect.none())
-}
-
-// UPDATE ----------------------------------------------------------------------
-
-pub opaque type Msg {
- Refresh
- GotQuote(Result(String, HttpOrJsonError))
-}
-
-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.field("content", dynamic.string)
-
- lustre_http.get_as_json(url, GotQuote, decoder)
-}
-
-// VIEW ------------------------------------------------------------------------
-
-fn view(model: Model) -> Element(Msg) {
- let styles = [#("width", "100vw"), #("height", "100vh")]
-
- 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(String)) -> Element(msg) {
- case quote {
- Some(quote) ->
- ui.stack([], [
- element.text("Someone once said..."),
- html.p([attribute.style([#("font-style", "italic")])], [
- element.text(quote),
- ]),
- ])
- None -> html.p([], [element.text("Click the button to get a quote!")])
- }
-}