feat(mobile): 💄 update learning flow

Signed-off-by: Yunus Andréasson <yunus@edenmind.com>

mobile/components/context-highlighted-word.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { useRef, useState, useEffect, useCallback } from 'react'
+import React, { useRef, useState, useEffect } from 'react'
 import { Animated, StyleSheet } from 'react-native'
 import { Text, useTheme } from 'react-native-paper'
 
@@ -22,7 +22,7 @@ const HighlightedWord = ({ word: { arabic } }) => {
   })
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const animateBorderOpacity = useCallback(() => {
+  const animateBorderOpacity = () => {
     const toValue = isBorderVisible ? 0.2 : 1
     Animated.timing(borderOpacity, {
       duration: 750,
@@ -31,7 +31,7 @@ const HighlightedWord = ({ word: { arabic } }) => {
     }).start(() => {
       setIsBorderVisible(!isBorderVisible)
     })
-  })
+  }
 
   useEffect(() => {
     animateBorderOpacity()

mobile/hooks/use-practice-logic.js

@@ -7,7 +7,9 @@ import { HOST } from '../constants/urls.js'
 import { useAudioPlayer } from '../hooks/use-audio-player.js'
 import { getThreeRandomWords } from '../services/utility-service.js'
 
-function useTextPracticeLogic(isComponentVisible = false) {
+const audioSelector = (state) => state.audio
+
+function useTextPracticeLogic() {
   const getText = (state) => state.text
   const { text } = useSelector(getText)
   const getTextLoading = (state) => state.textLoading
@@ -24,6 +26,7 @@ function useTextPracticeLogic(isComponentVisible = false) {
   const [sentenceIsComplete, setSentenceIsComplete] = useState(false)
   const [celebrationSnackBarVisibility, setCelebrationSnackBarVisibility] = useState(false)
   const { playSound } = useAudioPlayer()
+  const { shouldPlayPracticeWord } = useSelector(audioSelector)
 
   const dispatch = useDispatch()
 
@@ -47,14 +50,16 @@ function useTextPracticeLogic(isComponentVisible = false) {
 
   // Play the audio for the current word
   useEffect(() => {
-    if (!isComponentVisible) return // Only play the audio if the component is visible
-
     const wordFilename = sentencesInText?.[currentSentence]?.wordFilename[currentWord]
     if (!wordFilename) return
 
     const audioURL = HOST.audio + wordFilename
-    playSound(audioURL)
-  }, [currentWord, isComponentVisible])
+    if (shouldPlayPracticeWord) {
+      console.log('shouldPlayPracticeWord:', shouldPlayPracticeWord)
+
+      playSound(audioURL)
+    }
+  }, [currentWord, shouldPlayPracticeWord])
 
   // Update the current sentence and word when the text is loaded
   useEffect(() => {
@@ -93,7 +98,7 @@ function useTextPracticeLogic(isComponentVisible = false) {
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const handleContinue = () => {
-    setSentenceIsComplete(false)
+    setSentenceIsComplete(true)
 
     if (currentSentence === sentencesInText?.length) {
       setCelebrationSnackBarVisibility(true)
@@ -134,6 +139,11 @@ function useTextPracticeLogic(isComponentVisible = false) {
       }
 
       if (isLastWordInSentence) {
+        dispatch({
+          payload: false,
+          type: 'SET_AUDIO_SHOULD_PLAY_PRACTICE_WORDS'
+        })
+
         setSentenceIsComplete(true)
 
         if (isLastSentence) {

mobile/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "homepage": "https://openarabic.io",
   "repository": "https://github.com/edenmind/OpenArabic",
-  "version": "1445.2.374",
+  "version": "1445.2.375",
   "authors": [
     "Yunus Andreasson <yunus@edenmind.com> (https://github.com/YunusAndreasson)"
   ],

mobile/redux/actions.js

@@ -7,6 +7,7 @@ export const RESET_WORDS = createAction('RESET_WORDS')
 export const SET_ARABIC_FONT_NAME = createAction('SET_ARABIC_FONT_NAME')
 export const SET_ARABIC_FONT_SIZE = createAction('SET_ARABIC_FONT_SIZE')
 export const SET_AUDIO = createAction('SET_AUDIO')
+export const SET_AUDIO_SHOULD_PLAY_PRACTICE_WORDS = createAction('SET_AUDIO_SHOULD_PLAY_PRACTICE_WORDS')
 export const SET_ENG = createAction('SET_ENG')
 export const SET_CATEGORIES = createAction('SET_CATEGORIES')
 export const SET_DARK_MODE = createAction('SET_DARK_MODE')

mobile/redux/reducers.js

@@ -3,7 +3,8 @@ import { createReducer } from '@reduxjs/toolkit'
 import * as actions from './actions.js'
 
 const initialStateAudio = {
-  shouldPlay: true
+  shouldPlay: true,
+  shouldPlayPracticeWord: false
 }
 const initialStateCategories = { categories: [] }
 const initialStateText = { text: {} }
@@ -25,9 +26,14 @@ const initialStateUI = {
 }
 
 const audioReducer = createReducer(initialStateAudio, (builder) => {
-  builder.addCase(actions.SET_AUDIO, (state, action) => {
-    state.shouldPlay = action.payload
-  })
+  builder
+    .addCase(actions.SET_AUDIO, (state, action) => {
+      state.shouldPlay = action.payload
+    })
+    .addCase(actions.SET_AUDIO_SHOULD_PLAY_PRACTICE_WORDS, (state, action) => {
+      console.log('setting should play practice words to', action.payload)
+      state.shouldPlayPracticeWord = action.payload
+    })
 })
 
 const UIStateReducer = createReducer(initialStateUI, (builder) => {

mobile/screens/text-bilingual.js

@@ -121,6 +121,10 @@ export default function TextBilingual() {
             payload: false,
             type: 'SET_AUDIO'
           })
+          dispatch({
+            payload: false,
+            type: 'SET_AUDIO_SHOULD_PLAY_PRACTICE_WORDS'
+          })
         }}
       />
     </>

mobile/screens/text-list.js

@@ -138,6 +138,7 @@ export default function TextList({ route, navigation }) {
         visible={visiblePractice}
         content={<Words />}
         hideModal={() => {
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
           setVisiblePractice(false)
         }}
       />

mobile/screens/text-practice.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React, { useState, useEffect } from 'react'
 import { View, ScrollView } from 'react-native'
 import { useTheme, Divider, ProgressBar } from 'react-native-paper'
+import { useDispatch } from 'react-redux'
 
 import { ActionButton } from '../components/action-button.js'
 import { AnimatedButton } from '../components/animated-button.js'
@@ -17,7 +18,7 @@ const TextPractice = () => {
   const [showWordsPractice, setShowWordsPractice] = useState(false)
   const [isPlaying, setIsPlaying] = useState(false)
   const [showRepeat, setShowRepeat] = useState(false)
-  const [isComponentVisible, setIsComponentVisible] = useState(false)
+  const dispatch = useDispatch()
 
   const {
     isLastSentence,
@@ -33,22 +34,14 @@ const TextPractice = () => {
     handleReset,
     handleContinue,
     handlePress
-  } = useTextPracticeLogic(isComponentVisible)
+  } = useTextPracticeLogic()
 
   useEffect(() => {
     if (sentenceIsComplete) {
       setShowWordsPractice(false)
     }
   }, [sentenceIsComplete])
 
-  useEffect(() => {
-    if (showWordsPractice) {
-      setIsComponentVisible(true)
-    } else {
-      setIsComponentVisible(false)
-    }
-  }, [showWordsPractice])
-
   const handleStartPractice = () => {
     setShowWordsPractice(true)
   }
@@ -84,7 +77,7 @@ const TextPractice = () => {
 
   return textLoading ? (
     <>
-      <ScrollView>
+      <ScrollView style={{ width: '100%' }}>
         <ProgressBar
           color={theme.colors.tertiary}
           progress={currentSentence / (sentencesInText.length - 1)}
@@ -100,11 +93,11 @@ const TextPractice = () => {
         <PrepareForPractice
           {...{
             currentSentence,
+            dispatch,
             handleContinue: handleStartPractice,
             handleReset,
             isLastSentence,
             isPlaying,
-            setIsComponentVisible,
             setIsPlaying,
             setSentenceIsComplete,
             setShowRepeat,
@@ -126,11 +119,11 @@ const PrepareForPractice = ({
   isPlaying,
   handleReset,
   handleContinue,
-  setIsComponentVisible,
   setIsPlaying,
   setSentenceIsComplete,
   showRepeat,
-  setShowRepeat
+  setShowRepeat,
+  dispatch
 }) => (
   <>
     <View style={{ position: 'absolute', top: 150, width: '100%' }}>
@@ -153,10 +146,13 @@ const PrepareForPractice = ({
         showRepeat && (
           <ActionButton
             onPress={() => {
-              setIsComponentVisible(true)
               setSentenceIsComplete(false)
               setShowRepeat(false)
               handleContinue()
+              dispatch({
+                payload: true,
+                type: 'SET_AUDIO_SHOULD_PLAY_PRACTICE_WORDS'
+              })
             }}
             text="CONTINUE"
           />
@@ -168,11 +164,11 @@ const PrepareForPractice = ({
 
 PrepareForPractice.propTypes = {
   currentSentence: PropTypes.number.isRequired,
+  dispatch: PropTypes.func.isRequired,
   handleContinue: PropTypes.func.isRequired,
   handleReset: PropTypes.func.isRequired,
   isLastSentence: PropTypes.bool.isRequired,
   isPlaying: PropTypes.bool.isRequired,
-  setIsComponentVisible: PropTypes.func.isRequired,
   setIsPlaying: PropTypes.func.isRequired,
   setSentenceIsComplete: PropTypes.func.isRequired,
   setShowRepeat: PropTypes.func.isRequired,

mobile/styles/common.js

@@ -203,7 +203,8 @@ export const useSharedStyles = (theme) => {
         backgroundColor: theme.colors.elevation.level5,
         borderRadius: 10,
         height: 15,
-        marginVertical: 10
+        marginVertical: 10,
+        width: '100%'
       },
       reading: {
         color: theme.colors.outline,