feat(language): customize language switcher

src/backend/controllers/api-controller.ts

@@ -293,6 +293,34 @@ class ApiController {
       ].join('\n'),
     }
   }
+
+  /**
+   * Switches language for the admin panel.
+   * To call it use {@link ApiClient#switchLanguage} method.
+   *
+   * Handler function responsible for a _.../api/resources/{resourceId}/bulk/{action}?recordIds={recordIds}_
+   *
+   * @param   {ActionRequest}  request
+   * @param   {any}  response
+   *
+   * @return  {Promise<{ redirectUrl: string }>}  action response
+   */
+  async switchLanguage(request: any): Promise<{ redirectUrl: string }> {
+    if (typeof this._admin.options.locale === 'function') {
+      const { lang } = request.params
+      const locale = await this._admin.options.locale(this.currentAdmin)
+      if (locale?.availableLanguages?.includes(lang)) {
+        const resource = this._admin.findResource('User')
+        if (resource && this?.currentAdmin?.userId) {
+          await resource.update(this.currentAdmin.userId, { language: lang })
+        }
+        request.session.adminUser.language = lang
+      }
+    }
+    return {
+      redirectUrl: this._admin.options.rootPath,
+    }
+  }
 }
 
 export default ApiController

src/backend/utils/router/router.ts

@@ -171,6 +171,11 @@ export const Router: RouterType = {
     path: '/api/pages/{pageName}',
     Controller: ApiController,
     action: 'page',
+  }, {
+    method: 'POST',
+    path: '/api/language/{lang}',
+    Controller: ApiController,
+    action: 'switchLanguage',
   }],
 }
 

src/frontend/components/app/language-select/language-select.tsx

@@ -9,17 +9,20 @@ import {
 } from '@adminjs/design-system'
 import React, { FC, useMemo } from 'react'
 import { useTranslation } from '../../../hooks/index.js'
+import ApiClient from '../../../utils/api-client.js'
 
 const LanguageSelect: FC = () => {
   const {
     i18n: {
       language,
       options: { supportedLngs },
-      changeLanguage,
+      // changeLanguage,
     },
     translateComponent,
   } = useTranslation()
 
+  const api = new ApiClient()
+
   const availableLanguages: readonly string[] = useMemo(
     () => (supportedLngs ? supportedLngs.filter((lang) => lang !== 'cimode') : []),
     [supportedLngs],
@@ -42,8 +45,8 @@ const LanguageSelect: FC = () => {
           {availableLanguages.map((lang) => (
             <DropDownItem
               key={lang}
-              onClick={() => {
-                changeLanguage(lang)
+              onClick={async () => {
+                window.location.href = await api.switchLanguage(lang)
               }}
             >
               {translateComponent(`LanguageSelector.availableLanguages.${lang}`, { defaultValue: lang })}

src/frontend/utils/api-client.ts

@@ -251,6 +251,12 @@ class ApiClient {
     return response
   }
 
+  async switchLanguage(lang: string): Promise<string> {
+    const response = await this.client.post(`/api/language/${lang}`)
+    checkResponse(response)
+    return response.data.redirectUrl
+  }
+
   async refreshToken(data: Record<string, any>) {
     const response = await this.client.request({
       url: '/refresh-token',