fix(mobile): 🐛 display words capitalized in practice

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

mobile/constants/urls.js

@@ -1,6 +1,6 @@
 export const HOST = {
-  //backend: 'http://localhost:3030',
-  backend: 'https://backend.openarabic.io',
+  backend: 'http://localhost:3030',
+  //backend: 'https://backend.openarabic.io',
   frontend: 'https://web.openarabic.io'
 }
 

mobile/package.json

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

mobile/screens/__snapshots__/text-bilingual-heading.test.js.snap

@@ -32,19 +32,13 @@ exports[`<TextBilingualHeading /> renders correctly 1`] = `
           "color": "rgba(28, 27, 31, 1)",
           "writingDirection": "ltr",
         },
-        [
-          {
-            "color": "rgba(28, 27, 31, 1)",
-            "fontFamily": "philosopher",
-            "numberOfLines": 2,
-            "paddingHorizontal": 25,
-            "paddingTop": 25,
-            "textAlign": "center",
-          },
-          {
-            "numberOfLines": 2,
-          },
-        ],
+        {
+          "color": "rgba(28, 27, 31, 1)",
+          "fontFamily": "philosopher",
+          "paddingHorizontal": 25,
+          "paddingTop": 25,
+          "textAlign": "center",
+        },
       ]
     }
   >

mobile/screens/text-arabic.js

@@ -24,7 +24,7 @@ function TextArabic() {
   const sharedStyle = useSharedStyles(theme)
   const [englishTranslation, setEnglishTranslation] = React.useState('Tap to Translate! 👇🏽')
   const [explanation, setExplanation] = React.useState(<Text>Choose a Word first...</Text>)
-  const [arabicWord, setArabicWord] = React.useState(false)
+  const [arabicWord, setArabicWord] = React.useState('')
   const [visible, setVisible] = React.useState(false)
   const [explainIsVisible, setExplainIsVisible] = React.useState(false)
   const hideModal = () => setVisible(false)

mobile/screens/text-bilingual-heading.js

@@ -33,7 +33,6 @@ export default function TextBilingualHeading({ heading }) {
     title: {
       color: theme.colors.onBackground,
       fontFamily: 'philosopher',
-      numberOfLines: 2,
       paddingHorizontal: 25,
       paddingTop: 25,
       textAlign: 'center'
@@ -43,7 +42,7 @@ export default function TextBilingualHeading({ heading }) {
   return (
     <>
       <Image source={{ uri: image }} style={style.image} />
-      <Text variant="headlineMedium" style={[style.title, { numberOfLines: 2 }]}>
+      <Text variant="headlineMedium" style={style.title}>
         {title}
       </Text>
 
@@ -75,7 +74,6 @@ TextBilingualHeading.propTypes = {
     readingTime: PropTypes.string.isRequired,
     image: PropTypes.string.isRequired,
     author: PropTypes.string.isRequired,
-    source: PropTypes.string.isRequired,
-    introduction: PropTypes.string.isOptional
+    source: PropTypes.string.isRequired
   })
 }

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

@@ -51,7 +51,6 @@ export default function TextListCardText({ setShouldReload, navigation, text })
     cardTitle: {
       color: theme.colors.onBackground,
       fontFamily: 'philosopher',
-      numberOfLines: 2,
       paddingVertical: 5
     },
     divider: {

mobile/screens/words-setup-difficulty-level.js

@@ -149,5 +149,5 @@ const WordsSetupDifficultyLevel = (props) => {
 export default WordsSetupDifficultyLevel
 
 WordsSetupDifficultyLevel.propTypes = {
-  difficultyLevel: PropTypes.string.isRequired
+  difficultyLevel: PropTypes.number.isRequired
 }

mobile/screens/words-setup.js

@@ -97,7 +97,7 @@ export default WordsSetup
 WordsSetup.propTypes = {
   numberOfWordsToPractice: PropTypes.number.isRequired,
   setNumberOfWordsToPractice: PropTypes.func.isRequired,
-  difficultyLevel: PropTypes.string.isRequired,
+  difficultyLevel: PropTypes.number.isRequired,
   resetStateForNewWords: PropTypes.func.isRequired,
   handleSetDifficultyLevel: PropTypes.func.isRequired
 }

mobile/services/ui-services.js

@@ -5,7 +5,6 @@ import { ENDPOINT, HOST } from '../constants/urls.js'
 import * as MailComposer from 'expo-mail-composer'
 import React from 'react'
 import { Text } from 'react-native-paper'
-import { prepareTitle } from '../services/utility-service.js'
 export function generateShare(text) {
   async function shareText() {
     await Share.share({
@@ -18,6 +17,20 @@ export function generateShare(text) {
   return shareText
 }
 
+// give me a function that capitalizes all letters in a title
+export const prepareTitle = (title) => {
+  const words = title.trim().split(' ')
+
+  const capitalizedWords = words.map((word) => {
+    const firstLetter = word[0].toUpperCase()
+    const restOfWord = word.slice(1)
+
+    return `${firstLetter}${restOfWord}`
+  })
+
+  return capitalizedWords.join(' ')
+}
+
 export function generateError(text) {
   async function composeError() {
     await MailComposer.composeAsync({

mobile/services/utility-service.js

@@ -34,28 +34,24 @@ export const checkIfWithinLastThreeDays = (createdAt) => {
   return false
 }
 
-//function that removes anything between [] in a string
-export const removeAnythingBetweenBrackets = (text) => text.replaceAll(/\[.*?]/g, '')
+export const removeAnythingBetweenBrackets = (text) => {
+  // remove anything between brackets
+  let updatedText = text.replaceAll(/\[.*?]/g, '')
+
+  // remove leading blank space if it exists
+  if (updatedText.startsWith(' ')) {
+    updatedText = updatedText.slice(1)
+  }
+
+  // ensure first character is uppercase
+  return updatedText.charAt(0).toUpperCase() + updatedText.slice(1)
+}
 
 //function that capitalizes the first letter
 export const capitalizeFirstLetter = (string) => {
   return string.charAt(0).toUpperCase() + string.slice(1)
 }
 
-// give me a function that capitalizes all letters in a title
-export const prepareTitle = (title) => {
-  const words = title.split(' ')
-
-  const capitalizedWords = words.map((word) => {
-    const firstLetter = word[0].toUpperCase()
-    const restOfWord = word.slice(1)
-
-    return `${firstLetter}${restOfWord}`
-  })
-
-  return capitalizedWords.join(' ')
-}
-
 const truncate = (stringToTruncate, truncateLength) => {
   const cleanString = stringToTruncate.replace(' \n', '')