Add empty state for /developers

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### June
 
+* June 14 - Add empty state for `/developers` - #484 @bensheldon
 * June 13 - Remove `turbo: false` from all non-Stripe forms - #483
 * June 9 - Order conversations by most recent message, not when they were started
 * June 8 - Add text search for developers (for paid accounts) - #470 @troyizzle

app/views/developers/index.html.erb

@@ -41,15 +41,21 @@
 
     <!-- Paginated list of developers -->
     <div class="col-span-12 md:col-span-9">
-      <%= render Developers::CardComponent.with_collection(@query.featured_records, featured: true) %>
-
-      <%= render PagyPaginatorComponent.new(id: "developers", pagy: @query.pagy, url_array: [:developers], container_classes: "divide-y divide-gray-200", options: @query.filters) do |component| %>
-        <% component.loading_icon do %>
-          <div class="py-4">
-            <%= render LoadingComponent.new %>
-          </div>
+      <% if @query.records.any? %>
+        <%= render Developers::CardComponent.with_collection(@query.featured_records, featured: true) %>
+
+        <%= render PagyPaginatorComponent.new(id: "developers", pagy: @query.pagy, url_array: [:developers], container_classes: "divide-y divide-gray-200", options: @query.filters) do |component| %>
+          <% component.loading_icon do %>
+            <div class="py-4">
+              <%= render LoadingComponent.new %>
+            </div>
+          <% end %>
+          <%= render Developers::CardComponent.with_collection(@query.records) %>
         <% end %>
-        <%= render Developers::CardComponent.with_collection(@query.records) %>
+      <% else %>
+        <div class="mt-16">
+          <%= render EmptyStateComponent.new(title: t(".empty_state.title"), body: t(".empty_state.body"), icon: "icons/outline/user_group.svg") %>
+        </div>
       <% end %>
     </div>
   </div>

config/locales/en.yml

@@ -246,6 +246,9 @@ en:
         title: Work preferences
     index:
       description: "%{developers_count}+ Ruby on Rails developers looking for their next gig. Juniors to seniors and everyone in between, you'll find them all here."
+      empty_state:
+        body: Try changing or clearing your filters.
+        title: No developers found
       title: Ruby on Rails developers
       title_og: Hire Ruby on Rails developers
     new_field_component:

test/integration/developers_test.rb

@@ -11,6 +11,12 @@ class DevelopersTest < ActionDispatch::IntegrationTest
     assert_select "h2", developers(:one).hero
   end
 
+  test "no developers produce empty state" do
+    Developer.destroy_all
+    get developers_path
+    assert_select "h3", "No developers found"
+  end
+
   test "custom meta tags are rendered" do
     get developers_path
     assert_title_contains "Hire Ruby on Rails developers"