Guess client locale when session has no locale info

app/controllers/application_controller.rb

@@ -44,16 +44,14 @@ def server_error(err)
   def create_and_set_user
     @user = User.create!
     session[:user_id] = @user.id
-    session[:locale] = 'Etc/UTC'
     @user
   end
 
   def set_locale
-    return unless params['locale']
-    return unless ActiveSupport::TimeZone.all.map { |z| z.tzinfo.identifier }.include?(params['locale'])
+    return unless params.key?('locale')
 
-    session[:locale] = params['locale']
-    redirect_to request.path
+    locale = ActiveSupport::TimeZone.all.map { |z| z.tzinfo.identifier }.include?(params['locale']) ? params['locale'] : 'Etc/UTC'
+    session[:locale] = locale
   end
 
   def with_time_zone(&)

app/javascript/controllers/index.js

@@ -7,6 +7,9 @@ import { application } from "./application"
 import DialogController from "./dialog_controller"
 application.register("dialog", DialogController)
 
+import LocaleController from "./locale_controller"
+application.register("locale", LocaleController)
+
 import ScheduleTableController from "./schedule_table_controller"
 application.register("schedule-table", ScheduleTableController)
 

app/javascript/controllers/locale_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+import dayjs from 'dayjs'
+
+var utc = require('dayjs/plugin/utc')
+var timezone = require('dayjs/plugin/timezone') // dependent on utc plugin
+
+dayjs.extend(utc)
+dayjs.extend(timezone)
+
+// Connects to data-controller="locale"
+export default class extends Controller {
+  static values = { current: { type: String, default: "" } };
+
+  connect() {
+    if (this.currentValue == "") {
+      Turbo.visit(this.nonSearchParamURL(window.location) + "?" + new URLSearchParams({locale: dayjs.tz.guess()}))
+    }
+  }
+
+  change(e) {
+    Turbo.visit(this.nonSearchParamURL(window.location) + "?" + new URLSearchParams({locale: e.target.value}))
+  }
+
+  nonSearchParamURL (location) {
+    return location.toString().split("?")[0]
+  }
+}

app/views/layouts/_header.html.erb

@@ -71,12 +71,12 @@
         <h1 class="" color="TEXT_GREY">
           <%= I18n.t('nav.select_locale') %>
         </h1>
-        <div class="relative box-border w-[16.25em]">
-          <select class="px-[3px] py-2 min-h-[30px] appearance-none cursor-pointer outline-none rounded-md border border-solid border-[rgb(214,211,208)] bg-white ps-2 pe-8 text-sm text-[rgb(35,34,30)] w-full align-middle">
+        <div class="relative box-border w-[16.25em]" data-controller="locale" data-locale-current-value="<%= session[:locale] %>">
+          <select data-action="change->locale#change" class="px-[3px] py-2 min-h-[30px] appearance-none cursor-pointer outline-none rounded-md border border-solid border-[rgb(214,211,208)] bg-white ps-2 pe-8 text-sm text-[rgb(35,34,30)] w-full align-middle">
             <% grouped_timezones.map do |k, v| %>
               <optgroup label="<%= k %>">
                 <% v.map do |locale| %>
-                  <option label="<%= locale %>" value="<%= locale %>"><%= locale %></option>
+                  <option label="<%= locale %>" value="<%= locale %>" <%= locale == session[:locale] ? "selected" : nil %>><%= locale %></option>
                 <% end %>
               </optgroup>
             <% end %>

package.json

@@ -2,6 +2,7 @@
   "dependencies": {
     "@hotwired/stimulus": "^3.2.2",
     "@hotwired/turbo-rails": "^8.0.3",
+    "dayjs": "^1.11.10",
     "esbuild": "^0.20.1",
     "prop-types": "^15.7.2",
     "typescript": "^4.9.5"

yarn.lock

@@ -140,6 +140,11 @@
   resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-7.1.3.tgz#4db480347775aeecd4dde2405659eef74a458881"
   integrity sha512-ojNvnoZtPN0pYvVFtlO7dyEN9Oml1B6IDM+whGKVak69MMYW99lC2NOWXWeE3bmwEydbP/nn6ERcpfjHVjYQjA==
 
+dayjs@^1.11.10:
+  version "1.11.10"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
+  integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
+
 esbuild@^0.20.1:
   version "0.20.1"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.20.1.tgz#1e4cbb380ad1959db7609cb9573ee77257724a3e"