Add empty state for /developers (#484)

* Add empty state for `/developers` * > I'd rather not only show a featured developer! Co-authored-by: Joe Masilotti <joe@masilotti.com> * Increase top margin Co-authored-by: Joe Masilotti <joe@masilotti.com> * Update config/locales/en.yml Co-authored-by: Joe Masilotti <joe@masilotti.com> * Add new `unseeded_body` attribute to EmptyStateComponent * Break out specific `Developers::EmptyStateComponent` * Change Developer::EmptyStateComponent to pass in `seedable` argument * Revert to simple EmptyStateComponent content * Update app/views/developers/index.html.erb Co-authored-by: Joe Masilotti <joe@masilotti.com> * Update test/integration/developers_test.rb Co-authored-by: Joe Masilotti <joe@masilotti.com> Co-authored-by: Joe Masilotti <joe@masilotti.com>
joemasilotti · Jun 14, 2022 · beead54 · beead54
1 parent d4fb887
commit beead54
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 8 deletions.
diff --git a/CHANGELOG.md b/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

diff --git a/app/views/developers/index.html.erb b/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="my-16">
+          <%= render EmptyStateComponent.new(title: t(".empty_state.title"), body: t(".empty_state.body"), icon: "icons/outline/user_group.svg") %>
+        </div>
       <% end %>
     </div>
   </div>

diff --git a/config/locales/en.yml b/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:

diff --git a/test/integration/developers_test.rb b/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", I18n.t("developers.index.empty_state.title")
+  end
+
   test "custom meta tags are rendered" do
     get developers_path
     assert_title_contains "Hire Ruby on Rails developers"