Drive tab change through a form

Following the same pattern we established for the zone selector, we remove the link from each tab and instead add a hidden form field and submit the form when a tab is clicked on.

app/components/day_tab_component.html.erb

@@ -1,16 +1,11 @@
 <%= tag.div class: "tab py-4 flex-1 #{@day} mx-2 px-1 text-center #{classes}",
   data: {
     date: @forecast.date.to_s,
-    controller: "tab",
-    "tab-active-class": "active",
-    "tab-inactive-class": "inactive",
+    day: @day,
     "tab-target": "dayPrediction",
+    action: "click->tab#changeTab",
   } do
   %>
-<%= link_to update_forecast_path(day: @day, format: :turbo_stream),
-      data: {
-        action: "click->tab#switch_tab click->map#updateMap",
-    } do %>
   <div class="day" data-tab-target="day">
     <%= @forecast.date == Date.today ? 'Today' : @forecast.date.strftime('%A') %>
   </div>
@@ -30,4 +25,3 @@
     Index <%= @forecast.air_pollution.value %>/10
   </div>
 <% end %>
-<% end %>

app/javascript/controllers/tab_controller.js

@@ -1,59 +1,23 @@
 import { Controller } from "@hotwired/stimulus";
 
 // Connects to data-controller="tab"
-export default class extends Controller {
-  static classes = ["active", "inactive"];
-  static targets = ["dayPrediction", "day", "daqiValue"];
+export default class TabController extends Controller {
+  static targets = ["daySelector"];
 
   connect() {}
 
-  switch_tab() {
-    this.makeAllTabsInactive();
-    this.removeDaqiAlertClasses();
+  changeTab(event) {
+    const selectedDay = event.currentTarget.dataset.day;
 
-    this.addAlertClassIfNotTodayAndHasAirQualityAlert();
-    this.dayPredictionTarget.classList.toggle(this.activeClass);
-    this.dayPredictionTarget.classList.toggle(this.inactiveClass);
-  }
-
-  makeAllTabsInactive() {
-    document.querySelectorAll(".tabs .tab").forEach((el) => {
-      el.classList.remove(this.activeClass);
-      el.classList.add(this.inactiveClass);
-    });
-  }
-
-  addAlertClassIfNotTodayAndHasAirQualityAlert() {
-    const daqiValue = this.getDaqiValue();
-    if (this.dayTarget.innerText !== "Today" && daqiValue > 3) {
-      this.addDaqiAlertClass();
-    }
-  }
+    // Add the new date to the URL
+    const url = new URL(window.location.href);
+    url.searchParams.set("day", selectedDay);
+    window.history.pushState({}, "", url);
 
-  addDaqiAlertClass() {
-    const daqiValue = this.getDaqiValue();
-    this.dayPredictionTarget.classList.add(
-      `daqi-alert-after-today-selected-level-${daqiValue}`
-    );
-  }
-
-  removeDaqiAlertClasses() {
-    document.querySelectorAll(".tabs .tab").forEach((el) => {
-      const daqiAlertClassRegex = new RegExp(
-        "daqi-alert-after-today-selected-level-(\\d{1,2})"
-      );
-
-      const fullClassName = Array.from(el.classList).find((className) =>
-        className.match(daqiAlertClassRegex)
-      );
-
-      if (fullClassName) {
-        el.classList.remove(fullClassName);
-      }
-    });
-  }
+    // Update contents of daySelector
+    this.daySelectorTarget.value = selectedDay;
 
-  getDaqiValue() {
-    return this.daqiValueTarget.innerText.split("/")[0].split(" ")[1];
+    // Submit the form to reload the turbo frame
+    this.daySelectorTarget.form.requestSubmit();
   }
 }

app/views/forecasts/_location_selector.html.erb

@@ -5,5 +5,6 @@
     class: "inline-flex flex-row w-full justify-left gap-x-1.5 rounded-md bg-white px-3 py-2 text-base font-semibold text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50",
     data: { controller: "prediction", "prediction-target": "zoneSelector", action: "change->prediction#changeZone" }
     %>
+    <%= hidden_field_tag :day, @day, data: { "tab-target": "daySelector" } %>
   <% end %>
 </div>

spec/support/features/forecast_helper.rb

@@ -13,9 +13,9 @@ def view_forecasts
     def switch_to_tab_for(day)
       case day
       when :tomorrow
-        find(".tab.tomorrow a").trigger("click")
+        find(".tab.tomorrow").trigger("click")
       when :day_after_tomorrow
-        find(".tab.day_after_tomorrow a").trigger("click")
+        find(".tab.day_after_tomorrow").trigger("click")
       else
         raise "day: #{day} not expected"
       end