refactor: simplify button component to handle link navigation directly

Author: zcesur

lib/algora_web/components/core_components.ex

@@ -1235,10 +1235,8 @@ defmodule AlgoraWeb.CoreComponents do
           <h2 class="text-2xl font-semibold leading-none tracking-tight">{@title}</h2>
           <p :if={@subtitle} class="text-sm text-muted-foreground">{@subtitle}</p>
         </div>
-        <.button :if={@link} variant="outline">
-          <.link navigate={@link}>
-            View all
-          </.link>
+        <.button :if={@link} navigate={@link} variant="outline">
+          View all
         </.button>
       </div>
       {render_slot(@inner_block)}

lib/algora_web/components/ui/button.ex

@@ -12,6 +12,10 @@ defmodule AlgoraWeb.Components.UI.Button do
   """
   attr :type, :string, default: nil
   attr :class, :string, default: nil
+  attr :href, :string, default: nil
+  attr :navigate, :string, default: nil
+  attr :patch, :string, default: nil
+  attr :replace, :boolean, default: false
 
   attr :variant, :string,
     values: ~w(default secondary destructive outline ghost link),
@@ -23,24 +27,34 @@ defmodule AlgoraWeb.Components.UI.Button do
 
   slot :inner_block, required: true
 
-  def(button(assigns)) do
-    assigns = assign(assigns, :variant_class, variant(assigns))
+  def button(assigns) do
+    assigns =
+      assigns
+      |> assign(:is_link, link?(assigns))
+      |> assign(:common_classes, [
+        "disabled:opacity-75 phx-submit-loading:opacity-75",
+        "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+        variant(assigns),
+        assigns.class
+      ])
 
     ~H"""
-    <button
-      type={@type}
-      class={
-        classes([
-          "disabled:opacity-75 phx-submit-loading:opacity-75",
-          "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-          @variant_class,
-          @class
-        ])
-      }
-      {@rest}
-    >
-      {render_slot(@inner_block)}
-    </button>
+    <%= if @is_link do %>
+      <.link
+        href={@href}
+        navigate={@navigate}
+        patch={@patch}
+        replace={@replace}
+        class={classes(@common_classes)}
+        {@rest}
+      >
+        {render_slot(@inner_block)}
+      </.link>
+    <% else %>
+      <button type={@type} class={classes(@common_classes)} {@rest}>
+        {render_slot(@inner_block)}
+      </button>
+    <% end %>
     """
   end
 
@@ -80,4 +94,8 @@ defmodule AlgoraWeb.Components.UI.Button do
 
     Enum.map_join(variants, " ", fn {key, value} -> @variants[key][value] end)
   end
+
+  defp link?(assigns) do
+    Enum.any?([assigns[:href], assigns[:navigate], assigns[:patch]])
+  end
 end

lib/algora_web/live/home_live.ex

@@ -81,10 +81,8 @@ defmodule AlgoraWeb.HomeLive do
           </div>
 
           <div class="hidden lg:flex lg:flex-1 lg:justify-end">
-            <.button variant="subtle">
-              <.link navigate={~p"/auth/login"}>
-                Sign in
-              </.link>
+            <.button navigate={~p"/auth/login"} variant="subtle">
+              Sign in
             </.button>
           </div>
         </nav>
@@ -202,15 +200,19 @@ defmodule AlgoraWeb.HomeLive do
                 </p>
                 <!-- CTA buttons -->
                 <div class="mt-10 flex flex-col sm:flex-row text-center sm:items-center gap-6">
-                  <.button variant="default" class="px-12 py-8 text-xl font-semibold">
-                    <.link navigate={~p"/onboarding/org"}>
-                      Companies
-                    </.link>
+                  <.button
+                    navigate={~p"/onboarding/org"}
+                    variant="default"
+                    class="px-12 py-8 text-xl font-semibold"
+                  >
+                    Companies
                   </.button>
-                  <.button variant="secondary" class="px-12 py-8 text-xl font-semibold">
-                    <.link navigate={~p"/onboarding/dev"}>
-                      Developers
-                    </.link>
+                  <.button
+                    navigate={~p"/onboarding/dev"}
+                    variant="secondary"
+                    class="px-12 py-8 text-xl font-semibold"
+                  >
+                    Developers
                   </.button>
                 </div>
                 <!-- Stats -->

lib/algora_web/live/onboarding/dev.ex

@@ -55,14 +55,12 @@ defmodule AlgoraWeb.Onboarding.DevLive do
                   Next
                 </.button>
               <% else %>
-                <.button>
-                  <.link
-                    href={Algora.Github.authorize_url()}
-                    rel="noopener"
-                    class="inline-flex items-center"
-                  >
-                    <.icon name="tabler-brand-github" class="mr-2 h-5 w-5" /> Sign in with GitHub
-                  </.link>
+                <.button
+                  href={Algora.Github.authorize_url()}
+                  rel="noopener"
+                  class="inline-flex items-center"
+                >
+                  <.icon name="tabler-brand-github" class="mr-2 h-5 w-5" /> Sign in with GitHub
                 </.button>
               <% end %>
             </div>

lib/algora_web/live/org/bounties_live.ex

@@ -198,11 +198,11 @@ defmodule AlgoraWeb.Org.BountiesLive do
                     <td class="[&:has([role=checkbox])]:pr-0 p-4 align-middle">
                       <div class="min-w-[180px]">
                         <div class="flex items-center justify-end gap-4">
-                          <.button variant="secondary">
-                            <.link href={hd(claims).source.url}>View</.link>
+                          <.button href={hd(claims).source.url} variant="secondary">
+                            View
                           </.button>
-                          <.button>
-                            <.link href={~p"/claims/#{hd(claims).group_id}"}>Reward</.link>
+                          <.button href={~p"/claims/#{hd(claims).group_id}"}>
+                            Reward
                           </.button>
                         </div>
                       </div>

lib/algora_web/live/org/team_live.ex

@@ -104,8 +104,8 @@ defmodule AlgoraWeb.Org.TeamLive do
                 </div>
               </.card_content>
               <.card_footer>
-                <.button variant="outline" class="w-full">
-                  <.link navigate={User.url(contractor)}>View Profile</.link>
+                <.button navigate={User.url(contractor)} variant="outline" class="w-full">
+                  View Profile
                 </.button>
               </.card_footer>
             </.card>

lib/algora_web/live/swift_bounties_live.ex

@@ -161,10 +161,13 @@ defmodule AlgoraWeb.SwiftBountiesLive do
             Anyone can contribute whether you're a company or an individual.
           </p>
           <div class="mt-10 flex items-center gap-x-6">
-            <.button variant="subtle" class="h-12 px-6 text-lg font-semibold">
-              <.link href={Algora.Github.authorize_url()} rel="noopener">
-                Start Contributing
-              </.link>
+            <.button
+              href={Algora.Github.authorize_url()}
+              rel="noopener"
+              variant="subtle"
+              class="h-12 px-6 text-lg font-semibold"
+            >
+              Start Contributing
             </.button>
           </div>
         </div>
@@ -511,14 +514,13 @@ defmodule AlgoraWeb.SwiftBountiesLive do
           You can create bounties and send tips in any of the Swift repos below once you've connected your GitHub account.
         </p>
         <div class="mt-6 flex items-center justify-center gap-x-6">
-          <.button variant="subtle" class="h-12 px-6 text-lg font-semibold">
-            <.link
-              href={Algora.Github.authorize_url()}
-              rel="noopener"
-              class="inline-flex items-center"
-            >
-              <Logos.github class="-ml-1 mr-2 h-6 w-6 sm:h-8 sm:w-8" /> Connect with GitHub
-            </.link>
+          <.button
+            href={Algora.Github.authorize_url()}
+            rel="noopener"
+            variant="subtle"
+            class="h-12 px-6 text-lg font-semibold inline-flex items-center"
+          >
+            <Logos.github class="-ml-1 mr-2 h-6 w-6 sm:h-8 sm:w-8" /> Connect with GitHub
           </.button>
         </div>
         <div class="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">

lib/algora_web/live/user/dashboard_live.ex

@@ -359,10 +359,13 @@ defmodule AlgoraWeb.User.DashboardLive do
                 {Money.to_string!(Money.mult!(@contract.hourly_rate, @contract.hours_per_week))} / wk
               </div>
             </div>
-            <.button phx-click="accept_contract" phx-value-org={@contract.client.handle} size="sm">
-              <.link navigate={~p"/org/#{@contract.client.handle}/contracts/#{@contract.id}"}>
-                Accept contract
-              </.link>
+            <.button
+              navigate={~p"/org/#{@contract.client.handle}/contracts/#{@contract.id}"}
+              phx-click="accept_contract"
+              phx-value-org={@contract.client.handle}
+              size="sm"
+            >
+              Accept contract
             </.button>
           </div>
         </div>