refactor: use i18next to toggle languages

Use i18next to hold currently selected language rather than use our own internal state flag in PublicFormContext. That way, a form submitter can control the language used across the entire Form service. - Rework LanguageControl and PublicFormContext to use i18next to hold currently selected language, falling back on `Language.ENGLISH` - Rework components to lookup current lang from `useTranslation()`, not `PublicFormContext.selectedPublicFormLanguage` or prop passing
opengovsg · Dec 16, 2024 · 9be50f2 · 9be50f2
1 parent 4d1fae5
commit 9be50f2
Show file tree

Hide file tree

Showing 57 changed files with 259 additions and 488 deletions.
diff --git a/frontend/src/components/Checkbox/Checkbox.tsx b/frontend/src/components/Checkbox/Checkbox.tsx
@@ -28,11 +28,6 @@ export interface CheckboxProps extends ChakraCheckboxProps {
    * Background and shadow colors of checkbox.
    */
   colorScheme?: FieldColorScheme
-
-  /**
-   * Selected language to get translated label.
-   */
-  selectedLanguage?: Language
 }
 
 type CheckboxWithOthers = ComponentWithAs<'input', CheckboxProps> & {
@@ -99,7 +94,7 @@ const OthersWrapper = ({
  * Wrapper for the checkbox part of the Others option.
  */
 const OthersCheckbox = forwardRef<CheckboxProps, 'input'>((props, ref) => {
-  const { t } = useTranslation()
+  const { t, i18n } = useTranslation()
   const { checkboxRef, inputRef } = useCheckboxOthers()
   // Passing all props for cleanliness but size and colorScheme are the most relevant
   const styles = useMultiStyleConfig(CHECKBOX_THEME_KEY, props)
@@ -115,7 +110,7 @@ const OthersCheckbox = forwardRef<CheckboxProps, 'input'>((props, ref) => {
   }
 
   const othersLabel =
-    OTHERS_TRANSLATED_LABEL[props.selectedLanguage ?? Language.ENGLISH]
+    OTHERS_TRANSLATED_LABEL[(i18n.language as Language) ?? Language.ENGLISH]
 
   return (
     <Checkbox

diff --git a/frontend/src/components/Dropdown/SingleSelect/SingleSelectProvider.tsx b/frontend/src/components/Dropdown/SingleSelect/SingleSelectProvider.tsx
@@ -49,8 +49,6 @@ export interface SingleSelectProviderProps<
   /** Variant of component */
   variant?: 'clear'
   fullWidth?: boolean
-  /** Selected language of default placeholder prop */
-  selectedLanguage?: Language
 }
 export const SingleSelectProvider = ({
   items: rawItems,
@@ -75,11 +73,12 @@ export const SingleSelectProvider = ({
   comboboxProps = {},
   variant,
   fullWidth = false,
-  selectedLanguage = Language.ENGLISH,
 }: SingleSelectProviderProps): JSX.Element => {
   const { items, getItemByValue } = useItems({ rawItems })
   const [isFocused, setIsFocused] = useState(false)
-  const { t } = useTranslation()
+  const { t, i18n } = useTranslation()
+
+  const selectedLanguage = i18n.language as Language
 
   const { isInvalid, isDisabled, isReadOnly, isRequired } = useFormControlProps(
     {

diff --git a/frontend/src/components/Field/Attachment/Attachment.tsx b/frontend/src/components/Field/Attachment/Attachment.tsx
@@ -101,11 +101,6 @@ export interface AttachmentProps extends UseFormControlProps<HTMLElement> {
    * Override callback function that is invoked when remove button is clicked.
    */
   handleRemoveFileOverride?: () => void
-
-  /**
-   * Selected language used for default labels
-   */
-  selectedLanguage?: Language
 }
 
 export const Attachment = forwardRef<AttachmentProps, 'div'>(
@@ -126,12 +121,11 @@ export const Attachment = forwardRef<AttachmentProps, 'div'>(
       isRemoveDisabled,
       handleDownloadFileOverride,
       handleRemoveFileOverride,
-      selectedLanguage = Language.ENGLISH,
       ...props
     },
     ref,
   ) => {
-    const { t } = useTranslation()
+    const { t, i18n } = useTranslation()
     // Merge given props with any form control props, if they exist.
     const inputProps = useFormControl(props)
     // id to set on the rendered max size FormFieldMessage component.
@@ -307,6 +301,8 @@ export const Attachment = forwardRef<AttachmentProps, 'div'>(
       })
     }, [getInputProps, inputProps, name])
 
+    const selectedLanguage = i18n.language as Language
+
     return (
       <AttachmentStylesProvider value={styles}>
         <Box __css={styles.container}>

diff --git a/frontend/src/components/Field/YesNo/YesNo.tsx b/frontend/src/components/Field/YesNo/YesNo.tsx
@@ -59,18 +59,16 @@ export interface YesNoProps {
    * Color scheme of the component to render. Defaults to `primary`.
    */
   colorScheme?: FieldColorScheme
-
-  selectedLanguage?: Language
 }
 
 /**
  * YesNo field component.
  */
 export const YesNo = forwardRef<YesNoProps, 'input'>(
-  ({ colorScheme, selectedLanguage = Language.ENGLISH, ...props }, ref) => {
+  ({ colorScheme, ...props }, ref) => {
     const formControlProps = useFormControlProps(props)
     const { getRootProps, getRadioProps, onChange } = useRadioGroup(props)
-    const { t } = useTranslation()
+    const { t, i18n } = useTranslation()
 
     const groupProps = getRootProps()
     const [noProps, yesProps] = useMemo(() => {
@@ -97,6 +95,7 @@ export const YesNo = forwardRef<YesNoProps, 'input'>(
       return [noRadioProps, yesRadioProps]
     }, [formControlProps, getRadioProps, props.name])
 
+    const selectedLanguage = i18n.language as Language
     const yesLabel = YES_NO_TRANSLATIONS[selectedLanguage].Yes
     const noLabel = YES_NO_TRANSLATIONS[selectedLanguage].No
 
@@ -108,7 +107,7 @@ export const YesNo = forwardRef<YesNoProps, 'input'>(
           {...noProps}
           onChange={(value) => onChange(value as YesNoOptionValue)}
           leftIcon={BiX}
-          label={yesLabel ?? t('features.adminForm.sidebar.fields.yesNo.no')}
+          label={noLabel ?? t('features.adminForm.sidebar.fields.yesNo.no')}
           // Ref is set here for tracking current value, and also so any errors
           // can focus this input.
           ref={ref}
@@ -120,7 +119,7 @@ export const YesNo = forwardRef<YesNoProps, 'input'>(
           {...yesProps}
           onChange={(value) => onChange(value as YesNoOptionValue)}
           leftIcon={BiCheck}
-          label={noLabel ?? t('features.adminForm.sidebar.fields.yesNo.yes')}
+          label={yesLabel ?? t('features.adminForm.sidebar.fields.yesNo.yes')}
           title={props.title}
         />
       </HStack>

diff --git a/frontend/src/components/FormEndPage/EndPageBlock.tsx b/frontend/src/components/FormEndPage/EndPageBlock.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Box, Text, VisuallyHidden } from '@chakra-ui/react'
 import { format } from 'date-fns'
 
@@ -18,7 +19,6 @@ export interface EndPageBlockProps {
   colorTheme?: FormColorTheme
   focusOnMount?: boolean
   isButtonHidden?: boolean
-  selectedLanguage: Language
 }
 
 export const EndPageBlock = ({
@@ -28,8 +28,8 @@ export const EndPageBlock = ({
   colorTheme = FormColorTheme.Blue,
   focusOnMount,
   isButtonHidden,
-  selectedLanguage,
 }: EndPageBlockProps): JSX.Element => {
+  const { i18n } = useTranslation()
   const focusRef = useRef<HTMLDivElement>(null)
   useEffect(() => {
     if (focusOnMount) {
@@ -46,7 +46,7 @@ export const EndPageBlock = ({
     },
   })
 
-  console.log(selectedLanguage)
+  const selectedLanguage = i18n.language as Language
 
   const title = getValueInSelectedLanguage({
     defaultValue: endPage.title,

diff --git a/frontend/src/components/Radio/Radio.tsx b/frontend/src/components/Radio/Radio.tsx
@@ -105,11 +105,6 @@ export interface RadioProps
    * @default true
    */
   allowDeselect?: boolean
-
-  /**
-   * Selected language to get translated label.
-   */
-  selectedLanguage?: Language
 }
 
 type RadioWithSubcomponentProps = ComponentWithAs<'input', RadioProps> & {
@@ -261,7 +256,7 @@ export const Radio = forwardRef<RadioProps, 'input'>(
  * Wrapper for the radio part of the Others option.
  */
 const OthersRadio = forwardRef<RadioProps, 'input'>((props, ref) => {
-  const { t } = useTranslation()
+  const { t, i18n } = useTranslation()
   const { othersRadioRef, othersInputRef } = useRadioGroupWithOthers()
   const { value: valueProp } = props
   const styles = useMultiStyleConfig(RADIO_THEME_KEY, {
@@ -278,9 +273,10 @@ const OthersRadio = forwardRef<RadioProps, 'input'>((props, ref) => {
     isChecked = group.value === valueProp
   }
 
+  const selectedLanguage = i18n.language as Language
   const othersLabel = useMemo(() => {
-    return OTHERS_TRANSLATED_LABEL[props?.selectedLanguage ?? Language.ENGLISH]
-  }, [props?.selectedLanguage])
+    return OTHERS_TRANSLATED_LABEL[selectedLanguage ?? Language.ENGLISH]
+  }, [selectedLanguage])
 
   useEffect(() => {
     if (isChecked) {

diff --git a/...c/features/admin-form/create/builder-and-design/BuilderAndDesignContent/StartPageView.tsx b/...c/features/admin-form/create/builder-and-design/BuilderAndDesignContent/StartPageView.tsx
@@ -240,7 +240,6 @@ export const StartPageView = () => {
                   <FormInstructions
                     content={startPage?.paragraph}
                     colorTheme={startPage?.colorTheme}
-                    title="Instructions"
                   />
                 </Box>
                 {isMobile ? (

diff --git a/frontend/src/features/admin-form/create/end-page/EndPageContent.tsx b/frontend/src/features/admin-form/create/end-page/EndPageContent.tsx
@@ -6,7 +6,6 @@ import {
   FormColorTheme,
   FormLogoState,
   FormResponseMode,
-  Language,
 } from '~shared/types'
 
 import { EndPageBlock } from '~components/FormEndPage/EndPageBlock'
@@ -121,7 +120,6 @@ export const EndPageContent = (): JSX.Element => {
                   timestamp: Date.now(),
                 }}
                 colorTheme={colorTheme ?? FormColorTheme.Blue}
-                selectedLanguage={Language.ENGLISH}
               />
             </Box>
           )}

diff --git a/frontend/src/features/admin-form/preview/PreviewFormProvider.tsx b/frontend/src/features/admin-form/preview/PreviewFormProvider.tsx
@@ -6,7 +6,7 @@ import { datadogLogs } from '@datadog/browser-logs'
 import get from 'lodash/get'
 import simplur from 'simplur'
 
-import { FormAuthType, FormResponseMode, Language } from '~shared/types/form'
+import { FormAuthType, FormResponseMode } from '~shared/types/form'
 
 import { usePreviewForm } from '~/features/admin-form/common/queries'
 import { FormNotFound } from '~/features/public-form/components/FormNotFound'
@@ -46,9 +46,6 @@ export const PreviewFormProvider = ({
     /* enabled= */ !submissionData,
   )
 
-  const [selectedPublicFormLanguage, setSelectedPublicFormLanguage] =
-    useState<Language>(Language.ENGLISH)
-
   const { data: { useFetchForSubmissions } = {} } = useEnv()
 
   const { isNotFormId, toast, vfnToastIdRef, expiryInMs, ...commonFormValues } =
@@ -342,8 +339,6 @@ export const PreviewFormProvider = ({
         isPreview: true,
         hasSingleSubmissionValidationError: false,
         hasRespondentNotWhitelistedError: false,
-        setSelectedPublicFormLanguage,
-        selectedPublicFormLanguage,
         ...commonFormValues,
         ...data,
         ...rest,

diff --git a/frontend/src/features/admin-form/template/TemplateFormProvider.tsx b/frontend/src/features/admin-form/template/TemplateFormProvider.tsx
@@ -1,10 +1,10 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useTranslation } from 'react-i18next'
 import get from 'lodash/get'
 import simplur from 'simplur'
 
-import { FormAuthType, Language } from '~shared/types/form'
+import { FormAuthType } from '~shared/types/form'
 
 import { useFormTemplate } from '~/features/admin-form/common/queries'
 import { FormNotFound } from '~/features/public-form/components/FormNotFound'
@@ -31,9 +31,6 @@ export const TemplateFormProvider = ({
   const { isNotFormId, toast, vfnToastIdRef, expiryInMs, ...commonFormValues } =
     useCommonFormProvider(formId)
 
-  const [selectedPublicFormLanguage, setSelectedPublicFormLanguage] =
-    useState<Language>(Language.ENGLISH)
-
   useEffect(() => {
     return () => {
       document.title = 'FormSG'
@@ -97,8 +94,6 @@ export const TemplateFormProvider = ({
         isPaymentEnabled: false,
         hasSingleSubmissionValidationError: false,
         hasRespondentNotWhitelistedError: false,
-        setSelectedPublicFormLanguage,
-        selectedPublicFormLanguage,
         ...commonFormValues,
         ...data,
         ...rest,

diff --git a/frontend/src/features/public-form/PublicFormContext.tsx b/frontend/src/features/public-form/PublicFormContext.tsx
@@ -9,7 +9,7 @@ import {
 import { UseQueryResult } from 'react-query'
 
 import { MultirespondentSubmissionDto } from '~shared/types'
-import { Language, PublicFormViewDto } from '~shared/types/form'
+import { PublicFormViewDto } from '~shared/types/form'
 
 import { decryptSubmission } from './utils/decryptSubmission'
 
@@ -76,12 +76,6 @@ export interface PublicFormContextProps
   setPreviousSubmission?: (
     previousSubmission: ReturnType<typeof decryptSubmission>,
   ) => void
-
-  // callback to set public form's language
-  setSelectedPublicFormLanguage: (language: Language) => void
-
-  // public form's language
-  selectedPublicFormLanguage: Language
 }
 
 export const PublicFormContext = createContext<

diff --git a/frontend/src/features/public-form/PublicFormProvider.tsx b/frontend/src/features/public-form/PublicFormProvider.tsx
@@ -29,7 +29,6 @@ import { ErrorCode } from '~shared/types/errorCodes'
 import {
   FormAuthType,
   FormResponseMode,
-  Language,
   ProductItem,
   PublicFormDto,
 } from '~shared/types/form'
@@ -205,8 +204,6 @@ export const PublicFormProvider = ({
   )
 
   const [numVisibleFields, setNumVisibleFields] = useState(0)
-  const [selectedPublicFormLanguage, setSelectedPublicFormLanguage] =
-    useState<Language>(Language.ENGLISH)
 
   // Respondent access error states
   const [
@@ -951,8 +948,6 @@ export const PublicFormProvider = ({
         previousSubmission,
         previousAttachments,
         setPreviousSubmission,
-        selectedPublicFormLanguage,
-        setSelectedPublicFormLanguage,
         ...commonFormValues,
         ...data,
         ...rest,

diff --git a/frontend/src/features/public-form/components/FormEndPage/FormEndPage.tsx b/frontend/src/features/public-form/components/FormEndPage/FormEndPage.tsx
@@ -1,6 +1,6 @@
 import { Container, Flex, Stack, StackDivider } from '@chakra-ui/react'
 
-import { FormColorTheme, FormDto, Language } from '~shared/types/form'
+import { FormColorTheme, FormDto } from '~shared/types/form'
 
 import {
   SubmissionData,
@@ -19,7 +19,6 @@ export interface FormEndPageProps {
   handleSubmitFeedback: (inputs: FeedbackFormInput) => void
   isFeedbackSectionHidden: boolean
   colorTheme: FormColorTheme
-  selectedLanguage: Language
 }
 
 export const FormEndPage = ({

diff --git a/frontend/src/features/public-form/components/FormEndPage/FormEndPageContainer.tsx b/frontend/src/features/public-form/components/FormEndPage/FormEndPageContainer.tsx
@@ -13,13 +13,7 @@ import { PaymentEndPagePreview } from './components/PaymentEndPagePreview'
 import { FormEndPage } from './FormEndPage'
 
 export const FormEndPageContainer = (): JSX.Element | null => {
-  const {
-    form,
-    formId,
-    submissionData,
-    isPreview,
-    selectedPublicFormLanguage,
-  } = usePublicFormContext()
+  const { form, formId, submissionData, isPreview } = usePublicFormContext()
   const { submitFormFeedbackMutation } = useSubmitFormFeedbackMutation(
     formId,
     submissionData?.id ?? '',
@@ -93,7 +87,6 @@ export const FormEndPageContainer = (): JSX.Element | null => {
         endPage={form.endPage}
         isFeedbackSectionHidden={isFeedbackHidden}
         handleSubmitFeedback={handleSubmitFeedback}
-        selectedLanguage={selectedPublicFormLanguage}
       />
     </Box>
   )