Refactor combobox for more flexible rendering

* Uses a hidden :name field to generate dom ids
* Allows for listbox option rendering to be customizable by result

Author: rossta

app/controllers/searches_controller.rb

@@ -2,37 +2,47 @@
 
 class SearchesController < ApplicationController
   rescue_from Searches::ParseFailed do |error|
+    query = params.fetch(:query, "")
+
     respond_to do |format|
-      format.html { render Searches::ShowView.new(pages: [], query: params[:query]) }
+      format.html { render Searches::ShowView.new(query:, name:) }
       format.turbo_stream {
         render turbo_stream: [
-          turbo_stream.replace("search-listbox", Searches::Listbox.new(pages: [], query: params[:query]))
+          turbo_stream.replace(Searches::Listbox.dom_id(name), Searches::Listbox.new(query:, name:))
         ]
       }
     end
   end
 
   def show
-    raw_query = params[:query] || ""
-    pages = if raw_query.present?
-      query = Searches::Query.parse!(raw_query)
-      Page.search("#{query}*").with_snippets.ranked.limit(3)
+    results = if query.present?
+      parsed_query = Searches::Query.parse!(query)
+      Page.search("#{parsed_query}*").with_snippets.ranked.limit(3)
     else
       []
     end
 
     respond_to do |format|
-      format.html {
-        render Searches::ShowView.new(pages:, query: raw_query)
-      }
+      format.html { render Searches::ShowView.new(results:, query:) }
+
       format.turbo_stream {
         render turbo_stream: [
           turbo_stream.replace(
-            params.fetch(:listbox_id, "search-listbox"),
-            Searches::Listbox.new(pages: pages, query: raw_query)
+            Searches::Listbox.dom_id(name),
+            Searches::Listbox.new(results:, query:, name:)
           )
         ]
       }
     end
   end
+
+  private
+
+  def query
+    params.fetch(:query, "")
+  end
+
+  def name
+    params.fetch(:name, "search")
+  end
 end

app/models/page.rb

@@ -31,4 +31,6 @@ def body_text
   def resource
     Sitepress.site.get(request_path)
   end
+
+  def url = request_path
 end

app/views/application/_dialog.html.erb

@@ -1 +1 @@
-<%= render Searches::Dialog.new unless current_page?(search_path) %>
+<%= render Searches::Dialog.new unless current_page?(search_path) || request.post? %>

app/views/searches/combobox.rb

@@ -4,11 +4,12 @@ class Combobox < ApplicationComponent
     include Phlex::Rails::Helpers::FormWith
     include PhlexConcerns::SvgTag
 
-    attr_reader :pages, :query
+    attr_reader :query, :name, :attributes
 
-    def initialize(query: "", pages: [])
-      @pages = pages
+    def initialize(query: "", name: "search", **attributes)
       @query = query
+      @name = name
+      @attributes = attributes
     end
 
     def view_template
@@ -41,7 +42,7 @@ def view_template
               autofocus: true,
               role: "combobox",
               aria: input_aria,
-              id: combobox_id,
+              id: combobox_dom_id,
               data: {
                 action: "
                   focus->combobox#tryOpen
@@ -52,30 +53,30 @@ def view_template
               class: "w-full step-1"
           end
 
-          plain f.hidden_field :listbox_id, value: listbox_id
+          f.hidden_field :name, value: name
         end
 
-        render Searches::Listbox.new(pages: pages, query: query)
+        render Searches::Listbox.new(query:, name:, **attributes)
       end
     end
 
     def input_aria
       {
         expanded: false,
         autocomplete: "none",
-        controls: listbox_id,
-        owns: listbox_id,
+        controls: listbox_dom_id,
+        owns: listbox_dom_id,
         haspopup: "listbox",
         activedescendant: ""
       }
     end
 
-    def combobox_id
-      "search-combobox"
+    def combobox_dom_id
+      "#{name}-combobox"
     end
 
-    def listbox_id
-      "search-listbox"
+    def listbox_dom_id
+      Searches::Listbox.dom_id(name)
     end
   end
 end

app/views/searches/listbox.rb

@@ -2,40 +2,38 @@ module Searches
   class Listbox < ApplicationComponent
     include Phlex::Rails::Helpers::DOMID
 
-    attr_reader :pages, :query
+    attr_reader :results, :query, :name
 
-    def initialize(pages: [], query: "")
-      @pages = pages
+    def self.dom_id(name)
+      "#{name}-listbox"
+    end
+
+    def initialize(results: [], query: "", name: "search")
+      @results = results
       @query = query
+      @name = name
     end
 
     def view_template
       ul(**mix(
-        id: "search-listbox",
+        id: listbox_dom_id,
         role: "listbox",
         class: ["grid"],
         data: {
           controller: "search-listbox"
         }
       )) do
-        if pages.any?
-          pages.each.with_index do |page, i|
+        # Using `results.present?` instead of `results.any?` is a concious decision to avoid an extra "SELECT 1" query
+        # For more information, see: https://www.speedshop.co/2019/01/10/three-activerecord-mistakes.html#any-exists-and-present
+        if results.present?
+          results.each.with_index do |result, i|
             li(
-              aria: {label: page.title},
+              aria: {label: result.title},
               role: "option",
-              id: dom_id(page, "search-option"),
+              id: dom_id(result, "search-option"),
               class: "rounded"
             ) do
-              a(
-                href: page.request_path,
-                data: {
-                  turbo_frame: "_top"
-                },
-                class: ["p-2", "block"]
-              ) do
-                div(class: "font-semibold") { raw safe(page.title_snippet) }
-                div(class: "text-sm") { raw safe(page.body_snippet) }
-              end
+              render Searches::Result.new(result)
             end
           end
         elsif query_long_enough?
@@ -59,5 +57,9 @@ def view_template
     def query_long_enough?
       query && query.length > 2
     end
+
+    def listbox_dom_id
+      self.class.dom_id(@name)
+    end
   end
 end

app/views/searches/result.rb

@@ -0,0 +1,35 @@
+module Searches
+  class Result < ApplicationComponent
+    class_attribute :result_classes
+    self.result_classes = {}
+
+    def self.register(result_class, component_class)
+      result_classes[result_class] = component_class
+    end
+
+    def self.lookup_component_class(result)
+      component_class = result_classes[result.class]
+
+      if !component_class
+        component_class = "Searches::Results::#{result.class.name}".safe_constantize
+        register(result.class, component_class) if component_class
+      end
+
+      raise ArgumentError, "[#{self}] No component registered for #{result.class}" unless component_class
+
+      component_class
+    end
+
+    attr_reader :result, :component_class
+
+    def initialize(result)
+      @result = result
+
+      @component_class = self.class.lookup_component_class(result)
+    end
+
+    def view_template
+      render component_class.new(result)
+    end
+  end
+end

app/views/searches/results/page.rb

@@ -0,0 +1,26 @@
+module Searches
+  module Results
+    class Page < ApplicationComponent
+      attr_reader :page
+
+      def initialize(page)
+        @page = page
+      end
+
+      def view_template
+        a(
+          href: page.url,
+          data: {
+            turbo_frame: "_top"
+          },
+          class: ["p-2", "block"]
+        ) do
+          div(class: "font-semibold") { raw safe(page.title_snippet) }
+          div(class: "text-sm") { raw safe(page.body_snippet) }
+        end
+      end
+
+      Searches::Result.register(::Page, self)
+    end
+  end
+end

app/views/searches/show_view.rb

@@ -3,11 +3,10 @@ class Searches::ShowView < ApplicationView
   include Phlex::Rails::Helpers::Routes
   include Phlex::Rails::Helpers::TurboFrameTag
 
-  attr_reader :pages, :query
+  attr_reader :attributes
 
-  def initialize(pages:, query:)
-    @pages = pages
-    @query = query
+  def initialize(**attrs)
+    @attributes = attrs
   end
 
   def view_template
@@ -16,7 +15,7 @@ def view_template
       class: "section-content container py-gap mb-3xl"
     ) do
       h3 { "Enter your search query" }
-      render Searches::Combobox.new(pages:, query:)
+      render Searches::Combobox.new(**attributes)
       render partial: "searches/help"
     end
   end

spec/views/searches/listbox_spec.rb

@@ -0,0 +1,55 @@
+require "rails_helper"
+
+RSpec.describe Searches::Listbox, type: :view do
+  let(:search_result) do
+    Data.define(:title, :url, :body) do
+      def to_key = [url.parameterize]
+
+      def model_name = ActiveModel::Name.new(self, nil, "SearchResult")
+    end
+  end
+
+  let(:search_result_component) do
+    Class.new(ApplicationComponent) do
+      attr_reader :search_result
+
+      def initialize(search_result)
+        @search_result = search_result
+      end
+
+      def view_template
+        a(href: search_result.url) do
+          div { raw safe(search_result.title) }
+          div { raw safe(search_result.body) }
+        end
+      end
+    end
+  end
+
+  it "renders search results" do
+    Searches::Result.register(search_result, search_result_component)
+
+    search_results = [
+      search_result.new(title: "Joy of Rails", url: "/articles/joy-of-rails", body: "Rails is a web application framework"),
+      search_result.new(title: "Love of Ruby", url: "/articles/love-of-ruby", body: "Ruby is a programming language")
+    ]
+
+    render_component(results: search_results)
+
+    expect(rendered).to have_content("Joy of Rails")
+    expect(rendered).to have_css(%([href="/articles/joy-of-rails"]))
+    expect(rendered).to have_content("Love of Ruby")
+    expect(rendered).to have_css(%([href="/articles/love-of-ruby"]))
+  end
+
+  it "raises an error when no component is registered for the result" do
+    search_results = [
+      search_result.new(title: "Joy of Rails", url: "/articles/joy-of-rails", body: "Rails is a web application framework"),
+      search_result.new(title: "Love of Ruby", url: "/articles/love-of-ruby", body: "Ruby is a programming language")
+    ]
+
+    expect {
+      render_component(results: search_results)
+    }.to raise_error(ArgumentError, %r{\[Searches::Result\] No component registered})
+  end
+end