Checklist:

• I have read and followed the contribution guidelines.
• I have read and followed the how to open a pull request guide.
• My pull request targets the main branch of freeCodeCamp.
• I have tested these changes either locally on my machine, or Gitpod.

Closes #61818

Intro

First I want to say thank you to the freeCodeCamp maintainers for helping make education more accessible 🙇.

The i18next team is planning to release a new API that is designed for TypeScript codebases with large translation sets (like freeCodeCamp).

Here's the issue, if you're curious: i18next/i18next#2322

To make the transition smoother for larger teams (like freeCodeCamp!), we've implemented a codemod, which was used to generate this PR.

Demo

To make the change easier to understand, I created a quick demo showing a before and after.

Before

• User needs to know where the translations are located on the file system
• User needs to navigate to the correct translation file
• User needs to sift through the translations to find the one they're looking for
• User needs to create the path

Impact

This makes the system more difficult to change without accidentally introducing bugs.

For example, if the path icons.avatar changes, the user needs to remember to grep icons.avatar to find all the places where its referenced, or risk breaking the translation

After

• User does not need to know where translations are located on the file system to use a translation
• User doesn't need to leave the call site to find the correct translation
• User can explore the translations one-level at a time
• User can use auto-completion to find the correct translation
• User can jump to the translation in question, if they need to see the source

Impact

This makes the system easier to change, because if the location of a translation changes, the user will get a type error when running pnpm lint:ts.

It also reduces the ramp-up time for new users who want to contribute. They don't (necessarily) need to know where translations are located to use a translation. This makes the process of translating freeCodeCamp into different languages more accessible overall.

Description

Here are the outstanding issues after applying the codemod:

$ pnpm run lint:ts
.
.
.
Found 43 errors in 30 files.

Errors  Files
     2  client/src/client-only-routes/show-certification.tsx:451
     1  client/src/client-only-routes/show-project-links.tsx:148
     2  client/src/components/Donation/donation-modal-body.tsx:83
     1  client/src/components/layouts/default.tsx:203
     1  client/src/components/profile/components/certifications.tsx:34
     2  client/src/components/profile/components/time-line.tsx:278
     1  client/src/components/profile/components/username.tsx:163
     1  client/src/components/Progress/progress.tsx:77
     1  client/src/components/search/searchBar/search-bar-optimized.tsx:20
     1  client/src/components/search/searchBar/search-bar.tsx:177
     4  client/src/components/settings/certification.tsx:300
     1  client/src/components/share/use-share.test.tsx:27
     1  client/src/components/share/use-share.tsx:41
     2  client/src/templates/Challenges/classic/editor.tsx:924
     1  client/src/templates/Challenges/classic/show.tsx:260
     1  client/src/templates/Challenges/codeally/show.tsx:151
     2  client/src/templates/Challenges/components/bread-crumb.tsx:30
     1  client/src/templates/Challenges/components/challenge-heading.tsx:24
     1  client/src/templates/Challenges/components/help-modal.tsx:47
     2  client/src/templates/Challenges/components/independent-lower-jaw.tsx:68
     1  client/src/templates/Challenges/exam/show.tsx:357
     1  client/src/templates/Challenges/fill-in-the-blank/show.tsx:188
     1  client/src/templates/Challenges/generic/show.tsx:126
     1  client/src/templates/Challenges/ms-trophy/show.tsx:161
     1  client/src/templates/Challenges/projects/backend/show.tsx:169
     1  client/src/templates/Challenges/projects/frontend/show.tsx:138
     1  client/src/templates/Challenges/quiz/show.tsx:139
     2  client/src/templates/Introduction/components/block.tsx:127
     4  client/src/templates/Introduction/components/super-block-accordion.tsx:123
     1  client/src/templates/Introduction/intro.tsx:37

Closing thoughts

The migration is mostly a mechanical change. All that's left are a few places where props need to have a slightly narrower type.

Alternatively, you could also change the type of the resources in your i18next config to be a little wider, if making the types narrower proves to be more trouble than it's worth.

The migration also found a few probable bugs:

• client/src/client-only-routes/show-project-links.tsx
• client/src/components/Donation/donation-modal-body.tsx

Let me know if I can answer any questions about the change, and of course please don't hesitate to share any feedback about the change you might have.