Refactor notifications to use a Turbo Stream-backed pagination

This commit is contained in:
Andreas Nedbal 2022-09-05 21:40:26 +02:00 committed by Andreas Nedbal
parent 8c14fb5423
commit c118dab903
5 changed files with 33 additions and 31 deletions

View File

@ -19,7 +19,7 @@ class NotificationsController < ApplicationController
respond_to do |format|
format.html
format.js { render layout: false }
format.turbo_stream
end
end

View File

@ -1,4 +1,5 @@
%ul.list-unstyled#notifications
= turbo_frame_tag "notification" do
%ul.list-unstyled#notifications
- if @notifications.count.zero?
%li.card.text-center
.card-body
@ -16,12 +17,9 @@
.media
= render "notifications/type/#{notification.target.class.name.downcase.split('::').last}", notification: notification
- unless @notifications.count.zero?
= render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @notifications_last_id, permitted_params: %i[type]
- if @more_data_available
.d-flex.justify-content-center.justify-content-sm-start
%button.btn.btn-light#load-more-btn{ type: :button, data: { last_id: @notifications_last_id } }
.d-flex.justify-content-center.justify-content-sm-start#paginator
= button_to notifications_path(last_id: @notifications_last_id, type: params[:type]), class: "btn btn-light" do
= t("voc.load")
- provide(:title, generate_title(t(".title")))

View File

@ -1,8 +0,0 @@
$('#notifications').append('<% @notifications.each do |notification|
%><li class="card"><div class="card-body"><div class="media"><%= j render "notifications/type/#{notification.target_type.downcase}", notification: notification
%></div></div></li><% end %>');
<% if @more_data_available %>
$('#pagination').html('<%= j render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @notifications_last_id, permitted_params: %i[type] %>');
<% else %>
$('#pagination, #load-more-btn').remove();
<% end %>

View File

@ -0,0 +1,12 @@
= turbo_stream.append "notifications" do
- @notifications.each do |notification|
%li.card
.card-body
.media
= render "notifications/type/#{notification.target.class.name.downcase.split('::').last}", notification: notification
= turbo_stream.update "paginator" do
- if @more_data_available
= button_to notifications_path(last_id: @notifications_last_id, type: params[:type]), class: "btn btn-light" do
= t("voc.load")

View File

@ -141,7 +141,7 @@ Rails.application.routes.draw do
get "/public", to: "timeline#public", as: :public_timeline if APP_CONFIG.dig(:features, :public, :enabled)
get "/list/:list_name", to: "timeline#list", as: :list_timeline
get "/notifications(/:type)", to: "notifications#index", as: :notifications, defaults: { type: "new" }
match "/notifications(/:type)", to: "notifications#index", via: [:get, :post], as: :notifications, defaults: { type: "new" }
match "/inbox(/:author)", via: [:get, :post], to: "inbox#show", as: :inbox