(fix) Fix rules of hooks violations #272
Conversation
|
|
||
| export const ProgramEnrollmentSubmissionAction: PostSubmissionAction = { | ||
| applyAction: async function ({ patient, encounters, sessionMode }, config) { | ||
| const encounter = encounters[0]; | ||
| const encounterLocation = encounter.location['uuid']; | ||
| const { t } = useTranslation(); | ||
| const t = window.i18next.t; |
There was a problem hiding this comment.
@ibacher is there a better approach for getting the t function for use outside of React components? I don't remember. Also, I've not tested whether this works as expected.
There was a problem hiding this comment.
If you add i18next as a peer dep, you should just be able to do:
import { t } from ‘i18next’;
Which is cleaner.
In normal components, we set the default namespace via a I18nextProvider. The raw t() function won’t pull from that context, so we’ll need to somehow set the namespace here for things to work as expected; otherwise it’ll always return a null object.
There was a problem hiding this comment.
@vasharma05 how can I set the namespace here as Ian suggested?
There was a problem hiding this comment.
Hi @denniskigen!
You can use the translateFrom function present in the esm-framework for the translation.
how can I set the namespace here as Ian suggested?
The module name is the namespace for the respective app.
But please take care that you add a comment with `// t('key', 'default')
Thanks!
|
Size Change: +55 B (0%) Total Size: 1.12 MB ℹ️ View Unchanged
|
denniskigen
force-pushed
the
fix/rules-of-hooks
branch
from
baf99e5
to
813bbc9
Compare
| description: t( | ||
| 'cannotEnrollPatientToProgram', | ||
| 'This patient is already enrolled in the selected program', | ||
| ), |
There was a problem hiding this comment.
| description: t( | |
| 'cannotEnrollPatientToProgram', | |
| 'This patient is already enrolled in the selected program', | |
| ), | |
| // t( 'cannotEnrollPatientToProgram', 'This patient is already enrolled in the selected program') | |
| description: translateFrom( | |
| '@openmrs/esm-form-engine-lib', | |
| 'cannotEnrollPatientToProgram', | |
| 'This patient is already enrolled in the selected program', | |
| ), |
There was a problem hiding this comment.
Hhmmm curious whether that would work. We may have to add the translations to the form engine app and instead:
description: translateFrom(
'@openmrs/esm-form-engine-app',
'cannotEnrollPatientToProgram',
'This patient is already enrolled in the selected program',
)There was a problem hiding this comment.
Yeah, @openmrs/esm-form-engine-lib wouldn't work without some additional hacking in the i18next "backend". We only support loading translations for things on the import map by default.
There was a problem hiding this comment.
We may have to add the translations to the form engine app and instead:
Wait, why?
There was a problem hiding this comment.
Because it's not part of the import-map so at startup, the app-shell won't pickup the resource bundles
There was a problem hiding this comment.
In short, if we have the translation present in the {lang}.json file, then whenever a form is loaded, the {lang}.json is loaded dynamically and hence all the translations in the form-engine-lib is present in the window.i18n, under the namespace @openmrs/form-engine-lib
Thanks!
There was a problem hiding this comment.
Yes you're right @vasharma05. The i18n setup in the form-engine reconciles with the global one so theoretically it should work.
There was a problem hiding this comment.
That's right... I forgot about that.
There was a problem hiding this comment.
@vasharma05 Well, yes, but translateFrom() is also basically equivalent to:
import { i18n: { t } } from 'i18next';
// ...
t('key', { ns: moduleName });Which would be functionally identical.
There was a problem hiding this comment.
Yes @ibacher, but when I tried this during the hackathon, it didn't work
The i18next was different from window.i18n, didn't get time to break down into it.
denniskigen
force-pushed
the
fix/rules-of-hooks
branch
from
3c044b9
to
a58a2d9
Compare
* (fix) Fix rules of hooks violations * Fixup translation function
Requirements
Summary
Fixes two violations of the rules of hooks as flagged by ESLint via the react-hooks rules of hooks rule.
Screenshots
Related Issue
Other