aboutsummaryrefslogtreecommitdiff
path: root/examples/06-custom-effects
diff options
context:
space:
mode:
authorHayleigh Thompson <me@hayleigh.dev>2024-03-27 20:57:14 +0000
committerHayleigh Thompson <me@hayleigh.dev>2024-03-27 20:57:14 +0000
commit9d0aa7738449ac70787dfced639b0573432ee005 (patch)
tree5f4ce51e99d6d87457982e3cdc8657fc19e784b2 /examples/06-custom-effects
parentef41bf37c5042aea3a79bdf4883d5a0946462469 (diff)
downloadlustre-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.md12
-rw-r--r--examples/06-custom-effects/src/app.gleam24
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")],
),
)