fix(i18n): add i18next keys for ShowProjectLinks (#41239)

* Add required keys for translating ShowProjectLinks

* Use i18next keys for translation

client/i18n/locales/english/translations.json

@@ -483,6 +483,83 @@
     "executive": "Executive Director, freeCodeCamp.org",
     "verify": "Verify this certification at {{certURL}}",
     "issued": "Issued",
-    "fulltext": "<0>This certifies that</0> <1>{{user}}</1> <2>has successfully completed the freeCodeCamp.org</2> <3>{{title}}</3> <4>Developer Certification, representing approximately {{time}} hours of coursework.</4>"
+    "fulltext": "<0>This certifies that</0> <1>{{user}}</1> <2>has successfully completed the freeCodeCamp.org</2> <3>{{title}}</3> <4>Developer Certification, representing approximately {{time}} hours of coursework.</4>",
+    "project": {
+      "heading-legacy-full-stack": "As part of this Legacy Full Stack certification, {{user}} completed the following certifications:",
+      "heading": "As part of this certification, {{user}} built the following projects and got all automated test suites to pass:",
+      "solution": "solution",
+      "source": "source",
+      "footnote": "If you suspect that any of these projects violate the <2>academic honesty policy</2>, please <5>report this to our team</5>.",
+      "title": {
+        "Build a Personal Portfolio Webpage": "Build a Personal Portfolio Webpage",
+        "Build a Random Quote Machine": "Build a Random Quote Machine",
+        "Build a 25 + 5 Clock": "Build a 25 + 5 Clock",
+        "Build a JavaScript Calculator": "Build a JavaScript Calculator",
+        "Show the Local Weather": "Show the Local Weather",
+        "Use the TwitchTV JSON API": "Use the TwitchTV JSON API",
+        "Stylize Stories on Camper News": "Stylize Stories on Camper News",
+        "Build a Wikipedia Viewer": "Build a Wikipedia Viewer",
+        "Build a Tic Tac Toe Game": "Build a Tic Tac Toe Game",
+        "Build a Simon Game": "Build a Simon Game",
+        "Timestamp Microservice": "Timestamp Microservice",
+        "Request Header Parser Microservice": "Request Header Parser Microservice",
+        "URL Shortener Microservice": "URL Shortener Microservice",
+        "Image Search Abstraction Layer": "Image Search Abstraction Layer",
+        "File Metadata Microservice": "File Metadata Microservice",
+        "Build a Voting App": "Build a Voting App",
+        "Build a Nightlife Coordination App": "Build a Nightlife Coordination App",
+        "Chart the Stock Market": "Chart the Stock Market",
+        "Manage a Book Trading Club": "Manage a Book Trading Club",
+        "Build a Pinterest Clone": "Build a Pinterest Clone",
+        "Build a Markdown Previewer": "Build a Markdown Previewer",
+        "Build a Camper Leaderboard": "Build a Camper Leaderboard",
+        "Build a Recipe Box": "Build a Recipe Box",
+        "Build the Game of Life": "Build the Game of Life",
+        "Build a Roguelike Dungeon Crawler Game": "Build a Roguelike Dungeon Crawler Game",
+        "Visualize Data with a Bar Chart": "Visualize Data with a Bar Chart",
+        "Visualize Data with a Scatterplot Graph": "Visualize Data with a Scatterplot Graph",
+        "Visualize Data with a Heat Map": "Visualize Data with a Heat Map",
+        "Show National Contiguity with a Force Directed Graph": "Show National Contiguity with a Force Directed Graph",
+        "Map Data Across the Globe": "Map Data Across the Globe",
+        "Metric-Imperial Converter": "Metric-Imperial Converter",
+        "Issue Tracker": "Issue Tracker",
+        "Personal Library": "Personal Library",
+        "Stock Price Checker": "Stock Price Checker",
+        "Anonymous Message Board": "Anonymous Message Board",
+        "Build a Tribute Page": "Build a Tribute Page",
+        "Build a Survey Form": "Build a Survey Form",
+        "Build a Product Landing Page": "Build a Product Landing Page",
+        "Build a Technical Documentation Page": "Build a Technical Documentation Page",
+        "Palindrome Checker": "Palindrome Checker",
+        "Roman Numeral Converter": "Roman Numeral Converter",
+        "Caesars Cipher": "Caesars Cipher",
+        "Telephone Number Validator": "Telephone Number Validator",
+        "Cash Register": "Cash Register",
+        "Build a Drum Machine": "Build a Drum Machine",
+        "Visualize Data with a Choropleth Map": "Visualize Data with a Choropleth Map",
+        "Visualize Data with a Treemap Diagram": "Visualize Data with a Treemap Diagram",
+        "Exercise Tracker": "Exercise Tracker",
+        "Sudoku Solver": "Sudoku Solver",
+        "American British Translator": "American British Translator",
+        "Arithmetic Formatter": "Arithmetic Formatter",
+        "Time Calculator": "Time Calculator",
+        "Budget App": "Budget App",
+        "Polygon Area Calculator": "Polygon Area Calculator",
+        "Probability Calculator": "Probability Calculator",
+        "Mean-Variance-Standard Deviation Calculator": "Mean-Variance-Standard Deviation Calculator",
+        "Demographic Data Analyzer": "Demographic Data Analyzer",
+        "Medical Data Visualizer": "Medical Data Visualizer",
+        "Page View Time Series Visualizer": "Page View Time Series Visualizer",
+        "Sea Level Predictor": "Sea Level Predictor",
+        "Port Scanner": "Port Scanner",
+        "SHA-1 Password Cracker": "SHA-1 Password Cracker",
+        "Secure Real Time Multiplayer Game": "Secure Real Time Multiplayer Game",
+        "Rock Paper Scissors": "Rock Paper Scissors",
+        "Cat and Dog Image Classifier": "Cat and Dog Image Classifier",
+        "Book Recommendation Engine using KNN": "Book Recommendation Engine using KNN",
+        "Linear Regression Health Costs Calculator": "Linear Regression Health Costs Calculator",
+        "Neural Network SMS Text Classifier": "Neural Network SMS Text Classifier"
+      }
+    }
   }
 }

client/src/client-only-routes/ShowProjectLinks.js

@@ -7,6 +7,7 @@ import { Spacer, Link } from '../components/helpers';
 import { projectMap, legacyProjectMap } from '../resources/certAndProjectMap';
 import ProjectModal from '../components/SolutionViewer/ProjectModal';
 import { find, first } from 'lodash';
+import { Trans, useTranslation } from 'react-i18next';
 
 const propTypes = {
   certName: PropTypes.string,
@@ -44,6 +45,8 @@ const ShowProjectLinks = props => {
 
   const handleSolutionModalHide = () => setSolutionState(initSolutionState);
 
+  const { t } = useTranslation();
+
   const getProjectSolution = (projectId, projectTitle) => {
     const {
       user: { completedChallenges }
@@ -73,7 +76,7 @@ const ShowProjectLinks = props => {
           onClick={onClickHandler}
           className='project-link-button-override'
         >
-          solution
+          {t('certification.project.solution')}
         </button>
       );
     }
@@ -81,11 +84,11 @@ const ShowProjectLinks = props => {
       return (
         <>
           <a href={solution} rel='noopener noreferrer' target='_blank'>
-            solution
+            {t('certification.project.solution')}
           </a>
           ,{' '}
           <a href={githubLink} rel='noopener noreferrer' target='_blank'>
-            source
+            {t('certification.project.source')}
           </a>
         </>
       );
@@ -99,13 +102,13 @@ const ShowProjectLinks = props => {
           rel='noopener noreferrer'
           target='_blank'
         >
-          solution
+          {t('certification.project.solution')}
         </a>
       );
     }
     return (
       <button className='project-link-button-override' onClick={onClickHandler}>
-        solution
+        {t('certification.project.solution')}
       </button>
     );
   };
@@ -132,7 +135,7 @@ const ShowProjectLinks = props => {
               rel='noopener noreferrer'
               target='_blank'
             >
-              {cert.title}
+              {t(`certification.project.title.${cert.title}`, cert.title)}
             </a>
           </li>
         );
@@ -142,7 +145,7 @@ const ShowProjectLinks = props => {
       ({ link, title, id }) => (
         <li key={id}>
           <Link to={link} className='project-link'>
-            {title}
+            {t(`certification.project.title.${title}`, title)}
           </Link>
           : {getProjectSolution(id, title)}
         </li>
@@ -158,9 +161,12 @@ const ShowProjectLinks = props => {
   const { files, isOpen, projectTitle, solution } = solutionState;
   return (
     <div>
-      {certName === 'Legacy Full Stack'
+      {t(
-        ? `As part of this Legacy Full Stack certification, ${name} completed the following certifications:`
+        certName === 'Legacy Full Stack'
-        : `As part of this certification, ${name} built the following projects and got all automated test suites to pass:`}
+          ? 'certification.project.heading-legacy-full-stack'
+          : 'certification.project.heading',
+        { user: name }
+      )}
       <Spacer />
       <ul>{renderProjectsFor(certName)}</ul>
       <Spacer />
@@ -173,23 +179,25 @@ const ShowProjectLinks = props => {
           solution={solution}
         />
       ) : null}
-      If you suspect that any of these projects violate the{' '}
+      <Trans i18nKey='certification.project.footnote'>
-      <a
+        If you suspect that any of these projects violate the{' '}
-        href='https://www.freecodecamp.org/news/academic-honesty-policy/'
+        <a
-        target='_blank'
+          href='https://www.freecodecamp.org/news/academic-honesty-policy/'
-        rel='noreferrer'
+          target='_blank'
-      >
+          rel='noreferrer'
-        academic honesty policy
+        >
-      </a>
+          academic honesty policy
-      , please{' '}
+        </a>
-      <a
+        , please{' '}
-        href={`/user/${username}/report-user`}
+        <a
-        target='_blank'
+          href={`/user/${username}/report-user`}
-        rel='noreferrer'
+          target='_blank'
-      >
+          rel='noreferrer'
-        report this to our team
+        >
-      </a>
+          report this to our team
-      .
+        </a>
+        .
+      </Trans>
     </div>
   );
 };