From bd7386beea749e7c6c0e22b0c6a7818067426952 Mon Sep 17 00:00:00 2001 From: lumi-tip Date: Mon, 16 Dec 2024 17:57:41 -0400 Subject: [PATCH 1/6] start --- public/locales/es/common.json | 1 + src/js_modules/syllabus/ExerciseGuidedExperience.jsx | 1 + src/js_modules/syllabus/ProjectInstructions.jsx | 2 +- .../[cohortSlug]/[lesson]/[lessonSlug]/index.jsx | 9 ++++----- 4 files changed, 7 insertions(+), 6 deletions(-) diff --git a/public/locales/es/common.json b/public/locales/es/common.json index afa189727..e3406d230 100644 --- a/public/locales/es/common.json +++ b/public/locales/es/common.json @@ -158,6 +158,7 @@ "project": "proyecto", "exercise": "ejercicio" }, + "start-exercise": "Empezar ejercicio", "recommended": "Recomendado", "open-in-learnpack-button": { "text": "Abrir en la nube", diff --git a/src/js_modules/syllabus/ExerciseGuidedExperience.jsx b/src/js_modules/syllabus/ExerciseGuidedExperience.jsx index a3ac766a6..10bfe700e 100644 --- a/src/js_modules/syllabus/ExerciseGuidedExperience.jsx +++ b/src/js_modules/syllabus/ExerciseGuidedExperience.jsx @@ -18,6 +18,7 @@ function ExerciseGuidedExperience({ currentTask, currentAsset, handleStartLearnp const [telemetryReport, setTelemetryReport] = useState([]); const isExerciseStated = !!currentTask?.assignment_telemetry; + console.log(currentTask); useEffect(() => { if (isExerciseStated) { diff --git a/src/js_modules/syllabus/ProjectInstructions.jsx b/src/js_modules/syllabus/ProjectInstructions.jsx index 146d86554..12c0bf603 100644 --- a/src/js_modules/syllabus/ProjectInstructions.jsx +++ b/src/js_modules/syllabus/ProjectInstructions.jsx @@ -218,7 +218,7 @@ function ProjectInstructions({ currentAsset, variant, handleStartLearnpack }) { diff --git a/src/pages/syllabus/[cohortSlug]/[lesson]/[lessonSlug]/index.jsx b/src/pages/syllabus/[cohortSlug]/[lesson]/[lessonSlug]/index.jsx index 41a7fea24..55b3b8a7f 100644 --- a/src/pages/syllabus/[cohortSlug]/[lesson]/[lessonSlug]/index.jsx +++ b/src/pages/syllabus/[cohortSlug]/[lesson]/[lessonSlug]/index.jsx @@ -387,14 +387,13 @@ function SyllabusContent() { }); }; + console.log(currentAsset); + useEffect(() => { const currTask = sortedAssignments[currentModuleIndex]?.modules?.find((l) => l.slug === lessonSlug); - const englishTaskUrls = { - en: currTask?.translations?.en, - us: currTask?.translations?.us, - }; - const currentLanguageTaskUrl = englishTaskUrls[lang] || currTask?.translations?.[lang]?.slug || lessonSlug; + const currentLanguageTaskUrl = currTask?.translations?.[lang === 'en' ? 'us' : lang]?.slug || lessonSlug; if (currTask?.target === 'blank') { + axios.get(`${BREATHECODE_HOST}/v1/registry/asset/${currentLanguageTaskUrl}?asset_type=${assetTypeValues[lesson]}`).then(({ data }) => setCurrentAsset(data)); setCurrentBlankProps(currTask); } else if (currentBlankProps === null || currentBlankProps?.target !== 'blank') { axios.get(`${BREATHECODE_HOST}/v1/registry/asset/${currentLanguageTaskUrl}?asset_type=${assetTypeValues[lesson]}`) From 227befce17dcd23bfc60d71a6b354d644e8016e5 Mon Sep 17 00:00:00 2001 From: lumi-tip Date: Wed, 25 Dec 2024 21:34:42 -0400 Subject: [PATCH 2/6] small refactor --- public/locales/en/common.json | 4 + src/common/services/breathecode.js | 2 +- .../syllabus/ExerciseGuidedExperience.jsx | 1 - .../syllabus/ProjectInstructions.jsx | 11 +- .../[lesson]/[lessonSlug]/index.jsx | 131 +++++++++--------- 5 files changed, 80 insertions(+), 69 deletions(-) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 5bc6668b9..8c4f265b6 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -149,6 +149,10 @@ "mark-as-done": "Mark as done", "mark-as-not-done": "Mark as not done" }, + "external":{ + "title": "This is an external exercise", + "description": "\"{{projectName}}\" is an external exercise you will redirected to a new tab to do it; choose one of the following options to start working on the project:" + }, "learnpack": { "title": "This is a Learnpack interactive exercise", "choose-open": "Choose how to open this project", diff --git a/src/common/services/breathecode.js b/src/common/services/breathecode.js index 86ed1d85e..b3a4d4a02 100644 --- a/src/common/services/breathecode.js +++ b/src/common/services/breathecode.js @@ -322,7 +322,7 @@ const breathecode = { const qs = parseQuerys(query); return { get: () => axios.get(`${url}/asset${qs}`), - getAsset: (slug) => axios.get(`${url}/asset/${slug}`), + getAsset: (slug) => axios.get(`${url}/asset/${slug}${qs}`), getAssetContext: (id) => axios.get(`${url}/asset/${id}/context`), techs: () => axios.get(`${url}/academy/technology${qs}`), techsBySort: () => axios.get(`${url}/technology${qs}`), diff --git a/src/js_modules/syllabus/ExerciseGuidedExperience.jsx b/src/js_modules/syllabus/ExerciseGuidedExperience.jsx index 10bfe700e..a3ac766a6 100644 --- a/src/js_modules/syllabus/ExerciseGuidedExperience.jsx +++ b/src/js_modules/syllabus/ExerciseGuidedExperience.jsx @@ -18,7 +18,6 @@ function ExerciseGuidedExperience({ currentTask, currentAsset, handleStartLearnp const [telemetryReport, setTelemetryReport] = useState([]); const isExerciseStated = !!currentTask?.assignment_telemetry; - console.log(currentTask); useEffect(() => { if (isExerciseStated) { diff --git a/src/js_modules/syllabus/ProjectInstructions.jsx b/src/js_modules/syllabus/ProjectInstructions.jsx index 12c0bf603..0580688a0 100644 --- a/src/js_modules/syllabus/ProjectInstructions.jsx +++ b/src/js_modules/syllabus/ProjectInstructions.jsx @@ -167,6 +167,8 @@ function ProjectInstructions({ currentAsset, variant, handleStartLearnpack }) { const isForOpenLocaly = isInteractive || templateUrl; const learnpackDeployUrl = currentAsset?.learnpack_deploy_url; + const isExternalExercise = currentAsset?.external && currentAsset?.asset_type === 'EXERCISE'; + const startWithLearnpack = learnpackDeployUrl && cohortSession.available_as_saas && !noLearnpackIncluded.includes(currentAsset.slug); if (variant === 'small') { @@ -210,15 +212,18 @@ function ProjectInstructions({ currentAsset, variant, handleStartLearnpack }) { <> - + {!isExternalExercise && } - {t('common:learnpack.title')} + {!isExternalExercise ? t('common:learnpack.title') : t('common:external.title')} diff --git a/src/pages/syllabus/[cohortSlug]/[lesson]/[lessonSlug]/index.jsx b/src/pages/syllabus/[cohortSlug]/[lesson]/[lessonSlug]/index.jsx index 55b3b8a7f..b6b74a41d 100644 --- a/src/pages/syllabus/[cohortSlug]/[lesson]/[lessonSlug]/index.jsx +++ b/src/pages/syllabus/[cohortSlug]/[lesson]/[lessonSlug]/index.jsx @@ -254,10 +254,16 @@ function SyllabusContent() { }, [currentTask]); useEffect(() => { - const assetSlug = currentAsset?.translations[lang] || currentAsset?.translations?.us || currentAsset?.translations?.en || lessonSlug; + const translations = currentAsset?.translations + ? Object.values(currentAsset.translations) + : []; + if (taskTodo.length > 0) { - setCurrentTask(taskTodo.find((el) => el.task_type === assetTypeValues[lesson] - && (el.associated_slug === assetSlug || currentAsset?.aliases?.includes(el.associated_slug)))); + const foundTask = taskTodo.find((el) => ( + el.task_type === assetTypeValues[lesson] + && (translations.includes(el.associated_slug) || currentAsset?.aliases?.includes(el.associated_slug)) + )); + setCurrentTask(foundTask); } }, [taskTodo, lessonSlug, lesson, currentAsset]); @@ -371,6 +377,7 @@ function SyllabusContent() { setCurrentBlankProps(null); setSubTasks([]); }; + const onClickAssignment = (e, item) => { const link = `/syllabus/${cohortSlug}/${item.type?.toLowerCase()}/${item.slug}`; @@ -387,71 +394,67 @@ function SyllabusContent() { }); }; - console.log(currentAsset); - useEffect(() => { const currTask = sortedAssignments[currentModuleIndex]?.modules?.find((l) => l.slug === lessonSlug); const currentLanguageTaskUrl = currTask?.translations?.[lang === 'en' ? 'us' : lang]?.slug || lessonSlug; - if (currTask?.target === 'blank') { - axios.get(`${BREATHECODE_HOST}/v1/registry/asset/${currentLanguageTaskUrl}?asset_type=${assetTypeValues[lesson]}`).then(({ data }) => setCurrentAsset(data)); - setCurrentBlankProps(currTask); - } else if (currentBlankProps === null || currentBlankProps?.target !== 'blank') { - axios.get(`${BREATHECODE_HOST}/v1/registry/asset/${currentLanguageTaskUrl}?asset_type=${assetTypeValues[lesson]}`) - .then(({ data }) => { - const translations = data?.translations; - const exensionName = getExtensionName(data.readme_url); - const isIpynb = exensionName === 'ipynb'; - const currentSlug = translations?.[language] || lessonSlug; - const urlPathname = data.readme_url ? data.readme_url.split('https://github.com')[1] : null; - const pathnameWithoutExtension = urlPathname ? urlPathname.split('.ipynb')[0] : null; - const extension = urlPathname ? urlPathname.split('.').pop() : null; - // const translatedExtension = language === 'us' ? '' : `.${language}`; - const finalPathname = `${pathnameWithoutExtension}.${extension}`; - - setReadmeUrlPathname(finalPathname); - let currentTranslationSlug = data?.lang === language ? data?.slug : data.translations[language]; - if (isIpynb) { - setIpynbHtmlUrl(`${BREATHECODE_HOST}/v1/registry/asset/preview/${currentSlug}?plain=true`); - setCurrentAsset(data); - } else { - setIpynbHtmlUrl(null); - if (currentTranslationSlug === undefined) { - currentTranslationSlug = `${lessonSlug}-${language}`; + bc.lesson({ asset_type: assetTypeValues[lesson] }).getAsset(currentLanguageTaskUrl).then(({ data }) => { + const translations = data?.translations; + const exensionName = getExtensionName(data.readme_url); + const isIpynb = exensionName === 'ipynb'; + const currentSlug = translations?.[language] || lessonSlug; + const urlPathname = data.readme_url ? data.readme_url.split('https://github.com')[1] : null; + const pathnameWithoutExtension = urlPathname ? urlPathname.split('.ipynb')[0] : null; + const extension = urlPathname ? urlPathname.split('.').pop() : null; + const finalPathname = `${pathnameWithoutExtension}.${extension}`; + + if (currTask?.target === 'blank') { + setCurrentAsset(data); + return; + } + + setReadmeUrlPathname(finalPathname); + let currentTranslationSlug = data?.lang === language ? data?.slug : data.translations[language]; + if (isIpynb) { + setIpynbHtmlUrl(`${BREATHECODE_HOST}/v1/registry/asset/preview/${currentSlug}?plain=true`); + setCurrentAsset(data); + } else { + setIpynbHtmlUrl(null); + if (currentTranslationSlug === undefined) { + currentTranslationSlug = `${lessonSlug}-${language}`; + } + Promise.all([ + axios.get(`${BREATHECODE_HOST}/v1/registry/asset/${currentTranslationSlug}.md`), + axios.get(`${BREATHECODE_HOST}/v1/registry/asset/${currentTranslationSlug}?asset_type=${assetTypeValues[lesson]}`), + ]) + .then(([respMarkdown, respData]) => { + const currData = respData.data; + const markdownData = respMarkdown.data; + + if (lesson === 'answer') { + setQuizSlug(currentTranslationSlug); + } else { + setQuizSlug(null); } - Promise.all([ - axios.get(`${BREATHECODE_HOST}/v1/registry/asset/${currentTranslationSlug}.md`), - axios.get(`${BREATHECODE_HOST}/v1/registry/asset/${currentTranslationSlug}?asset_type=${assetTypeValues[lesson]}`), - ]) - .then(([respMarkdown, respData]) => { - const currData = respData.data; - const markdownData = respMarkdown.data; - - if (lesson === 'answer') { - setQuizSlug(currentTranslationSlug); - } else { - setQuizSlug(null); - } - if (currData !== undefined && typeof markdownData === 'string') { - // Binary base64 decoding ⇢ UTF-8 - const markdown = getMarkDownContent(markdownData); - setReadme(markdown); - setCurrentAsset(currData); - } - }) - .catch(() => { - setReadme({ - content: t('no-traduction-found-description'), - }); - setCurrentAsset({ - ...data, - title: t('no-traduction-found'), - }); - }); - } - }).catch(() => { - EventIfNotFound(); - }); - } + if (currData !== undefined && typeof markdownData === 'string') { + // Binary base64 decoding ⇢ UTF-8 + const markdown = getMarkDownContent(markdownData); + setReadme(markdown); + setCurrentAsset(currData); + } + }) + .catch(() => { + setReadme({ + content: t('no-traduction-found-description'), + }); + setCurrentAsset({ + ...data, + title: t('no-traduction-found'), + }); + }); + } + }).catch(() => { + EventIfNotFound(); + }); return () => { cleanCurrentData(); setUserSession({ From 2ea6a098d9e14e9b22d68b12d5df04c39a315bf9 Mon Sep 17 00:00:00 2001 From: lumi-tip Date: Thu, 26 Dec 2024 14:13:36 -0400 Subject: [PATCH 3/6] adding external traslation in es --- public/locales/es/common.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/public/locales/es/common.json b/public/locales/es/common.json index e3406d230..18df01a62 100644 --- a/public/locales/es/common.json +++ b/public/locales/es/common.json @@ -146,6 +146,10 @@ "mark-as-done": "Marcar como hecho", "mark-as-not-done": "Marcar como no hecho" }, + "external":{ + "title": "Este es un ejercicio externo", + "description": "\"{{projectName}}\" es un ejercicio externo, seras redireccionado a una nueva pestaña para hacerlo; elige una de las siguientes opciones para comenzar a trabajar en el proyecto:" + }, "learnpack": { "title": "Este es un ejercicio interactivo de Learnpack", "choose-open": "Escoge como quieres abrir este proyecto", From 17756f856d98078fa92428beb1d3ba088d259a63 Mon Sep 17 00:00:00 2001 From: lumi-tip Date: Fri, 27 Dec 2024 00:26:58 -0400 Subject: [PATCH 4/6] :recycle: refactor to avoid useless requests --- .../syllabus/[cohortSlug]/[lesson]/[lessonSlug]/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/syllabus/[cohortSlug]/[lesson]/[lessonSlug]/index.jsx b/src/pages/syllabus/[cohortSlug]/[lesson]/[lessonSlug]/index.jsx index b6b74a41d..a1d64dc41 100644 --- a/src/pages/syllabus/[cohortSlug]/[lesson]/[lessonSlug]/index.jsx +++ b/src/pages/syllabus/[cohortSlug]/[lesson]/[lessonSlug]/index.jsx @@ -423,7 +423,7 @@ function SyllabusContent() { currentTranslationSlug = `${lessonSlug}-${language}`; } Promise.all([ - axios.get(`${BREATHECODE_HOST}/v1/registry/asset/${currentTranslationSlug}.md`), + assetTypeValues[lesson] !== 'QUIZ' && axios.get(`${BREATHECODE_HOST}/v1/registry/asset/${currentTranslationSlug}.md`), axios.get(`${BREATHECODE_HOST}/v1/registry/asset/${currentTranslationSlug}?asset_type=${assetTypeValues[lesson]}`), ]) .then(([respMarkdown, respData]) => { @@ -1009,7 +1009,7 @@ function SyllabusContent() { /> )} - {isQuiz ? ( + {isQuiz && quizSlug ? (