From 3672c21e97688d9a282af759b4d6634bf4a54cd8 Mon Sep 17 00:00:00 2001 From: Julian Noble Date: Mon, 26 Sep 2022 05:06:16 +1000 Subject: [PATCH] fix post deletion, add /hello page for tailwindcss testing --- assets/css/app.css | 29 +++++++++ assets/css/components/buttons.css | 10 ++++ assets/tailwind.config.js | 13 ++++ lib/chirp/timeline.ex | 22 ++++++- lib/chirp_web/controllers/hello_controller.ex | 7 +++ lib/chirp_web/live/post_live/index.ex | 12 ---- .../live/post_live/post_component.ex | 44 ++++++++++---- lib/chirp_web/router.ex | 2 + lib/chirp_web/templates/hello/index.html.heex | 60 +++++++++++++++++++ lib/chirp_web/views/hello_view.ex | 3 + 10 files changed, 178 insertions(+), 24 deletions(-) create mode 100644 assets/css/components/buttons.css create mode 100644 lib/chirp_web/controllers/hello_controller.ex create mode 100644 lib/chirp_web/templates/hello/index.html.heex create mode 100644 lib/chirp_web/views/hello_view.ex diff --git a/assets/css/app.css b/assets/css/app.css index 378c8f9..320c81d 100644 --- 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 */ diff --git a/assets/css/components/buttons.css b/assets/css/components/buttons.css new file mode 100644 index 0000000..ba85de5 --- /dev/null +++ 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; + } +} + diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js index b611701..069b7f1 100644 --- 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" + + } } }, }, diff --git a/lib/chirp/timeline.ex b/lib/chirp/timeline.ex index a9c2d76..fd09b21 100644 --- 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 """ diff --git a/lib/chirp_web/controllers/hello_controller.ex b/lib/chirp_web/controllers/hello_controller.ex new file mode 100644 index 0000000..fb512cf --- /dev/null +++ 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 diff --git a/lib/chirp_web/live/post_live/index.ex b/lib/chirp_web/live/post_live/index.ex index 91fe702..d51a401 100644 --- 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)} diff --git a/lib/chirp_web/live/post_live/post_component.ex b/lib/chirp_web/live/post_live/post_component.ex index a2afa13..6568241 100644 --- 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""" -
-
+
+
@@ -14,11 +17,11 @@ defmodule ChirpWeb.PostLive.PostComponent do
<%= @post.username %>
-
+
-
- 
<%= @post.body %>
-
+
+ 
<%= @post.body %>
+
<.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 phx-click="like" phx-value-id={@post.id}> +
+ <.link phx-click="like" phx-value-id={@post.id} phx-target={@myself}> - + <%= @post.likes_count %>
- <.link phx-click="repost" phx-value-id={@post.id}> + <.link phx-click="repost" phx-value-id={@post.id} phx-target={@myself}> @@ -54,10 +57,13 @@ defmodule ChirpWeb.PostLive.PostComponent do <.link patch={~p"/posts/#{@post}/edit"}>Edit
- <.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
+
+ +
@@ -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 diff --git a/lib/chirp_web/router.ex b/lib/chirp_web/router.ex index 80ff7b0..98dab90 100644 --- 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 diff --git a/lib/chirp_web/templates/hello/index.html.heex b/lib/chirp_web/templates/hello/index.html.heex new file mode 100644 index 0000000..9d37ada --- /dev/null +++ b/lib/chirp_web/templates/hello/index.html.heex @@ -0,0 +1,60 @@ +
+

Hello World, from Phoenix!

+
+ +
+
+ + + + + + Burn + +
+ +
+ + + + + Add + +
+ +
+ + + + + action + +
+ +
+ + + + + trash + +
+ + +
+ +
+ + + +

Test paragraph

+ + +
+ +
+ +
+ + + diff --git a/lib/chirp_web/views/hello_view.ex b/lib/chirp_web/views/hello_view.ex new file mode 100644 index 0000000..732a5fa --- /dev/null +++ b/lib/chirp_web/views/hello_view.ex @@ -0,0 +1,3 @@ +defmodule ChirpWeb.HelloView do + use ChirpWeb, :view +end