Move badges_area template in proper place and refactor the partial (#11400)

* Move badges_area template in proper place and refactor the partial

* Fix badge show routing

app/models/badge_achievement.rb

@@ -6,6 +6,10 @@ class BadgeAchievement < ApplicationRecord
   belongs_to :badge
   belongs_to :rewarder, class_name: "User", optional: true
 
+  delegate :slug, to: :badge, prefix: true
+  delegate :title, to: :badge, prefix: true
+  delegate :badge_image_url, to: :badge, prefix: false
+
   counter_culture :user, column_name: "badge_achievements_count"
 
   validates :badge_id, uniqueness: { scope: :user_id }

app/views/articles/_badges_area.html.erb

@@ -1,20 +0,0 @@
-<% if @user.badge_achievements_count > 0 %>
-  <div class="crayons-card crayons-card--secondary">
-    <header class="crayons-card__header">
-      <h3 class="crayons-subtitle-3">Badges</h3>
-    </header>
-    <div class="crayons-card__body">
-      <div class="grid gap-4 grid-cols-3 s:grid-cols-4 m:grid-cols-2 align-center items-center js-profile-badges">
-        <% @user.badge_achievements.order(id: :desc).includes(:badge).each_with_index do |achievement, i| %>
-          <a href="/badge/<%= achievement.badge.slug %>" title="<%= achievement.badge.title %>" class="js-profile-badge <% if i >= @badges_limit %>hidden<% end %>">
-            <img src="<%= optimized_image_url(achievement.badge.badge_image_url, width: 180) %>" alt="<%= achievement.badge.title %>" class="mx-auto max-w-75 h-auto align-middle" style="transform: rotate(<%= rand(-10..10) %>deg);" />
-          </a>
-        <% end %>
-      </div>
-
-      <% if @user.badge_achievements_count > @badges_limit %>
-        <button type="button" class="crayons-btn crayons-btn--ghost-brand crayons-btn--s w-100 js-profile-badges-trigger">Show all <%= @user.badge_achievements_count %> badges</button>
-      <% end %>
-    </div>
-  </div>
-<% end %>

app/views/users/_badges_area.html.erb

@@ -0,0 +1,28 @@
+<div class="crayons-card crayons-card--secondary">
+  <header class="crayons-card__header">
+    <h3 class="crayons-subtitle-3">Badges</h3>
+  </header>
+
+  <div class="crayons-card__body">
+    <div class="grid gap-4 grid-cols-3 s:grid-cols-4 m:grid-cols-2 align-center items-center js-profile-badges">
+      <% achievements.each_with_index do |achievement, i| %>
+        <a href="<%= badge_path(achievement.badge_slug) %>"
+           title="<%= achievement.badge_title %>"
+           class="js-profile-badge <% if i >= limit %>hidden<% end %>">
+
+          <img src="<%= optimized_image_url(achievement.badge_image_url, width: 180) %>"
+               alt="<%= achievement.badge_title %>"
+               class="mx-auto max-w-75 h-auto align-middle"
+               style="transform: rotate(<%= rand(-10..10) %>deg);" />
+        </a>
+      <% end %>
+    </div>
+
+    <% if limit > 1 && count > limit %>
+      <button type="button"
+              class="crayons-btn crayons-btn--ghost-brand crayons-btn--s w-100 js-profile-badges-trigger">
+        Show all <%= count %> badges
+      </button>
+    <% end %>
+  </div>
+</div>

app/views/users/_sidebar.html.erb

@@ -21,7 +21,13 @@
 
     <%= render partial: "users/github_repositories_area", locals: { repositories: repositories } %>
 
-    <%= render "articles/badges_area" %>
+    <% if @user.badge_achievements_count.positive? %>
+      <%= render partial: "users/badges_area", locals: {
+            achievements: @user.badge_achievements.order(id: :desc).includes(:badge),
+            count: @user.badge_achievements_count,
+            limit: @badges_limit
+          } %>
+    <% end %>
   <% end %>
 
   <% cache "user-profile-sidebar-profile-details-#{@user.id}-#{@user.profile_updated_at}", expires_in: 10.days do %>

config/routes.rb

@@ -396,7 +396,7 @@ Rails.application.routes.draw do
     get "/welcome" => "pages#welcome"
     get "/challenge" => "pages#challenge"
     get "/checkin" => "pages#checkin"
-    get "/badge" => "pages#badge"
+    get "/badge" => "pages#badge", :as => :pages_badge
     get "/💸", to: redirect("t/hiring")
     get "/survey", to: redirect("https://dev.to/ben/final-thoughts-on-the-state-of-the-web-survey-44nn")
     get "/events" => "events#index"
@@ -500,7 +500,7 @@ Rails.application.routes.draw do
     get "/t/:tag/:timeframe" => "stories#index",
         :constraints => { timeframe: /latest/ }
 
-    get "/badge/:slug" => "badges#show"
+    get "/badge/:slug" => "badges#show", :as => :badge
 
     get "/top/:timeframe" => "stories#index"
 

spec/system/admin/admin_awards_badges_spec.rb

@@ -43,7 +43,7 @@ RSpec.describe "Admin awards badges", type: :system do
 
     visit "/#{user.username}/"
 
-    expect(page).to have_link(href: "/badge/#{Badge.last.slug}")
+    expect(page).to have_link(href: badge_path(Badge.last.slug))
   end
 
   it "does not award badges if no badge is selected", js: true do