wip

web/src/context/installerL10n.jsx

@@ -29,6 +29,7 @@ import { useInstallerClientStatus } from "./installer";
 import agama from "~/agama";
 import supportedLanguages from "~/languages.json";
 import { fetchConfig, updateConfig } from "~/api/l10n";
+import { useL10n, useL10nUIChanges } from "~/queries/l10n";
 
 const L10nContext = React.createContext(null);
 
@@ -221,6 +222,8 @@ function InstallerL10nProvider({ children }) {
   const [keymap, setKeymap] = useState(undefined);
   const [backendPending, setBackendPending] = useState(false);
   const { cancellablePromise } = useCancellablePromise();
+  const l10n = useL10n();
+  useL10nUIChanges();
 
   const storeInstallerLanguage = useCallback(
     async (newLanguage) => {
@@ -297,7 +300,14 @@ function InstallerL10nProvider({ children }) {
 
   const value = { language, changeLanguage, keymap, changeKeymap };
 
-  return <L10nContext.Provider value={value}>{children}</L10nContext.Provider>;
+  return (
+    <L10nContext.Provider value={value}>
+      <div>
+        <p>{l10n.uiLocale?.id}</p>
+        {children}
+      </div>
+    </L10nContext.Provider>
+  );
 }
 
 export { InstallerL10nProvider, useInstallerL10n };

web/src/queries/l10n.ts

@@ -94,6 +94,27 @@ const useL10nConfigChanges = () => {
   }, [client, queryClient]);
 };
 
+/**
+ * Hook that returns a useEffect to listen for L10nConfigChanged events
+ *
+ * When the configuration changes, it invalidates the config query and forces the router to
+ * revalidate its data (executing the loaders again).
+ */
+const useL10nUIChanges = () => {
+  const queryClient = useQueryClient();
+  const client = useInstallerClient();
+
+  React.useEffect(() => {
+    if (!client) return;
+
+    return client.onEvent((event) => {
+      if (event.type === "LocaleChanged") {
+        queryClient.invalidateQueries({ queryKey: ["l10n/config"] });
+      }
+    });
+  }, [client, queryClient]);
+};
+
 /// Returns the l10n data.
 const useL10n = () => {
   const [{ data: config }, { data: locales }, { data: keymaps }, { data: timezones }] =
@@ -127,4 +148,5 @@ export {
   useConfigMutation,
   useL10n,
   useL10nConfigChanges,
+  useL10nUIChanges,
 };