Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix overwrite context keys from example i18n setup #467

Closed
wants to merge 3 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion login-workflow/example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
"react": "^18.2.0",
"react-app-polyfill": "^3.0.0",
"react-dom": "^18.0.0",
"react-i18next": "^13.0.3",
"react-i18next": "^13.2.2",
"react-router-dom": "^6.8.0",
"react-scripts": "^5.0.0",
"typescript": "^4.3.2"
Expand Down
2 changes: 1 addition & 1 deletion login-workflow/example/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const App = (): JSX.Element => {
const [showChangePasswordDialog, setShowChangePasswordDialog] = useState(false);

const [isLoading, setIsLoading] = useState(true);

i18nAppInstance.addResourceBundle('en', 'bluiCommon', { ACTIONS: { CREATE_ACCOUNT: 'Register now!' } }, true, true);
// handle initialization of auth data on first load
useEffect(() => {
const initialize = async (): Promise<void> => {
Expand Down
42 changes: 21 additions & 21 deletions login-workflow/example/src/navigation/AppRouter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -74,34 +74,34 @@ export const AppRouter: React.FC = () => {
</ReactRouterGuestGuard>
}
/>
{/* USER APPLICATION ROUTES */}
<Route
element={
<>
<Outlet />
{app.showChangePasswordDialog && <ChangePassword />}
</>
}
>
<Route
path={'/homepage'}
element={
<ReactRouterAuthGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/login'}>
<ExampleHome />
</ReactRouterAuthGuard>
}
/>
<Route path={'/'} element={<Navigate to={'/homepage'} replace />} />
</Route>
</Route>
{/* USER APPLICATION ROUTES */}
<Route
element={
<>
<Outlet />
{app.showChangePasswordDialog && <ChangePassword />}
</>
}
>
<Route
path={'*'}
path={'/homepage'}
element={
<ReactRouterAuthGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/login'}>
<Navigate to={'/login'} />
<ExampleHome />
</ReactRouterAuthGuard>
}
/>
<Route path={'/'} element={<Navigate to={'/homepage'} replace />} />
</Route>
<Route
path={'*'}
element={
<ReactRouterAuthGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/login'}>
<Navigate to={'/login'} />
</ReactRouterAuthGuard>
}
/>
{/* REGISTRATION ROUTES */}
<Route
element={
Expand Down
18 changes: 18 additions & 0 deletions login-workflow/example/src/translations/i18n.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,24 @@ void i18next
app: {
...AppDictionaries.english.translation,
},
bluiRegistration: {
SELF_REGISTRATION: {
INSTRUCTIONS: `Test To register for an Eaton account, enter the required information below. You will need to verify your email address to continue.`,
VERIFY_EMAIL: {
MESSAGE:
'Test A verification code has been sent to the email address you provided. Click the link or enter the code below to continue. This code is valid for 30 minutes.',
RESEND: 'Test Resend Verification Email',
VERIFICATION_CODE_PROMPT: "Test Didn't receive an email?",
VERIFICATION: 'Test Verification Code',
CODE_VALIDATOR_ERROR: 'Test You must provide a valid code',
},
},
},
bluiAuth: {
HEADER: {
FORGOT_PASSWORD: 'Test Forgot Password',
},
},
},
fr: {
app: {
Expand Down
8 changes: 4 additions & 4 deletions login-workflow/example/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -8649,10 +8649,10 @@ react-error-overlay@^6.0.11:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==

react-i18next@^13.0.3:
version "13.0.3"
resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-13.0.3.tgz#8eedc5c2ab57f4641540778cc7373c8ed891523c"
integrity sha512-/t4kt4Y2o+21hbvx+o9zpVnmoiud7KLDncyZFGN0U6TGAWYaXdTsp/ytAHFcKKSAODg4noIMaOO3X7bMgCqLHw==
react-i18next@^13.2.2:
version "13.2.2"
resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-13.2.2.tgz#b1e78ed66a54f4bc819616f68b98221e1b1a1936"
integrity sha512-+nFUkbRByFwnrfDcYqvzBuaeZb+nACHx+fAWN/pZMddWOCJH5hoc21+Sa/N/Lqi6ne6/9wC/qRGOoQhJa6IkEQ==
dependencies:
"@babel/runtime" "^7.22.5"
html-parse-stringify "^3.0.1"
Expand Down
4 changes: 2 additions & 2 deletions login-workflow/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
"i18next": "^22.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.6 || ^17.0.0 || ^18.0.0",
"react-i18next": "^11.3.4"
"react-i18next": "^13.2.2"
},
"optionalDependencies": {
"react-router-dom": "^6.8.0"
Expand Down Expand Up @@ -102,7 +102,7 @@
"prettier": "^2.3.1",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-i18next": "^11.10.0",
"react-i18next": "^13.0.0",
"react-router-dom": "^6.8.0",
"regenerator-runtime": "^0.13.7",
"ts-jest": "^29.0.0-next.1",
Expand Down
113 changes: 55 additions & 58 deletions login-workflow/src/contexts/AuthContext/i18nAuthInstance.ts
Original file line number Diff line number Diff line change
@@ -1,71 +1,68 @@
import i18next from 'i18next';
import { AuthDictionaries } from './AuthDictionaries';
import { SharedDictionaries } from '../SharedDictionaries';
import { initReactI18next } from 'react-i18next';

void i18next
.use(initReactI18next) // passes i18n down to react-i18next
.init(
{
fallbackLng: 'en',
ns: ['bluiAuth', 'bluiCommon'],
defaultNS: 'bluiAuth',
load: 'languageOnly',
detection: {
order: ['querystring', 'localStorage', 'navigator'],
caches: ['localStorage'],
export const i18nAuthInstance = i18next.createInstance(
{
fallbackLng: 'en',
ns: ['bluiAuth', 'bluiCommon'],
defaultNS: 'bluiAuth',
load: 'languageOnly',
detection: {
order: ['querystring', 'localStorage', 'navigator'],
caches: ['localStorage'],
},
react: { useSuspense: false },
interpolation: { escapeValue: false },
resources: {
en: {
bluiAuth: {
...AuthDictionaries.english.translation,
},
bluiCommon: {
...SharedDictionaries.english.translation,
},
},
react: { useSuspense: false },
interpolation: { escapeValue: false },
resources: {
en: {
bluiAuth: {
...AuthDictionaries.english.translation,
},
bluiCommon: {
...SharedDictionaries.english.translation,
},
fr: {
bluiAuth: {
...AuthDictionaries.french.translation,
},
fr: {
bluiAuth: {
...AuthDictionaries.french.translation,
},
bluiCommon: {
...SharedDictionaries.french.translation,
},
bluiCommon: {
...SharedDictionaries.french.translation,
},
},
es: {
bluiAuth: {
...AuthDictionaries.spanish.translation,
},
es: {
bluiAuth: {
...AuthDictionaries.spanish.translation,
},
bluiCommon: {
...SharedDictionaries.spanish.translation,
},
bluiCommon: {
...SharedDictionaries.spanish.translation,
},
zh: {
bluiAuth: {
...AuthDictionaries.chinese.translation,
},
bluiCommon: {
...SharedDictionaries.chinese.translation,
},
},
zh: {
bluiAuth: {
...AuthDictionaries.chinese.translation,
},
bluiCommon: {
...SharedDictionaries.chinese.translation,
},
},
pt: {
bluiAuth: {
...AuthDictionaries.portuguese.translation,
},
pt: {
bluiAuth: {
...AuthDictionaries.portuguese.translation,
},
bluiCommon: {
...SharedDictionaries.portuguese.translation,
},
bluiCommon: {
...SharedDictionaries.portuguese.translation,
},
},
},
// We must provide a function as second parameter, otherwise i18next errors
// eslint-disable-next-line @typescript-eslint/no-unused-vars
(err, _t) => {
// eslint-disable-next-line no-console
if (err) return console.log(err);
}
);
},
// We must provide a function as second parameter, otherwise i18next errors
// eslint-disable-next-line @typescript-eslint/no-unused-vars
(err, _t) => {
// eslint-disable-next-line no-console
if (err) return console.log(err);
}
);

export default i18next;
export default { i18nAuthInstance };
24 changes: 12 additions & 12 deletions login-workflow/src/contexts/AuthContext/provider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import React, { useEffect } from 'react';
import { AuthContextProviderProps } from './types';
import { AuthContext } from './context';
import { I18nextProvider } from 'react-i18next';
import i18nAuthInstance from './i18nAuthInstance';
import { i18nAuthInstance } from './i18nAuthInstance';
import { ErrorContext } from '../ErrorContext';
import { AuthDictionaries } from './AuthDictionaries';
import { SharedDictionaries } from '../SharedDictionaries';
Expand All @@ -22,24 +22,24 @@ export const AuthContextProvider: React.FC<
const { language, i18n = i18nInstance, errorConfig } = props;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a little bizarre...not sure if it's causing your issue, but you're doing what looks like a double destructuring of the i18n prop. You set i18nInstance to the passed prop or the default auth instance...and then you destructure the i18n prop again on line 22. I don't think causes any errors, it's just very strange.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

App translations were breaking because app routes were part of auth routes( earlier change password was part of auth context this might be the reason for moving app routes inside auth). Fixed it now.


if (props.i18n) {
i18n.addResourceBundle('zh', 'bluiAuth', AuthDictionaries.chinese.translation, true, true);
i18n.addResourceBundle('zh', 'bluiCommon', SharedDictionaries.chinese.translation, true, true);
i18n.addResourceBundle('en', 'bluiAuth', AuthDictionaries.english.translation, true, true);
i18n.addResourceBundle('en', 'bluiCommon', SharedDictionaries.english.translation, true, true);
i18n.addResourceBundle('fr', 'bluiAuth', AuthDictionaries.french.translation, true, true);
i18n.addResourceBundle('fr', 'bluiCommon', SharedDictionaries.french.translation, true, true);
i18n.addResourceBundle('pt', 'bluiAuth', AuthDictionaries.portuguese.translation, true, true);
i18n.addResourceBundle('pt', 'bluiCommon', SharedDictionaries.portuguese.translation, true, true);
i18n.addResourceBundle('es', 'bluiAuth', AuthDictionaries.spanish.translation, true, true);
i18n.addResourceBundle('es', 'bluiCommon', SharedDictionaries.spanish.translation, true, true);
i18n.addResourceBundle('zh', 'bluiAuth', AuthDictionaries.chinese.translation, true, false);
i18n.addResourceBundle('zh', 'bluiCommon', SharedDictionaries.chinese.translation, true, false);
i18n.addResourceBundle('en', 'bluiAuth', AuthDictionaries.english.translation, true, false);
i18n.addResourceBundle('en', 'bluiCommon', SharedDictionaries.english.translation, true, false);
i18n.addResourceBundle('fr', 'bluiAuth', AuthDictionaries.french.translation, true, false);
i18n.addResourceBundle('fr', 'bluiCommon', SharedDictionaries.french.translation, true, false);
i18n.addResourceBundle('pt', 'bluiAuth', AuthDictionaries.portuguese.translation, true, false);
i18n.addResourceBundle('pt', 'bluiCommon', SharedDictionaries.portuguese.translation, true, false);
i18n.addResourceBundle('es', 'bluiAuth', AuthDictionaries.spanish.translation, true, false);
i18n.addResourceBundle('es', 'bluiCommon', SharedDictionaries.spanish.translation, true, false);
}

useEffect(() => {
void i18n.changeLanguage(language);
}, [i18n, language]);

return (
<I18nextProvider i18n={i18nInstance}>
<I18nextProvider i18n={i18n}>
<AuthContext.Provider value={{ ...authContextProps }}>
<ErrorContext.Provider value={errorConfig}>{children}</ErrorContext.Provider>
</AuthContext.Provider>
Expand Down
Loading