diff options
author | Hayleigh Thompson <me@hayleigh.dev> | 2024-03-27 20:57:14 +0000 |
---|---|---|
committer | Hayleigh Thompson <me@hayleigh.dev> | 2024-03-27 20:57:14 +0000 |
commit | 9d0aa7738449ac70787dfced639b0573432ee005 (patch) | |
tree | 5f4ce51e99d6d87457982e3cdc8657fc19e784b2 /examples/06-custom-effects | |
parent | ef41bf37c5042aea3a79bdf4883d5a0946462469 (diff) | |
download | lustre-9d0aa7738449ac70787dfced639b0573432ee005.tar.gz lustre-9d0aa7738449ac70787dfced639b0573432ee005.zip |
:memo: Update examples docs.
Diffstat (limited to 'examples/06-custom-effects')
-rw-r--r-- | examples/06-custom-effects/README.md | 12 | ||||
-rw-r--r-- | examples/06-custom-effects/src/app.gleam | 24 |
2 files changed, 24 insertions, 12 deletions
diff --git a/examples/06-custom-effects/README.md b/examples/06-custom-effects/README.md index f8ad49f..fe6822b 100644 --- a/examples/06-custom-effects/README.md +++ b/examples/06-custom-effects/README.md @@ -5,6 +5,18 @@ bit about Lustre or Elm and want to help out, we'd love to have your help! Pleas [open an issue](https://github.com/lustre-labs/lustre/issues/new) if you have any ideas or reach out to @hayleigh.dev on the [Gleam discord](https://discord.gg/Fm8Pwmy). +## Another note on message naming + +In our [controlled inputs example](https://github.com/lustre-labs/lustre/tree/main/examples/03-controlled-inputs) +we touched on the idea of naming messages in a "Subject Verb Object" pattern. This +example neatly shows the benefits of taking such an approach once different "things" +start talking to your application. + +It would be easy to have a single `SetMessage` variant that both the user input +and local storage lookup use to update the model, but doing so might encourage +us to conceal the fact that the local storage lookup can fail and makes it harder +to see what things our app deals with. + ## Getting help If you're having trouble with Lustre or not sure what the right way to do diff --git a/examples/06-custom-effects/src/app.gleam b/examples/06-custom-effects/src/app.gleam index 5399903..e04484a 100644 --- a/examples/06-custom-effects/src/app.gleam +++ b/examples/06-custom-effects/src/app.gleam @@ -28,34 +28,34 @@ type Model { } fn init(_) -> #(Model, Effect(Msg)) { - #(Model(message: None), read_localstorage("message", GotMessage)) + #(Model(message: None), read_localstorage("message")) } // UPDATE ---------------------------------------------------------------------- pub opaque type Msg { - GotInput(String) - GotMessage(Result(String, Nil)) + UserUpdatedMessage(String) + CacheUpdatedMessage(Result(String, Nil)) } fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) { case msg { - GotInput(input) -> #( + UserUpdatedMessage(input) -> #( Model(message: Some(input)), write_localstorage("message", input), ) - GotMessage(Ok(message)) -> #(Model(message: Some(message)), effect.none()) - GotMessage(Error(_)) -> #(model, effect.none()) + CacheUpdatedMessage(Ok(message)) -> #( + Model(message: Some(message)), + effect.none(), + ) + CacheUpdatedMessage(Error(_)) -> #(model, effect.none()) } } -fn read_localstorage( - key: String, - to_msg: fn(Result(String, Nil)) -> msg, -) -> Effect(msg) { +fn read_localstorage(key: String) -> Effect(Msg) { effect.from(fn(dispatch) { do_read_localstorage(key) - |> to_msg + |> CacheUpdatedMessage |> dispatch }) } @@ -85,7 +85,7 @@ fn view(model: Model) -> Element(Msg) { ui.field( [], [], - ui.input([attribute.value(message), event.on_input(GotInput)]), + ui.input([attribute.value(message), event.on_input(UserUpdatedMessage)]), [element.text("Type a message and refresh the page")], ), ) |