From 51ceb5af289ae206cb7da18ad125ae643e12b0a7 Mon Sep 17 00:00:00 2001 From: Vineet Sharma Date: Mon, 30 Oct 2023 20:46:22 +0530 Subject: [PATCH] (fix) Locale switcher should default to user's defaultLocale or the session locale (#783) * Locale switcher should use the session value * Passing locale from user panel slot * Removed useEffect and changes should happen on input change * Cleanup * (improvement) using session locale as the truth value and setting defaultLocale in user properties on change * (fix) Updated tests --- .../choose-locale/change-locale.component.tsx | 55 +++++++------------ .../choose-locale/change-locale.resource.tsx | 22 -------- .../choose-locale/change-locale.test.tsx | 50 +---------------- .../user-menu-panel.component.tsx | 5 +- .../src/types/index.ts | 5 -- 5 files changed, 25 insertions(+), 112 deletions(-) delete mode 100644 packages/apps/esm-primary-navigation-app/src/types/index.ts diff --git a/packages/apps/esm-primary-navigation-app/src/components/choose-locale/change-locale.component.tsx b/packages/apps/esm-primary-navigation-app/src/components/choose-locale/change-locale.component.tsx index 0f6041055..0d44cab4c 100644 --- a/packages/apps/esm-primary-navigation-app/src/components/choose-locale/change-locale.component.tsx +++ b/packages/apps/esm-primary-navigation-app/src/components/choose-locale/change-locale.component.tsx @@ -7,12 +7,9 @@ import { useConnectivity, } from "@openmrs/esm-framework"; import { - PostSessionLocale, PostUserProperties, postUserPropertiesOnline, postUserPropertiesOffline, - postSessionLocaleOnline, - postSessionLocaleOffline, } from "./change-locale.resource"; import { useTranslation } from "react-i18next"; @@ -21,24 +18,18 @@ export interface ChangeLocaleProps { user: LoggedInUser; locale: string; postUserProperties: PostUserProperties; - postSessionLocale: PostSessionLocale; } const ChangeLocaleWrapper: React.FC< Pick > = (props) => { const isOnline = useConnectivity(); - const [postUserProperties, postSessionLocale] = useMemo( - () => - isOnline - ? [postUserPropertiesOnline, postSessionLocaleOnline] - : [postUserPropertiesOffline, postSessionLocaleOffline], + const postUserProperties = useMemo( + () => (isOnline ? postUserPropertiesOnline : postUserPropertiesOffline), [isOnline] ); - return ( - - ); + return ; }; // exported for tests @@ -47,36 +38,30 @@ export const ChangeLocale: React.FC = ({ locale, user, postUserProperties, - postSessionLocale, }) => { const { t } = useTranslation(); - const [selectedLocale, setSelectedLocale] = useState( - user?.userProperties?.defaultLocale ?? locale - ); + const [selectedLocale, setSelectedLocale] = useState(locale); const options = allowedLocales?.map((locale) => ( )); - useEffect(() => { - if (user.userProperties.defaultLocale !== selectedLocale) { - const ac = new AbortController(); - postUserProperties( - user.uuid, - { - ...(user.userProperties ?? {}), - defaultLocale: selectedLocale, - }, - ac - ); - postSessionLocale(selectedLocale, ac); - return () => ac.abort(); - } - }, [selectedLocale, postUserProperties, user, postSessionLocale]); - const onChange = useCallback( - (event: React.ChangeEvent) => - setSelectedLocale(event.target.value), - [setSelectedLocale] + (event: React.ChangeEvent) => { + const newLocale = event.target.value; + if (newLocale !== selectedLocale) { + const ac = new AbortController(); + postUserProperties( + user.uuid, + { + ...(user.userProperties ?? {}), + defaultLocale: newLocale, + }, + ac + ); + setSelectedLocale(newLocale); + } + }, + [postUserProperties, user.userProperties, user.uuid, selectedLocale] ); const onClick = useCallback( diff --git a/packages/apps/esm-primary-navigation-app/src/components/choose-locale/change-locale.resource.tsx b/packages/apps/esm-primary-navigation-app/src/components/choose-locale/change-locale.resource.tsx index b852388cf..988acc994 100644 --- a/packages/apps/esm-primary-navigation-app/src/components/choose-locale/change-locale.resource.tsx +++ b/packages/apps/esm-primary-navigation-app/src/components/choose-locale/change-locale.resource.tsx @@ -39,25 +39,3 @@ export async function postUserPropertiesOffline( } ); } - -export type PostSessionLocale = ( - locale: string, - abortController: AbortController -) => Promise; - -export async function postSessionLocaleOnline( - locale: string, - abortController: AbortController -): Promise { - await openmrsFetch(`/ws/rest/v1/session`, { - method: "POST", - body: { locale }, - headers: { "Content-Type": "application/json" }, - signal: abortController.signal, - }); -} - -export async function postSessionLocaleOffline( - locale: string, - abortController: AbortController -) {} 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 index ba540649d..eb2c462ea 100644 --- 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 @@ -1,10 +1,7 @@ import React from "react"; import { fireEvent, render, screen, waitFor } from "@testing-library/react"; import { ChangeLocale } from "./change-locale.component"; -import type { - PostSessionLocale, - PostUserProperties, -} from "./change-locale.resource"; +import type { PostUserProperties } from "./change-locale.resource"; const allowedLocales = ["en", "fr", "it", "pt"]; const user: any = { @@ -18,55 +15,16 @@ describe(``, () => { let postUserPropertiesMock: PostUserProperties = jest.fn(() => Promise.resolve() ); - let postSessionLocaleMock: PostSessionLocale = jest.fn(() => - Promise.resolve() - ); - - it("should have user's defaultLocale as initial value", async () => { - postUserPropertiesMock = jest.fn(() => Promise.resolve()); - postSessionLocaleMock = jest.fn(() => Promise.resolve()); - - render( - - ); - 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( - - ); - expect(wrapper.getByLabelText(/Select locale/)).toHaveValue("en"); - }); it("should change user locale", async () => { postUserPropertiesMock = jest.fn(() => Promise.resolve()); - postSessionLocaleMock = jest.fn(() => Promise.resolve()); render( ); expect(screen.getByLabelText(/Select locale/)).toHaveValue("fr"); @@ -79,10 +37,6 @@ describe(``, () => { { defaultLocale: "en" }, expect.anything() ); - expect(postSessionLocaleMock).toHaveBeenCalledWith( - "en", - expect.anything() - ); }); }); }); diff --git a/packages/apps/esm-primary-navigation-app/src/components/navbar-header-panels/user-menu-panel.component.tsx b/packages/apps/esm-primary-navigation-app/src/components/navbar-header-panels/user-menu-panel.component.tsx index 836eeca64..c8dba7ab0 100644 --- a/packages/apps/esm-primary-navigation-app/src/components/navbar-header-panels/user-menu-panel.component.tsx +++ b/packages/apps/esm-primary-navigation-app/src/components/navbar-header-panels/user-menu-panel.component.tsx @@ -2,10 +2,10 @@ import React from "react"; import { ExtensionSlot, LoggedInUser, + Session, useOnClickOutside, } from "@openmrs/esm-framework"; import { HeaderPanel, HeaderPanelProps } from "@carbon/react"; -import { UserSession } from "../../types"; import styles from "../../root.scss"; interface UserMenuPanelProps extends HeaderPanelProps { @@ -13,7 +13,7 @@ interface UserMenuPanelProps extends HeaderPanelProps { user: LoggedInUser | false | null; allowedLocales: any; onLogout(): void; - session: UserSession; + session: Session; hidePanel: () => void; } @@ -43,6 +43,7 @@ const UserMenuPanel: React.FC = ({ onLogout: onLogout, referer: window.location.pathname, currentLocation: session?.sessionLocation?.display, + locale: session?.locale, }} /> diff --git a/packages/apps/esm-primary-navigation-app/src/types/index.ts b/packages/apps/esm-primary-navigation-app/src/types/index.ts deleted file mode 100644 index 334a4a2e5..000000000 --- a/packages/apps/esm-primary-navigation-app/src/types/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export interface UserSession { - sessionLocation?: { - display: string; - }; -}