add media to WowPet and pagination

app/controllers/wow_pets_controller.rb

@@ -1,6 +1,6 @@
 class WowPetsController < ProtectedController
   def index
-    @wow_pets = WowPet.all
+    @pagy, @wow_pets = pagy(WowPet.all, items: 12)
   end
 
   def show

app/views/wow_mounts/index.html.erb

@@ -4,7 +4,7 @@
 <% @wow_mounts.each do |mount| %>
   <div class="col-2 d-flex justify-content-center">
     <div class="card" style="width: 18rem;">
-      <img src=<%= mount.asset_zoom %> class="card-img-top" alt="<%= mount.name %>-zoom-image">
+      <img src=<%= mount.asset_zoom %> class="card-img-top" alt="mount-<%= mount.id %>-zoom-image">
       <div class="card-body">
         <h5 class="card-title"><%= mount.name %></h5>
         <p class="card-text"><%= mount.description %></p>

app/views/wow_pets/index.html.erb

@@ -1,20 +1,17 @@
 <h2>Pet list</h2>
 
-<table class="table table-hover table-dark table-image">
+<div class="row">
-  <thead>
-    <tr>
-      <th scope="col"><%= t('wow_pets.pet_list.name') %></th>
-      <th scope="col"><%= t('wow_pets.pet_list.description') %></th>
-      <th scope="col"><%= t('wow_pets.pet_list.owned') %></th>
-    </tr>
-  </thead>
-  <tbody>
 <% @wow_pets.each do |pet| %>
-    <tr>
+  <div class="col-2 d-flex justify-content-center">
-        <td><%= link_to pet.name, pet %></td>
+    <div class="card" style="width: 18rem;">
-        <td><%= pet.description %></td>
+      <img src=<%= pet.media_zoom_url %> class="card-img-top" alt="pet-<%= pet.id %>-zoom-image">
-        <td></td>
+      <div class="card-body">
-    </tr>
+        <h5 class="card-title"><%= pet.name %></h5>
+        <p class="card-text"><%= pet.description %></p>
+        <%= link_to 'Detail', pet, class: "btn btn-primary" %>
+      </div>
+    </div>
+  </div>
 <% end %>
-  </tbody>
+<%== pagy_bootstrap_nav(@pagy) %>
-</table>
+</div>

app/views/wow_pets/show.html.erb

@@ -2,7 +2,7 @@
   <div class="col-5">
     <div class="card">
       <% if @wow_pet.icon %>
-        <img src=<%= @wow_pet.icon %> class="card-img-top" alt="pet-icon-image">
+        <img src=<%= @wow_pet.media_zoom_url %> class="card-img-top" alt="pet-icon-image">
       <% end %>
       <div class="card-body">
         <h5 class="card-title"><%= @wow_pet.name %></h5>

app/workers/wow_pet_detail_worker.rb

@@ -31,6 +31,14 @@ class WowPetDetailWorker < WowSidekiqWorker
       end
     end
 
+    unless pet.creature_display_id
+      creature = RBattlenet::Wow::Creature.find(pet.creature_id)
+      pet.creature_display_id = creature.creature_displays.first.id if creature.status_code == 200
+    end
+
+    creature_media = RBattlenet::Wow::CreatureMedia.find(pet.creature_display_id)
+    pet.media_zoom_url = creature_media.assets.first.value if creature_media.status_code == 200
+
     if result.abilities
       result.abilities.each do |ability|
         next unless (local_ability = WowPetAbility.where(ability_id: ability.ability.id).first)

db/migrate/20210429132126_update_wow_pet_model.rb

@@ -0,0 +1,6 @@
+class UpdateWowPetModel < ActiveRecord::Migration[6.1]
+  def change
+    add_column :wow_pets, :creature_display_id, :integer
+    add_column :wow_pets, :media_zoom_url, :string
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2021_04_24_192800) do
+ActiveRecord::Schema.define(version: 2021_04_29_132126) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -197,6 +197,8 @@ ActiveRecord::Schema.define(version: 2021_04_24_192800) do
     t.integer "creature_id"
     t.datetime "created_at", precision: 6, null: false
     t.datetime "updated_at", precision: 6, null: false
+    t.integer "creature_display_id"
+    t.string "media_zoom_url"
     t.index ["pet_id"], name: "index_wow_pets_on_pet_id", unique: true
   end