refactor: load translation strings from mfe settings

- Add the ability to load translation strings from the mfe plugin on tutor
fccn · Oct 9, 2024 · cd0ee8e · cd0ee8e
1 parent 144d96e
commit cd0ee8e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 36 deletions.
diff --git a/src/components/footer-links/FooterNavLinks.jsx b/src/components/footer-links/FooterNavLinks.jsx
@@ -2,38 +2,37 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { intlShape } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
-import messages from '../Footer.messages';
 import parseEnvSettings from '../../utils/parseData';
 
-const FooterLinkItem = ({ intl, link }) => {
-  const getLocaleCode = (intl.locale.split('-')[0] === 'pt') ? 'pt' : 'en';
-
+const FooterLinkItem = ({ link, locale }) => {
   const renderUrl = (url) => {
-    if (typeof url === 'object') { return url[getLocaleCode]; }
+    if (typeof url === 'object') { return url[locale]; }
     return url;
   };
 
   return (
     <li>
-      <a href={renderUrl(link.url)}>{intl.formatMessage(messages[link.title])}</a>
+      <a href={renderUrl(link.url)}>{link.title[locale]}</a>
     </li>
   );
 };
 
 const FooterLinks = ({ intl }) => {
+  const getLocaleCode = (intl.locale.split('-')[0] === 'pt') ? 'pt' : 'en';
+
   const FOOTER_NAV_LINKS = getConfig().FOOTER_NAV_LINKS || process.env.FOOTER_NAV_LINKS;
   const footerLinks = parseEnvSettings(FOOTER_NAV_LINKS);
 
   if (!footerLinks) { return null; }
 
   return (
     <nav className="footer-links d-md-flex justify-content-between px-4">
-      {footerLinks.map((link) => (
+      {footerLinks.map(link => (
         <div className="footer-links-navigation py-3">
-          <span>{intl.formatMessage(messages[link.title])}</span>
+          <span>{link.title[getLocaleCode]}</span>
           <ul>
-            {link.menus.map((menu) => (
-              <FooterLinkItem intl={intl} link={menu} />
+            {link.menus.map(menu => (
+              <FooterLinkItem locale={getLocaleCode} link={menu} />
             ))}
           </ul>
         </div>
@@ -43,7 +42,7 @@ const FooterLinks = ({ intl }) => {
 };
 
 FooterLinkItem.propTypes = {
-  intl: intlShape.isRequired,
+  locale: PropTypes.string.isRequired,
   link: PropTypes.shape({
     title: PropTypes.string.isRequired,
     url: PropTypes.oneOfType([

diff --git a/src/components/footer-links/FooterSocialLinks.jsx b/src/components/footer-links/FooterSocialLinks.jsx
@@ -6,9 +6,8 @@ import { getConfig } from '@edx/frontend-platform';
 import { faFacebookF, faLinkedinIn, faInstagram } from '@fortawesome/free-brands-svg-icons';
 import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
 import parseEnvSettings from '../../utils/parseData';
-import messages from '../Footer.messages';
 
-const FooterSocialUrl = ({ intl, social }) => {
+const FooterSocialUrl = ({ locale, social }) => {
   const icons = {
     facebook: faFacebookF,
     linkedin: faLinkedinIn,
@@ -17,14 +16,14 @@ const FooterSocialUrl = ({ intl, social }) => {
   };
 
   return (
-    <a id={`${social.platform}-link`} className="footer-social__badge" href={social.url} target="_blank" rel="noopener noreferrer" title={intl.formatMessage(messages[social.title])}>
+    <a id={`${social.platform}-link`} className="footer-social__badge" href={social.url} target="_blank" rel="noopener noreferrer" title={social.title[locale]}>
       <FontAwesomeIcon icon={icons[social.platform]} />
     </a>
   );
 };
 
 FooterSocialUrl.propTypes = {
-  intl: intlShape.isRequired,
+  locale: PropTypes.string.isRequired,
   social: PropTypes.shape({
     platform: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired,
@@ -33,6 +32,8 @@ FooterSocialUrl.propTypes = {
 };
 
 const FooterSocial = ({ intl }) => {
+  const getLocaleCode = (intl.locale.split('-')[0] === 'pt') ? 'pt' : 'en';
+
   const FOOTER_SOCIAL_LINKS = getConfig().FOOTER_SOCIAL_LINKS || process.env.FOOTER_SOCIAL_LINKS;
 
   const socialLinks = parseEnvSettings(FOOTER_SOCIAL_LINKS);
@@ -43,7 +44,7 @@ const FooterSocial = ({ intl }) => {
     <div className="footer-social d-flex mt-2">
       {socialLinks.map(social => (
 
-        <FooterSocialUrl intl={intl} social={social} />
+        <FooterSocialUrl locale={getLocaleCode} social={social} />
       ))}
     </div>
   );

diff --git a/src/i18n/messages/pt_PT.json b/src/i18n/messages/pt_PT.json
@@ -1,24 +1,5 @@
 {
     "footer.languageForm.select.label": "Escolha a língua",
     "footer.languageForm.submit.label": "Aplicar",
-    "footer.copyright.message": "Todos os direitos reservados.",
-    "footer.nau.title": "NAU - Sempre a Aprender",
-    "footer.nau.about": "Sobre",
-    "footer.nau.contact": "Contactos",
-    "footer.nau.help": "Ajuda",
-    "footer.nau.courses": "Cursos",
-    "footer.nau.partner": "Como se tornar parceiro",
-    "footer.nau.communication": "Comunicação",
-    "footer.nau.news": "Notícias",
-    "footer.nau.mediakit": "Media Kit",
-    "footer.nau.legal": "Legal",
-    "footer.nau.termsconditions": "Termos e condições",
-    "footer.nau.privacypolicy": "Política de Privacidade",
-    "footer.nau.cookies": "Política de Cookies",
-    "footer.nau.certification": "Política de Certificação",
-    "footer.nau.codeofhonor": "Código de Honra",
-    "footer.nau.social.facebook": "Siga-nos no Facebook",
-    "footer.nau.social.linkedin": "Siga-nos no LinkedIn",
-    "footer.nau.social.instagram": "Siga-nos no Instagram",
-    "footer.nau.social.newsletter": "Subscreva a nossa lista de e-mail (newsletter)"
+    "footer.copyright.message": "Todos os direitos reservados."
 }