Refactor Search Term Display into a Reusable Component

This commit refactors the display of the search term into a reusable component, SearchTermComponent. This component is now used across various views (authors, books, courses, newsletters, podcasts, screencasts, tags, youtubes) to display the search term, improving code reusability and maintainability.

The search term is also properly escaped to prevent potential Cross-Site Scripting (XSS) attacks. System tests for course search functionality have been updated accordingly.

app/views/authors/index.html.erb

@@ -1,24 +1,17 @@
 <% content_for :hero do %>
   <%= render "shared/page_title", title: "People", description: "There are many people writing about Ruby, Ruby on Rails. Some of them are very experienced developers who have been using Ruby for years, and some are new developers who are just starting to learn the language. I've compiled a list of some of the best and brightest minds in the industry.", count: "#{Author.count} authors"  %>
 <% end %>
-
 <% content_for :content do %>
-  <% if params[:search_term].present? %>
-    <div class="pb-12">
-      <strong>Search Term: </strong><%= params[:search_term] %>
-    </div>
-  <% end %>
-
+  <%= render SearchTermComponent.new(search_term: params[:search_term]) %>
   <div class="flex flex-wrap justify-between mb-8 xl:mb-16 gap-x-8 gap-y-2 md:gap-8">
     <span>
-      <h2 class="h2 mb-8">All</h2>
+      <h2 class="mb-8 h2">All</h2>
     </span>
-
     <span>
       <%= form_tag(authors_path, method: "get", id: 'search_form', remote: true) do %>
         <div class="input-group">
           <span class="input-group-append">
-            <%= text_field_tag(:search_term, nil, placeholder: 'Search name', class: 'form-control', value: html_escape(params[:search_term])) %>    
+            <%= text_field_tag(:search_term, nil, placeholder: 'Search name', class: 'form-control', value: html_escape(params[:search_term])) %>
           </span>
           <span class="input-group-append">
             <button type="submit" class="btn btn-primary button-rounded", id="submit-search-btn", title="Search Authors">Search</button>

app/views/books/_index_nav.html.erb

@@ -1,8 +1,4 @@
-<% if params[:search_term].present? %>
-  <div class="pb-12">
-    <strong>Search Term: </strong><%= params[:search_term] %>
-  </div>
-<% end %>
+<%= render SearchTermComponent.new(search_term: params[:search_term]) %>
 <div class="flex flex-wrap justify-between mb-8 xl:mb-16 gap-x-8 gap-y-2 md:gap-8">
   <div class="flex flex-wrap gap-8 gap-y-2">
     <span class="h2">

app/views/components/search_term_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class SearchTermComponent < ApplicationComponent
+  def initialize(search_term: nil)
+    @search_term = ERB::Util.html_escape(search_term)
+  end
+
+  def template
+    return unless @search_term.present?
+
+    div(class: "pb-12") do
+      strong { "Search Term: #{@search_term}" }
+    end
+  end
+end

app/views/courses/index.html.erb

@@ -2,11 +2,7 @@
   <%= render "shared/page_title", title: "Courses about Ruby and Ruby on Rails", description: "Our collection of Ruby and Ruby on Rails courses cover everything from the basics to advanced topics like metaprogramming and web scraping. Courses will show you how to build powerful, production-ready web applications with this popular framework. Best of all, you can find courses for free. Ready to get started?", count: "#{Course.count} courses"  %>
 <% end %>
 <% content_for :content do %>
-  <% if params[:search_term].present? %>
-    <div class="pb-12">
-      <strong>Search Term: </strong><%= params[:search_term] %>
-    </div>
-  <% end %>
+  <%= render SearchTermComponent.new(search_term: params[:search_term]) %>
   <div class="flex flex-wrap justify-between mb-8 xl:mb-16 gap-x-8 gap-y-2 md:gap-8">
     <div>
       <h2 class="mb-8 h2">All Courses</h2>

app/views/newsletters/index.html.erb

@@ -2,11 +2,7 @@
   <%= render "shared/page_title", title: "Newsletters about Ruby and Ruby on Rails", description: "Get the latest news, tips, and tricks delivered right to your inbox. Read about interesting articles and blog posts about life and programming.", count: "#{Newsletter.count} newsletters"  %>
 <% end %>
 <% content_for :content do %>
-  <% if params[:search_term].present? %>
-    <div class="pb-12">
-      <strong>Search Term: </strong><%= params[:search_term] %>
-    </div>
-  <% end %>
+  <%= render SearchTermComponent.new(search_term: params[:search_term]) %>
   <div class="flex flex-wrap justify-between mb-8 xl:mb-16 gap-x-8 gap-y-2 md:gap-8">
     <div>
       <h2 class="mb-8 h2">All Newsletters</h2>

app/views/podcasts/index.html.erb

@@ -1,24 +1,17 @@
 <% content_for :hero do %>
   <%= render "shared/page_title", title: "Podcasts about Ruby and Ruby on Rails", description: "If you're looking for some interesting podcasts to listen to on your commute or while you're working out, check out our list of the best Ruby, Ruby on Rails, and programming podcasts. From fun discussions about life as a programmer to in-depth interviews with Ruby on Rails experts, these podcasts have something for everyone.", count: "#{Podcast.count} podcasts"  %>
 <% end %>
-
 <% content_for :content do %>
-  <% if params[:search_term].present? %>
-    <div class="pb-12">
-      <strong>Search Term: </strong><%= params[:search_term] %>
-    </div>
-  <% end %>
-
+  <%= render SearchTermComponent.new(search_term: params[:search_term]) %>
   <div class="flex flex-wrap justify-between mb-8 xl:mb-16 gap-x-8 gap-y-2 md:gap-8">
     <span>
-      <h2 class="h2 mb-8">All Podcasts</h2>
+      <h2 class="mb-8 h2">All Podcasts</h2>
     </span>
-
     <span>
       <%= form_tag(podcasts_path, method: "get", id: 'search_form', remote: true) do %>
         <div class="input-group">
           <span class="input-group-append">
-            <%= text_field_tag(:search_term, nil, placeholder: 'Search name', class: 'form-control', value: html_escape(params[:search_term])) %>    
+            <%= text_field_tag(:search_term, nil, placeholder: 'Search name', class: 'form-control', value: html_escape(params[:search_term])) %>
           </span>
           <span class="input-group-append">
             <button type="submit" class="btn btn-primary button-rounded", id="submit-search-btn", title="Search Podcasts">Search</button>
@@ -28,6 +21,5 @@
       <% end %>
     </span>
   </div>
-
   <%= render partial: "podcasts/list", locals: { list: @podcasts } %>
 <% end %>

app/views/screencasts/index.html.erb

@@ -2,11 +2,7 @@
   <%= render "shared/page_title", title: "Screencasts about Ruby and Ruby on Rails", description: "If you're looking for some helpful resources on learning Ruby and Ruby on Rails development, I recommend checking out some screencast tutorials. There's a lot of great information out there that can help you get started and become a better developer. Happy learning!", count: "#{Screencast.count} courses"  %>
 <% end %>
 <% content_for :content do %>
-  <% if params[:search_term].present? %>
-    <div class="pb-12">
-      <strong>Search Term: </strong><%= params[:search_term] %>
-    </div>
-  <% end %>
+  <%= render SearchTermComponent.new(search_term: params[:search_term]) %>
   <div class="flex flex-wrap justify-between mb-8 xl:mb-16 gap-x-8 gap-y-2 md:gap-8">
     <div>
       <h2 class="mb-8 h2">All Screencasts</h2>

app/views/tags/index.html.erb

@@ -2,11 +2,7 @@
   <%= render "shared/page_title", title: "What would you like to learn more about? ", description: "If you're looking to learn more about programming, we've got a few resources that might interest you. Whatever your interest, we're sure we can find a book or course that's perfect for you.", count: "#{Tag.count} topics"  %>
 <% end %>
 <% content_for :content do %>
-  <% if params[:search_term].present? %>
-    <div class="pb-12">
-      <strong>Search Term: </strong><%= params[:search_term] %>
-    </div>
-  <% end %>
+  <%= render SearchTermComponent.new(search_term: params[:search_term]) %>
   <div class="flex flex-wrap justify-between mb-8 xl:mb-16 gap-x-8 gap-y-2 md:gap-8">
     <span>
       <h2 class="mb-8 h2">All Topics</h2>

app/views/youtubes/index.html.erb

@@ -2,11 +2,7 @@
   <%= render "shared/page_title", title: "YouTube Courses about Ruby and Ruby on Rails", description: "If you're interested in learning Ruby or Ruby on Rails, or if you want to brush up on your testing skills or learn more about other themes, you're in luck. There are plenty of free and paid books available on these topics. Whether you're a beginner or an expert, you're sure to find something that interests you.", count: "#{Youtube.count} YouTube Courses" %>
 <% end %>
 <% content_for :content do %>
-  <% if params[:search_term].present? %>
-    <div class="pb-12">
-      <strong>Search Term: </strong><%= params[:search_term] %>
-    </div>
-  <% end %>
+  <%= render SearchTermComponent.new(search_term: params[:search_term]) %>
   <div class="flex flex-wrap justify-between mb-8 xl:mb-16 gap-x-8 gap-y-2 md:gap-8">
     <div>
       <h2 class="mb-8 h2">All YouTube Courses</h2>

test/components/previews/search_term_component_preview.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class SearchTermComponentPreview < Lookbook::Preview
+  def default
+    render SearchTermComponent.new(search_term: "Ruby")
+  end
+
+  def when_search_term_is_nil_or_empty
+    render SearchTermComponent.new()
+  end
+end