Try to fix lang select #875
Conversation
There was a problem hiding this comment.
This change wasn't working for me on a fresh page and then I noticed the language state was changing from starting in the "en" form to "English" after selecting it in the ChooseLanguage component. The value label confusion was causing problems everywhere it seems! If we switch over to the shortName key I its a lot easier to make sense of these changes.
| function findLanguageByValue(value: string) { | ||
| return ( | ||
| COMBINED_OPTIONS.find((language) => language.value === value) ?? | ||
| EN_OPTION | ||
| ); | ||
| } |
There was a problem hiding this comment.
This function is trying to find the Language object based on the value that is stored in localStorage or state which is acutally the shortName but as you'll se below we are searching for the form value based on the shortname already we don't need this function anymore and it can be removed
| const [_chooseLanguageForm, { Form, Field }] = | ||
| createForm<ChooseLanguageForm>({ | ||
| initialValues: { | ||
| selectedLanguage: findLanguageByValue(state.lang ?? "").value |
There was a problem hiding this comment.
this is selecting the default value to display the user in the select form, but since we are using the shortName as the returned value of the selectField we should still use shortName here
selectedLanguage: state.lang ?? ""
| actions.saveLanguage(findLanguageByValue(f.selectedLanguage).value); | ||
|
|
||
| await i18n.changeLanguage( | ||
| findLanguageByValue(f.selectedLanguage).label |
There was a problem hiding this comment.
these values are saving the state and passing the new language to the i18n api and setting the new lang state so again they should be using the shortName and with the following code we actually do not need the findLanguageByValue() function
actions.saveLanguage(f.selectedLanguage);
await i18n.changeLanguage(f.selectedLanguage);
| {({ value }) => ( | ||
| <option | ||
| selected={field.value === value} | ||
| value={value} |
There was a problem hiding this comment.
Since we are already iterating over the COMBINED_OPTIONS object we already have access to both value and shortName and can simply select the shortname to be sent to the i18n api while displaying the values to the user
<For each={COMBINED_OPTIONS}>
{({ value, shortName }) => (
<option
selected={field.value === shortName}
value={shortName}
>
{value}
</option>
)}
</For>
No description provided.