(fix) Locale switcher in the primary navigation should show session l…

…ocale if no default locale found (#757)
openmrs · Sep 6, 2023 · acc9a97 · acc9a97
1 parent 6b62a36
commit acc9a97
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 13 deletions.
diff --git a/.../apps/esm-primary-navigation-app/src/components/choose-locale/change-locale.component.tsx b/.../apps/esm-primary-navigation-app/src/components/choose-locale/change-locale.component.tsx
@@ -19,12 +19,13 @@ import { useTranslation } from "react-i18next";
 export interface ChangeLocaleProps {
   allowedLocales: Array<string>;
   user: LoggedInUser;
+  locale: string;
   postUserProperties: PostUserProperties;
   postSessionLocale: PostSessionLocale;
 }
 
 const ChangeLocaleWrapper: React.FC<
-  Pick<ChangeLocaleProps, "allowedLocales" | "user">
+  Pick<ChangeLocaleProps, "allowedLocales" | "user" | "locale">
 > = (props) => {
   const isOnline = useConnectivity();
   const [postUserProperties, postSessionLocale] = useMemo(
@@ -43,30 +44,39 @@ const ChangeLocaleWrapper: React.FC<
 // exported for tests
 export const ChangeLocale: React.FC<ChangeLocaleProps> = ({
   allowedLocales,
+  locale,
   user,
   postUserProperties,
   postSessionLocale,
 }) => {
   const { t } = useTranslation();
-  const [userProps, setUserProps] = useState(user.userProperties);
+  const [selectedLocale, setSelectedLocale] = useState(
+    user?.userProperties?.defaultLocale ?? locale
+  );
   const options = allowedLocales?.map((locale) => (
     <SelectItem text={locale} value={locale} key={locale} />
   ));
 
   useEffect(() => {
-    if (user.userProperties.defaultLocale !== userProps.defaultLocale) {
+    if (user.userProperties.defaultLocale !== selectedLocale) {
       const ac = new AbortController();
-      postUserProperties(user.uuid, userProps, ac);
-      postSessionLocale(userProps.defaultLocale, ac);
+      postUserProperties(
+        user.uuid,
+        {
+          ...(user.userProperties ?? {}),
+          defaultLocale: selectedLocale,
+        },
+        ac
+      );
+      postSessionLocale(selectedLocale, ac);
       return () => ac.abort();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [userProps, postUserProperties, postSessionLocale]);
+  }, [selectedLocale, postUserProperties, user, postSessionLocale]);
 
   const onChange = useCallback(
     (event: React.ChangeEvent<HTMLSelectElement>) =>
-      setUserProps({ ...userProps, defaultLocale: event.target.value }),
-    [userProps, setUserProps]
+      setSelectedLocale(event.target.value),
+    [setSelectedLocale]
   );
 
   const onClick = useCallback(
@@ -83,7 +93,7 @@ export const ChangeLocale: React.FC<ChangeLocaleProps> = ({
         labelText={t("selectLocale", "Select locale")}
         onChange={onChange}
         onClick={onClick}
-        value={userProps.defaultLocale}
+        value={selectedLocale}
       >
         {options}
       </Select>

diff --git a/packages/apps/esm-primary-navigation-app/src/components/choose-locale/change-locale.test.tsx b/packages/apps/esm-primary-navigation-app/src/components/choose-locale/change-locale.test.tsx
@@ -22,25 +22,54 @@ describe(`<ChangeLocale />`, () => {
     Promise.resolve()
   );
 
-  beforeEach(() => {
+  it("should have user's defaultLocale as initial value", async () => {
     postUserPropertiesMock = jest.fn(() => Promise.resolve());
     postSessionLocaleMock = jest.fn(() => Promise.resolve());
 
     render(
       <ChangeLocale
+        locale={"en"}
         allowedLocales={allowedLocales}
         user={user}
         postUserProperties={postUserPropertiesMock}
         postSessionLocale={postSessionLocaleMock}
       />
     );
+    expect(screen.getByLabelText(/Select locale/)).toHaveValue("fr");
   });
 
-  it("should have user's defaultLocale as initial value", async () => {
-    expect(screen.getByLabelText(/Select locale/)).toHaveValue("fr");
+  it("should have session locale as initial value if no defaultLocale for user found", async () => {
+    postUserPropertiesMock = jest.fn(() => Promise.resolve());
+    postSessionLocaleMock = jest.fn(() => Promise.resolve());
+    const wrapper = render(
+      <ChangeLocale
+        locale={"en"}
+        allowedLocales={allowedLocales}
+        user={{
+          ...user,
+          userProperties: {},
+        }}
+        postUserProperties={postUserPropertiesMock}
+        postSessionLocale={postSessionLocaleMock}
+      />
+    );
+    expect(wrapper.getByLabelText(/Select locale/)).toHaveValue("en");
   });
 
   it("should change user locale", async () => {
+    postUserPropertiesMock = jest.fn(() => Promise.resolve());
+    postSessionLocaleMock = jest.fn(() => Promise.resolve());
+
+    render(
+      <ChangeLocale
+        locale={"en"}
+        allowedLocales={allowedLocales}
+        user={user}
+        postUserProperties={postUserPropertiesMock}
+        postSessionLocale={postSessionLocaleMock}
+      />
+    );
+    expect(screen.getByLabelText(/Select locale/)).toHaveValue("fr");
     fireEvent.change(screen.getByLabelText(/Select locale/i), {
       target: { value: "en" },
     });