Make dashboard sidebar render async and adjust dashboard pagination (#…

…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

app/controllers/dashboards_controller.rb

@@ -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
@@ -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)

app/views/dashboards/_actions.html.erb

@@ -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>
@@ -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>

app/views/dashboards/_actions_mobile.html.erb

@@ -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| %>

app/views/dashboards/_header_and_action.html.erb

@@ -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>

app/views/dashboards/followers.html.erb

@@ -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">

app/views/dashboards/following_organizations.html.erb

@@ -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">

app/views/dashboards/following_podcasts.html.erb

@@ -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">

app/views/dashboards/following_tags.html.erb

@@ -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" %>

app/views/dashboards/following_users.html.erb

@@ -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">

app/views/dashboards/hidden_tags.html.erb

@@ -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" %>

app/views/dashboards/show.html.erb

@@ -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>

app/views/dashboards/sidebar.html.erb

@@ -0,0 +1,5 @@
+<% if params[:type_of] == "mobile" %>
+ <%= render "actions_mobile" %>
+<% else %>
+ <%= render "actions" %>
+<% end %>

config/routes.rb

@@ -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"