fixed bug with tag, added new live_action route for upload

zackcreach · Dec 27, 2024 · 2984592 · 2984592
1 parent 676c742
commit 2984592
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 33 deletions.
diff --git a/lib/gifmaster_web/components/core_components.ex b/lib/gifmaster_web/components/core_components.ex
@@ -165,7 +165,7 @@ defmodule GifmasterWeb.CoreComponents do
   def simple_form(assigns) do
     ~H"""
     <.form :let={f} for={@for} as={@as} {@rest}>
-      <div class="mt-10 space-y-8 bg-white">
+      <div class="mt-10 space-y-8">
         {render_slot(@inner_block, f)}
         <div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
           {render_slot(action, f)}
@@ -270,7 +270,7 @@ defmodule GifmasterWeb.CoreComponents do
 
     ~H"""
     <div>
-      <label class="flex items-center gap-4 text-sm leading-6 text-zinc-600">
+      <label class="flex items-center gap-4 text-sm leading-6">
         <input type="hidden" name={@name} value="false" disabled={@rest[:disabled]} />
         <input type="checkbox" id={@id} name={@name} value="true" checked={@checked} class="rounded border-zinc-300 text-zinc-900 focus:ring-0" {@rest} />
         {@label}
@@ -284,7 +284,7 @@ defmodule GifmasterWeb.CoreComponents do
     ~H"""
     <div>
       <.label for={@id}>{@label}</.label>
-      <select id={@id} name={@name} class="mt-2 block w-full rounded-md border border-gray-300 bg-white shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm" multiple={@multiple} {@rest}>
+      <select id={@id} name={@name} class="mt-2 block w-full rounded-md border border-gray-300 shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm" multiple={@multiple} {@rest}>
         <option :if={@prompt} value="">{@prompt}</option>
         {Phoenix.HTML.Form.options_for_select(@options, @value)}
       </select>
@@ -395,12 +395,12 @@ defmodule GifmasterWeb.CoreComponents do
 
   def header(assigns) do
     ~H"""
-    <header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
+    <header class={[@actions != [] && "flex items-center justify-between gap-6 text-white", @class]}>
       <div>
-        <h1 class="text-lg font-semibold leading-8 text-zinc-800">
+        <h1 class="text-lg font-semibold leading-8">
           {render_slot(@inner_block)}
         </h1>
-        <p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600">
+        <p :if={@subtitle != []} class="mt-2 text-sm leading-6">
           {render_slot(@subtitle)}
         </p>
       </div>
@@ -443,7 +443,7 @@ defmodule GifmasterWeb.CoreComponents do
     ~H"""
     <div class="overflow-y-auto px-4 sm:overflow-visible sm:px-0">
       <table class="w-[40rem] mt-11 sm:w-full">
-        <thead class="text-sm text-left leading-6 text-zinc-500">
+        <thead class="text-sm text-left leading-6">
           <tr>
             <th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal">{col[:label]}</th>
             <th :if={@action != []} class="relative p-0 pb-4">

diff --git a/lib/gifmaster_web/components/layouts/app.html.heex b/lib/gifmaster_web/components/layouts/app.html.heex
@@ -1,8 +1,10 @@
-<header class="bg-grey-300 pt-6 px-12 pb-3 h-24 flex items-center">
+<header class="bg-grey-300 pt-6 px-12 pb-3 h-24 flex items-center justify-between">
   <a href="/">
     <img src="https://gems.gifmaster5000.com/logo.png" alt="Gifmaster Logo" class="w-[400px]" />
   </a>
 
+  <.button :if={assigns[:current_user]} class="mb-3" phx-click={send(self(), :open_modal)}>Upload</.button>
+
   <!-- <ul class="absolute top-0 right-0 flex items-center gap-4 px-4 sm:px-6 lg:px-8 justify-end text-white"> -->
   <!--   <%= if assigns[:current_user] do %> -->
   <!--     <li class="text-[0.8125rem] leading-6"> -->

diff --git a/lib/gifmaster_web/live/home_live.ex b/lib/gifmaster_web/live/home_live.ex
@@ -6,16 +6,16 @@ defmodule GifmasterWeb.HomeLive do
 
   alias Gifmaster.Catalog
   alias Gifmaster.Catalog.Gif
+  alias Gifmaster.Repo
   alias Phoenix.LiveView.AsyncResult
 
-  @public_domain "gems.gifmaster5000.com"
+  @public_asset_domain "gems.gifmaster5000.com"
 
   def mount(_params, _session, socket) do
     socket
     |> assign(
       title: "Gifmaster 5000",
       description: "The best gifs you ever did see",
-      show_gif_upload_modal: false,
       get_gifs_form: to_form(%{"search" => ""}),
       gif_form: to_form(Gif.changeset(%Gif{})),
       gifs: AsyncResult.loading()
@@ -41,7 +41,7 @@ defmodule GifmasterWeb.HomeLive do
       </.async_result>
     </div>
 
-    <.modal id="gif-upload-modal" show={@show_gif_upload_modal}>
+    <.modal show={@live_action == :upload} id="gif-upload-modal">
       <h2 class="text-2xl font-semibold mb-4">
         Upload
       </h2>
@@ -65,7 +65,7 @@ defmodule GifmasterWeb.HomeLive do
         </div>
 
         <div class="relative mb-4">
-          <.input type="list" label="Tags" field={@gif_form[:tags]} required />
+          <.input type="list" label="Tags (comma separated)" field={@gif_form[:tags]} required />
         </div>
 
         <.button type="submit">Upload</.button>
@@ -75,9 +75,9 @@ defmodule GifmasterWeb.HomeLive do
   end
 
   defp presign_upload(entry, socket) do
+    key = Regex.replace(~r/.+(?=\.\w+)/, entry.client_name, &Recase.to_snake/1)
     uploads = socket.assigns.uploads
-    bucket = @public_domain
-    key = Recase.to_snake(entry.client_name)
+    bucket = @public_asset_domain
 
     config = %{
       region: "us-east-1",
@@ -102,11 +102,10 @@ defmodule GifmasterWeb.HomeLive do
   defp error_to_string(:too_many_files), do: "You have selected too many files"
 
   def handle_event("validate_gif", %{"gif" => %{"name" => name} = params}, socket) do
-    dbg(params)
-
     params =
       if length(socket.assigns.uploads.gif.entries) > 0 and name == "" do
         [%Phoenix.LiveView.UploadEntry{client_name: name}] = socket.assigns.uploads.gif.entries
+        # remove file extension for name suggestion
         Map.put(params, "name", Regex.replace(~r/\.\w+$/, name, ""))
       else
         params
@@ -120,20 +119,25 @@ defmodule GifmasterWeb.HomeLive do
     {:noreply, assign(socket, gif_form: gif_form)}
   end
 
-  def handle_event("save_gif", %{"gif" => %{"name" => name}}, socket) do
+  def handle_event("save_gif", %{"gif" => %{"name" => name, "tags" => tags}}, socket) do
     filename =
       consume_uploaded_entries(socket, :gif, fn %{key: key}, _entry -> key end)
 
     socket =
-      case Catalog.create_gif(%{
-             name: name,
-             file: %{url: %{relative: "/#{filename}", absolute: "https://#{@public_domain}/#{filename}"}}
-           }) do
-        %Gif{} ->
-          put_flash(socket, :info, "Gif saved successfully.")
-
-        _error ->
-          put_flash(socket, :error, "Error saving gif.")
+      case Repo.transaction(fn ->
+             Catalog.create_gif(%{
+               name: name,
+               tags: String.split(tags, ", "),
+               file: %{url: %{relative: "/#{filename}", absolute: "https://#{@public_asset_domain}/#{filename}"}}
+             })
+           end) do
+        {:ok, %Gif{}} ->
+          socket
+          |> put_flash(:info, "Gif saved successfully.")
+          |> redirect(to: ~p"/")
+
+        {:error, error} ->
+          put_flash(socket, :error, "Error saving gif: #{error}")
       end
 
     {:noreply, socket}
@@ -145,4 +149,10 @@ defmodule GifmasterWeb.HomeLive do
     |> assign_async(:gifs, fn -> {:ok, %{gifs: Catalog.get_gifs(search)}} end)
     |> noreply()
   end
+
+  def handle_event("open_modal", _params, socket) do
+    socket
+    |> redirect(to: ~p"/upload")
+    |> noreply()
+  end
 end
diff --git a/lib/gifmaster_web/live/user_login_live.ex b/lib/gifmaster_web/live/user_login_live.ex
@@ -1,4 +1,5 @@
 defmodule GifmasterWeb.UserLoginLive do
+  @moduledoc false
   use GifmasterWeb, :live_view
 
   def render(assigns) do
@@ -38,6 +39,8 @@ defmodule GifmasterWeb.UserLoginLive do
   def mount(_params, _session, socket) do
     email = Phoenix.Flash.get(socket.assigns.flash, :email)
     form = to_form(%{"email" => email}, as: "user")
-    {:ok, assign(socket, form: form), temporary_assigns: [form: form]}
+
+    {:ok, assign(socket, form: form, title: "Login", description: "Login as an existing user"),
+     temporary_assigns: [form: form]}
   end
 end
diff --git a/lib/gifmaster_web/live/user_registration_live.ex b/lib/gifmaster_web/live/user_registration_live.ex
@@ -1,4 +1,5 @@
 defmodule GifmasterWeb.UserRegistrationLive do
+  @moduledoc false
   use GifmasterWeb, :live_view
 
   alias Gifmaster.Account
@@ -11,7 +12,7 @@ defmodule GifmasterWeb.UserRegistrationLive do
         Register for an account
         <:subtitle>
           Already registered?
-          <.link navigate={~p"/users/log_in"} class="font-semibold text-brand hover:underline">
+          <.link navigate={~p"/users/log_in"} class="font-semibold hover:underline">
             Log in
           </.link>
           to your account now.
@@ -39,7 +40,7 @@ defmodule GifmasterWeb.UserRegistrationLive do
 
     socket =
       socket
-      |> assign(trigger_submit: false, check_errors: false)
+      |> assign(trigger_submit: false, check_errors: false, title: "Register", description: "Register as a new user")
       |> assign_form(changeset)
 
     {:ok, socket, temporary_assigns: [form: nil]}

diff --git a/lib/gifmaster_web/router.ex b/lib/gifmaster_web/router.ex
@@ -1,8 +1,8 @@
 defmodule GifmasterWeb.Router do
   use GifmasterWeb, :router
 
-  import GifmasterWeb.UserAuth
   import GifmasterWeb.Plugs
+  import GifmasterWeb.UserAuth
 
   pipeline :browser do
     plug :accepts, ["html"]
@@ -24,6 +24,7 @@ defmodule GifmasterWeb.Router do
 
     live_session :public_routes, on_mount: [{GifmasterWeb.UserAuth, :mount_current_user}, {GifmasterWeb.Hooks, :global}] do
       live "/", HomeLive
+      live "/upload", HomeLive, :upload
     end
   end
 
@@ -55,7 +56,7 @@ defmodule GifmasterWeb.Router do
     pipe_through [:browser, :redirect_if_user_is_authenticated]
 
     live_session :redirect_if_user_is_authenticated,
-      on_mount: [{GifmasterWeb.UserAuth, :redirect_if_user_is_authenticated}] do
+      on_mount: [{GifmasterWeb.UserAuth, :redirect_if_user_is_authenticated}, {GifmasterWeb.Hooks, :global}] do
       live "/users/register", UserRegistrationLive, :new
       live "/users/log_in", UserLoginLive, :new
       live "/users/reset_password", UserForgotPasswordLive, :new
@@ -69,7 +70,7 @@ defmodule GifmasterWeb.Router do
     pipe_through [:browser, :require_authenticated_user]
 
     live_session :require_authenticated_user,
-      on_mount: [{GifmasterWeb.UserAuth, :ensure_authenticated}] do
+      on_mount: [{GifmasterWeb.UserAuth, :ensure_authenticated}, {GifmasterWeb.Hooks, :global}] do
       live "/users/settings", UserSettingsLive, :edit
       live "/users/settings/confirm_email/:token", UserSettingsLive, :confirm_email
     end
@@ -81,7 +82,7 @@ defmodule GifmasterWeb.Router do
     delete "/users/log_out", UserSessionController, :delete
 
     live_session :current_user,
-      on_mount: [{GifmasterWeb.UserAuth, :mount_current_user}] do
+      on_mount: [{GifmasterWeb.UserAuth, :mount_current_user}, {GifmasterWeb.Hooks, :global}] do
       live "/users/confirm/:token", UserConfirmationLive, :edit
       live "/users/confirm", UserConfirmationInstructionsLive, :new
     end