Skip to content

Commit

Permalink
Make dashboard sidebar render async and adjust dashboard pagination (f…
Browse files Browse the repository at this point in the history
…orem#21324)

* Make dashboard sidebar render async and adjust dashboard pagination

* Adjust dashboard system spec to test sidebar

* Adjust dashboard system spec to test sidebar

* Adjust dashboard

* Remove count header needs

* Remove test for analytics org rendering

* Adjust tests
  • Loading branch information
benhalpern authored Oct 11, 2024
1 parent 01e0afb commit 086a6a2
Show file tree
Hide file tree
Showing 15 changed files with 154 additions and 94 deletions.
11 changes: 10 additions & 1 deletion app/controllers/dashboards_controller.rb
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,11 @@ class DashboardsController < ApplicationController
before_action :set_no_cache_header
before_action :authenticate_user!

layout false, only: :sidebar

LIMIT_PER_PAGE_DEFAULT = 80
LIMIT_PER_PAGE_MAX = 1000
ARTICLES_PER_PAGE = 25

def show
fetch_and_authorize_user
Expand Down Expand Up @@ -46,10 +49,16 @@ def show
@page_views_count = @articles.sum(&:page_views_count)

@articles = @articles.includes(:collection).sorting(params[:sort]).decorate
@articles = Kaminari.paginate_array(@articles).page(params[:page]).per(50)
@articles = Kaminari.paginate_array(@articles).page(params[:page]).per(ARTICLES_PER_PAGE)
@collections_count = target.collections.non_empty.count
end

def sidebar
@user = current_user
@organizations = @user.admin_organizations
@action = params[:state]
end

def following_tags
fetch_and_authorize_user
@followed_tags = follows_for_tag(user: @user, order_by: :points)
Expand Down
34 changes: 17 additions & 17 deletions app/views/dashboards/_actions.html.erb
Original file line number Diff line number Diff line change
@@ -1,65 +1,65 @@
<nav class="hidden m:block" aria-label="Dashboards">
<nav id="main-dashboard-side-nav" class="hidden m:block" aria-label="Dashboards">
<ul class="list-none p-0">
<% if policy(Article).has_existing_articles_or_can_create_new_ones? %>
<li>
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "show" && (params[:which] == "organization" || params[:which].blank?) %>"
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if @action == "show" && (params[:which] == "organization" || params[:which].blank?) %>"
href="<%= dashboard_path %>"
<%= params[:action] == "show" && (params[:which] == "organization" || params[:which].blank?) ? ' aria-current="page"'.html_safe : "" %>>
<%= @action == "show" && (params[:which] == "organization" || params[:which].blank?) ? ' aria-current="page"'.html_safe : "" %>>
<%= t("views.dashboard.actions.posts") %>
<span class="c-indicator"><%= @user.articles_count %></span>
</a>
</li>

<li>
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "series" && (params[:which] == "organization" || params[:which].blank?) %>"
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if @action == "series" && (params[:which] == "organization" || params[:which].blank?) %>"
href="<%= user_series_path(current_user.username) %>"
<%= params[:action] == "series" && (params[:which] == "organization" || params[:which].blank?) ? ' aria-current="page"'.html_safe : "" %>>
<%= @action == "series" && (params[:which] == "organization" || params[:which].blank?) ? ' aria-current="page"'.html_safe : "" %>>
<%= t("views.dashboard.actions.series") %>
<span class="c-indicator"><%= @collections_count %></span>
</a>
</li>

<li>
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "followers" %>"
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if @action == "followers" %>"
href="/dashboard/user_followers"
<%= params[:action] == "followers" ? ' aria-current="page"'.html_safe : "" %>>
<%= @action == "followers" ? ' aria-current="page"'.html_safe : "" %>>
<%= t("views.dashboard.actions.followers") %>
<span class="c-indicator"><%= @user.good_standing_followers_count %></span>
</a>
</li>
<% end %>

<li>
<a class="crayons-link crayons-link--block js-following-tags-link <%= "crayons-link--current" if params[:action] == "following_tags" %>"
<a class="crayons-link crayons-link--block js-following-tags-link <%= "crayons-link--current" if @action == "following_tags" %>"
href="<%= dashboard_following_tags_path %>"
<%= params[:action] == "following_tags" ? ' aria-current="page"'.html_safe : "" %>>
<%= @action == "following_tags" ? ' aria-current="page"'.html_safe : "" %>>
<%= t("views.dashboard.actions.following_tags") %>
<span class="c-indicator"><%= @user.cached_followed_tag_names.size %></span>
</a>
</li>

<li>
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "following_users" %>"
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if @action == "following_users" %>"
href="<%= dashboard_following_users_path %>"
<%= params[:action] == "following_users" ? ' aria-current="page"'.html_safe : "" %>>
<%= @action == "following_users" ? ' aria-current="page"'.html_safe : "" %>>
<%= t("views.dashboard.actions.following_users") %>
<span class="c-indicator"><%= @user.following_users_count %></span>
</a>
</li>

<li>
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "following_organizations" %>"
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if @action == "following_organizations" %>"
href="<%= dashboard_following_organizations_path %>"
<%= params[:action] == "following_organizations" ? ' aria-current="page"'.html_safe : "" %>>
<%= @action == "following_organizations" ? ' aria-current="page"'.html_safe : "" %>>
<%= t("views.dashboard.actions.following_orgs") %>
<span class="c-indicator"><%= @user.following_organizations_count %></span>
</a>
</li>

<li>
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "following_podcasts" %>"
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if @action == "following_podcasts" %>"
href="<%= dashboard_following_podcasts_path %>"
<%= params[:action] == "following_podcasts" ? ' aria-current="page"'.html_safe : "" %>>
<%= @action == "following_podcasts" ? ' aria-current="page"'.html_safe : "" %>>
<%= t("views.dashboard.actions.following_pods") %>
<span class="c-indicator"><%= @user.following_podcasts_count %></span>
</a>
Expand All @@ -83,9 +83,9 @@
<%- end %>

<li>
<a class="crayons-link crayons-link--block js-hidden-tags-link <%= "crayons-link--current" if params[:action] == "hidden_tags" %>"
<a class="crayons-link crayons-link--block js-hidden-tags-link <%= "crayons-link--current" if @action == "hidden_tags" %>"
href="<%= dashboard_hidden_tags_path %>"
<%= params[:action] == "hidden_tags" ? ' aria-current="page"'.html_safe : "" %>>
<%= @action == "hidden_tags" ? ' aria-current="page"'.html_safe : "" %>>
<%= t("views.dashboard.actions.hidden_tags") %>
<span class="c-indicator"><%= @user.cached_antifollowed_tag_names.size %></span>
</a>
Expand Down
14 changes: 7 additions & 7 deletions app/views/dashboards/_actions_mobile.html.erb
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<div class="block m:hidden pt-3">
<select id="mobile_nav_dashboard" class="crayons-select">
<option value="/dashboard" <%= "selected" if params[:action] == "show" && (params[:which] == "organization" || params[:which].blank?) %>><%= t("views.dashboard.actions.mobile.posts", num: @user.articles_count) %></option>
<option value="/dashboard/user_followers" <%= "selected" if params[:action] == "followers" %>><%= t("views.dashboard.actions.mobile.followers", num: @user.good_standing_followers_count) %></option>
<option value="/dashboard/following_tags" <%= "selected" if params[:action] == "following_tags" %>><%= t("views.dashboard.actions.mobile.following_tags", num: @user.cached_followed_tag_names.size) %></option>
<option value="/dashboard/following_users" <%= "selected" if params[:action] == "following_users" %>><%= t("views.dashboard.actions.mobile.following_users", num: @user.following_users_count) %></option>
<option value="/dashboard/following_organizations" <%= "selected" if params[:action] == "following_organizations" %>><%= t("views.dashboard.actions.mobile.following_orgs", num: @user.following_organizations_count) %></option>
<option value="/dashboard/following_podcasts" <%= "selected" if params[:action] == "following_podcasts" %>><%= t("views.dashboard.actions.mobile.following_pods", num: @user.following_podcasts_count) %></option>
<option value="/dashboard" <%= "selected" if @action == "show" && (params[:which] == "organization" || params[:which].blank?) %>><%= t("views.dashboard.actions.mobile.posts", num: @user.articles_count) %></option>
<option value="/dashboard/user_followers" <%= "selected" if @action == "followers" %>><%= t("views.dashboard.actions.mobile.followers", num: @user.good_standing_followers_count) %></option>
<option value="/dashboard/following_tags" <%= "selected" if @action == "following_tags" %>><%= t("views.dashboard.actions.mobile.following_tags", num: @user.cached_followed_tag_names.size) %></option>
<option value="/dashboard/following_users" <%= "selected" if @action == "following_users" %>><%= t("views.dashboard.actions.mobile.following_users", num: @user.following_users_count) %></option>
<option value="/dashboard/following_organizations" <%= "selected" if @action == "following_organizations" %>><%= t("views.dashboard.actions.mobile.following_orgs", num: @user.following_organizations_count) %></option>
<option value="/dashboard/following_podcasts" <%= "selected" if @action == "following_podcasts" %>><%= t("views.dashboard.actions.mobile.following_pods", num: @user.following_podcasts_count) %></option>

<option value="<%= dashboard_analytics_path %>"><%= t("views.dashboard.actions.analytics") %></option>

<option value="/dashboard/hidden_tags" <%= "selected" if params[:action] == "hidden_tags" %>><%= t("views.dashboard.actions.mobile.hidden_tags", num: @user.cached_antifollowed_tag_names.size) %></option>
<option value="/dashboard/hidden_tags" <%= "selected" if @action == "hidden_tags" %>><%= t("views.dashboard.actions.mobile.hidden_tags", num: @user.cached_antifollowed_tag_names.size) %></option>

<% if @organizations && (params[:which].blank? || params[:which] == "organization") %>
<% @organizations.each do |org| %>
Expand Down
91 changes: 91 additions & 0 deletions app/views/dashboards/_header_and_action.html.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
<header class="crayons-page-header block">
<h1 class="crayons-title"><%= page_title %></h1>
<div id="dashboard-mobile-sidebar-wrapper">
<div class="block m:hidden pt-3">
<select class="crayons-select"></select>
</div>
</div>
<%= render "analytics" if params[:action] == "show" %>
</header>

<div class="crayons-layout__sidebar-left">
<div id="dashboard-main-sidebar-wrapper">
<nav class="hidden m:block" aria-label="Dashboards">
<ul class="list-none p-0">
<li>
<a class="crayons-link crayons-link--block" href="/dashboard">
<%= t("views.dashboard.actions.posts") %>
</a>
</li>

<li>
<a class="crayons-link crayons-link--block " href="/admin_mcadmin/series">
<%= t("views.dashboard.actions.series") %>
</a>
</li>

<li>
<a class="crayons-link crayons-link--block " href="/dashboard/user_followers">
<%= t("views.dashboard.actions.followers") %>
</a>
</li>

<li>
<a class="crayons-link crayons-link--block js-following-tags-link " href="/dashboard/following_tags">
<%= t("views.dashboard.actions.following_tags") %>
</a>
</li>

<li>
<a class="crayons-link crayons-link--block " href="/dashboard/following_users">
<%= t("views.dashboard.actions.following_users") %>
</a>
</li>

<li>
<a class="crayons-link crayons-link--block " href="/dashboard/following_organizations">
<%= t("views.dashboard.actions.following_orgs") %>
</a>
</li>

<li>
<a class="crayons-link crayons-link--block " href="/dashboard/following_podcasts">
<%= t("views.dashboard.actions.following_pods") %>
</a>
</li>
<li>
<a class="crayons-link crayons-link--block" href="/dashboard/analytics">
<%= t("views.dashboard.actions.analytics") %>
</a>
</li>

<li>
<a class="crayons-link crayons-link--block js-hidden-tags-link " href="/dashboard/hidden_tags">
<%= t("views.dashboard.actions.hidden_tags") %>
</a>
</li>
</ul>
</nav>
</div>
</div>

<script>
fetch('/dashboard/sidebar?state=<%= params[:action] %>&which=<%= params[:which] %>')
.then(response => response.text())
.then(html => {
document.getElementById('dashboard-main-sidebar-wrapper').innerHTML = html;
});
window.fetch('/dashboard/sidebar?type_of=mobile&state=<%= params[:action] %>&which=<%= params[:which] %>')
.then(response => response.text())
.then(html => {
document.getElementById('dashboard-mobile-sidebar-wrapper').innerHTML = html;
let navtrigger = document.getElementById('mobile_nav_dashboard');
if (navtrigger) {
navtrigger.addEventListener('change', (event) => {
let url = event.target.value;
InstantClick.preload(url);
InstantClick.display(url);
});
}
});
</script>
8 changes: 1 addition & 7 deletions app/views/dashboards/followers.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,7 @@
data-which="followers">

<main id="main-content" class="crayons-layout crayons-layout--header-inside crayons-layout--2-cols">
<header class="crayons-page-header block">
<h1 class="crayons-title"><%= t("views.dashboard.followers.heading") %></h1>
<%= render "actions_mobile" %>
</header>
<div class="crayons-layout__sidebar-left">
<%= render "actions" %>
</div>
<%= render("header_and_action", page_title: t("views.dashboard.followers.heading")) %>
<div class="crayons-layout__content" id="user-dashboard">
<% if @follows.any? %>
<div id="following-wrapper" class="grid gap-0 s:gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 align-left s:align-center">
Expand Down
8 changes: 1 addition & 7 deletions app/views/dashboards/following_organizations.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,7 @@
data-params="<%= params.to_json(only: %i[action per_page]) %>"
data-which="following">
<main id="main-content" class="crayons-layout crayons-layout--header-inside crayons-layout--2-cols">
<header class="crayons-page-header block">
<h1 class="crayons-title"><%= t("views.dashboard.following_orgs.heading") %></h1>
<%= render "actions_mobile" %>
</header>
<div class="crayons-layout__sidebar-left">
<%= render "actions" %>
</div>
<%= render("header_and_action", page_title: t("views.dashboard.following_orgs.heading")) %>
<div class="crayons-layout__content" id="user-dashboard">
<% if @followed_organizations.any? %>
<div id="following-wrapper" class="grid gap-0 s:gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 align-left s:align-center">
Expand Down
9 changes: 1 addition & 8 deletions app/views/dashboards/following_podcasts.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,7 @@
data-params="<%= params.to_json(only: %i[action per_page]) %>"
data-which="following">
<main id="main-content" class="crayons-layout crayons-layout--header-inside crayons-layout--2-cols">
<header class="crayons-page-header block">
<h1 class="crayons-title"><%= t("views.dashboard.following_pods.heading") %></h1>
<%= render "actions_mobile" %>
</header>

<div class="crayons-layout__sidebar-left">
<%= render "actions" %>
</div>
<%= render("header_and_action", page_title: t("views.dashboard.following_pods.heading")) %>
<div class="crayons-layout__content" id="user-dashboard">
<% if @followed_podcasts.any? %>
<div id="following-wrapper" class="grid gap-0 s:gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 align-left s:align-center">
Expand Down
8 changes: 1 addition & 7 deletions app/views/dashboards/following_tags.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,7 @@
data-params="<%= params.to_json(only: %i[action per_page]) %>"
data-which="following">
<main id="main-content" class="crayons-layout crayons-layout--header-inside crayons-layout--2-cols">
<header class="crayons-page-header block">
<h1 class="crayons-title"><%= t("views.dashboard.following_tags.heading") %></h1>
<%= render "actions_mobile" %>
</header>
<div class="crayons-layout__sidebar-left">
<%= render "actions" %>
</div>
<%= render("header_and_action", page_title: t("views.dashboard.following_tags.heading")) %>
<div class="crayons-layout__content mb-5" id="user-dashboard">
<% if @followed_tags.any? %>
<%= render "tags", tags: @followed_tags, page: "following" %>
Expand Down
9 changes: 1 addition & 8 deletions app/views/dashboards/following_users.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,7 @@
data-params="<%= params.to_json(only: %i[action per_page]) %>"
data-which="following">
<main id="main-content" class="crayons-layout crayons-layout--header-inside crayons-layout--2-cols">
<header class="crayons-page-header block">
<h1 class="crayons-title"><%= t("views.dashboard.following_users.heading") %></h1>
<%= render "actions_mobile" %>
</header>

<div class="crayons-layout__sidebar-left">
<%= render "actions" %>
</div>
<%= render("header_and_action", page_title: t("views.dashboard.following_users.heading")) %>
<div class="crayons-layout__content" id="user-dashboard">
<% if @follows.any? %>
<div id="following-wrapper" class="grid gap-0 s:gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 align-left s:align-center">
Expand Down
8 changes: 1 addition & 7 deletions app/views/dashboards/hidden_tags.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,7 @@
data-params="<%= params.to_json(only: %i[action per_page]) %>"
data-which="following">
<main id="main-content" class="crayons-layout crayons-layout--header-inside crayons-layout--2-cols">
<header class="crayons-page-header block">
<h1 class="crayons-title"><%= t("views.dashboard.hidden_tags.heading") %></h1>
<%= render "actions_mobile" %>
</header>
<div class="crayons-layout__sidebar-left">
<%= render "actions" %>
</div>
<%= render("header_and_action", page_title: t("views.dashboard.hidden_tags.heading")) %>
<div class="crayons-layout__content mb-5" id="user-dashboard">
<% if @hidden_tags.any? %>
<%= render "tags", tags: @hidden_tags, page: "hidden" %>
Expand Down
12 changes: 2 additions & 10 deletions app/views/dashboards/show.html.erb
Original file line number Diff line number Diff line change
@@ -1,15 +1,7 @@
<% title t("views.dashboard.heading") %>
<main id="main-content" class="crayons-layout crayons-layout--header-inside crayons-layout--2-cols">
<header class="crayons-page-header block">
<h1 class="crayons-title"><%= t("views.dashboard.heading") %></h1>
<%= render "actions_mobile" %>
<%= render "analytics" %>
</header>

<div class="crayons-layout__sidebar-left">
<%= render "actions" %>
</div>

<%= render("header_and_action", page_title: t("views.dashboard.heading")) %>

<div class="crayons-layout__content">
<div class="flex items-center justify-between mt-3">
<h2 class="hidden m:block crayons-subtitle-2"><%= t("views.dashboard.posts.heading") %></h2>
Expand Down
5 changes: 5 additions & 0 deletions app/views/dashboards/sidebar.html.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<% if params[:type_of] == "mobile" %>
<%= render "actions_mobile" %>
<% else %>
<%= render "actions" %>
<% end %>
1 change: 1 addition & 0 deletions config/routes.rb
Original file line number Diff line number Diff line change
Expand Up @@ -323,6 +323,7 @@
get "/settings/:tab/:id", to: "users#edit", constraints: { tab: /response-templates/ }
get "/signout_confirm", to: "users#signout_confirm"
get "/dashboard", to: "dashboards#show"
get "/dashboard/sidebar", to: "dashboards#sidebar"
get "/dashboard/analytics", to: "dashboards#analytics"
get "dashboard/analytics/org/:org_id", to: "dashboards#analytics", as: :dashboard_analytics_org
get "dashboard/following", to: "dashboards#following_tags"
Expand Down
Loading

0 comments on commit 086a6a2

Please sign in to comment.