From f6b262ea668bfaef48be40efb809e791258e2417 Mon Sep 17 00:00:00 2001
From: Logan Hunt <loganhunt@simponic.xyz>
Date: Thu, 21 Apr 2022 17:23:17 -0600
Subject: Updates to frontend and fix a bug where first socket assignment
 failed

---
 lib/aggiedit_web/channels/post_channel.ex         |  5 +-
 lib/aggiedit_web/live/post_live/form_component.ex |  4 +-
 lib/aggiedit_web/live/post_live/show.html.heex    | 70 ++++-------------------
 lib/aggiedit_web/templates/layout/root.html.heex  |  1 +
 4 files changed, 19 insertions(+), 61 deletions(-)

(limited to 'lib')

diff --git a/lib/aggiedit_web/channels/post_channel.ex b/lib/aggiedit_web/channels/post_channel.ex
index ea79d76..2b1c9b5 100644
--- a/lib/aggiedit_web/channels/post_channel.ex
+++ b/lib/aggiedit_web/channels/post_channel.ex
@@ -24,13 +24,14 @@ defmodule AggieditWeb.PostChannel do
     |> Enum.map(fn c -> Aggiedit.Post.Comment.serialize(c) end)
     push(socket, "initial-comments", %{:comments => comments})
     
+    broadcast!(socket, "join", %{user: socket.assigns.current_user.username})
     {:noreply, socket}
   end
 
   @impl true
-  def handle_in("send", %{"body" => comment}=body, socket) do
+  def handle_in("send", %{"body" => comment}, 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
+end
diff --git a/lib/aggiedit_web/live/post_live/form_component.ex b/lib/aggiedit_web/live/post_live/form_component.ex
index 8714277..43e6b9b 100644
--- a/lib/aggiedit_web/live/post_live/form_component.ex
+++ b/lib/aggiedit_web/live/post_live/form_component.ex
@@ -39,7 +39,9 @@ defmodule AggieditWeb.PostLive.FormComponent do
       filename = "#{upload.uuid}.#{extension}"
 
       dest = Path.join("priv/static/uploads", filename)
-      File.cp!(data.path, dest)
+      with :ok <- File.mkdir_p(Path.dirname(dest)) do
+        File.cp!(data.path, dest)
+      end
 
       {:ok, upload} = Uploads.create_upload(%{
         file: filename,
diff --git a/lib/aggiedit_web/live/post_live/show.html.heex b/lib/aggiedit_web/live/post_live/show.html.heex
index b89999b..f0d1f41 100644
--- a/lib/aggiedit_web/live/post_live/show.html.heex
+++ b/lib/aggiedit_web/live/post_live/show.html.heex
@@ -1,4 +1,3 @@
-
 <div class="d-flex justify-content-center">
   <div class="container">
     <div>
@@ -6,7 +5,7 @@
     </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"/>
+        <img src={Routes.static_path(@socket, "/uploads/#{@post.upload.file}")} class="img-fluid" style="max-height: 40vh"/>
       <% end %>
     </div>
     <div class="post-body">
@@ -16,21 +15,18 @@
       <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="card">
-        		<div class="card-header">Chat</div>
-        		<div class="card-body chat-container">
-        			<ul class="chat-list" id="chat">
-        			</ul>
-        		</div>
-        	</div>
-        </div>
+    <div class="border rounded p-2 m-2">
+      <div class="chat" id="chat">
+      </div>
+    </div>
+    <form class="border rounded p-2 m-2" onsubmit="return RoomChat.submitForm(event)">
+      <div class="form-group m-2">
+        <label for="message">Message</label>
+        <input type="text" class="form-control" id="message" name="message" placeholder="Message">
+      </div>
+      <button type="submit" class="m-2 btn btn-primary">Submit</button>
+    </form>
   </div>
 </div>
 
@@ -47,45 +43,3 @@
     />
   </.modal>
 <% end %>
-
-<script>
-  const scrollToBottom = (element) => {
-    element.scrollIntoView({ behavior: 'smooth', block: 'end' });
-  };
-
-  const appendComment = ({user, body, id, user_id, inserted_at}, element) => {
-    const messageElement = document.createElement("div");
-    messageElement.innerHTML = `
-      <li class="${user_id == <%= @current_user.id %> ? 'out' : 'in'}" id=${id}>
-        <div class="chat-body">
-          <div class="chat-message">
-            <h5>${user}</h5>
-            <p>${body}</p>
-          </div>
-        </div>
-      </li>
-    `;
-    element.appendChild(messageElement);
-    scrollToBottom(element);
-  };
-
-
-  let channel;
-  window.addEventListener('phx:initial-post', (e) => {
-    const chatWindow = document.getElementById("chat");
-    window.userSocket.connect();
-    channel = window.RoomChat.connect(window.userSocket, e.detail.id);
-
-    channel.on('shout', (comment) => {
-      appendComment(comment, chatWindow);
-    });
-
-    channel.on('initial-comments', ({comments}) => {
-      comments.forEach((comment) => {
-        appendComment(comment, chatWindow);
-      });
-      scrollToBottom(chatWindow);
-    });
-    channel.push("send", {body: "Hello!"});
-  });
-</script>
diff --git a/lib/aggiedit_web/templates/layout/root.html.heex b/lib/aggiedit_web/templates/layout/root.html.heex
index 14c7605..ec7ff0d 100644
--- a/lib/aggiedit_web/templates/layout/root.html.heex
+++ b/lib/aggiedit_web/templates/layout/root.html.heex
@@ -8,6 +8,7 @@
     <%= live_title_tag assigns[:page_title] || "Aggiedit" %>
     <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")}/>
     <script phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>
+    <link rel="icon" type="image/x-icon" href={Routes.static_path(@conn, "/favicon.ico")}/>
 
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-- 
cgit v1.2.3-70-g09d2