feat: location filter by city instead of country (#168)

chtzvt · web-flow · commit b3f552b75eee · 2025-07-18T13:27:05.000-04:00
diff --git a/app/components/developers/query_component.html.erb b/app/components/developers/query_component.html.erb
@@ -103,27 +103,27 @@
     <div data-controller="toggle accessibility" data-toggle-visibility-class="hidden">
       <div class="border-t border-gray-200 py-6">
         <h3 class="-mx-2 -my-3 flow-root">
-          <%= render CollapseControlComponent.new(t(".country.title"), collapsed: collapse_location?) %>
+          <%= render CollapseControlComponent.new(t(".city.title"), collapsed: collapse_location?) %>
         </h3>
         <%= tag.div id: "location-accordion", "data-toggle-target": "element", class: [hidden: collapse_location?] do %>
           <div class="space-y-4 pt-6">
-            <%= form.collection_check_boxes(:countries, top_countries, :first, :last, {include_hidden: false}) do |b| %>
+            <%= form.collection_check_boxes(:cities, top_cities, :first, :last, {include_hidden: false}) do |b| %>
               <div class="flex items-center">
-                <%= b.check_box checked: country_selected?(b.object), class: "h-4 w-4 border-gray-300 rounded text-blue-950 focus:ring-blue-500" %>
+                <%= b.check_box checked: city_selected?(b.object), class: "h-4 w-4 border-gray-300 rounded text-blue-950 focus:ring-blue-500" %>
                 <%= b.label class: "ml-3 text-blue-950 text-sm" %>
               </div>
             <% end %>
           </div>
           <div data-controller="toggle accessibility" data-toggle-visibility-class="hidden">
             <div class="pt-6">
               <h5 class="-mx-2 -my-3 flow-root">
-                <%= render CollapseControlComponent.new(t(".all_countries.title"), collapsed: collapse_all_locations?, subcomponent: true) %>
+                <%= render CollapseControlComponent.new(t(".all_cities.title"), collapsed: collapse_all_locations?, subcomponent: true) %>
               </h5>
               <%= tag.div id: "all-locations-accordion", "data-toggle-target": "element", class: [hidden: collapse_all_locations?] do %>
                 <div class="space-y-4 pt-6">
-                  <%= form.collection_check_boxes(:countries, countries, :first, :last, {include_hidden: false}) do |b| %>
+                  <%= form.collection_check_boxes(:cities, cities, :first, :last, {include_hidden: false}) do |b| %>
                     <div class="flex items-center">
-                      <%= b.check_box checked: country_selected?(b.object), class: "h-4 w-4 border-gray-300 rounded text-blue-950 focus:ring-blue-500" %>
+                      <%= b.check_box checked: city_selected?(b.object), class: "h-4 w-4 border-gray-300 rounded text-blue-950 focus:ring-blue-500" %>
                       <%= b.label class: "ml-3 text-blue-950 text-sm" %>
                     </div>
                   <% end %>
diff --git a/app/components/developers/query_component.rb b/app/components/developers/query_component.rb
@@ -10,6 +10,18 @@ def initialize(query:, user:, form_id:)
       @form_id = form_id
     end
 
+    def city_selected?(city_pair)
+      query.cities.include?(city_pair.first)
+    end
+
+    def top_cities
+      Location.top_cities.map { |k| [k, k] }
+    end
+
+    def cities
+      Location.not_top_cities.map { |k| [k, k] }
+    end
+
     def country_selected?(country_pair)
       query.countries.include?(country_pair.first)
     end
@@ -83,12 +95,12 @@ def collapse_specialties?
     end
 
     def collapse_location?
-      query.countries.empty?
+      query.cities.empty?
     end
 
     def collapse_all_locations?
       @collapse_all_locations ||=
-        (Location.not_top_countries & query.countries).none?
+        (Location.not_top_cities & query.cities).none?
     end
 
     def collapse_timezone?
diff --git a/app/components/developers/query_mobile_component.html.erb b/app/components/developers/query_mobile_component.html.erb
@@ -98,28 +98,28 @@
         </div>
         <div data-controller="toggle" data-toggle-visibility-class="hidden" class="border-t border-gray-200 px-4 py-6">
           <h3 class="-mx-2 -my-3 flow-root">
-            <%= render CollapseControlComponent.new(t("developers.query_component.country.title"), collapsed: true) %>
+            <%= render CollapseControlComponent.new(t("developers.query_component.city.title"), collapsed: true) %>
           </h3>
-          <div id="top-countries-filter-section" data-toggle-target="element" class="hidden pt-6">
+          <div id="top-cities-filter-section" data-toggle-target="element" class="hidden pt-6">
             <div class="space-y-6">
-              <%= form.collection_check_boxes(:countries, top_countries, :first, :last, {include_hidden: false}) do |b| %>
+              <%= form.collection_check_boxes(:cities, top_cities, :first, :last, {include_hidden: false}) do |b| %>
                 <div class="flex items-center">
-                  <%= b.check_box class: "h-4 w-4 border-gray-300 rounded text-blue-950 focus:ring-blue-500", checked: country_selected?(b.object) %>
+                  <%= b.check_box class: "h-4 w-4 border-gray-300 rounded text-blue-950 focus:ring-blue-500", checked: city_selected?(b.object) %>
                   <%= b.label class: "ml-3 pr-6 text-sm font-medium text-blue-900 whitespace-nowrap" %>
                 </div>
               <% end %>
             </div>
             <div data-controller="toggle" data-toggle-visibility-class="hidden">
               <div class="pt-6">
                 <h5 class="-mx-2 -my-3 flow-root">
-                  <%= render CollapseControlComponent.new(t("developers.query_component.all_countries.title"), collapsed: true, subcomponent: true) %>
+                  <%= render CollapseControlComponent.new(t("developers.query_component.all_cities.title"), collapsed: true, subcomponent: true) %>
                 </h5>
               </div>
-              <div id="all-countries-filter-section" data-toggle-target="element" class="hidden">
+              <div id="all-cities-filter-section" data-toggle-target="element" class="hidden">
                 <div class="space-y-4 pt-6">
-                  <%= form.collection_check_boxes(:countries, countries, :first, :last, {include_hidden: false}) do |b| %>
+                  <%= form.collection_check_boxes(:cities, cities, :first, :last, {include_hidden: false}) do |b| %>
                     <div class="flex items-center">
-                      <%= b.check_box class: "h-4 w-4 border-gray-300 rounded text-blue-950 focus:ring-blue-500", checked: country_selected?(b.object) %>
+                      <%= b.check_box class: "h-4 w-4 border-gray-300 rounded text-blue-950 focus:ring-blue-500", checked: city_selected?(b.object) %>
                       <%= b.label class: "ml-3 pr-6 text-sm font-medium text-blue-900 whitespace-nowrap" %>
                     </div>
                   <% end %>
diff --git a/app/controllers/developers_controller.rb b/app/controllers/developers_controller.rb
@@ -7,6 +7,7 @@ def index
     @developers_count = SignificantFigure.new(Developer.actively_looking_or_open.count).rounded
     @query = DeveloperQuery.new(permitted_attributes([:developers, :query]).merge(user: current_user))
     @meta = Developers::Meta.new(query: @query, count: @developers_count)
+
     Analytics::SearchQuery.create!(permitted_attributes([:developers, :query]))
 
     if @query.empty_search?
diff --git a/app/models/developer.rb b/app/models/developer.rb
@@ -72,6 +72,10 @@ class Developer < ApplicationRecord
     joins(:location).where(locations: {country: countries})
   end
 
+  scope :filter_by_cities, ->(cities) do
+    joins(:location).where(locations: {city: cities})
+  end
+
   scope :actively_looking_or_open, -> { where(search_status: [:actively_looking, :open, nil]) }
   scope :featured, -> { where("featured_at >= ?", FEATURE_LENGTH.ago).order(featured_at: :desc) }
   scope :newest_first, -> { order(created_at: :desc) }
diff --git a/app/models/developers/meta.rb b/app/models/developers/meta.rb
@@ -54,6 +54,12 @@ def freelance?
         !query.role_types.include?(:full_time_employment)
     end
 
+    def city
+      if query.cities.one?
+        query.cities.first
+      end
+    end
+
     def country
       if query.countries.one?
         query.countries.first
diff --git a/app/models/developers/query_path.rb b/app/models/developers/query_path.rb
@@ -26,6 +26,10 @@ def all
 
     private
 
+    def top_cities
+      @top_cities ||= Location.top_cities
+    end
+
     def top_countries
       @top_countries ||= Location.top_countries
     end
diff --git a/app/models/location.rb b/app/models/location.rb
@@ -18,6 +18,23 @@ class Location < ApplicationRecord
       .pluck(:country)
   end
 
+  scope :top_cities, ->(limit = ENV.fetch("TOP_CITIES", 10)) do
+    group(:city)
+      .where.not(city: nil)
+      .order("count_all DESC")
+      .limit(limit)
+      .count
+      .keys
+  end
+
+  scope :not_top_cities, ->(limit = ENV.fetch("TOP_CITIES", 10)) do
+    where.not(city: top_cities(limit))
+      .select(:city)
+      .distinct
+      .order(:city)
+      .pluck(:city)
+  end
+
   validates :time_zone, presence: true
   validates :utc_offset, presence: true
   validate :valid_coordinates
diff --git a/app/policies/developers/query_policy.rb b/app/policies/developers/query_policy.rb
@@ -19,7 +19,8 @@ def default_attributes
         role_types: [],
         badges: [],
         utc_offsets: [],
-        countries: []
+        countries: [],
+        cities: []
       ]
     end
 
diff --git a/app/queries/developer_query.rb b/app/queries/developer_query.rb
@@ -11,6 +11,7 @@ def initialize(options = {})
     @sort = options.delete(:sort)
     @specialty_ids = options.delete(:specialty_ids)
     @countries = options.delete(:countries)
+    @cities = options.delete(:cities)
     @utc_offsets = options.delete(:utc_offsets)
     @role_types = options.delete(:role_types)
     @role_levels = options.delete(:role_levels)
@@ -21,7 +22,7 @@ def initialize(options = {})
   end
 
   def filters
-    @filters = {sort:, utc_offsets:, role_types:, role_levels:, include_not_interested:, search_query:, countries:,
+    @filters = {sort:, utc_offsets:, role_types:, role_levels:, include_not_interested:, search_query:, countries:, cities:,
                 badges:}
   end
 
@@ -45,6 +46,10 @@ def sort
     (@sort.to_s.downcase.to_sym == :recommended) ? :recommended : :newest
   end
 
+  def cities
+    @cities.to_a.reject(&:blank?)
+  end
+
   def countries
     @countries.to_a.reject(&:blank?)
   end
@@ -79,6 +84,7 @@ def all_search_params
       sort: @sort,
       specialty_ids: @specialty_ids,
       countries: @countries,
+      cities: @cities,
       search_query:,
       utc_offsets: @utc_offsets,
       role_types: @role_types,
@@ -98,6 +104,7 @@ def empty_search?
       role_levels.empty? &&
       search_query.blank? &&
       countries.blank? &&
+      cities.blank? &&
       badges.blank? &&
       specialty_ids.empty? &&
       !include_not_interested
@@ -109,6 +116,7 @@ def query_and_paginate
     @_records = Developer.includes(:role_type, :specialties).with_attached_avatar.visible
     sort_records
     country_filter_records
+    city_filter_records
     utc_offset_filter_records
     role_type_filter_records
     role_level_filter_records
@@ -153,6 +161,10 @@ def sort_records
     end
   end
 
+  def city_filter_records
+    @_records.merge!(Developer.filter_by_cities(cities)) if cities.any?
+  end
+
   def country_filter_records
     @_records.merge!(Developer.filter_by_countries(countries)) if countries.any?
   end
diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -508,15 +508,15 @@ en:
       add_profile: Add my profile
       edit_profile: Update my profile
     query_component:
-      all_countries:
-        title: All locations
+      all_cities:
+        title: All cities
       apply: Apply
       badge:
         title: Badges
+      city:
+        title: City
       clear: Clear
       close_menu: Close menu
-      country:
-        title: Location
       filters: Filters
       include_not_interested: Include developers not currently interested
       paywalled_search:
diff --git a/db/migrate/20250718163920_add_cities_to_analytics_search_queries.rb b/db/migrate/20250718163920_add_cities_to_analytics_search_queries.rb
@@ -0,0 +1,5 @@
+class AddCitiesToAnalyticsSearchQueries < ActiveRecord::Migration[7.0]
+  def change
+    add_column :analytics_search_queries, :cities, :string
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
diff --git a/test/components/developers/query_component_test.rb b/test/components/developers/query_component_test.rb
@@ -9,29 +9,29 @@ class QueryComponentTest < ViewComponent::TestCase
       @user = users(:empty)
     end
 
-    test "renders top countries for developers" do
+    test "renders top cities for developers" do
       query = DeveloperQuery.new({})
-      Location.stub :top_countries, ["China", "United States"] do
+      Location.stub :top_cities, ["New York", "Portland"] do
         render_inline QueryComponent.new(query:, user: @user, form_id: nil)
       end
 
-      assert_selector build_input("countries[]", type: "checkbox", value: "United States")
-      assert_selector build_input("countries[]", type: "checkbox", value: "China")
+      assert_selector build_input("cities[]", type: "checkbox", value: "New York")
+      assert_selector build_input("cities[]", type: "checkbox", value: "Portland")
     end
 
-    test "renders unique countries for developers" do
+    test "renders unique cities for developers" do
       query = DeveloperQuery.new({})
       render_inline QueryComponent.new(query:, user: @user, form_id: nil)
 
-      assert_selector build_input("countries[]", type: "checkbox", value: "United States")
-      assert_selector "label[for=countries_united_states]", text: "United States"
+      assert_selector build_input("cities[]", type: "checkbox", value: "Tampa")
+      assert_selector "label[for=cities_tampa]", text: "Tampa"
     end
 
-    test "checks selected countries" do
-      query = DeveloperQuery.new(countries: ["United States"])
+    test "checks selected cities" do
+      query = DeveloperQuery.new(cities: ["Tampa"])
       render_inline QueryComponent.new(query:, user: @user, form_id: nil)
 
-      assert_selector build_input("countries[]", type: "checkbox", value: "United States", checked: true)
+      assert_selector build_input("cities[]", type: "checkbox", value: "Tampa", checked: true)
     end
 
     test "renders unique UTC offset pairs for developers" do
@@ -106,20 +106,20 @@ class QueryComponentTest < ViewComponent::TestCase
     end
 
     test "collapse location accordion when location is not being queried" do
-      create_developer(location_attributes: {country: "Australia"})
+      create_developer(location_attributes: {city: "Portland"})
 
-      Location.stub :top_countries, ["United States"] do
+      Location.stub :top_cities, ["New York"] do
         query = DeveloperQuery.new
         render_inline QueryComponent.new(query:, user: @user, form_id: nil)
         assert_selector("#location-accordion.hidden")
         assert_selector("#all-locations-accordion.hidden")
 
-        query = DeveloperQuery.new(countries: ["United States"])
+        query = DeveloperQuery.new(cities: ["New York"])
         render_inline QueryComponent.new(query:, user: @user, form_id: nil)
         assert_selector("#location-accordion:not(.hidden)")
         assert_selector("#all-locations-accordion.hidden")
 
-        query = DeveloperQuery.new(countries: ["Australia"])
+        query = DeveloperQuery.new(cities: ["Portland"])
         render_inline QueryComponent.new(query:, user: @user, form_id: nil)
         assert_selector("#location-accordion:not(.hidden)")
         assert_selector("#all-locations-accordion:not(.hidden)")
diff --git a/test/fixtures/locations.yml b/test/fixtures/locations.yml
@@ -1,5 +1,6 @@
 one:
   developer: one
+  city: Tampa
   country: United States
   time_zone: Eastern Time (US & Canada)
   utc_offset: -18_000
diff --git a/test/integration/developers_test.rb b/test/integration/developers_test.rb
@@ -65,7 +65,9 @@ class DevelopersTest < ActionDispatch::IntegrationTest
 
     get developers_path(countries: [country])
 
-    assert_select "input[checked][type=checkbox][value='#{country}'][name='countries[]']"
+    # Select input has been removed in favor of filtering by city
+    # assert_select "input[checked][type=checkbox][value='#{country}'][name='countries[]']"
+
     assert_text "Hire developers in Tampa Bay in #{country}"
   end
 
diff --git a/test/models/developers/query_path_test.rb b/test/models/developers/query_path_test.rb
@@ -17,7 +17,7 @@ def role_level_combinations
   end
 
   def location_combinations
-    Location.top_countries.count
+    Location.top_cities.count
   end
 
   def role_level_by_location_combinations
diff --git a/test/queries/developer_query_test.rb b/test/queries/developer_query_test.rb

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,8 @@ def default_attributes`
`19`	`19`	`role_types: [],`
`20`	`20`	`badges: [],`
`21`	`21`	`utc_offsets: [],`
`22`		`- countries: []`
	`22`	`+ countries: [],`
	`23`	`+ cities: []`
`23`	`24`	`]`
`24`	`25`	`end`
`25`	`26`