feat(mobile): ✨ Add explanation when pressing grammar label

Fixes #2215 Signed-off-by: Yunus Andréasson <yunus@edenmind.com>
edenmind · Jul 29, 2023 · 8dd014b · 8dd014b
1 parent 719d779
commit 8dd014b
Show file tree

Hide file tree

Showing 7 changed files with 616 additions and 2 deletions.
diff --git a/mobile/.yarn/install-state.gz b/mobile/.yarn/install-state.gz
diff --git a/mobile/.yarn/versions/e44b2b3e.yml b/mobile/.yarn/versions/e44b2b3e.yml
diff --git a/mobile/package.json b/mobile/package.json
@@ -4,7 +4,7 @@
   "license": "MIT",
   "homepage": "https://openarabic.io",
   "repository": "https://github.com/edenmind/OpenArabic",
-  "version": "1444.12.328",
+  "version": "1444.12.329",
   "authors": [
     "Yunus Andreasson <yunus@edenmind.com> (https://github.com/YunusAndreasson)"
   ],

diff --git a/mobile/screens/text-grammar.js b/mobile/screens/text-grammar.js
@@ -48,7 +48,7 @@ export default function TextGrammar({ route }) {
       </Text>
 
       <PlaySound
-        audioFileNames={`https://openarabic.ams3.digitaloceanspaces.com/audio/${filename}`}
+        audioFileName={`https://openarabic.ams3.digitaloceanspaces.com/audio/${filename}`}
         buttonText={'Play'}
       />
       <Divider style={{ marginBottom: 20, opacity: 0 }} />

diff --git a/mobile/screens/words-setup-difficulty-level.js b/mobile/screens/words-setup-difficulty-level.js
@@ -5,12 +5,31 @@ import { View, Image } from 'react-native'
 import { Divider, Surface, Text, useTheme, Chip } from 'react-native-paper'
 import { useSharedStyles } from '../styles/common.js'
 import PropTypes from 'prop-types'
+import ModalScrollView from '../components/modal-scroll-view.js'
+import {
+  getNoun,
+  getVerb,
+  getParticle,
+  getDefinite,
+  getPresent,
+  getPlural,
+  getPronouns,
+  getFuture,
+  getDual,
+  getPassive,
+  getCompound
+} from '../services/grammar-service.js'
+import { formatGrammar } from '../services/ui-services.js'
 
 const WordsSetupDifficultyLevel = (props) => {
   const theme = useTheme()
   const sharedStyle = useSharedStyles(theme)
   let source
   let goal
+  const [visible, setVisible] = React.useState(false)
+  const hideModal = () => setVisible(false)
+  const [title, setTitle] = React.useState('')
+  const [explanation, setExplanation] = React.useState('')
 
   switch (props.difficultyLevel) {
     case 10: {
@@ -26,24 +45,40 @@ const WordsSetupDifficultyLevel = (props) => {
               style={{ margin: 3, backgroundColor: theme.colors.tertiary }}
               compact={true}
               selectedColor={theme.colors.onTertiary}
+              onPress={() => {
+                setVisible(true)
+                setTitle('Noun')
+                setExplanation(formatGrammar(getNoun(), sharedStyle))
+              }}
             >
               Noun
             </Chip>
             <Chip
               style={{ margin: 3, backgroundColor: theme.colors.tertiary }}
               compact={true}
               selectedColor={theme.colors.onTertiary}
+              onPress={() => {
+                setVisible(true)
+                setTitle('Verb')
+                setExplanation(formatGrammar(getVerb(), sharedStyle))
+              }}
             >
               Verb
             </Chip>
             <Chip
               style={{ margin: 3, backgroundColor: theme.colors.tertiary }}
               compact={true}
               selectedColor={theme.colors.onTertiary}
+              onPress={() => {
+                setVisible(true)
+                setTitle('Particle')
+                setExplanation(formatGrammar(getParticle(), sharedStyle))
+              }}
             >
               Particle
             </Chip>
           </View>
+          <Text variant="labelSmall">Press label for explanation</Text>
         </>
       )
 
@@ -62,13 +97,23 @@ const WordsSetupDifficultyLevel = (props) => {
               style={{ margin: 3, backgroundColor: theme.colors.tertiary }}
               compact={true}
               selectedColor={theme.colors.onTertiary}
+              onPress={() => {
+                setVisible(true)
+                setTitle('Definite')
+                setExplanation(formatGrammar(getDefinite(), sharedStyle))
+              }}
             >
               Definite
             </Chip>
             <Chip
               style={{ margin: 3, backgroundColor: theme.colors.tertiary }}
               compact={true}
               selectedColor={theme.colors.onTertiary}
+              onPress={() => {
+                setVisible(true)
+                setTitle('Present')
+                setExplanation(formatGrammar(getPresent(), sharedStyle))
+              }}
             >
               Present
             </Chip>
@@ -77,6 +122,11 @@ const WordsSetupDifficultyLevel = (props) => {
               style={{ margin: 3, backgroundColor: theme.colors.tertiary }}
               compact={true}
               selectedColor={theme.colors.onTertiary}
+              onPress={() => {
+                setVisible(true)
+                setTitle('Plural')
+                setExplanation(formatGrammar(getPlural(), sharedStyle))
+              }}
             >
               Plural
             </Chip>
@@ -85,10 +135,16 @@ const WordsSetupDifficultyLevel = (props) => {
               style={{ margin: 3, backgroundColor: theme.colors.tertiary }}
               compact={true}
               selectedColor={theme.colors.onTertiary}
+              onPress={() => {
+                setVisible(true)
+                setTitle('Pronoun')
+                setExplanation(formatGrammar(getPronouns(), sharedStyle))
+              }}
             >
               Pronoun
             </Chip>
           </View>
+          <Text variant="labelSmall">Press label for explanation</Text>
         </>
       )
 
@@ -107,31 +163,52 @@ const WordsSetupDifficultyLevel = (props) => {
               style={{ margin: 3, backgroundColor: theme.colors.tertiary }}
               compact={true}
               selectedColor={theme.colors.onTertiary}
+              onPress={() => {
+                setVisible(true)
+                setTitle('Future')
+                setExplanation(formatGrammar(getFuture(), sharedStyle))
+              }}
             >
               Future
             </Chip>
             <Chip
               style={{ margin: 3, backgroundColor: theme.colors.tertiary }}
               compact={true}
               selectedColor={theme.colors.onTertiary}
+              onPress={() => {
+                setVisible(true)
+                setTitle('Dual')
+                setExplanation(formatGrammar(getDual(), sharedStyle))
+              }}
             >
               Dual
             </Chip>
             <Chip
               style={{ margin: 3, backgroundColor: theme.colors.tertiary }}
               compact={true}
               selectedColor={theme.colors.onTertiary}
+              onPress={() => {
+                setVisible(true)
+                setTitle('Compound')
+                setExplanation(formatGrammar(getCompound(), sharedStyle))
+              }}
             >
               Compound
             </Chip>
             <Chip
               style={{ margin: 3, backgroundColor: theme.colors.tertiary }}
               compact={true}
               selectedColor={theme.colors.onTertiary}
+              onPress={() => {
+                setVisible(true)
+                setTitle('Passive')
+                setExplanation(formatGrammar(getPassive(), sharedStyle))
+              }}
             >
               Passive
             </Chip>
           </View>
+          <Text variant="labelSmall">Press label for explanation</Text>
         </>
       )
 
@@ -149,6 +226,14 @@ const WordsSetupDifficultyLevel = (props) => {
         <Divider style={{ ...sharedStyle.divider, opacity: 0 }} />
         {goal}
       </View>
+      <ModalScrollView
+        visible={visible}
+        content={<View>{explanation}</View>}
+        title={title}
+        hideModal={hideModal}
+        height="87%"
+        titleLanguage="english"
+      />
     </Surface>
   )
 }