Implement reactive programing for language switching

src/lib/components/Template.tsx

@@ -1,12 +1,13 @@
 
-import { useState, useReducer ,useEffect, memo } from "react";
+import { useReducer, useEffect, memo } from "react";
 import type { ReactNode } from "react";
 import { useKcTranslation } from "../i18n/useKcTranslation";
+import { useKcLanguageTag } from "../i18n/useKcLanguageTag";
 import { kcContext } from "../kcContext";
 import { assert } from "../tools/assert";
 import { cx } from "tss-react";
-import { useKcLanguageTag } from "../i18n/useKcLanguageTag";
 import type { KcLanguageTag } from "../i18n/KcLanguageTag";
+import { getBestMatchAmongKcLanguageTag } from "../i18n/KcLanguageTag";
 import { getKcLanguageTagLabel } from "../i18n/KcLanguageTag";
 import { useCallbackFactory } from "powerhooks";
 import { appendHead } from "../tools/appendHead";
@@ -41,29 +42,45 @@ export const Template = memo((props: TemplateProps) => {
         displayInfoNode = null
     } = props;
 
-    useEffect(()=> { console.log("Rendering this page with react using keycloakify") },[]);
+    useEffect(() => { console.log("Rendering this page with react using keycloakify") }, []);
 
     const { t } = useKcTranslation();
 
     const { kcLanguageTag, setKcLanguageTag } = useKcLanguageTag();
 
+
     const onChangeLanguageClickFactory = useCallbackFactory(
-        ([languageTag]: [KcLanguageTag]) => 
+        ([languageTag]: [KcLanguageTag]) =>
             setKcLanguageTag(languageTag)
     );
 
-    const onTryAnotherWayClick = useConstCallback(() => {
+    const onTryAnotherWayClick = useConstCallback(() =>
+        (document.forms["kc-select-try-another-way-form" as never].submit(), false)
+    );
 
-        document.forms["kc-select-try-another-way-form" as never].submit();
+    assert(kcContext !== undefined);
 
-        return false;
+    const {
+        realm, locale, auth, 
+        url, message, isAppInitiatedAction
+    }= kcContext;
 
-    });
+    useEffect(()=>{
 
-    const [{ realm, locale, auth, url, message, isAppInitiatedAction }] = useState(() => (
+        if( !realm.internationalizationEnabled ){
-        assert(kcContext !== undefined, "App is not currently being served by KeyCloak"),
+            return;
-        kcContext
+        }
-    ));
+
+        assert( locale !== undefined );
+
+        if( kcLanguageTag === getBestMatchAmongKcLanguageTag(locale.current) ){
+            return;
+        }
+
+        window.location.href = 
+            locale.supported.find(({ languageTag }) => languageTag === kcLanguageTag)!.url;
+
+    },[kcLanguageTag]);
 
     const [isExtraCssLoaded, setExtraCssLoaded] = useReducer(() => true, false);
 
@@ -71,7 +88,8 @@ export const Template = memo((props: TemplateProps) => {
 
         let isUnmounted = false;
 
-        const toArr= (x: string | readonly string[] | undefined )=> typeof x === "string" ? x.split(" ") : x ?? [];
+        const toArr = (x: string | readonly string[] | undefined) => 
+            typeof x === "string" ? x.split(" ") : x ?? [];
 
         Promise.all(
             [
@@ -135,15 +153,14 @@ export const Template = memo((props: TemplateProps) => {
                                     <ul>
                                         {
                                             locale.supported.map(
-                                                ({ languageTag, url }) =>
+                                                ({ languageTag }) =>
                                                     <li className="kc-dropdown-item">
-                                                        <a href={url} onClick={onChangeLanguageClickFactory(languageTag)}>
+                                                        <a href="#" onClick={onChangeLanguageClickFactory(languageTag)}>
                                                             {getKcLanguageTagLabel(languageTag)}
                                                         </a>
 
                                                     </li>
                                             )
-
                                         }
                                     </ul>
                                 </div>

src/lib/i18n/useKcLanguageTag.ts

@@ -6,7 +6,7 @@ import { getBestMatchAmongKcLanguageTag } from "./KcLanguageTag";
 export const { useKcLanguageTag } = createUseGlobalState(
     "kcLanguageTag",
     () => getBestMatchAmongKcLanguageTag(
-        kcContext?.locale?.["current" as never] ??
+        kcContext?.locale?.current ??
         navigator.language
     ),
     { "persistance": "cookie" }

src/lib/kcContext.ts

@@ -5,16 +5,11 @@ import { id } from "evt/tools/typeSafety/id";
 import type { KcLanguageTag } from "./i18n/KcLanguageTag";
 import { doExtends } from "evt/tools/typeSafety/doExtends";
 import type { MessageKey } from "./i18n/useKcTranslation";
+import type { LanguageLabel } from "./i18n/KcLanguageTag";
 
 type ExtractAfterStartingWith<Prefix extends string, StrEnum> = 
     StrEnum extends `${Prefix}${infer U}` ? U : never;
 
-const x: "33" | "44" = null as any;;
-
-const y: `foo.${typeof x}` = `foo.${x}` as const;
-
-y;
-
 export type KcContext = KcContext.Login | KcContext.Register | KcContext.Info;
 export declare namespace KcContext {
 
@@ -43,9 +38,7 @@ export declare namespace KcContext {
                  */
                 //label: LanguageLabel;
             }[];
-            //NOTE: We do not expose this because the language is managed
+            current: LanguageLabel;
-            //client side. We use this value however to set the default.
-            //current: LanguageLabel;
         },
         auth?: {
             showUsername: boolean;