(@fluent/react) Add changeLocales and currentLocales on provider

Author: macabeus

fluent-react/example/src/App.tsx

@@ -3,6 +3,7 @@ import { Localized } from "@fluent/react";
 import { FluentDateTime } from "@fluent/bundle";
 import { Hello } from "./Hello";
 import { SignIn } from "./SignIn";
+import { ChangeLocale } from "./ChangeLocale";
 
 export function App() {
     let [date] = useState(() => new Date());
@@ -37,5 +38,9 @@ export function App() {
         </Localized>
 
         <SignIn />
+
+        <hr />
+
+        <ChangeLocale />
     </>;
 }

fluent-react/example/src/ChangeLocale.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { useLocalization } from "@fluent/react";
+import { AVAILABLE_LOCALES } from "./l10n";
+
+export function ChangeLocale() {
+    const { changeLocales, currentLocales } = useLocalization()
+
+    return (
+        <select
+            onChange={event => changeLocales([event.target.value])}
+            value={currentLocales[0]}>
+            {Object.entries(AVAILABLE_LOCALES).map(
+                ([code, name]) => <option key={code} value={code}>{name}</option>
+            )}
+        </select>
+    );
+}

fluent-react/example/src/l10n.tsx

@@ -8,7 +8,7 @@ import { ReactLocalization, LocalizationProvider } from "@fluent/react";
 const ftl = require("../public/*.ftl");
 
 const DEFAULT_LOCALE = "en-US";
-const AVAILABLE_LOCALES = {
+export const AVAILABLE_LOCALES = {
     "en-US": "English",
     "pl": "Polish",
 };
@@ -33,7 +33,6 @@ interface AppLocalizationProviderProps {
 }
 
 export function AppLocalizationProvider(props: AppLocalizationProviderProps) {
-    let [currentLocales, setCurrentLocales] = useState([DEFAULT_LOCALE]);
     let [l10n, setL10n] = useState<ReactLocalization | null>(null);
 
     useEffect(() => {
@@ -46,7 +45,6 @@ export function AppLocalizationProvider(props: AppLocalizationProviderProps) {
             Object.keys(AVAILABLE_LOCALES),
             { defaultLocale: DEFAULT_LOCALE }
         );
-        setCurrentLocales(currentLocales);
 
         let fetchedMessages = await Promise.all(
             currentLocales.map(fetchMessages)
@@ -60,18 +58,9 @@ export function AppLocalizationProvider(props: AppLocalizationProviderProps) {
         return <div>Loading…</div>;
     }
 
-    return <>
-        <LocalizationProvider l10n={l10n}>
+    return (
+        <LocalizationProvider l10n={l10n} changeLocales={changeLocales} initialLocales={navigator.languages}>
             {Children.only(props.children)}
         </LocalizationProvider>
-
-        <hr />
-        <select
-            onChange={event => changeLocales([event.target.value])}
-            value={currentLocales[0]}>
-            {Object.entries(AVAILABLE_LOCALES).map(
-                ([code, name]) => <option key={code} value={code}>{name}</option>
-            )}
-        </select>
-    </>;
+    );
 }

fluent-react/src/context.ts

@@ -1,4 +1,10 @@
 import { createContext } from "react";
 import { ReactLocalization } from "./localization";
 
-export let FluentContext = createContext(new ReactLocalization([], null));
+const defaultValue = {
+  l10n: new ReactLocalization([], null),
+  changeLocales: (_changeLocales: string[]) => undefined as void,
+  currentLocales: [] as string[],
+};
+
+export let FluentContext = createContext(defaultValue);

fluent-react/src/localized.ts

@@ -47,7 +47,7 @@ export interface LocalizedProps {
  */
 export function Localized(props: LocalizedProps): ReactElement {
   const { id, attrs, vars, elems, children: child = null } = props;
-  const l10n = useContext(FluentContext);
+  const { l10n } = useContext(FluentContext);
 
   // Validate that the child element isn't an array
   if (Array.isArray(child)) {

fluent-react/src/provider.ts

@@ -1,11 +1,13 @@
-import { createElement, ReactNode, ReactElement } from "react";
+import { createElement, ReactNode, ReactElement, useState } from "react";
 import PropTypes from "prop-types";
 import { FluentContext } from "./context";
 import { ReactLocalization } from "./localization";
 
 interface LocalizationProviderProps {
   children?: ReactNode;
   l10n: ReactLocalization;
+  changeLocales: (locales: string[]) => void;
+  initialLocales: string[];
 }
 
 /*
@@ -27,10 +29,21 @@ interface LocalizationProviderProps {
 export function LocalizationProvider(
   props: LocalizationProviderProps
 ): ReactElement {
+  let [locales, setLocales] = useState(props.initialLocales);
+
+  function changeLocales(locales: string[]) {
+    props.changeLocales(locales);
+    setLocales(locales);
+  }
+
   return createElement(
     FluentContext.Provider,
     {
-      value: props.l10n
+      value: {
+        l10n: props.l10n,
+        changeLocales: changeLocales,
+        currentLocales: locales
+      }
     },
     props.children
   );

fluent-react/src/use_localization.ts

@@ -5,9 +5,9 @@ import { ReactLocalization } from "./localization";
 /*
 * The `useLocalization` hook returns the FluentContext
 */
-type useLocalization = () => { l10n: ReactLocalization }
+type useLocalization = () => { l10n: ReactLocalization, changeLocales: (locales: string[]) => void, currentLocales: string[] }
 export const useLocalization: useLocalization = () => {
-  const l10n = useContext(FluentContext);
+  const { l10n, changeLocales, currentLocales } = useContext(FluentContext);
 
-  return { l10n };
+  return { l10n, changeLocales, currentLocales };
 };

fluent-react/src/with_localization.ts

@@ -16,7 +16,7 @@ export function withLocalization<P extends WithLocalizationProps>(
   Inner: ComponentType<P>
 ): ComponentType<WithoutLocalizationProps<P>> {
   function WithLocalization(props: WithoutLocalizationProps<P>): ReactElement {
-    const l10n = useContext(FluentContext);
+    const { l10n } = useContext(FluentContext);
     // Re-bind getString to trigger a re-render of Inner.
     const getString = l10n.getString.bind(l10n);
     return createElement(Inner, { getString, ...props } as P);