Merge pull request #1820 from MushroomObserver/nimmo-cache-try2

Cache the sidebar nav

app/assets/stylesheets/mo/_utilities.scss

@@ -321,6 +321,14 @@
   margin-left: 10px !important;
 }
 
+.ml-1 {
+  margin-left: 0.25rem !important;
+}
+
+.ml-2 {
+  margin-left: 0.5rem !important;
+}
+
 .ml-3 {
   margin-left: 1rem !important;
 }

app/helpers/application_helper.rb

@@ -74,6 +74,21 @@ def flash_notices_html
                      class: class_names("alert mt-3", alert_class))
   end
 
+  # Returns a string that indicates the current user/logged_in/admin status.
+  # Used as a simple cache key for templates that may have three
+  # possible versions of cached HTML
+  def user_status_string
+    if in_admin_mode?
+      "admin_mode"
+    elsif browser.bot?
+      "robot"
+    elsif !@user.nil?
+      "logged_in"
+    else
+      "no_user"
+    end
+  end
+
   # ----------------------------------------------------------------------------
 
   # Take URL that got us to this page and add one or more parameters to it.

app/helpers/link_helper.rb

@@ -24,11 +24,16 @@ def link_with_query(text = nil, path = nil, **opts, &block)
   end
 
   # https://stackoverflow.com/questions/18642001/add-an-active-class-to-all-active-links-in-rails
-  # make a link that has .active class if it's a link to the current page
+  # https://stackoverflow.com/questions/75742517/how-to-highlight-active-nav-link-when-using-hotwire
+  # Make a link that is a target for the stimulus "nav-active_controller"
+  # (The controller adds .active class if it's a link to the current page,
+  # and updates the active link when navigating. Allows nav to be cached!)
   def active_link_to(text = nil, path = nil, **opts, &block)
     link = block ? text : path # because positional
     content = block ? capture(&block) : text
-    opts[:class] = class_names(opts[:class], { active: current_page?(link) })
+    opts[:data] = (opts[:data] || {}).merge(
+      { nav_active_target: "link", action: "nav-active#navigate" }
+    )
 
     link_to(link, opts) { content }
   end

app/javascript/controllers/nav-active_controller.js

@@ -0,0 +1,31 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="nav-active"
+// Adds CSS class "active" to a nav link if it matches the current location
+export default class extends Controller {
+  static targets = ['link']
+
+  connect() {
+    this.element.dataset.stimulus = "connected";
+    this.pickActive();
+  }
+
+  pickActive() {
+    this.linkTargets.forEach((link) => {
+      if ((link.pathname + link.search) ==
+        (location.pathname + location.search)) {
+        link.classList.add('active')
+      }
+    })
+  }
+
+  navigate(e) {
+    const activeButton = this.element.querySelector('.active')
+
+    if (activeButton) {
+      activeButton.classList.remove('active')
+    }
+
+    e.target.classList.add('active')
+  }
+}

app/views/controllers/application/_sidebar.html.erb

@@ -6,7 +6,8 @@ classes = {
   item: "list-group-item",
   admin: "list-group-item list-group-item-danger indent",
   indent: "list-group-item indent",
-  mobile_only: "list-group-item visible-xs"
+  mobile_only: "visible-xs",
+  desktop_only: "hidden-xs"
 }
 %>
 
@@ -19,36 +20,42 @@ classes = {
 
   <div class="<%= classes[:wrapper] %>" data-controller="nav-active">
 
-    <% if in_admin_mode? %>
-      <%= render(partial: "application/sidebar/admin",
-                  locals: { classes: classes }) %>
+    <%# Cache customized for the user instance. %>
+    <% cache(@user) do %>
+      <% if @user %>
+        <%= render(partial: "application/sidebar/user",
+                    locals: { classes: classes }) %>
+      <% end %>
     <% end %>
 
-    <% if @user.nil? %>
-      <%= render(partial: "application/sidebar/login",
-                  locals: { classes: classes }) %>
-    <% else %>
-      <%= render(partial: "application/sidebar/user",
+    <%# Cache depends only on user status (logged-in? admin?) %>
+    <% cache([user_status_string]) do %>
+      <% if in_admin_mode? %>
+        <%= render(partial: "application/sidebar/admin",
+                    locals: { classes: classes }) %>
+      <% elsif @user.nil? %>
+        <%= render(partial: "application/sidebar/login",
+                    locals: { classes: classes }) %>
+      <% end %>
+
+      <%= render(partial: "application/sidebar/observations",
                   locals: { classes: classes }) %>
-    <% end %>
-
-    <%= render(partial: "application/sidebar/observations",
-                locals: { classes: classes }) %>
 
-    <%= render(partial: "application/sidebar/latest",
-                locals: { classes: classes }) if @user %>
+      <%= render(partial: "application/sidebar/latest",
+                  locals: { classes: classes }) %>
 
-    <%= render(partial: "application/sidebar/species_lists",
-                locals: { classes: classes }) if @user %>
+      <%= render(partial: "application/sidebar/species_lists",
+                  locals: { classes: classes }) if @user %>
 
-    <%= render(partial: "application/sidebar/indexes",
-                locals: { classes: classes }) if @user %>
+      <%= render(partial: "application/sidebar/indexes",
+                  locals: { classes: classes }) if @user %>
 
-    <%= render(partial: "application/sidebar/info",
-                locals: { classes: classes }) %>
+      <%= render(partial: "application/sidebar/info",
+                  locals: { classes: classes }) %>
 
-    <%= render(partial: "application/sidebar/languages",
-                locals: { classes: classes }) %>
+      <%= render(partial: "application/sidebar/languages",
+                  locals: { classes: classes }) %>
+    <% end %>
 
   </div><!-- .sidebar-nav -->
 

app/views/controllers/application/sidebar/_latest.html.erb

@@ -1,13 +1,16 @@
 <%= tag.div("#{:app_latest.t}:", class: classes[:heading]) %>
+<%= active_link_to(:NEWS.t, articles_path,
+               class: classes[:indent], id: "nav_articles_link") %>
 <%=
 [
-active_link_to(:NEWS.t, articles_path,
-               class: classes[:indent], id: "nav_articles_link"),
-active_link_to(:app_latest_changes.t, activity_logs_path,
-               class: classes[:indent], id: "nav_activity_logs_link"),
-active_link_to(:app_newest_images.t, images_path,
-               class: classes[:indent], id: "nav_images_link"),
-active_link_to(:app_comments.t, comments_path,
-               class: classes[:indent], id: "nav_comments_link")
-].safe_join
+  active_link_to(:app_latest_changes.t, activity_logs_path,
+                class: classes[:indent],
+                id: "nav_activity_logs_link"),
+  active_link_to(:app_newest_images.t, images_path,
+                class: classes[:indent],
+                id: "nav_images_link"),
+  active_link_to(:app_comments.t, comments_path,
+                class: classes[:indent],
+                id: "nav_comments_link")
+].safe_join if @user
 %>

app/views/controllers/application/sidebar/_user.html.erb

@@ -1,7 +1,7 @@
-<%= tag.div("", class: classes[:mobile_only]) do
+<%= tag.div("", class: class_names(classes[:item], classes[:mobile_only])) do
   [
     tag.i("", class: "glyphicon glyphicon-user"),
-    tag.span(h(@user.login)),
+    tag.span(h(@user.login), class: "ml-2"),
     tag.span(class: "pull-right") do
       link_to(:app_logout.t, account_logout_path,
                   { id: "nav_user_logout_link" })
@@ -10,27 +10,24 @@
 end %>
 <%= active_link_to(:app_comments_for_you.t,
                    comments_path(for_user: @user.id),
-                   class: classes[:mobile_only],
+                   class: class_names(classes[:indent], classes[:mobile_only]),
                    id: "nav_mobile_your_comments_link") %>
-<%= active_link_to(:app_your_observations.t,
-                   observations_path(user: @user.id),
-                   class: classes[:mobile_only],
-                   id: "nav_mobile_your_observations_link") %>
 <%= active_link_to(:app_your_interests.t, interests_path,
-                   class: classes[:mobile_only],
+                   class: class_names(classes[:indent], classes[:mobile_only]),
                    id: "nav_mobile_interests_link") %>
 <%= active_link_to(:app_your_summary.t, user_path(@user.id),
-                   class: classes[:mobile_only],
+                   class: class_names(classes[:indent], classes[:mobile_only]),
                    id: "nav_mobile_profile_link") %>
 <%= active_link_to(:app_preferences.t, edit_account_preferences_path,
-                   class: classes[:mobile_only],
+                   class: class_names(classes[:indent], classes[:mobile_only]),
                    id: "nav_mobile_preferences_link") %>
 <%= link_to(:app_join_mailing_list.t,
             "https://groups.google.com/forum/?fromgroups=#!forum/mo-general",
-            class: classes[:mobile_only],
+            class: class_names(classes[:indent], classes[:mobile_only]),
             id: "nav_mobile_mailing_list_link") %>
 <% if @user.admin && !in_admin_mode? %>
   <%= active_link_to(:app_turn_admin_on.t, admin_mode_path(turn_on: true),
-                     class: classes[:mobile_only],
+                     class: class_names(classes[:indent],
+                                        classes[:mobile_only]),
                      id: "nav_mobile_admin_link" ) %>
 <% end %>