Merge pull request #214 from gouravmore/rig-templates

Issue #0000: next line issue
Sunbird-ALL · Feb 11, 2024 · 7c4d3e4 · 7c4d3e4
2 parents f0e87a5 + 1e8c392
commit 7c4d3e4
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 70 deletions.
diff --git a/src/pages/Test-Rig-Two/Story/SpellAndCheck.jsx b/src/pages/Test-Rig-Two/Story/SpellAndCheck.jsx
@@ -31,15 +31,15 @@ const SpellAndCheck = ({
   const [isTryAgain, setIsTryAgain] = useState(false);
 
   const currentWord = targetWords[currentWordIndex];
-  let wordChars =
-    contentType === 'word'
-      ? splitGraphemes(currentWord?.contentSourceData[0]?.text).filter(
-          item => item !== '‌' && item !== '' && item !== ' '
-        )
+  let wordChars = [];
+  if (currentWord?.contentSourceData[0]?.text) {
+    wordChars = (contentType === 'word') ? splitGraphemes(currentWord?.contentSourceData[0]?.text).filter(
+      item => item !== '‌' && item !== '' && item !== ' '
+    )
       : currentWord?.contentSourceData[0]?.text
-          .split(' ')
-          .filter(item => item !== '‌' && item !== '' && item !== ' ');
-
+        .split(' ')
+        .filter(item => item !== '‌' && item !== '' && item !== ' ');
+  }
   const handleDragStart = (e, char) => {
     e.dataTransfer.setData('text/plain', char);
   };
@@ -89,9 +89,8 @@ const SpellAndCheck = ({
     return wordChars.map((char, index) => (
       <div
         key={index}
-        className={`${
-          matchedChars.includes(char) ? 'source-char-disable' : 'source-char'
-        }`}
+        className={`${matchedChars.includes(char) ? 'source-char-disable' : 'source-char'
+          }`}
         onClick={() =>
           matchedChars.includes(char) ? null : handleCharacterClick(index)
         }
@@ -102,13 +101,12 @@ const SpellAndCheck = ({
   };
 
   const renderTargetChars = () => {
-    return wordChars.map((char, index) => (
+    return wordChars && wordChars.map((char, index) => (
       <div
         key={index}
         style={{ fontSize: '30px', textAlign: 'center' }}
-        className={`target-char ${
-          matchedChars.includes(char) ? 'matched-char' : ''
-        }`}
+        className={`target-char ${matchedChars.includes(char) ? 'matched-char' : ''
+          }`}
       >
         {matchedChars.includes(char) ? (
           <div className="">{char}</div>
@@ -185,56 +183,56 @@ const SpellAndCheck = ({
             <HStack gap={'2rem'}>
               {audioUrl !== ' '
                 ? isAudioPlay !== 'recording' && (
-                    <VStack>
-                      <div>
-                        {flag ? (
-                          <>
-                            <img
-                              className="play_btn"
-                              src={Speaker}
-                              style={{
-                                height: '72px',
-                                width: '72px',
-                              }}
-                              onClick={() => playTeacherAudio()}
-                              alt="play_audio"
-                            />
-                            <h4
-                              className="text-play m-0 "
-                              style={{
-                                position: 'relative',
-                                textAlign: 'center',
-                              }}
-                            >
-                              Listen
-                            </h4>
-                          </>
-                        ) : (
-                          <>
-                            <img
-                              className="play_btn"
-                              src={MuteSpeaker}
-                              style={{
-                                height: '72px',
-                                width: '72px',
-                              }}
-                              onClick={() => pauseAudio()}
-                              alt="pause_audio"
-                            />
-                            <h4
-                              className="text-play m-0 "
-                              style={{
-                                position: 'relative',
-                                textAlign: 'center',
-                              }}
-                            >
-                              Mute
-                            </h4>
-                          </>
-                        )}
-                      </div>
-                    </VStack>
-                  )
+                  <VStack>
+                    <div>
+                      {flag ? (
+                        <>
+                          <img
+                            className="play_btn"
+                            src={Speaker}
+                            style={{
+                              height: '72px',
+                              width: '72px',
+                            }}
+                            onClick={() => playTeacherAudio()}
+                            alt="play_audio"
+                          />
+                          <h4
+                            className="text-play m-0 "
+                            style={{
+                              position: 'relative',
+                              textAlign: 'center',
+                            }}
+                          >
+                            Listen
+                          </h4>
+                        </>
+                      ) : (
+                        <>
+                          <img
+                            className="play_btn"
+                            src={MuteSpeaker}
+                            style={{
+                              height: '72px',
+                              width: '72px',
+                            }}
+                            onClick={() => pauseAudio()}
+                            alt="pause_audio"
+                          />
+                          <h4
+                            className="text-play m-0 "
+                            style={{
+                              position: 'relative',
+                              textAlign: 'center',
+                            }}
+                          >
+                            Mute
+                          </h4>
+                        </>
+                      )}
+                    </div>
+                  </VStack>
+                )
                 : ''}
             </HStack>
           </div>

diff --git a/src/pages/Test-Rig-Two/Story/Story.jsx b/src/pages/Test-Rig-Two/Story/Story.jsx
@@ -108,9 +108,6 @@ const Story = ({ forceRerender, setForceRerender }) => {
     ];
   }
 
-  console.log(JSON.parse(localStorage.getItem('criteria')));
-  console.log(completionCriteria[localStorage.getItem('userCurrentLevel') || 'm1'])
-  console.log(practiceCompletionCriteria)
   const { slug } = useParams();
   const max = practiceCompletionCriteria.length;
   const progressPercent =
@@ -155,7 +152,6 @@ const Story = ({ forceRerender, setForceRerender }) => {
   }, [forceRerender, completionCriteriaIndex]);
 
   const fetchApi = async () => {
-    SetTemplate(practiceCompletionCriteria[completionCriteriaIndex]?.template || 'simple')
     setLoading(true);
     if (practiceCompletionCriteria[completionCriteriaIndex]?.title === 'S1') {
       toast({
@@ -200,6 +196,9 @@ const Story = ({ forceRerender, setForceRerender }) => {
           setSourceChars(data?.getTargetChar);
           setPosts(newPosts);
           setCurrentLine(0);
+          if(posts.length > 0){
+            SetTemplate(practiceCompletionCriteria[completionCriteriaIndex]?.template || 'simple')
+          }
           setLoading(false);
         });
       setLoading(false);
@@ -368,6 +367,7 @@ const Story = ({ forceRerender, setForceRerender }) => {
     if (currentLine >= posts?.length - 1) {
       handleStarAnimation();
       setWellDone(true);
+      setCurrentWordIndex(0);
     } else {
       setCurrentLine(currentLine + 1);
       SetTemplate(practiceCompletionCriteria[completionCriteriaIndex]?.template || '')
@@ -779,7 +779,7 @@ const Story = ({ forceRerender, setForceRerender }) => {
                 </Box>
               </VStack>
             </>
-          ) : posts &&
+          ) : posts?.length >= 0 &&
             practiceCompletionCriteria[completionCriteriaIndex]?.template ==
             'spell-and-check' ? (
               <>