diff --git a/reading/pic_chat_messages.livemd b/reading/pic_chat_messages.livemd index 2566469a..6ae22d89 100644 --- a/reading/pic_chat_messages.livemd +++ b/reading/pic_chat_messages.livemd @@ -34,8 +34,8 @@ Mix.install([ Upon completing this lesson, a student should be able to answer the following questions. -* How does the live action in the router interact with `handle_params/3` in `MessageLive.Index` to render UI for the `:index`, `:new`, and `:edit` actions? -* Explain the LiveComponent LifeCycle. +- How does the live action in the router interact with `handle_params/3` in `MessageLive.Index` to render UI for the `:index`, `:new`, and `:edit` actions? +- Explain the LiveComponent LifeCycle. ## PicChat: Messages @@ -64,7 +64,7 @@ Use the [LiveView Generators](https://hexdocs.pm/phoenix/Mix.Tasks.Phx.Gen.Live. ```elixir -mix phx.gen.live Messages Message messages content:text +mix phx.gen.live Chat Message messages content:text ``` @@ -152,9 +152,9 @@ The generators have done a lot for us, but it's important we understand what was Here's a broad view of our application's new `MessageLive.Index` LiveView and how it ultimately renders the HTML response for the following routes: -* http://localhost:4000/messages -* http://localhost:4000/messages/new -* http://localhost:4000/messages/:id/edit +- http://localhost:4000/messages +- http://localhost:4000/messages/new +- http://localhost:4000/messages/:id/edit ```mermaid sequenceDiagram @@ -242,11 +242,11 @@ When the LiveView first loads, it calls the `mount/3` function to assign a list Then, `handle_params/3` delegates to the `apply_action/3` function to assign more data to the socket depending on whether or not the live action is `:index`, `:edit`, or `:new`: -* The `page_title` is different for each page. It controllers the text displayed at the top of the browser tab. -* The `:new` page creates a `Message` struct for the new message form. -* The `:edit` page retrieves an existing `Message` based on the `"id"` url param. -* `handle_info/3` receives a message from the form_component to insert a `Message` into the list of messages. -* `handle_event/3` deletes a message. +- The `page_title` is different for each page. It controllers the text displayed at the top of the browser tab. +- The `:new` page creates a `Message` struct for the new message form. +- The `:edit` page retrieves an existing `Message` based on the `"id"` url param. +- `handle_info/3` receives a message from the form_component to insert a `Message` into the list of messages. +- `handle_event/3` deletes a message. @@ -734,10 +734,10 @@ end Consider the following resource(s) to deepen your understanding of the topic. -* [HexDocs: LiveView](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html) -* [HexDocs: LiveComponent](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveComponent.html) -* [Elixir Schools: LiveView](https://elixirschool.com/blog/phoenix-live-view/) -* [PragProg: Programming Phoenix LiveView](https://pragprog.com/titles/liveview/programming-phoenix-liveview/) +- [HexDocs: LiveView](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html) +- [HexDocs: LiveComponent](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveComponent.html) +- [Elixir Schools: LiveView](https://elixirschool.com/blog/phoenix-live-view/) +- [PragProg: Programming Phoenix LiveView](https://pragprog.com/titles/liveview/programming-phoenix-liveview/) ## Commit Your Progress