toast for unavailable metadata and missing translations

components/RenderField/index.js

@@ -2,13 +2,10 @@ import { useTranslation } from 'react-i18next'
 
 export default function RenderField({ object, field, isHtml, maxSize }) {
   const { i18n } = useTranslation()
-  let content
+  const defaultLanguage = 'en'
+  const language = i18n.resolvedLanguage || defaultLanguage
 
-  if (object?.metadata) {
-    content = object.metadata[i18n.resolvedLanguage || 'en']?.[field]
-  } else {
-    content = object?.[field]
-  }
+  let content = object?.metadata?.[language]?.[field] ?? object?.[field]
 
   if (maxSize && content?.length > maxSize) {
     content = `${content.substring(0, maxSize)}...`

lib/course.js

@@ -61,11 +61,12 @@ export async function getHomeCourse() {
 }
 
 export function getFieldContent(object, field, i18n) {
-  let content
+  const defaultLanguage = 'en'
+  const language = i18n.resolvedLanguage || defaultLanguage
 
-  if (object?.metadata) {
-    content = object.metadata[i18n.resolvedLanguage || 'en']?.[field]
-  } else {
+  let content = object?.metadata?.[language]?.[field]
+
+  if (content === undefined) {
     content = object?.[field]
   }
 

pages/courses/[id].js

@@ -21,6 +21,7 @@ import Loading from '../../components/Loading'
 import { dateFormat } from '../../lib/dateFormat'
 import { useTranslation } from 'react-i18next'
 import RenderField from '../../components/RenderField'
+import { toast } from 'react-toastify'
 
 function Course({ course, currentDate }) {
   if (!course.active) return <NotFound />
@@ -35,6 +36,12 @@ function Course({ course, currentDate }) {
   const { t, i18n } = useTranslation()
   const language = i18n.resolvedLanguage
 
+  useEffect(() => {
+    if (course?.metadata && !course.metadata.hasOwnProperty(language)) {
+      toast.error(t('messages.language_not_available'))
+    }
+  }, [language])
+
   let counter = 0
   useEffect(async () => {
     setCohorts(await getAllCohorts())

pages/courses/[id]/[section]/[lesson].js

@@ -40,6 +40,12 @@ function Lessons({ course, section, lesson, content, currentDate }) {
   const { t, i18n } = useTranslation()
   const language = i18n.resolvedLanguage
 
+  useEffect(() => {
+    if (course?.metadata && !course.metadata.hasOwnProperty(language)) {
+      toast.error(t('messages.language_not_available'))
+    }
+  }, [language])
+
   useEffect(async () => {
     if (auth.currentUser) {
       const userSession = await getUserFromFirestore(auth.currentUser)

public/locales/en/translation.json

@@ -128,7 +128,8 @@
     "exercise_not_submitted": "You have not submitted the exercise for this lesson yet",
     "already_on_first_lesson": "You are already on the first lesson.",
     "data_updated_success": "Data updated successfully!",
-    "error_updating_data": "Error updating data"
+    "error_updating_data": "Error updating data",
+    "language_not_available": "Content not available for the selected language. Using the default language."
   },
   "twitter-share": "Networking is everything, how about sharing your progress with your friends on Twitter?",
   "buttons": {

public/locales/pt-BR/translation.json

@@ -128,7 +128,8 @@
     "exercise_not_submitted": "Você ainda não enviou o exercício desta lição",
     "already_on_first_lesson": "Você já está na primeira lição.",
     "data_updated_success": "Dados atualizados com sucesso!",
-    "error_updating_data": "Erro ao atualizar dados"
+    "error_updating_data": "Erro ao atualizar dados",
+    "language_not_available": "Conteúdo não disponível para o idioma selecionado. Usando o idioma padrão."
   },
   "twitter-share": "Networking é tudo, que tal compartilhar seu progresso com os seus amigos no Twitter?",
   "link_github_account": "Deseja vincular o github à sua conta já cadastrada?",