pagination for notifications

app/controllers/notifications_controller.rb

@@ -7,6 +7,10 @@ class NotificationsController < ApplicationController
                        Notification.for(current_user)
                      else
                        Notification.for(current_user).where('LOWER(target_type) = ?', @type)
-                     end
+                     end.paginate(page: params[:page])
+    respond_to do |format|
+      format.html
+      format.js
+    end
   end
 end

app/views/notifications/_notification.html.haml

@@ -0,0 +1,57 @@
+%li.list-group-item{class: (notification.new? ? 'list-group-item-warning' : '')}
+  .media
+    - case notification.target_type
+      - when "Answer"
+        .pull-left
+          %img.img-rounded.notification--img{src: gravatar_url(notification.target.user)}
+        .media-body
+          %h6.media-heading.notification--user
+            = user_screen_name notification.target.user
+          %p.notification--text
+            answered
+            %a{href: show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.id), title: "#{notification.target.content[0..40]}...", data: { toggle: :tooltip, placement: :top }}
+              your question
+            = time_ago_in_words notification.target.created_at
+            ago
+          .notification--icon
+            %i.fa.fa-exclamation
+      - when "Relationship"
+        .pull-left
+          %img.img-rounded.notification--img{src: gravatar_url(notification.target.source)}
+        .media-body
+          %h6.media-heading.notification--user
+            = user_screen_name notification.target.source
+          %p.notification--text
+            followed you
+            = time_ago_in_words notification.target.created_at
+            ago
+          .notification--icon
+            %i.fa.fa-users
+      - when "Smile"
+        .pull-left
+          %img.img-rounded.notification--img{src: gravatar_url(notification.target.user)}
+        .media-body
+          %h6.media-heading.notification--user
+            = user_screen_name notification.target.user
+          %p.notification--text
+            smiled at
+            %a{href: show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id), title: "#{notification.target.answer.content[0..40]}...", data: { toggle: :tooltip, placement: :top }}
+              your answer
+            = time_ago_in_words notification.target.created_at
+            ago
+          .notification--icon
+            %i.fa.fa-smile-o
+      - when "Comment"
+        .pull-left
+          %img.img-rounded.notification--img{src: gravatar_url(notification.target.user)}
+        .media-body
+          %h6.media-heading.notification--user
+            = user_screen_name notification.target.user
+          %p.notification--text
+            commented on
+            %a{href: show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id), title: "#{notification.target.answer.content[0..40]}...", data: { toggle: :tooltip, placement: :top }}
+              your answer
+            = time_ago_in_words notification.target.created_at
+            ago
+          .notification--icon
+            %i.fa.fa-comments

app/views/notifications/index.html.haml

@@ -1,63 +1,13 @@
 .container.j2-page
   = render 'notification_tabs'
   .col-md-9.col-xs-12.col-sm-9
-    %ul.list-group
+    %ul#notifications.list-group
       - @notifications.each do |notification|
-        %li.list-group-item{class: (notification.new? ? 'list-group-item-warning' : '')}
+        = render 'notifications/notification', notification: notification
-          .media
+
-            - case notification.target_type
+      #pagination= will_paginate @notifications, renderer: BootstrapPagination::Rails, page_links: false
-              - when "Answer"
+
-                .pull-left
+      - if @notifications.next_page
-                  %img.img-rounded.notification--img{src: gravatar_url(notification.target.user)}
+        %button#load-more-btn.btn.btn-default{type: :button, data: { current_page: @notifications.current_page }}
-                .media-body
+          Load more
-                  %h6.media-heading.notification--user
-                    = user_screen_name notification.target.user
-                  %p.notification--text
-                    answered
-                    %a{href: show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.id), title: "#{notification.target.content[0..40]}...", data: { toggle: :tooltip, placement: :top }}
-                      your question
-                    = time_ago_in_words notification.target.created_at
-                    ago
-                  .notification--icon
-                    %i.fa.fa-exclamation
-              - when "Relationship"
-                .pull-left
-                  %img.img-rounded.notification--img{src: gravatar_url(notification.target.source)}
-                .media-body
-                  %h6.media-heading.notification--user
-                    = user_screen_name notification.target.source
-                  %p.notification--text
-                    followed you
-                    = time_ago_in_words notification.target.created_at
-                    ago
-                  .notification--icon
-                    %i.fa.fa-users
-              - when "Smile"
-                .pull-left
-                  %img.img-rounded.notification--img{src: gravatar_url(notification.target.user)}
-                .media-body
-                  %h6.media-heading.notification--user
-                    = user_screen_name notification.target.user
-                  %p.notification--text
-                    smiled at
-                    %a{href: show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id), title: "#{notification.target.answer.content[0..40]}...", data: { toggle: :tooltip, placement: :top }}
-                      your answer
-                    = time_ago_in_words notification.target.created_at
-                    ago
-                  .notification--icon
-                    %i.fa.fa-smile-o
-              - when "Comment"
-                .pull-left
-                  %img.img-rounded.notification--img{src: gravatar_url(notification.target.user)}
-                .media-body
-                  %h6.media-heading.notification--user
-                    = user_screen_name notification.target.user
-                  %p.notification--text
-                    commented on
-                    %a{href: show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id), title: "#{notification.target.answer.content[0..40]}...", data: { toggle: :tooltip, placement: :top }}
-                      your answer
-                    = time_ago_in_words notification.target.created_at
-                    ago
-                  .notification--icon
-                    %i.fa.fa-comments
 - Notification.for(current_user).update_all(new: false)

app/views/notifications/index.js.erb

@@ -0,0 +1,8 @@
+$('#notifications').append('<% @notifications.each do |notification|
+  %><%= j render 'notifications/notification', notification: notification
+%><% end %>');
+<% if @notifications.next_page %>
+  $('#pagination').html('<%= j will_paginate @notifications, renderer: BootstrapPagination::Rails, page_links: false %>');
+<% else %>
+  $('#pagination, #load-more-btn').remove();
+<% end %>