Refactor topics nav to component

Author: rossta

app/content/layouts/article.html.erb

@@ -37,7 +37,7 @@
       <%= yield %>
     </div>
     <% if @page.topics.any? %>
-      <section class="section-content container">
+      <section id="article-topics" class="section-content container">
         <%= render Pages::Topics.new(topics: @page.topics.pluck(:slug)) %>
       </section>
     <% end %>

app/views/topics/index.html.erb

@@ -4,18 +4,12 @@
 
 <div class="column-content container py-gap mb-3xl">
   <nav class="sidebar" data-turbo-permanent>
-    <%= turbo_frame_tag :topics_sidebar do %>
-      <%= render Topics::Select.new(topics, class: "lg:hidden") %>
-      <% topics.each do |topic| %>
-        <%= tag.div id: dom_id(topic), class: "text-small mb-2 hidden lg:block" do %>
-          <%= link_to topic.name, topic_path(topic), data: {turbo_frame: :topics_mainbar} %>
-          <span class="text-faint">(<%= topic.pages_count %>)</span>
-        <% end %>
-      <% end %>
+    <%= turbo_frame_tag "topics-sidebar" do %>
+      <%= render Topics::Nav.new(topics, class: "lg:hidden") %>
     <% end %>
   </nav>
   <div class="mainbar w-full">
-    <%= turbo_frame_tag :topics_mainbar, data: {turbo_action: "advance"} do %>
+    <%= turbo_frame_tag "topics-mainbar", data: {turbo_action: "advance"} do %>
       <div>
         <h3 class="mb-8 lg:hidden">Howdy!</h3>
         <div>

app/views/topics/nav.rb

@@ -0,0 +1,65 @@
+module Topics
+  class Nav < ApplicationComponent
+    include Phlex::Rails::Helpers::CurrentPage
+    include Phlex::Rails::Helpers::DOMID
+    include PhlexConcerns::FlexBlock
+
+    attr_reader :topics, :attributes
+
+    def initialize(topics = [], **attributes)
+      @topics = topics
+      @attributes = attributes
+    end
+
+    def view_template
+      topics_select
+      topics_list
+    end
+
+    def topics_select
+      flex_block(class: "lg:hidden") do
+        label(for: "topic", class: "block text-sm font-medium text-gray-700") do
+          "Select a topic"
+        end
+        select(
+          name: "topic",
+          data: {
+            :controller => "select-nav",
+            :action => "select-nav#visit",
+            "select-nav-turbo-frame-value" => "topics-mainbar"
+          }
+        ) do
+          option(value: "") { "Start here" }
+          topics.each do |topic|
+            option(
+              value: topic_path(topic),
+              selected: current_page?(topic_path(topic))
+            ) do
+              topic.name
+            end
+          end
+        end
+      end
+    end
+
+    def topics_list
+      topics.each do |topic|
+        div id: dom_id(topic), class: "text-small mb-2 hidden lg:block" do
+          a(
+            href: topic_path(topic),
+            data: {
+              turbo_frame: "topics-mainbar"
+            }
+          ) do
+            topic.name
+          end
+
+          whitespace
+          span(class: "text-faint") do
+            plain "(#{topic.pages_count})"
+          end
+        end
+      end
+    end
+  end
+end

app/views/topics/select.rb

@@ -5,10 +5,10 @@
 
 <div class="column-content container py-gap mb-3xl">
   <nav class="sidebar" data-turbo-permanent>
-    <%= turbo_frame_tag :topics_sidebar, src: topics_path %>
+    <%= turbo_frame_tag "topics-sidebar", src: topics_path %>
   </nav>
   <div class="mainbar w-full">
-    <%= turbo_frame_tag :topics_mainbar, data: {turbo_action: "advance"} do %>
+    <%= turbo_frame_tag "topics-mainbar", data: {turbo_action: "advance"} do %>
       <% if topic.pages.blank? %>
         <div>
           <h2>No articles have been added for this topic yet!</h2>
@@ -17,7 +17,7 @@
           </div>
         </div>
       <% else %>
-        <h3 class="mb-8 hidden lg:block">Topic: <%= topic.name %></h3>
+        <h3 class="mb-8 hidden lg:block"><%= topic.name %></h3>
         <ul>
           <% topic.pages.as_published_articles.each do |page| %>
             <%= tag.li id: dom_id(page) do %>

app/views/topics/show.html.erb

@@ -6,4 +6,35 @@
 
     expect(page).to have_content("Articles")
   end
+
+  it "displays a single article" do
+    Page.upsert_from_sitepress!(limit: 1)
+
+    article = Page.first
+    article.topics << FactoryBot.create_list(:topic, 2, :approved)
+    article.save!
+
+    visit "/articles"
+
+    click_on article.title
+
+    within("header.page-header") do
+      expect(page).to have_content(article.title)
+    end
+
+    expect(article.topics.count).to eq(2)
+
+    article.topics.each do |topic|
+      expect(page).to have_link("##{topic.slug}", href: topic_path(topic))
+    end
+
+    first_topic = article.topics.first
+    click_link "##{first_topic.slug}"
+
+    within("header.page-header") do
+      expect(page).to have_content("Topics")
+    end
+    expect(page).to have_content(first_topic.name)
+    expect(page).to have_content(article.title)
+  end
 end