fix post deletion, add /hello page for tailwindcss testing

2 years ago · 3672c21e97
10 changed files with 178 additions and 24 deletions
--- a/assets/css/app.css
+++ b/assets/css/app.css
@ -1,5 +1,34 @@
@import "tailwindcss/base";
@import "tailwindcss/components";
+
+
@import "tailwindcss/utilities";

+
+/* note import won't work without node based build pipeline - i.e postcss-import */
+/* @import "./components/buttons.css"; */
+
+@layer components {
+    .btn-primary {
+      @apply py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75;
+    }
+
+    .sidebar-iconbox {
+      @apply relative flex items-center justify-center h-12 w-12 mt-2 mb-4 mx-auto ;
+    }
+    .sidebar-icon {
+      @apply  stroke-green-500 hover:stroke-cyan-400 fill-transparent shadow-lg
+      hover:rounded-xl rounded-3xl transition-all duration-200 ease-linear;
+
+    }
+    .sidebar-tooltip {
+      @apply absolute w-auto p-2 m-2 min-w-max left-14 rounded-md shadow-md
+      text-white bg-gray-900 text-xs font-bold
+      transition-all duration-100 scale-0 origin-left;
+    
+    }
+  }
+  
+
+
 /* This file is for your main application CSS */
--- a/assets/css/components/buttons.css
+++ b/assets/css/components/buttons.css
@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .btn-primary {
+    @apply py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75;
+  }
+}
+
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@ -13,6 +13,19 @@ module.exports = {
    extend: {
      colors: {
        brand: "#FD4F00",
+        primary: "#202225",
+        secondary: "#5865f2",
+        gray: {
+          900: "#202225",
+          800: "#243136",
+          700: "#36393f",
+          600: "#4f545c",
+          400: "#d4d7dc",
+          300: "#e3e5e8",
+          200: "#ebedef",
+          100: "#f2f3f5"
+
+        }
      }
    },
  },
--- a/lib/chirp/timeline.ex
+++ b/lib/chirp/timeline.ex
@ -21,6 +21,23 @@ defmodule Chirp.Timeline do
    Repo.all(from p in Post, order_by: [desc: p.id])
  end

+  def inc_likes(%Post{id: id}) do
+    {1, [post]} =
+      from(p in Post, where: p.id == ^id, select: p)
+      |> Repo.update_all(inc: [likes_count: 1])
+
+    broadcast({:ok, post},:post_updated)
+  end
+
+  def inc_reposts(%Post{id: id}) do
+    {1, [post]} =
+      from(p in Post, where: p.id == ^id, select: p)
+      |> Repo.update_all(inc: [reposts_count: 1])
+
+    broadcast({:ok, post},:post_updated)
+  end
+
+
  @doc """
  Gets a single post.

@ -88,7 +105,10 @@ defmodule Chirp.Timeline do

  """
  def delete_post(%Post{} = post) do
-    Repo.delete(post)
+    post
+    |> Repo.delete()
+    |> broadcast(:post_updated)
+
  end

  @doc """
--- a/lib/chirp_web/controllers/hello_controller.ex
+++ b/lib/chirp_web/controllers/hello_controller.ex
@ -0,0 +1,7 @@
+defmodule ChirpWeb.HelloController do
+  use ChirpWeb, :controller
+
+  def index(conn, _params) do
+    render(conn, "index.html")
+  end
+end
--- a/lib/chirp_web/live/post_live/index.ex
+++ b/lib/chirp_web/live/post_live/index.ex
@ -33,19 +33,7 @@ defmodule ChirpWeb.PostLive.Index do
    |> assign(:post, nil)
  end

-  @impl true
-  def handle_event("delete", %{"id" => id}, socket) do
-    post = Timeline.get_post!(id)
-    {:ok, _} = Timeline.delete_post(post)

-    {:noreply, assign(socket, :posts, list_posts())}
-  end
-  def handle_event("like", %{"id" => _id}, socket) do
-    {:noreply,socket}
-  end
-  def handle_event("repost", %{"id" => _id}, socket) do
-    {:noreply,socket}
-  end

  def handle_info({:post_created,post}, socket) do
    {:noreply, update(socket, :posts, fn posts-> [post|posts] end)}
--- a/lib/chirp_web/live/post_live/post_component.ex
+++ b/lib/chirp_web/live/post_live/post_component.ex
@ -3,9 +3,12 @@ defmodule ChirpWeb.PostLive.PostComponent do

    @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">
-      <div  class="flex flex-row">
+      <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">
@ -14,11 +17,11 @@ defmodule ChirpWeb.PostLive.PostComponent do
          <div label="Username"><%= @post.username %></div>

        </div>
-        <div class="basis-3/4">
+        <div id={"post-maincolumn-#{assigns.post.id}"} class="basis-3/4">

-        <div 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 label="Body" class="mb-3 font-normal text-gray-500 dark:text-gray-400"><%= @post.body %></pre>
-        <div class="grid grid-flow-col gap-4 auto-cols-max">
+        <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
@ -29,19 +32,19 @@ defmodule ChirpWeb.PostLive.PostComponent do
            </.link>
          </div>

-          <div class="p-1 flex flex-row">
-            <.link phx-click="like" phx-value-id={@post.id}>
+          <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 label="Likes count">
+            <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}>
+            <.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>
@ -54,10 +57,13 @@ defmodule ChirpWeb.PostLive.PostComponent do
            <.link patch={~p"/posts/#{@post}/edit"}>Edit</.link>
          </div>
          <div class="p-1">
-            <.link phx-click={JS.push("delete", value: %{id: @post.id})} data-confirm="Are you sure?">
+            <.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>


@ -75,4 +81,20 @@ defmodule ChirpWeb.PostLive.PostComponent do
      """
    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
--- a/lib/chirp_web/router.ex
+++ b/lib/chirp_web/router.ex
@ -19,6 +19,8 @@ defmodule ChirpWeb.Router do

    get "/", PageController, :index

+    get "/hello", HelloController, :index
+
    live "/posts", PostLive.Index, :index
    live "/posts/new", PostLive.Index, :new
    live "/posts/:id/edit", PostLive.Index, :edit
--- a/lib/chirp_web/templates/hello/index.html.heex
+++ b/lib/chirp_web/templates/hello/index.html.heex
@ -0,0 +1,60 @@
+<div class="phx-hero">
+  <h2 >Hello World, from Phoenix!</h2>
+  <div class="flex">
+
+      <div class="fixed top-o left-o h-screen w-16 flex flex-col bg-gray-300 text-black">
+          <div class="group sidebar-iconbox">
+            <svg class="sidebar-icon" 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="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z" />
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18z" />
+            </svg>
+            <span class="sidebar-tooltip group-hover:scale-100">
+              Burn
+              </span>
+          </div>
+
+          <div class="group sidebar-iconbox">
+            <svg class="sidebar-icon" 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="M12 4.5v15m7.5-7.5h-15" />
+            </svg>
+            <span class="sidebar-tooltip group-hover:scale-100">
+              Add
+              </span>
+          </div>
+
+          <div class="group sidebar-iconbox">
+            <svg class="sidebar-icon" 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="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/>
+            </svg>
+            <span class="sidebar-tooltip group-hover:scale-100">
+              action
+            </span>
+          </div>
+
+          <div class="group sidebar-iconbox" >
+            <svg class="sidebar-icon" 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="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+            </svg>
+            <span class="sidebar-tooltip group-hover:scale-100">
+              trash
+            </span>
+          </div>
+
+        
+      </div>
+ 
+    <div class="fixed top-o left-o ml-32" >
+
+
+      <button class="btn-primary">Some button!</button>
+      <p> Test paragraph</p>
+    
+    
+    </div>
+
+  </div>
+
+</div>
+
+
+
--- a/lib/chirp_web/views/hello_view.ex
+++ b/lib/chirp_web/views/hello_view.ex
@ -0,0 +1,3 @@
+defmodule ChirpWeb.HelloView do
+  use ChirpWeb, :view
+end