Initial chat box; man phoenix does not have the best docs

3 files changed, 88 insertions, 22 deletions

diff --git a/lib/aggiedit_web/channels/post_channel.ex b/lib/aggiedit_web/channels/post_channel.ex
index 308c6de..ea79d76 100644
--- a/lib/aggiedit_web/channels/post_channel.ex
+++ b/lib/aggiedit_web/channels/post_channel.ex
@@ -2,21 +2,35 @@ defmodule AggieditWeb.PostChannel do
   use AggieditWeb, :channel
 
   alias Aggiedit.Roles
+  alias Aggiedit.Repo
   alias Aggiedit.Rooms
 
   @impl true
   def join("post:" <> post_id, _payload, socket) do
     post = Rooms.get_post!(post_id)
     if Roles.guard?(socket.assigns.current_user, :show, post) do
-      {:ok, socket}
+      send(self(), :after_join)
+      {:ok, assign(socket, %{:post => post})}
     else
       {:error, "You do not have permission to view this post."}
     end
   end
 
   @impl true
-  def handle_in("send", body, socket) do
-    broadcast!(socket, "shout", body)
+  def handle_info(:after_join, socket) do
+    comments = socket.assigns.post
+    |> Repo.preload(comments: [:user])
+    |> Map.get(:comments)
+    |> Enum.map(fn c -> Aggiedit.Post.Comment.serialize(c) end)
+    push(socket, "initial-comments", %{:comments => comments})
+    
+    {:noreply, socket}
+  end
+
+  @impl true
+  def handle_in("send", %{"body" => comment}=body, socket) do
+    {:ok, comment} = Rooms.comment_post(socket.assigns.post, socket.assigns.current_user, comment)
+    broadcast!(socket, "shout", Aggiedit.Post.Comment.serialize(comment))
     {:reply, :ok, socket}
   end
 end
\ No newline at end of file
diff --git a/lib/aggiedit_web/live/post_live/show.ex b/lib/aggiedit_web/live/post_live/show.ex
index 9d8f86c..69cd6c5 100644
--- a/lib/aggiedit_web/live/post_live/show.ex
+++ b/lib/aggiedit_web/live/post_live/show.ex
@@ -15,10 +15,10 @@ defmodule AggieditWeb.PostLive.Show do
     post = Rooms.get_post!(id)
     |> Repo.preload(:upload)
     if Roles.guard?(socket.assigns.current_user, socket.assigns.live_action, post) do
-      {:noreply,
-      socket
+      socket = (if socket.assigns.live_action == :show, do: push_event(socket, "initial-post", %{:id => post.id}), else: socket)
       |> assign(:page_title, page_title(socket.assigns.live_action))
-      |> assign(:post, post)}
+      |> assign(:post, post)
+      {:noreply, socket}
     else
       {:noreply, socket |> put_flash(:error, "You don't have permission to do that.") |> redirect(to: Routes.post_show_path(socket, :show, socket.assigns.room, post))}
     end
diff --git a/lib/aggiedit_web/live/post_live/show.html.heex b/lib/aggiedit_web/live/post_live/show.html.heex
index 107a3a6..8f91fda 100644
--- a/lib/aggiedit_web/live/post_live/show.html.heex
+++ b/lib/aggiedit_web/live/post_live/show.html.heex
@@ -1,4 +1,37 @@
-<h1>Show Post</h1>
+
+<div class="d-flex justify-content-center">
+  <div class="container">
+    <div>
+      <h1><%= @post.title %></h1>
+    </div>
+    <div>
+      <%= if Ecto.assoc_loaded?(@post.upload) && !is_nil(@post.upload) do %>
+        <img src={Routes.static_path(@socket, "/uploads/#{@post.upload.file}")} class="img-fluid"/>
+      <% end %>
+    </div>
+    <div class="post-body">
+      <%= @post.body %>
+    </div>
+    <%= if Aggiedit.Roles.guard?(@current_user, :edit, @post) do %>
+      <span><%= live_patch "Edit", to: Routes.post_show_path(@socket, :edit, @room, @post), class: "button" %></span> |
+    <% end %>
+    <span><%= live_redirect "Back", to: Routes.post_index_path(@socket, :index, @room) %></span>
+  </div>
+</div>
+
+<!-- chat container from https://www.bootdey.com/snippets/view/card-chat-list#html -->
+<div class="container content mt-2">
+  <div class="row">
+    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
+      <div class="chat-card">
+        <div class="chat-card-body">
+          <ul class="chat-list" id="chat" phx-update="ignore">
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 
 <%= if @live_action in [:edit] do %>
   <.modal return_to={Routes.post_show_path(@socket, :show, @room, @post)}>
@@ -14,24 +47,43 @@
   </.modal>
 <% end %>
 
-<ul>
+<script>
+  const scrollToBottom = (element) => {
+    element.scrollIntoView({ behavior: 'smooth', block: 'end' });
+  };
 
-  <li>
-    <strong>Title:</strong>
-    <%= @post.title %>
-  </li>
+  const appendComment = ({user, body, id, inserted_at}, element) => {
+    const messageElement = document.createElement("div");
+    messageElement.innerHTML = `
+      <li class="in" id=${id}>
+        <div class="chat-card-body">
+          <div class="chat-message">
+            <h5>${user}</h5>
+            <p>${body}</p>
+          </div>
+        </div>
+      </li>
+    `;
+    element.appendChild(messageElement);
+    scrollToBottom(element);
+  };
 
-  <li>
-    <strong>Body:</strong>
-    <%= @post.body %>
-  </li>
 
-</ul>
+  window.addEventListener('phx:initial-post', (e) => {
+    const chatWindow = document.getElementById("chat");
+    window.userSocket.connect();
+    let channel = window.RoomChat.connect(window.userSocket, e.detail.id);
 
-<span><%= live_patch "Edit", to: Routes.post_show_path(@socket, :edit, @room, @post), class: "button" %></span> |
-<span><%= live_redirect "Back", to: Routes.post_index_path(@socket, :index, @room) %></span>
+    channel.on('shout', (comment) => {
+      appendComment(comment, chatWindow);
+    });
 
-<script>
-  window.userSocket.connect();
-  window.RoomChat.init(window.userSocket, <%= @post.id %>)
+    channel.on('initial-comments', ({comments}) => {
+      comments.forEach((comment) => {
+        appendComment(comment, chatWindow);
+      });
+      scrollToBottom(chatWindow);
+    });
+    channel.push("send", {body: "Hello!"});
+  });
 </script>