-
Notifications
You must be signed in to change notification settings - Fork 19
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
DESENG-611: Splitting translations based on language and common #2525
Changes from 4 commits
efa8338
de36463
2661780
8e2a650
33130d6
b8e1b55
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -115,9 +115,10 @@ const App = () => { | |
if (!tenant.id) { | ||
return; | ||
} | ||
|
||
try { | ||
const supportedLanguages = Object.values(Languages); | ||
const supportedLanguages: string[] = Object.values(Languages); | ||
// Adding keyword `common` into supportedLanguages to fetch locale/common.json | ||
supportedLanguages.push('common'); | ||
const translationPromises = supportedLanguages.map((languageId) => getTranslationFile(languageId)); | ||
const translationFiles = await Promise.all(translationPromises); | ||
|
||
|
@@ -137,17 +138,17 @@ const App = () => { | |
|
||
const getTranslationFile = async (languageId: string) => { | ||
try { | ||
const translationFile = await import(`./locales/${languageId}/${tenant.id}.json`); | ||
const translationFile = await import(`./locales/${languageId}.json`); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Again, here you might expect There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Changed to localeId |
||
return translationFile; | ||
} catch (error) { | ||
const defaultTranslationFile = await import(`./locales/${languageId}/default.json`); | ||
const defaultTranslationFile = await import(`./locales/en.json`); | ||
return defaultTranslationFile; | ||
} | ||
}; | ||
|
||
useEffect(() => { | ||
preloadTranslations(); | ||
}, [tenant.id]); // Preload translations when tenant id changes | ||
}, [language.id, tenant.id]); // Preload translations when language id or tenant id changes | ||
|
||
const loadTranslation = async () => { | ||
if (!tenant.id || !translations[language.id]) { | ||
|
@@ -157,7 +158,11 @@ const App = () => { | |
i18n.changeLanguage(language.id); // Set the language for react-i18next | ||
|
||
try { | ||
i18n.addResourceBundle(language.id, tenant.id, translations[language.id]); | ||
// adding resource to default namespace 'default' | ||
i18n.addResourceBundle(language.id, 'default', translations[language.id]); | ||
// adding common translation resource file to namespace 'common' | ||
i18n.addResourceBundle(language.id, 'common', translations['common']); | ||
|
||
dispatch(loadingTenant(false)); | ||
} catch (error) { | ||
dispatch(loadingTenant(false)); | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -205,7 +205,8 @@ const CommentReview = () => { | |
}; | ||
|
||
const defaultVerdict = comment_status_id !== CommentStatus.Pending ? comment_status_id : CommentStatus.Approved; | ||
const threatEmailContact = translate('comment.admin.review.threatContactEmail'); | ||
// TODO: LANG-BACKEND - Change the value to show tenant specific | ||
const threatEmailContact = '[email protected]'; | ||
return ( | ||
<MetPageGridContainer> | ||
<EmailPreviewModal | ||
|
@@ -407,8 +408,10 @@ const CommentReview = () => { | |
} | ||
/> | ||
<MetSmallTextOld bold color="#d32f2f" marginLeft={'3em'} mt={'-1em'}> | ||
{translate('comment.admin.review.threatTextOne')}{' '} | ||
{translate('comment.admin.review.threatContact')}{' '} | ||
{translate('comment.admin.review.threatTextOne')} | ||
{/* TODO: LANG-BACKEND - Change the value to show tenant specific // | ||
comment.admin.review.threatContact */} | ||
{'FirstName LastName'} | ||
{translate('comment.admin.review.threatTextTwo')}{' '} | ||
<Link href={`mailto:${threatEmailContact}`}>{threatEmailContact}</Link> | ||
</MetSmallTextOld> | ||
|
Original file line number | Diff line number | Diff line change | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
@@ -8,15 +8,26 @@ export const useAppDispatch = () => useDispatch<AppDispatch>(); | |||||||||||
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector; | ||||||||||||
|
||||||||||||
export const useAppTranslation = () => { | ||||||||||||
const translate = useTranslation(); | ||||||||||||
const tenantId = sessionStorage.getItem('tenantId'); | ||||||||||||
// Every language has its own default and common namespaces | ||||||||||||
const translate = useTranslation(['default', 'common']); | ||||||||||||
|
||||||||||||
const { t } = translate; | ||||||||||||
|
||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The language system in MET is inherently a bit confusing. The comments in this file are great so far, and maybe we could add a higher-level one above this function. Would this comment describe the intended behaviour?
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Updated the comments |
||||||||||||
const tDynamic = (key: string) => { | ||||||||||||
// Create a dynamic translation key using the tenantId | ||||||||||||
const dynamicKey = `${tenantId}:${key}`; | ||||||||||||
return t(dynamicKey); | ||||||||||||
// Create a dynamic translation key using the `default` namespace | ||||||||||||
const dynamicKey = `default:${key}`; | ||||||||||||
const value = t(dynamicKey); | ||||||||||||
// If the value is the same as the key, then the key does not exist in the `default` namespace, so try the `common` namespace | ||||||||||||
if (key === value) { | ||||||||||||
const dynamicKey = `common:${key}`; | ||||||||||||
const value = t(dynamicKey); | ||||||||||||
// If the value is the same as the key log error and return the key | ||||||||||||
if (key == value) { | ||||||||||||
console.log('Error getting translation for ', key); | ||||||||||||
} | ||||||||||||
return value; | ||||||||||||
} | ||||||||||||
return value; | ||||||||||||
}; | ||||||||||||
|
||||||||||||
return { ...translate, t: tDynamic }; | ||||||||||||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,100 @@ | ||
{ | ||
"notFound": { | ||
"paragraph": "Suggestions to help you find what you're looking for:", | ||
"list": [ | ||
"Check that the web URL has been entered correctly", | ||
"Go to our", | ||
"homepage", | ||
"and browse through our past and current engagements", | ||
"Telephone Device for the Deaf (TDD) across B.C.: 711", | ||
"If you would like to email us, please contact *********@gov.bc.ca." | ||
], | ||
"header": [ | ||
"The page you're looking for cannot be found.", | ||
"The page you're looking for might have been removed, moved or is temporarily unavailable." | ||
] | ||
}, | ||
"notAvailable": { | ||
"label": "Sorry, this engagement is not available." | ||
}, | ||
"footer": { | ||
"body": "The B.C. Public Service acknowledges the territories of First Nations around B.C. and is grateful to carry out our work on these lands. We acknowledge the rights, interests, priorities, and concerns of all Indigenous Peoples - First Nations, Métis and Inuit - respecting and acknowledging their distinct cultures, histories, rights, laws, and governments.", | ||
"connectWithUs": "CONNECT WITH US", | ||
"moreInfo": "MORE INFO", | ||
"home": "Home", | ||
"accessibility": "Accessibility", | ||
"aboutGov": "About gov.bc.ca", | ||
"copyright": "Copyright", | ||
"disclaimer": "Disclaimer", | ||
"login": "Admin Login", | ||
"privacy": "Privacy", | ||
"copyrightNotice": "© 2023 Government of British Columbia", | ||
"defaultLogo": "British Columbia Logo" | ||
}, | ||
"feedback": { | ||
"websiteFeedback": "Website Feedback", | ||
"notification": { | ||
"success": "Your Feedback has been sent.", | ||
"error": "Error occurred while sending your feedback." | ||
}, | ||
"submitModal": { | ||
"header": "Thank you for your feedback", | ||
"button": "Close" | ||
}, | ||
"feedbackModal": { | ||
"label": [ | ||
"How do you like our feedback platform?", | ||
"What else would you like to share with us?" | ||
], | ||
"disclaimer": "Please do not include any personal information in your feedback. Feedback that includes personal information will be deleted.", | ||
"button": "Submit" | ||
} | ||
}, | ||
"landingPage": { | ||
"tile": { | ||
"error": "Error while loading", | ||
"status": "Status:" | ||
} | ||
}, | ||
"comment": { | ||
"admin": { | ||
"review": { | ||
"threatTextOne": "Select this option if there is a threat/menace in the comment(s). No email will be sent. Contact", | ||
"threatTextTwo": "at" | ||
} | ||
} | ||
}, | ||
"landing": { | ||
"filters": { | ||
"drawer": { | ||
"openButton": "Filter", | ||
"title": "Filter Engagements", | ||
"apply": "Apply Filters", | ||
"statusFilter": "Engagement Status", | ||
"filterHeader": "Filter by {0}" | ||
}, | ||
"clear": "Clear Filters", | ||
"search": "Search Engagements", | ||
"searchPlaceholder": "Engagement Title", | ||
"status": { | ||
"all": "All Engagements", | ||
"open": "Open Engagements", | ||
"closed": "Closed Engagements", | ||
"upcoming": "Upcoming Engagements" | ||
}, | ||
"aria": { | ||
"closeDrawer": "Close filter options", | ||
"openDrawer": "Open more filter options", | ||
"deleteFilterChip": "{0} filter - press to remove", | ||
"metadataFilterChip": "{0} filter - {1}", | ||
"selected": "Applied", | ||
"notSelected": "Not Applied", | ||
"applyFilters": "Apply Filters and close filter options", | ||
"statusFilter": "Engagement Status Selector - {0} selected" | ||
} | ||
} | ||
}, | ||
"common": { | ||
"logout": "Logout" | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In reading this code, one would expect
supportedLanguages
to be a list of languages. I think adding thecommon
entry could be confusing, although I can see that it simplifies the work a little bit.For readability, I'd recommend either renaming
Languages
toLocaleFiles
or some other solution that can make things a bit easier to understand.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Separated the code to load a common translation file