diff --git a/example_project/assets/svelte/Chat.svelte b/example_project/assets/svelte/Chat.svelte index 520ca23..61909d9 100644 --- a/example_project/assets/svelte/Chat.svelte +++ b/example_project/assets/svelte/Chat.svelte @@ -1,31 +1,56 @@ -
- +
+ -
- - - -
+
+ + + +
diff --git a/example_project/lib/example_web/components/layouts/app.html.heex b/example_project/lib/example_web/components/layouts/app.html.heex index ea5c889..0f5342c 100644 --- a/example_project/lib/example_web/components/layouts/app.html.heex +++ b/example_project/lib/example_web/components/layouts/app.html.heex @@ -1,4 +1,4 @@ -
+
-
+
<%= @inner_content %>
diff --git a/example_project/lib/example_web/live/live_example_5.ex b/example_project/lib/example_web/live/live_example_5.ex index 2cdb441..1afd9b4 100644 --- a/example_project/lib/example_web/live/live_example_5.ex +++ b/example_project/lib/example_web/live/live_example_5.ex @@ -6,22 +6,44 @@ defmodule ExampleWeb.LiveExample5 do def render(assigns) do ~H""" - +
+ <%= unless @name do %> +
+ + + +
+ <% else %> + + <% end %> +
""" end def mount(_params, _session, socket) do ExampleWeb.Endpoint.subscribe(@topic) - {:ok, assign(socket, messages: [])} + {:ok, assign(socket, messages: [], name: nil)} end - def handle_event("send_message", event, socket) do - ExampleWeb.Endpoint.broadcast(@topic, @event_new_message, event) + def handle_event("set_name", %{"name" => ""}, socket), do: {:noreply, socket} + def handle_event("set_name", %{"name" => name}, socket), do: {:noreply, assign(socket, name: name)} + + def handle_event("send_message", payload, socket) do + payload = + payload + |> Map.put(:name, socket.assigns.name) + |> Map.put(:id, System.unique_integer([:positive])) + + ExampleWeb.Endpoint.broadcast(@topic, @event_new_message, payload) + {:noreply, socket} end def handle_info(%{topic: @topic, event: @event_new_message, payload: payload}, socket) do - payload = Map.put(payload, :id, System.unique_integer([:positive])) {:noreply, assign(socket, messages: socket.assigns.messages ++ [payload])} end end