Merge pull request #243 from iaebots/218-pagination-on-bots-profile

Pagination on bots profile

app/controllers/bots_controller.rb

@@ -13,7 +13,7 @@ def follow
   end
 
   def show
-    @posts = Post.where(bot_id: @bot.id).order('created_at DESC')
+    @posts = Post.where(bot_id: @bot.id).paginate(page: params[:page], per_page: 5).order('created_at DESC')
   end
 
   # Indentifies current user type and stop following a bot
@@ -39,11 +39,9 @@ def create
       render 'new'
     end
   end
-  
+
   def edit
-    if !current_developer || (current_developer && @bot.developer != current_developer)
-      redirect_to bot_path(@bot)
-    end
+    redirect_to bot_path(@bot) if !current_developer || (current_developer && @bot.developer != current_developer)
   end
 
   def update
@@ -87,7 +85,7 @@ def regenerate_keys
     @bot.update_attribute(:api_secret, @bot.api_secret)
 
     redirect_to developer_path(@bot.developer)
-  end  
+  end
 
   private
 

app/javascript/packs/custom/posts.js

@@ -3,6 +3,7 @@ if ($('.pagination')) {
     url = $('.pagination .next_page a').attr('href');
 
     if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 150) {
+      $('.pagination').html('<img src="/assets/loading.gif" width="70" height="70"/>')
       $.getScript(url)
     }
   });

app/views/bots/show.html.erb

@@ -1,10 +1,10 @@
 <%= stylesheet_link_tag 'bots' %>
 
 <div class="col d-flex justify-content-center">
-   <div id="profile-card" class="card">
+  <div id="profile-card" class="card">
     <div class="cover-img-cropper">
       <%= image_tag (@bot.cover_url), class: 'card-img-top', id: 'profile-card-img-top' %>
-    </div>  
+    </div>
     <div class="card-body">
       <%= image_tag (@bot.avatar_url(:medium)), class: 'rounded-circle' %>
       <div class="parent">
@@ -28,28 +28,37 @@
       </div>
       <p class="card-text"><%= truncate(strip_tags(@bot.bio), length: 512) %></p>
       <% if @bot.repository.present? %>
-        <p class="card-text"><a href="http://<%= @bot.repository %>"><%= @bot.repository %></a></p>
+        <p class="card-text">
+          <a href="http://<%= @bot.repository %>"><%= @bot.repository %></a>
+        </p>
       <% end %>
       <p class="card-text">
         <b><%= @bot.followers.count %></b>
         Followers
       </p>
       <p class="card-text">
         <small class="text-muted">Joined on
-        <%= local_relative_time(@bot.created_at, type: 'date') %></small>
+          <%= local_relative_time(@bot.created_at, type: 'date') %></small>
         •
         <%= link_to '@' + @bot.developer.username, developer_path(@bot.developer) %>
-        </p>
-        <% if current_guest or current_developer %>
-          <div class="follow-button">
-            <% if current_developer && @bot.developer == current_developer %>
-              <%= link_to 'Edit bot', edit_bot_path(@bot), class: 'btn btn-primary' %>
-            <% end %>
-          </div>
-        <% end %>
       </p>
+      <% if current_guest or current_developer %>
+        <div class="follow-button">
+          <% if current_developer && @bot.developer == current_developer %>
+            <%= link_to 'Edit bot', edit_bot_path(@bot), class: 'btn btn-primary' %>
+          <% end %>
+        </div>
+      <% end %>
     </div>
   </div>
 </div>
 
-<%= render @posts %>
+<div class="d-flex justify-content-center">
+  <div id="posts">
+    <%= render @posts %>
+  </div>
+</div>
+
+<div class="d-flex justify-content-center">
+  <%= will_paginate @posts %>
+</div>

app/views/bots/show.js.erb

@@ -0,0 +1,7 @@
+$('#posts').append('<%= j render @posts %>');
+<% if @posts.next_page %>
+  $('.pagination').replaceWith('<%= j will_paginate @posts %>');
+<% else %>
+  $(window).off('scroll');
+  $('.pagination').remove();
+<% end %>

app/views/posts/index.html.erb

@@ -4,17 +4,22 @@
   </div>
 </div>
 
+<div class="d-flex justify-content-center">
   <%= will_paginate @posts %>
+</div>
 
+<!-- This must be changed. For some reason the loading.gif won't load if the recommendations
+display between pages. So I'm making them be displayed only in the last page. -->
+<% if @posts.total_pages == @posts.current_page %>
   <div id="no-posts-div" class="d-flex justify-content-center">
-    <div calss ="card">
-      <h3 class="text-center">No more posts 😔</h5>
-      <h5 class="text-center">Consider following more bots to watch their activities</h5> 
+    <div calss="card">
+      <h3 class="text-center">No more posts 😔</h3>
+      <h5 class="text-center">Consider following more bots to watch their activities</h5>
       <div id="posts">
         <% @bots.each do |bot| %>
           <%= render 'bots/bot_simple', bot: bot %>
         <% end %>
       </div>
     </div>
   </div>
-</body>
+<% end %>