i18n fixes 9 (#8200)

* Start fixing mentor-registration modal

* Quick fix

* Better fix

Author: dem4ron

app/javascript/components/modals/mentor-registration-modal/ChooseTrackStep.tsx

@@ -3,6 +3,7 @@
 import React from 'react'
 import { TrackSelector } from '../../mentoring/TrackSelector'
 import { useAppTranslation } from '@/i18n/useAppTranslation'
+import { Trans } from 'react-i18next'
 
 export type Links = {
   tracks: string
@@ -23,7 +24,15 @@ export const ChooseTrackStep = ({
   return (
     <section className="tracks-section">
       <h2>{t('chooseTrackStep.selectTracks')}</h2>
-      <p>{t('chooseTrackStep.allowsUsToShow')}</p>
+      <p>
+        {
+          <Trans
+            i18nKey="chooseTrackStep.allowsUsToShow"
+            ns="components/modals/mentor-registration-modal"
+            components={[<strong />]}
+          />
+        }
+      </p>
       <TrackSelector
         tracksEndpoint={links.tracks}
         selected={selected}

app/javascript/components/modals/mentor-registration-modal/CommitStep.tsx

@@ -43,7 +43,6 @@ export const CommitStep = ({
           accept_terms: true,
         }),
       })
-
       return fetch
     },
     onSuccess: () => {
@@ -54,16 +53,10 @@ export const CommitStep = ({
   const { t } = useAppTranslation('components/modals/mentor-registration-modal')
 
   const [numChecked, setNumChecked] = useState(0)
-  const handleChange = useCallback(
-    (e) => {
-      if (e.target.checked) {
-        setNumChecked(numChecked + 1)
-      } else {
-        setNumChecked(numChecked - 1)
-      }
-    },
-    [numChecked]
-  )
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const { checked } = e.target
+    setNumChecked((prev) => (checked ? prev + 1 : prev - 1))
+  }, [])
 
   const handleSubmit = useCallback(() => {
     mutation()
@@ -75,47 +68,60 @@ export const CommitStep = ({
         <h2>{t('commitStep.title')}</h2>
         <p>{t('commitStep.description')}</p>
         <ReputationInfo />
+
         <div className="commitment">
           <h3>{t('commitStep.youAgreeTo')}</h3>
 
           <Checkbox onChange={handleChange}>
-            <Trans
-              ns="components/modals/mentor-registration-modal"
-              i18nKey="commitStep.codeOfConduct"
-              components={{
-                a: (
+            <span>
+              <Trans
+                ns="components/modals/mentor-registration-modal"
+                i18nKey="commitStep.codeOfConduct"
+                components={[
                   <a
+                    key="link"
                     href={links.codeOfConduct}
                     target="_blank"
                     rel="noreferrer"
-                  />
-                ),
-                icon: <Icon icon="external-link" alt="Opens in a new tab" />,
-              }}
-            />
+                  />,
+                  <Icon
+                    key="icon"
+                    icon="external-link"
+                    alt="Opens in a new tab"
+                  />,
+                ]}
+              />
+            </span>
           </Checkbox>
 
-          <Checkbox onChange={handleChange}>{t('commitStep.beKind')}</Checkbox>
+          <Checkbox onChange={handleChange}>
+            <span>{t('commitStep.beKind')}</span>
+          </Checkbox>
 
           <Checkbox onChange={handleChange}>
-            <Trans
-              ns="components/modals/mentor-registration-modal"
-              i18nKey="commitStep.intellectualHumility"
-              components={{
-                a: (
+            <span>
+              <Trans
+                ns="components/modals/mentor-registration-modal"
+                i18nKey="commitStep.intellectualHumility"
+                components={[
                   <a
+                    key="link"
                     href={links.intellectualHumility}
                     target="_blank"
                     rel="noreferrer"
-                  />
-                ),
-                icon: <Icon icon="external-link" alt="Opens in a new tab" />,
-              }}
-            />
+                  />,
+                  <Icon
+                    key="icon"
+                    icon="external-link"
+                    alt="Opens in a new tab"
+                  />,
+                ]}
+              />
+            </span>
           </Checkbox>
 
           <Checkbox onChange={handleChange}>
-            {t('commitStep.noAgendas')}
+            <span>{t('commitStep.noAgendas')}</span>
           </Checkbox>
         </div>
 
@@ -137,10 +143,12 @@ export const CommitStep = ({
             <GraphicalIcon icon="arrow-right" />
           </FormButton>
         </div>
+
         <ErrorBoundary>
           <ErrorMessage error={error} defaultError={DEFAULT_ERROR} />
         </ErrorBoundary>
       </div>
+
       <div className="rhs">
         <GraphicalIcon icon="mentoring-screen" category="graphics" />
       </div>

app/javascript/components/modals/mentor-registration-modal/commit-step/ReputationInfo.tsx

@@ -3,6 +3,7 @@
 import React from 'react'
 import { GraphicalIcon } from '../../../common'
 import { useAppTranslation } from '@/i18n/useAppTranslation'
+import { Trans } from 'react-i18next'
 
 export const ReputationInfo = (): JSX.Element => {
   const { t } = useAppTranslation(
@@ -14,7 +15,15 @@ export const ReputationInfo = (): JSX.Element => {
         <GraphicalIcon icon="reputation" />
         <div className="info">
           <h3>{t('reputationInfo.reputationAndTestimonials')}</h3>
-          <p>{t('reputationInfo.gainReputation')}</p>
+          <p>
+            {
+              <Trans
+                i18nKey="reputationInfo.gainReputation"
+                ns="components/modals/mentor-registration-modal/commit-step"
+                components={[<strong />]}
+              />
+            }
+          </p>
         </div>
       </div>
     </div>

app/javascript/i18n/en/components-modals-mentor-registration-modal-commit-step.ts

@@ -2,5 +2,5 @@
 export default {
   'reputationInfo.reputationAndTestimonials': 'Reputation & testimonials',
   'reputationInfo.gainReputation':
-    "You'll gain <strong>6 reputation</strong> for each successful mentoring session. At the end of every discussion, students are invited to leave you a testimonial.",
+    "You'll gain <0>6 reputation</0> for each successful mentoring session. At the end of every discussion, students are invited to leave you a testimonial.",
 }

app/javascript/i18n/en/components-modals-mentor-registration-modal.ts

@@ -4,17 +4,17 @@ export default {
   'commitStep.description':
     "Mentoring on Exercism can be an incredible experience for students and mentors alike. To ensure it remains a positive place for everyone, we ask all mentors to affirm Exercism's values before they mentor their first solution.",
   'commitStep.youAgreeTo': 'You agree to:',
-  'commitStep.codeOfConduct': 'Abide by the <a>Code of Conduct <icon/></a>',
+  'commitStep.codeOfConduct': 'Abide by the <0>Code of Conduct <1/></0>',
   'commitStep.beKind':
     "Be patient, empathic and kind to those you're mentoring",
   'commitStep.intellectualHumility':
-    'Demonstrate <a>intellectual humility <icon/></a>',
+    'Demonstrate <0>intellectual humility <1/></0>',
   'commitStep.noAgendas': 'Not use Exercism to promote personal agendas',
   'commitStep.back': 'Back',
   'commitStep.continue': 'Continue',
   'chooseTrackStep.selectTracks': 'Select the tracks you want to mentor',
   'chooseTrackStep.allowsUsToShow':
-    'This allows us to only show you the solutions you want to mentor. <strong>Don’t worry, you can change these selections at anytime.</strong>',
+    'This allows us to only show you the solutions you want to mentor. <0>Don’t worry, you can change these selections at anytime.</0>',
   'stepIndicator.step': 'Step {{num}}: {{label}}',
   'closeButton.closeModal': 'Close the modal',
   'congratulationsStep.youAreNowMentor': 'You’re now a mentor!',