lesson submission fields being translated

components/Modal/index.js

@@ -15,6 +15,7 @@ export default function Modal({
   onClose,
   course,
   lesson,
+  section,
   submissionType,
   submissionText,
   submissionTitle,
@@ -50,21 +51,9 @@ export default function Modal({
       }
     }, [cohorts]);*/
 
-  const getSection = () => {
-    const section = Object.entries(course.sections)
-      .map((section) =>
-        section[1].map((item) => {
-          if (item.file.includes(lesson)) return section[0]
-        })
-      )
-      .flat()
-      .find(Boolean)
-    return section
-  }
   const saveLessonSubmission = async (userSubmission, submissionId) => {
     if (!userSubmission) return toast.error(t('messages.lesson_no_response'))
     if (!submissionId) submissionId = uuid()
-    const section = getSection()
     const content = {
       type: submissionType,
       value: userSubmission,

components/Tabs/index.js

@@ -1,45 +1,47 @@
 import React, { useState, useEffect } from 'react'
 import useAuth from '../../hooks/useAuth'
 import { checkSections, colorTab } from './tabFunctions'
-import { useTranslation } from "react-i18next"
+import { useTranslation } from 'react-i18next'
 
 export default function Tabs({ course, lessonsSubmitted, cohort }) {
-  const { t } = useTranslation()
+  const { t, i18n } = useTranslation()
+  const language = i18n.resolvedLanguage
 
   const isCourse = lessonsSubmitted || cohort
 
   if (!isCourse) {
     const sectionAnalytics = course?.analytics
     return (
       <div className="flex flex-col rounded-lg">
-        <div className="flex flex-row justify-center items-center">
-        {sectionAnalytics?.photoUrls?.slice(0, 3).map((source, index) => (
-          <img
-            key={source}
-            src={source}
-            alt="User avatar"
-            style={{
-              width: '50px',
-              height: '50px',
-              borderRadius: '50%',
-              marginLeft: index !== 0 ? '-15px' : '0',
-              position: 'relative',
-              zIndex: sectionAnalytics?.photoUrls.length - index,
-            }}
-          />
-        ))}
+        <div className="flex flex-row items-center justify-center">
+          {sectionAnalytics?.photoUrls?.slice(0, 3).map((source, index) => (
+            <img
+              key={source}
+              src={source}
+              alt="User avatar"
+              style={{
+                width: '50px',
+                height: '50px',
+                borderRadius: '50%',
+                marginLeft: index !== 0 ? '-15px' : '0',
+                position: 'relative',
+                zIndex: sectionAnalytics?.photoUrls.length - index,
+              }}
+            />
+          ))}
         </div>
         {sectionAnalytics?.students && (
           <p style={{ textAlign: 'center', marginTop: '20px' }}>
-            {sectionAnalytics.students} entusiastas nesse grupo de estudos!
+            {sectionAnalytics.students} {t('peopleBuilding')}!
           </p>
         )}
       </div>
-    )    
+    )
   }
 
-  if (!course?.sections) return null
-  const [activeTab, setActiveTab] = useState(Object.keys(course?.sections).sort())
+  const sections = course?.metadata?.[language]?.sections || course?.sections
+  if (!sections) return null
+  const [activeTab, setActiveTab] = useState(Object.keys(sections).sort())
 
   const toggle = (tab) => {
     if (activeTab !== tab) setActiveTab(tab)
@@ -48,7 +50,7 @@ export default function Tabs({ course, lessonsSubmitted, cohort }) {
   return (
     <div className="mt-6 mb-6 flex flex-col rounded-lg p-4 shadow-xl lg:mt-12">
       <div className="flex flex-row justify-between maxsm:flex-col maxsm:text-center">
-        {Object.keys(course?.sections)
+        {Object.keys(sections)
           .sort()
           .map((section) => {
             const sectionAnalytics = course.analytics?.find((item) => item.section === section)
@@ -94,4 +96,4 @@ export default function Tabs({ course, lessonsSubmitted, cohort }) {
       </div>
     </div>
   )
-}
+}

lib/course.js

@@ -14,23 +14,6 @@ export async function getPage(course, section, lesson, language) {
   return text
 }
 
-async function getCourseLessons(course) {
-  if (course == undefined || course.sections == undefined) return []
-  let lessons = Object.keys(course.sections)
-    .map((section) => {
-      return course.sections[section].map((lesson) => {
-        lesson = lesson.file
-        return {
-          section,
-          lesson,
-        }
-      })
-    })
-    .flat()
-
-  return lessons
-}
-
 export async function getStudyGroup(groupSlug) {
   const colRef = collection(db, 'study_groups')
   const q = query(colRef, where('slug', '==', groupSlug))
@@ -53,8 +36,7 @@ export async function getCourse(course_id) {
   const docRef = doc(db, 'courses', course_id)
   const courseDoc = await getDoc(docRef)
   const course = { id: course_id, ...courseDoc.data() }
-  const lessons = await getCourseLessons(course)
-  return { ...course, lessons }
+  return { ...course }
 }
 
 export const defaultCourse = {

pages/courses/[id].js

@@ -42,7 +42,7 @@ function Course({ course, currentDate }) {
   useEffect(async () => {
     let lessonsSubmitted_ = await getLessonsSubmissions(user?.uid, cohort?.id)
     setLessonsSubmitted(lessonsSubmitted_)
-  }, [user])
+  }, [user, cohort])
   useEffect(async () => {
     if (cohorts) {
       setCohort(getCurrentCohort(user, cohorts, course, currentDate))
@@ -88,7 +88,6 @@ function Course({ course, currentDate }) {
       (userCohort) => userCohort.course_id == course.id && userCohort.cohort_id == cohort?.id
     )
   }
-
   const userSubmissions = (lesson) => {
     return lessonsSubmitted.some((submittedLesson) => submittedLesson.lesson === lesson.file)
   }
@@ -168,7 +167,6 @@ function Course({ course, currentDate }) {
 
   function renderSections(course, language) {
     const sections = course?.metadata?.[language]?.sections || course?.sections
-
     if (!sections) return null
 
     return Object.keys(sections)
@@ -182,6 +180,7 @@ function Course({ course, currentDate }) {
             </span>
             <ul className="mt-4 mb-4 flex list-none flex-col">
               {sections[section]
+                .sort((a, b) => a.title.localeCompare(b.title))
                 .map((lesson) => (
                   <li key={lesson.title} className="mb-4 items-center rounded py-2 px-4">
                     <div className="flex items-center">
@@ -212,19 +211,16 @@ function Course({ course, currentDate }) {
                           )}
                         </div>
                       </div>
-                      <div className={counter > 1 ? 'pointer-events-none' : ''}>
-                        <Link
-                          href={`/courses/${course.id}/${section}/${lesson.file}?lang=${language}`}
-                        >
-                          <a id="access-lesson">
-                            <p className="m-0 p-0">{lesson.title}</p>
-                          </a>
-                        </Link>
-                      </div>
+                      <Link
+                        href={`/courses/${course.id}/${section}/${lesson.file}?lang=${language}`}
+                      >
+                        <a id="access-lesson">
+                          <p className="m-0 p-0">{lesson.title}</p>
+                        </a>
+                      </Link>
                     </div>
                   </li>
-                ))
-                .sort((a, b) => a - b)}
+                ))}
             </ul>
           </div>
         )

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

@@ -50,7 +50,7 @@ function Lessons({ course, section, lesson, content, currentDate }) {
   useEffect(async () => {
     setCohorts(await getAllCohorts())
     getSubmissionData()
-  }, [])
+  }, [lesson, language])
 
   useEffect(async () => {
     if (cohorts) {
@@ -59,25 +59,53 @@ function Lessons({ course, section, lesson, content, currentDate }) {
   }, [cohorts, user])
 
   useEffect(() => {
-    const fetchLessonsSubmitted = async () => {
+    const submission = lessonsSubmitted.find((item) => item?.lesson === lesson)
+    if (submission) {
+      setUserSubmission(submission.content.value)
+      setLessonSent(true)
+    } else {
+      setUserSubmission(null)
+      setLessonSent(false)
+    }
+  }, [lessonsSubmitted, lesson, open])
+
+  useEffect(() => {
+    async function fetchLessonsSubmitted() {
       let lessonsSubmitted_ = await getLessonsSubmissions(user?.uid, cohort?.id)
       setLessonsSubmitted(lessonsSubmitted_)
     }
     fetchLessonsSubmitted()
   }, [user, cohort, open])
 
   useEffect(() => {
-    lessonsSubmitted.forEach((item) => {
-      if (item?.lesson === lesson) {
-        setUserSubmission(item.content.value)
-        setLessonSent(true)
-      }
-    })
-  }, [lessonsSubmitted, lesson])
+    async function fetchLessons() {
+      const lessons = await getCourseLessons(course, language)
+      setSortedLessons(lessons)
+    }
 
-  useEffect(() => {
-    setSortedLessons(course.lessons.sort((a, b) => (a.section > b.section ? 1 : -1)))
-  }, [sortedLessons])
+    fetchLessons()
+  }, [course, language])
+
+  async function getCourseLessons(course, language) {
+    if (!course) return []
+
+    const sections = course?.metadata?.[language]?.sections || course?.sections
+    if (!sections) return []
+
+    const sortedSectionKeys = Object.keys(sections).sort()
+
+    let lessons = sortedSectionKeys
+      .map((section) => {
+        const sortedLessons = sections[section].sort((a, b) => a.file.localeCompare(b.file))
+        return sortedLessons.map((lesson) => ({
+          section,
+          lesson: lesson.file,
+        }))
+      })
+      .flat()
+
+    return lessons
+  }
 
   const nextLesson = () => {
     const currentLessonIndex = sortedLessons.findIndex((item) => item.lesson === lesson)
@@ -104,17 +132,6 @@ function Lessons({ course, section, lesson, content, currentDate }) {
     return toast.error(t('messages.already_on_first_lesson'))
   }
 
-  const getSection = () => {
-    return Object.entries(course.sections)
-      .map((section) =>
-        section[1].map((item) => {
-          if (item.file.includes(lesson)) return section[0]
-        })
-      )
-      .flat()
-      .find(Boolean)
-  }
-
   const fixMarkdown = (markdown) => {
     let result = markdown.replace(
       /\[Loom]\(+[a-z]+:\/\/[a-z]+[.][a-z]+[.][a-z]+\/[a-z]+\/(\w+)\)/,
@@ -127,12 +144,20 @@ function Lessons({ course, section, lesson, content, currentDate }) {
     return result
   }
   const getSubmissionData = () => {
-    const submissionData = course.sections[getSection()].filter((item) => item.file === lesson)[0]
+    const sections = course?.metadata?.[language]?.sections || course?.sections
+
+    if (!sections || !sections[section]) return
+
+    const submissionData = sections[section].filter((item) => item.file === lesson)[0]
+
+    if (!submissionData) return
+
     setSubmissionType(submissionData.submission_type)
     setSubmissionTitle(submissionData.submission_title)
     setSubmissionText(submissionData.submission_text)
     setTwitterShare(submissionData.twitter)
   }
+
   const closeModal = () => {
     setOpen(false)
     if (twitterShare) setTwitterModal(true)
@@ -205,7 +230,7 @@ function Lessons({ course, section, lesson, content, currentDate }) {
         </div>
         <div className="mx-auto mb-6 rounded-lg px-6 py-2 shadow-xl">
           {course &&
-            course?.lessons.map((l) => {
+            sortedLessons.map((l) => {
               return (
                 l.lesson.includes(lesson) && (
                   <div key={l?.section + l?.lesson}>
@@ -250,6 +275,7 @@ function Lessons({ course, section, lesson, content, currentDate }) {
                           onClose={() => closeModal()}
                           lesson={lesson}
                           course={course}
+                          section={section}
                           submissionType={submissionType}
                           submissionText={submissionText}
                           submissionTitle={submissionTitle}

public/locales/en/translation.json

@@ -153,5 +153,6 @@
     "verify_password": "Verify your password",
     "or": "OR"
   },
-  "link_github_account": "Do you want to link GitHub to your already registered account?"
-}
+  "link_github_account": "Do you want to link GitHub to your already registered account?",
+  "peopleBuilding": "people building in this section"
+}

public/locales/pt-BR/translation.json

@@ -153,5 +153,6 @@
     "enter_password": "Por favor, insira sua senha",
     "verify_password": "Verifique sua senha",
     "or": "OU"
-  }
+  },
+  "peopleBuilding": "pessoas construindo nessa seção"
 }