You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
4.7 KiB
100 lines
4.7 KiB
defmodule ChirpWeb.PostLive.PostComponent do |
|
use ChirpWeb, :live_component |
|
|
|
@spec render(any) :: Phoenix.LiveView.Rendered.t() |
|
def render(assigns) do |
|
#IO.inspect(assigns.post.__meta__.state) |
|
~H""" |
|
<div id={"post-#{assigns.post.id}"} class="container mx-auto" |
|
style={if @post.__meta__.state == :deleted, do: "display:none;", else: ""} |
|
> |
|
<div id={"postrow-for-#{assigns.post.id}"} class="flex flex-row"> |
|
|
|
<div class="basis-1/4"> |
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> |
|
<path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" /> |
|
</svg> |
|
<div label="Username"><%= @post.username %></div> |
|
|
|
</div> |
|
<div id={"post-maincolumn-#{assigns.post.id}"} class="basis-3/4"> |
|
|
|
<div id={"post-cardbox-#{assigns.post.id}"} class="p-6 max-w-lg bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"> |
|
<pre id={"body-#{assigns.post.id}"} label="Body" class="mb-3 font-normal text-gray-500 dark:text-gray-400"><%= @post.body %></pre> |
|
<div id={"buttons-#{assigns.post.id}"} class="grid grid-flow-col gap-4 auto-cols-max"> |
|
<div class="p-1"> |
|
<.link navigate={~p"/posts/#{@post}"} class="inline-flex items-center text-blue-600 hover:underline"> |
|
Show |
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="p-1 w-6 h-6"> |
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" /> |
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> |
|
</svg> |
|
</.link> |
|
</div> |
|
|
|
<div id={"likes-col-#{assigns.post.id}"} class="p-1 flex flex-row"> |
|
<.link phx-click="like" phx-value-id={@post.id} phx-target={@myself}> |
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> |
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" /> |
|
</svg> |
|
</.link> |
|
<span id={"likes-count-#{assigns.post.id}"} label="Likes count"> |
|
<%= @post.likes_count %> |
|
</span> |
|
</div> |
|
|
|
<div class="p-1 flex flex-row"> |
|
<.link phx-click="repost" phx-value-id={@post.id} phx-target={@myself}> |
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> |
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3" /> |
|
</svg> |
|
</.link> |
|
<div label="Reposts countt"> |
|
<%= @post.reposts_count %> |
|
</div> |
|
</div> |
|
<div class="p-1"> |
|
<.link patch={~p"/posts/#{@post}/edit"}>Edit</.link> |
|
</div> |
|
<div class="p-1"> |
|
<.link phx-click={JS.push("delete", value: %{id: @post.id})} phx-target={@myself} data-confirm="Are you sure?"> |
|
Delete |
|
</.link> |
|
</div> |
|
<div class="p-1"> |
|
<!-- 🗑: <%= if @post.__meta__.state == :deleted, do: "Yes", else: "No" %> --> |
|
</div> |
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
</div> |
|
</div> |
|
""" |
|
end |
|
|
|
|
|
def handle_event("like", _, socket) do |
|
Chirp.Timeline.inc_likes(socket.assigns.post) |
|
{:noreply,socket} |
|
end |
|
def handle_event("repost", _, socket) do |
|
Chirp.Timeline.inc_reposts(socket.assigns.post) |
|
{:noreply,socket} |
|
end |
|
def handle_event("delete", %{"id" => id}, socket) do |
|
post = Chirp.Timeline.get_post!(id) |
|
{:ok, _} = Chirp.Timeline.delete_post(post) |
|
|
|
{:noreply, socket} |
|
end |
|
|
|
end
|
|
|