Converted language list to dynamic (#4303)

* Converted language list to dynamic

* eslint

* Improved robustness

* rubo:

* remove test file

Gemfile

@@ -15,6 +15,7 @@ gem 'cssbundling-rails'
 gem 'data_migrate'
 gem 'dotenv-rails'
 gem 'hcaptcha'
+gem 'i18n-language-mapping'
 gem 'image_processing', '~> 1.2'
 gem 'jbuilder'
 gem 'jsbundling-rails'

Gemfile.lock

@@ -159,6 +159,7 @@ GEM
     httpclient (2.8.3)
     i18n (1.10.0)
       concurrent-ruby (~> 1.0)
+    i18n-language-mapping (0.1.3.1)
     image_processing (1.12.2)
       mini_magick (>= 4.9.5, < 5)
       ruby-vips (>= 2.0.17, < 3)
@@ -401,6 +402,7 @@ DEPENDENCIES
   factory_bot_rails
   faker
   hcaptcha
+  i18n-language-mapping
   image_processing (~> 1.2)
   jbuilder
   jsbundling-rails

app/controllers/api/v1/locales_controller.rb

+# frozen_string_literal: true
+
+module Api
+  module V1
+    class LocalesController < ApiController
+      skip_before_action :ensure_authenticated, only: :show
+
+      # GET /api/v1/locales
+      def index
+        language_with_name = Rails.cache.fetch('locales/list', expires_in: 24.hours) do
+          language_hash = {}
+
+          languages = Dir.entries(Rails.root.join('app/assets/locales')).select { |file_name| file_name.ends_with?('.json') }
+          language_list = I18n::Language::Mapping.language_mapping_list
+
+          languages.each do |lang|
+            language = lang.split('.').first
+            native_name = language_list.dig(language.tr('_', '-'), 'nativeName')
+
+            language_hash[language] = native_name if native_name.present?
+          end
+
+          language_hash
+        end
+
+        render_data data: language_with_name, status: :ok
+      end
+
+      # GET /api/v1/locales/:name
+      def show
+        language = params[:name].tr('-', '_')
+
+        render file: Rails.root.join('app', 'assets', 'locales', "#{language}.json")
+      rescue StandardError
+        head :not_acceptable
+      end
+    end
+  end
+end

app/controllers/locales_controller.rb

-# frozen_string_literal: true
-
-class LocalesController < ApplicationController
-  def show
-    language = params[:name].tr('-', '_')
-
-    render json: File.read(Rails.root.join('app', 'assets', 'locales', "#{language}.json"))
-  rescue StandardError
-    head :not_acceptable
-  end
-end

app/javascript/components/users/user/forms/UpdateUserForm.jsx

@@ -13,22 +13,11 @@ import { useAuth } from '../../../../contexts/auth/AuthProvider';
 import useRoles from '../../../../hooks/queries/admin/roles/useRoles';
 import FormSelect from '../../../shared_components/forms/controls/FormSelect';
 import Option from '../../../shared_components/utilities/Option';
+import useLocales from '../../../../hooks/queries/locales/useLocales';
 
 export default function UpdateUserForm({ user }) {
   const { t, i18n } = useTranslation();
-
-  // TODO: Make LOCALES a context that provides the available languages and their native names in the client app.
-  const LOCALES = {
-    cs: 'Čeština',
-    de: 'Deutsch',
-    el_GR: 'ελληνικά',
-    en: 'English',
-    fa_IR: 'فارسی',
-    fr: 'Français',
-    hu_HU: 'magyar',
-    ru: 'русский',
-    tr: 'Türkçe',
-  };
+  const { data: locales } = useLocales();
 
   const methods = useForm({
     defaultValues: {
@@ -58,7 +47,7 @@ export default function UpdateUserForm({ user }) {
       <FormControl field={fields.email} type="email" />
       <FormSelect field={fields.language}>
         {
-          Object.keys(LOCALES).map((code) => <Option key={code} value={code}>{LOCALES[code]}</Option>)
+          Object.keys(locales || {}).map((code) => <Option key={code} value={code}>{locales[code]}</Option>)
         }
       </FormSelect>
       {(isAdmin && roles) && (

app/javascript/hooks/queries/locales/useLocales.jsx

+import { useQuery } from 'react-query';
+import axios from '../../../helpers/Axios';
+
+export default function useLocales() {
+  return useQuery(
+    'getLocales',
+    () => axios.get('/locales.json').then((resp) => resp.data.data),
+    {
+      cacheTime: 21600000, // 6 hours
+      staleTime: 10800000, // 3 hours
+    },
+  );
+}

app/javascript/i18n.jsx

@@ -8,7 +8,7 @@ i18next
   .init({
     fallbackLng: 'en',
     backend: {
-      loadPath: '/locales/{{lng}}.json',
+      loadPath: '/api/v1/locales/{{lng}}.json',
       requestOptions: {
         cache: 'no-store', // TODO - samuel: i18n will sometime use the cache translation
       },

config/routes.rb

@@ -4,8 +4,6 @@ Rails.application.routes.draw do
   root 'components#index', via: :all
   mount ActionCable.server => '/cable'
 
-  resources :locales, only: :show, param: :name
-
   # External requests
   get '/auth/:provider/callback', to: 'external#create_user'
   get '/meeting_ended', to: 'external#meeting_ended'
@@ -64,6 +62,7 @@ Rails.application.routes.draw do
       end
       resources :site_settings, only: :show, param: :name
       resources :rooms_configurations, only: :index
+      resources :locales, only: %i[index show], param: :name
 
       namespace :admin do
         resources :users, only: %i[update] do