From aa5f8330a54d6ed6abca5d01b9c663298deaacb3 Mon Sep 17 00:00:00 2001 From: Ajinkya Pande Date: Fri, 21 Jun 2024 17:14:39 +0530 Subject: [PATCH] IssueId #218981 feat Implement Exception Handling for Unavailable Content in Storylingo [React] --- src/components/Assesment/Assesment.jsx | 99 ++++++++------ src/components/AssesmentEnd/AssesmentEnd.jsx | 45 ++++--- .../DiscoverSentance/DiscoverSentance.jsx | 77 +++++++---- src/utils/VoiceAnalyser.js | 47 ++++++- src/views/Practice/Practice.jsx | 121 ++++++++++++------ 5 files changed, 262 insertions(+), 127 deletions(-) diff --git a/src/components/Assesment/Assesment.jsx b/src/components/Assesment/Assesment.jsx index f22d788a..e14009a7 100644 --- a/src/components/Assesment/Assesment.jsx +++ b/src/components/Assesment/Assesment.jsx @@ -503,40 +503,58 @@ const Assesment = ({ discoverStart }) => { localStorage.setItem("sessionId", contentSessionId); if (discoverStart && username && !localStorage.getItem("virtualId")) { (async () => { - setLocalData("profileName", username); - const usernameDetails = await axios.post( - `${process.env.REACT_APP_VIRTUAL_ID_HOST}/${config.URLS.GET_VIRTUAL_ID}?username=${username}` - ); - const getMilestoneDetails = await axios.get( - `${process.env.REACT_APP_LEARNER_AI_APP_HOST}/${config.URLS.GET_MILESTONE}/${usernameDetails?.data?.result?.virtualID}?language=${lang}` - ); - - localStorage.setItem( - "getMilestone", - JSON.stringify({ ...getMilestoneDetails.data }) - ); - setLevel( - getMilestoneDetails?.data.data?.milestone_level?.replace("m", "") - ); - localStorage.setItem( - "virtualId", - usernameDetails?.data?.result?.virtualID - ); - let session_id = localStorage.getItem("sessionId"); - - if (!session_id){ - session_id = uniqueId(); - localStorage.setItem("sessionId", session_id) + try { + setLocalData("profileName", username); + + const usernameDetails = await axios.post( + `${process.env.REACT_APP_VIRTUAL_ID_HOST}/${config.URLS.GET_VIRTUAL_ID}?username=${username}` + ); + + try { + const getMilestoneDetails = await axios.get( + `${process.env.REACT_APP_LEARNER_AI_APP_HOST}/${config.URLS.GET_MILESTONE}/${usernameDetails?.data?.result?.virtualID}?language=${lang}` + ); + + localStorage.setItem( + "getMilestone", + JSON.stringify({ ...getMilestoneDetails.data }) + ); + setLevel( + getMilestoneDetails?.data.data?.milestone_level?.replace("m", "") + ); + localStorage.setItem( + "virtualId", + usernameDetails?.data?.result?.virtualID + ); + + let session_id = localStorage.getItem("sessionId"); + + if (!session_id) { + session_id = uniqueId(); + localStorage.setItem("sessionId", session_id); + } + + localStorage.setItem("lang", lang || "ta"); + + try { + const getPointersDetails = await axios.get( + `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.GET_POINTER}/${usernameDetails?.data?.result?.virtualID}/${session_id}?language=${lang}` + ); + + setPoints(getPointersDetails?.data?.result?.totalLanguagePoints || 0); + } catch (error) { + console.error("Error fetching pointer details:", error); + } + + dispatch(setVirtualId(usernameDetails?.data?.result?.virtualID)); + } catch (error) { + console.error("Error fetching milestone details:", error); + } + } catch (error) { + console.error("Error fetching username details:", error); } - - localStorage.setItem("lang", lang || "ta"); - const getPointersDetails = await axios.get( - `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.GET_POINTER}/${usernameDetails?.data?.result?.virtualID}/${session_id}?language=${lang}` - ); - setPoints(getPointersDetails?.data?.result?.totalLanguagePoints || 0); - - dispatch(setVirtualId(usernameDetails?.data?.result?.virtualID)); })(); + } else { (async () => { const virtualId = getLocalData("virtualId"); @@ -561,10 +579,19 @@ const Assesment = ({ discoverStart }) => { } if (virtualId) { - const getPointersDetails = await axios.get( - `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.GET_POINTER}/${virtualId}/${sessionId}?language=${lang}` - ); - setPoints(getPointersDetails?.data?.result?.totalLanguagePoints || 0); + try{ + const getPointersDetails = await axios.get( + `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.GET_POINTER}/${virtualId}/${sessionId}?language=${lang}` + ); + setPoints(getPointersDetails?.data?.result?.totalLanguagePoints || 0); + }catch(err){ + setOpenMessageDialog({ + message: + "Error getting pointer details", + isError: true, + dontShowHeader:true + }); + } } })(); } diff --git a/src/components/AssesmentEnd/AssesmentEnd.jsx b/src/components/AssesmentEnd/AssesmentEnd.jsx index db5a1456..11d8cd03 100644 --- a/src/components/AssesmentEnd/AssesmentEnd.jsx +++ b/src/components/AssesmentEnd/AssesmentEnd.jsx @@ -29,26 +29,35 @@ const AssesmentEnd = () => { (async () => { let audio = new Audio(LevelCompleteAudio); audio.play(); - const virtualId = getLocalData("virtualId"); - const lang = getLocalData("lang"); - const previous_level = getLocalData("previous_level"); - setPreviousLevel(previous_level?.replace("m", "")); - const getMilestoneDetails = await axios.get( - `${process.env.REACT_APP_LEARNER_AI_APP_HOST}/${config.URLS.GET_MILESTONE}/${virtualId}?language=${lang}` - ); - const { data } = getMilestoneDetails; - setLevel(data.data.milestone_level); - setLocalData("userLevel", data.data.milestone_level?.replace("m", "")); - const sessionId = getLocalData("sessionId"); - if (!sessionId){ - sessionId = uniqueId(); - localStorage.setItem("sessionId", sessionId) + + try { + const virtualId = getLocalData("virtualId"); + const lang = getLocalData("lang"); + const previous_level = getLocalData("previous_level"); + setPreviousLevel(previous_level?.replace("m", "")); + + const getMilestoneDetails = await axios.get( + `${process.env.REACT_APP_LEARNER_AI_APP_HOST}/${config.URLS.GET_MILESTONE}/${virtualId}?language=${lang}` + ); + const { data } = getMilestoneDetails; + setLevel(data.data.milestone_level); + setLocalData("userLevel", data.data.milestone_level?.replace("m", "")); + + let sessionId = getLocalData("sessionId"); + if (!sessionId) { + sessionId = uniqueId(); + localStorage.setItem("sessionId", sessionId); + } + + const getPointersDetails = await axios.get( + `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.GET_POINTER}/${virtualId}/${sessionId}?language=${lang}` + ); + setPoints(getPointersDetails?.data?.result?.totalLanguagePoints || 0); + } catch (error) { + console.error("Error fetching data:", error); } - const getPointersDetails = await axios.get( - `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.GET_POINTER}/${virtualId}/${sessionId}?language=${lang}` - ); - setPoints(getPointersDetails?.data?.result?.totalLanguagePoints || 0); })(); + setTimeout(() => { setShake(false); }, 4000); diff --git a/src/components/DiscoverSentance/DiscoverSentance.jsx b/src/components/DiscoverSentance/DiscoverSentance.jsx index c64ebe3f..eaf3aec5 100644 --- a/src/components/DiscoverSentance/DiscoverSentance.jsx +++ b/src/components/DiscoverSentance/DiscoverSentance.jsx @@ -63,15 +63,24 @@ const SpeakSentenceComponent = () => { }, [currentQuestion]); useEffect(() => { - if (!(localStorage.getItem("contentSessionId") !== null)) { + if (localStorage.getItem("contentSessionId") === null) { (async () => { - const sessionId = getLocalData("sessionId"); - const virtualId = getLocalData("virtualId"); - const lang = getLocalData("lang"); - const getPointersDetails = await axios.get( - `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.GET_POINTER}/${virtualId}/${sessionId}?language=${lang}` - ); - setPoints(getPointersDetails?.data?.result?.totalLanguagePoints || 0); + try { + const sessionId = getLocalData("sessionId"); + const virtualId = getLocalData("virtualId"); + const lang = getLocalData("lang"); + + try { + const getPointersDetails = await axios.get( + `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.GET_POINTER}/${virtualId}/${sessionId}?language=${lang}` + ); + setPoints(getPointersDetails?.data?.result?.totalLanguagePoints || 0); + } catch (error) { + console.error("Error fetching pointer details:", error); + } + } catch (error) { + console.error("Error retrieving local data:", error); + } })(); } }, []); @@ -252,42 +261,54 @@ const SpeakSentenceComponent = () => { (async () => { let quesArr = []; try { - // const resSentence = await axios.get(`${process.env.REACT_APP_LEARNER_AI_APP_HOST}/scores/GetContent/sentence/${UserID}`); - // quesArr = [...quesArr, ...(resSentence?.data?.content?.splice(0, 5) || [])]; - // const resWord = await axios.get(`${process.env.REACT_APP_LEARNER_AI_APP_HOST}/scores/GetContent/word/${UserID}`); - // quesArr = [...quesArr, ...(resWord?.data?.content?.splice(0, 5) || [])]; - // const resPara = await axios.get(`${process.env.REACT_APP_LEARNER_AI_APP_HOST}/scores/GetContent/paragraph/${UserID}`); - // quesArr = [...quesArr, ...(resPara?.data?.content || [])]; const lang = getLocalData("lang"); - const resAssessment = await axios.post( - `${process.env.REACT_APP_CONTENT_SERVICE_APP_HOST}/${config.URLS.GET_ASSESSMENT}`, - { - ...{ tags: ["ASER"], language: lang }, - } - ); - + let resAssessment; + try { + resAssessment = await axios.post( + `${process.env.REACT_APP_CONTENT_SERVICE_APP_HOST}/${config.URLS.GET_ASSESSMENT}`, + { + ...{ tags: ["ASER"], language: lang }, + } + ); + } catch (err) { + console.error("Error fetching assessment:", err); + return; + } + const sentences = resAssessment?.data?.data?.find( (elem) => elem.category === "Sentence" ); + + if (!sentences) { + console.error("No sentences found in assessment data"); + return; + } - const resPagination = await axios.get( - `${process.env.REACT_APP_CONTENT_SERVICE_APP_HOST}/${config.URLS.GET_PAGINATION}?page=1&limit=5&collectionId=${sentences?.collectionId}` - ); + let resPagination; + try { + resPagination = await axios.get( + `${process.env.REACT_APP_CONTENT_SERVICE_APP_HOST}/${config.URLS.GET_PAGINATION}?page=1&limit=5&collectionId=${sentences?.collectionId}` + ); + } catch (err) { + console.error("Error fetching pagination:", err); + return; // Exit if there's an error fetching the pagination + } + setCurrentContentType("Sentence"); - setTotalSyllableCount(resPagination?.data?.totalSyllableCount) + setTotalSyllableCount(resPagination?.data?.totalSyllableCount); setCurrentCollectionId(sentences?.collectionId); setAssessmentResponse(resAssessment); localStorage.setItem("storyTitle", sentences?.name); + quesArr = [...quesArr, ...(resPagination?.data?.data || [])]; - // quesArr[1].contentType = 'image'; - // quesArr[0].contentType = 'phonics'; console.log("quesArr", quesArr); setQuestions(quesArr); } catch (error) { - console.log("err", error); + console.error("An unexpected error occurred:", error); } })(); }, []); + const handleBack = () => { const destination = process.env.REACT_APP_IS_APP_IFRAME === 'true' ? "/" : "/discover-start"; navigate(destination); diff --git a/src/utils/VoiceAnalyser.js b/src/utils/VoiceAnalyser.js index 93e43bcc..e58b6bb9 100644 --- a/src/utils/VoiceAnalyser.js +++ b/src/utils/VoiceAnalyser.js @@ -82,16 +82,57 @@ function VoiceAnalyser(props) { }, [props.contentId]); const playAudio = (val) => { + const { originalText } = props; try { - var audio = new Audio( + const audio = new Audio( recordedAudio ? recordedAudio : props.contentId ? `${process.env.REACT_APP_AWS_S3_BUCKET_CONTENT_URL}/all-audio-files/${lang}/${props.contentId}.wav` : AudioPath[1][10] ); - set_temp_audio(audio); - setPauseAudio(val); + + audio.addEventListener('canplaythrough', () => { + set_temp_audio(audio); + setPauseAudio(val); + audio.play(); + }); + + audio.addEventListener('error', (err) => { + console.error('Audio error: ', err); + + const lang = localStorage.getItem('lang') || 'en'; + let voiceLang = 'en-US'; + + if (lang === 'hi') { + voiceLang = 'hi-IN'; + } else if (lang === 'en') { + voiceLang = 'en-US'; + } + + if ('speechSynthesis' in window) { + const synth = window.speechSynthesis; + const utterance = new SpeechSynthesisUtterance(originalText); + const voices = synth.getVoices(); + + // Find a voice that matches the language preference + const selectedVoice = voices.find((voice) => voice.lang === voiceLang); + if (selectedVoice) { + utterance.voice = selectedVoice; + } else { + console.error(`No voice found for language: ${voiceLang}`); + } + + utterance.onend = () => { + setPauseAudio(false); + }; + + synth.speak(utterance); + setPauseAudio(val); + } else { + console.error('Web Speech API is not supported in this browser.'); + } + }); } catch (err) { console.log(err); } diff --git a/src/views/Practice/Practice.jsx b/src/views/Practice/Practice.jsx index ef33e3d7..1313372e 100644 --- a/src/views/Practice/Practice.jsx +++ b/src/views/Practice/Practice.jsx @@ -164,17 +164,21 @@ const Practice = () => { send(1); } } else { - const pointsRes = await axios.post( - `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.ADD_POINTER}`, - { + try{ + const pointsRes = await axios.post( + `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.ADD_POINTER}`, + { userId: localStorage.getItem("virtualId"), sessionId: localStorage.getItem("sessionId"), points: 1, language: lang, milestone: `m${level}`, } - ); - setPoints(pointsRes?.data?.result?.totalLanguagePoints || 0); + ); + setPoints(pointsRes?.data?.result?.totalLanguagePoints || 0); + } catch (err) { + console.log(" Error adding points",err); + } } const virtualId = getLocalData("virtualId"); @@ -197,19 +201,22 @@ const Practice = () => { } let showcasePercentage = ((currentQuestion + 1) * 100) / questions.length; - - await axios.post( - `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.ADD_LESSON}`, - { - userId: virtualId, - sessionId: sessionId, - milestone: isShowCase ? "showcase" : `practice`, - lesson: currentPracticeStep, - progress: isShowCase ? showcasePercentage : currentPracticeProgress, - language: lang, - milestoneLevel: `m${level}`, + try{ + await axios.post( + `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.ADD_LESSON}`, + { + userId: virtualId, + sessionId: sessionId, + milestone: isShowCase ? "showcase" : `practice`, + lesson: currentPracticeStep, + progress: isShowCase ? showcasePercentage : currentPracticeProgress, + language: lang, + milestoneLevel: `m${level}`, + }); + } catch (err) { + setLoading(false); + console.log("Error posting lesson progress data",err) } - ); let newPracticeStep = currentQuestion === questions.length - 1 || isGameOver @@ -244,17 +251,21 @@ const Practice = () => { setPercentage(getSetData?.data?.percentage); checkFluency(currentContentType, getSetData?.data?.fluency); if(process.env.REACT_APP_POST_LEARNER_PROGRESS === "true"){ - await axios.post( - `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.CREATE_LEARNER_PROGRESS}`, - { - userId: virtualId, - sessionId: sessionId, - subSessionId: sub_session_id, - milestoneLevel: getSetData?.data?.currentLevel, - totalSyllableCount: totalSyllableCount, - language: localStorage.getItem("lang"), - } - ); + try{ + await axios.post( + `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.CREATE_LEARNER_PROGRESS}`, + { + userId: virtualId, + sessionId: sessionId, + subSessionId: sub_session_id, + milestoneLevel: getSetData?.data?.currentLevel, + totalSyllableCount: totalSyllableCount, + language: localStorage.getItem("lang"), + } + ); + } catch(err){ + console.log("Error adding points",err); + } } setLocalData("previous_level", getSetData.data.previous_level); if (getSetData.data.sessionResult === "pass") { @@ -274,8 +285,8 @@ const Practice = () => { gameOver({ link: "/assesment-end" }, true); return; } - catch(e){ - // catch error + catch (err) { + console.log("Error posting lesson progress data",err); } } @@ -293,8 +304,9 @@ const Practice = () => { (elem) => elem.title === practiceSteps?.[newPracticeStep].name ); - await axios.post( - `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.ADD_LESSON}`, + try{ + await axios.post( + `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.ADD_LESSON}`, { userId: virtualId, sessionId: sessionId, @@ -304,7 +316,15 @@ const Practice = () => { language: lang, milestoneLevel: `m${level}`, } - ); + ); + } catch (err) { + setOpenMessageDialog({ + message: + " Error posting lesson progress data", + isError: true, + dontShowHeader:true + }); + } if (newPracticeStep === 0 || newPracticeStep === 5 || isGameOver) { gameOver(); @@ -427,10 +447,14 @@ const Practice = () => { const resLessons = await axios.get( `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.GET_LESSON_PROGRESS_BY_ID}/${virtualId}?language=${lang}` ); + try { const getPointersDetails = await axios.get( `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.GET_POINTER}/${virtualId}/${sessionId}?language=${lang}` ); setPoints(getPointersDetails?.data?.result?.totalLanguagePoints || 0); + } catch (err) { + console.log("Error getting pointer details",err); + } let userState = Number.isInteger( Number(resLessons.data?.result?.result?.lesson) @@ -475,6 +499,7 @@ const Practice = () => { let showcaseLevel = userState === 4 || userState === 9; setIsShowCase(showcaseLevel); if (showcaseLevel) { + try { await axios.post( `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.ADD_LESSON}`, { @@ -487,6 +512,9 @@ const Practice = () => { milestoneLevel: `m${level}`, } ); + }catch (err) { + console.log("Error posting lesson progress data", err); + } } setCurrentQuestion(practiceProgress[virtualId]?.currentQuestion || 0); @@ -495,6 +523,12 @@ const Practice = () => { setLoading(false); } catch (error) { setLoading(false); + setOpenMessageDialog({ + message: + "Content Unavailable", + isError: true, + dontShowHeader:true + }); console.log("err", error); } }; @@ -520,20 +554,23 @@ const Practice = () => { currentPracticeStep: newCurrentPracticeStep, fromBack: true, }; - - await axios.post( - `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.ADD_LESSON}`, - { - userId: virtualId, - sessionId: sessionId, - milestone: "practice", +try{ + await axios.post( + `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.ADD_LESSON}`, + { + userId: virtualId, + sessionId: sessionId, + milestone: "practice", lesson: newCurrentPracticeStep, progress: (newCurrentPracticeStep / practiceSteps.length) * 100, language: lang, milestoneLevel: `m${level}`, } - ); - + ); + + } catch (err) { + console.log("Error posting lesson progress data",err); + } setProgressData(practiceProgress[virtualId]); const currentGetContent = levelGetContent?.[level]?.find(