feat(mobile): ✨ Add transliteration in grammar

api/controllers/words.js

@@ -6,9 +6,8 @@
 
 const COLLECTIONS = require('../constants/collections.js')
 const { capitalizeFirstLetter, shuffleArray, convertToLowerCase, getAllWordsFromTexts } = require('../services/texts')
-const { timeAgo } = require('../services/utils')
 const { ObjectId } = require('mongodb')
-const { removeAnythingBetweenBrackets } = require('../services/utils')
+const { removeAnythingBetweenBrackets, timeAgo } = require('../services/utils')
 
 async function getWordId(request, reply) {
   try {

api/services/texts.js

@@ -254,7 +254,7 @@ function getWordsPairedWithId(word) {
   return { arabicWord, englishWord }
 }
 
-export const removeAnythingBetweenBrackets = (text) => {
+const removeAnythingBetweenBrackets = (text) => {
   // remove anything between brackets
   let updatedText = text.replaceAll(/\[.*?]/g, '')
 
@@ -299,6 +299,7 @@ module.exports = {
   getAllWordsFromTexts,
   batchGenerateAudio,
   generateGuidForSentencesAndWords,
+  removeAnythingBetweenBrackets,
   addGuidToArray,
   addGuidToInnerArray,
   produceVocabularyCollection,

mobile/package.json

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

mobile/redux/reducers.js

@@ -129,7 +129,6 @@ const wordsReducer = createReducer(initialStateWords, (builder) => {
     })
 })
 
-
 const textReducer = createReducer(initialStateText, (builder) => {
   builder
     .addCase(actions.SET_TEXT, (state, action) => {

mobile/screens/text-grammar.js

@@ -3,6 +3,7 @@ import { StyleSheet, ScrollView } from 'react-native'
 import React from 'react'
 import PropTypes from 'prop-types'
 import { formatGrammar } from '../services/ui-services.js'
+import { transliterateArabicToEnglish } from '../services/utility-service.js'
 import { useSharedStyles } from '../styles/common.js'
 
 export default function TextGrammar({ route }) {
@@ -17,6 +18,8 @@ export default function TextGrammar({ route }) {
     }
   })
 
+  const transliteratedArabic = transliterateArabicToEnglish(arabic)
+
   return (
     <ScrollView style={style.scrollView}>
       <Text
@@ -40,8 +43,9 @@ export default function TextGrammar({ route }) {
           paddingBottom: 50
         }}
       >
-        {english}
+        {english} - {transliteratedArabic}
       </Text>
+
       {formatGrammar(grammar, sharedStyle)}
       <Divider style={{ marginBottom: 50, opacity: 0 }} />
     </ScrollView>

mobile/screens/text-grammar.test.js

@@ -0,0 +1,32 @@
+import { it } from '@jest/globals'
+import TextGrammar from './text-grammar.js'
+import React from 'react'
+import { Provider } from 'react-redux'
+import { store } from '../redux/store.js'
+import { NavigationContainer } from '@react-navigation/native'
+import { render } from '@testing-library/react-native'
+
+describe('TextGrammar', () => {
+  it('renders the required properties', () => {
+    const props = {
+      route: {
+        params: {
+          grammar: 'some grammar',
+          arabic: 'some arabic text',
+          english: 'some english text'
+        }
+      }
+    }
+
+    const { getByText } = render(
+      <Provider store={store}>
+        <NavigationContainer>
+          <TextGrammar {...props} />
+        </NavigationContainer>
+      </Provider>
+    )
+
+    expect(getByText('some grammar')).toBeDefined()
+    expect(getByText('some arabic text')).toBeDefined()
+  })
+})

mobile/screens/text-list-card-grammar.js

@@ -88,7 +88,7 @@ export default function TextListCardGrammar({ text, navigation, setShouldReload
               })
             }}
           >
-            View Grammar Lesson
+            View Lesson
           </Button>
         </Card.Actions>
       </Card>

mobile/screens/text-list-card-grammar.test.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+import { Provider } from 'react-redux'
+import { store } from '../redux/store.js'
+import { NavigationContainer } from '@react-navigation/native'
+import TextListCardGrammar from './text-list-card-grammar.js'
+
+describe('TextListCardGrammar', () => {
+  it('renders the required properties', () => {
+    const props = {
+      navigation: {},
+      setShouldReload: jest.fn(),
+      text: {
+        english: 'some english text',
+        arabic: 'some arabic text'
+      }
+    }
+
+    const { getByText } = render(
+      <Provider store={store}>
+        <NavigationContainer>
+          <TextListCardGrammar {...props} />
+        </NavigationContainer>
+      </Provider>
+    )
+
+    expect(getByText('some english text')).toBeDefined()
+    expect(getByText('some arabic text')).toBeDefined()
+  })
+})