feat(mobile): ✨ Move settings and about

Fixes #2228, #2230, #2229

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

mobile/components/segemented-button.js

@@ -33,6 +33,6 @@ export const SegmentButtonWithHeader = (props) => {
 SegmentButtonWithHeader.propTypes = {
   title: PropTypes.string.isRequired,
   buttons: PropTypes.array.isRequired,
-  value: PropTypes.number.isRequired,
+  value: PropTypes.any.isRequired,
   onValueChange: PropTypes.func.isRequired
 }

mobile/constants/screens.js

@@ -1,6 +1,6 @@
 const SCREENS = {
   about: 'About',
-  settings: 'About',
+  settings: 'Settings',
   text: 'Text',
   home: 'Texts',
   words: 'Words',

mobile/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "homepage": "https://openarabic.io",
   "repository": "https://github.com/edenmind/OpenArabic",
-  "version": "1445.2.342",
+  "version": "1445.2.343",
   "authors": [
     "Yunus Andreasson <yunus@edenmind.com> (https://github.com/YunusAndreasson)"
   ],
@@ -33,7 +33,7 @@
     "@react-navigation/native": "^6.1.7",
     "@react-navigation/native-stack": "^6.9.13",
     "@reduxjs/toolkit": "^1.9.5",
-    "axios": "^1.4.0",
+    "axios": "^1.5.0",
     "axios-retry": "^3.6.1",
     "deepmerge": "^4.3.1",
     "expo": "^49.0.8",

mobile/routes/root.js

@@ -6,7 +6,7 @@ import { useSelector } from 'react-redux'
 import SCREENS from '../constants/screens.js'
 import Text from './text.js'
 import Words from './words.js'
-import Settings from './settings.js'
+import TextSettings from './text-settings.js'
 import { createMaterialBottomTabNavigator } from 'react-native-paper/react-navigation'
 import { CombinedDarkTheme, CombinedDefaultTheme } from '../constants/paper-theme.js'
 import { Provider as PaperProvider } from 'react-native-paper'
@@ -56,10 +56,9 @@ function Root() {
                   break
                 }
                 case SCREENS.settings: {
-                  iconName = 'information-variant'
+                  iconName = 'cog'
                   break
                 }
-                // No default
               }
 
               return <MaterialCommunityIcons name={iconName} color={color} size={UIElements.TitleFont} />
@@ -68,7 +67,7 @@ function Root() {
         >
           <Tab.Screen name={SCREENS.text} component={Text} />
           <Tab.Screen name={SCREENS.words} component={Words} />
-          <Tab.Screen name={SCREENS.settings} component={Settings} />
+          <Tab.Screen name={SCREENS.settings} component={TextSettings} />
         </Tab.Navigator>
       </NavigationContainer>
     </PaperProvider>

mobile/routes/settings.js

@@ -26,7 +26,7 @@ export default function Settings() {
             title: SCREENS.about,
             headerTitleStyle: {
               fontFamily: 'philosopher',
-              fontSize: UIElements.UIFontSize,
+              fontSize: UIElements.TitleFont,
               color: theme.colors.onSurface
             },
             headerStyle: {

mobile/routes/text-drawer.js

@@ -1,6 +1,7 @@
+/* eslint-disable react/prop-types */
 import { Caption, Divider, Switch, Text, useTheme } from 'react-native-paper'
 import { DrawerContentScrollView, DrawerItemList, createDrawerNavigator } from '@react-navigation/drawer'
-import { Image, StyleSheet, View } from 'react-native'
+import { Image, StyleSheet, View, TouchableOpacity } from 'react-native'
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import SCREENS from '../constants/screens.js'
@@ -10,6 +11,7 @@ import icon from '../assets/logo.png'
 import packageJson from '../package.json'
 import { useFocusEffect } from '@react-navigation/core'
 import { storeData, getData } from '../services/storage.js'
+import PropTypes from 'prop-types'
 
 const selector = (state) => state.categories
 
@@ -74,16 +76,13 @@ export default function TextDrawer() {
     getDarkMode()
   }, [])
 
-  // store a value using storeData
   const storeDarkMode = async (value) => {
-    // we need to convert the value to a string before storing it
     const boolValuesForDarkMode = value === true ? 'on' : 'off'
 
     await storeData('isDarkModeOn', boolValuesForDarkMode)
     dispatch({ type: 'SET_DARK_MODE', payload: !value })
   }
 
-  // get a value using getData
   const getDarkMode = async () => {
     const value = await getData('isDarkModeOn')
 
@@ -111,6 +110,8 @@ export default function TextDrawer() {
   )
 
   function CustomDrawerContent(props) {
+    const { navigation } = props // Destructure the navigation prop
+
     return (
       <View style={style.container}>
         <DrawerContentScrollView {...props}>
@@ -120,6 +121,14 @@ export default function TextDrawer() {
           </Text>
           <DrawerItemList {...props} />
           <Divider style={style.divider} />
+          <TouchableOpacity onPress={() => navigation.navigate('About')}>
+            <Text
+              style={{ marginLeft: 10, marginTop: 10, paddingLeft: 9, color: theme.colors.outline }}
+              variant="labelLarge"
+            >
+              About
+            </Text>
+          </TouchableOpacity>
         </DrawerContentScrollView>
         <View style={{ backgroundColor: theme.colors.surface }}>
           <Text style={style.darkModeLabel}>Dark Mode</Text>

mobile/routes/text-settings.js

@@ -2,15 +2,18 @@ import { NavigationContainer } from '@react-navigation/native'
 import React from 'react'
 import SCREENS from '../constants/screens.js'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
-import TextSettingsScreen from '../screens/text-settings.js'
+import TextSettingsScreen from '../screens/settings.js'
 import { CombinedDarkTheme, CombinedDefaultTheme } from '../constants/paper-theme.js'
 import { useSelector } from 'react-redux'
+import { UIElements } from '../constants/ui.js'
+import { useTheme } from 'react-native-paper'
 
 const Stack = createNativeStackNavigator()
 const darkModeSelector = (state) => state.isDarkMode
 
 export default function TextSettings() {
   const isDarkModeOn = useSelector(darkModeSelector)
+  const theme = useTheme()
 
   return (
     <NavigationContainer independent theme={isDarkModeOn.isDarkMode ? CombinedDefaultTheme : CombinedDarkTheme}>
@@ -19,7 +22,18 @@ export default function TextSettings() {
           name={SCREENS.textSettings}
           component={TextSettingsScreen}
           options={{
-            headerShown: false
+            headerLargeTitle: false,
+            title: SCREENS.settings,
+            headerTitleStyle: {
+              fontFamily: 'philosopher',
+              fontSize: UIElements.TitleFont,
+              color: theme.colors.onSurface
+            },
+            headerStyle: {
+              backgroundColor: isDarkModeOn.isDarkMode
+                ? CombinedDefaultTheme.colors.background
+                : CombinedDarkTheme.colors.background
+            }
           }}
         />
       </Stack.Navigator>

mobile/routes/text.js

@@ -1,14 +1,14 @@
-import { Button, useTheme } from 'react-native-paper'
+import { useTheme } from 'react-native-paper'
 import React, { useEffect } from 'react'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { useSelector, useDispatch } from 'react-redux'
 import SCREENS from '../constants/screens.js'
 import TextDrawer from './text-drawer.js'
-import TextSettings from './text-settings.js'
 import defaultExport from './text-tabs.js'
 import { getData } from '../services/storage.js'
 import { CombinedDarkTheme, CombinedDefaultTheme } from '../constants/paper-theme.js'
 import TextGrammar from '../screens/text-grammar.js'
+import About from '../screens/about.js'
 
 const Stack = createNativeStackNavigator()
 const selector = (state) => state.text
@@ -19,7 +19,6 @@ function Text() {
   const { text } = useSelector(selector)
   const theme = useTheme()
   const isDarkModeOn = useSelector(darkModeSelector)
-  const FONT = 'Font'
 
   useEffect(() => {
     const initSettings = async () => {
@@ -61,10 +60,10 @@ function Text() {
         }}
       />
       <Stack.Screen
-        name={SCREENS.textSettings}
-        component={TextSettings}
+        name={SCREENS.about}
+        component={About}
         options={{
-          headerTitle: 'Font Settings',
+          headerTitle: 'About',
           headerTitleStyle: {
             fontFamily: 'philosopher',
             fontSize: 23,
@@ -81,25 +80,15 @@ function Text() {
       <Stack.Screen
         name={SCREENS.textScreen}
         component={defaultExport}
-        options={({ navigation }) => ({
+        options={() => ({
           headerShown: true,
+          headerBackTitle: 'Back',
           title: text.title,
           headerTitle: '',
           headerStyle: {
             backgroundColor: theme.colors.background,
             color: theme.colors.onSurface
-          },
-          headerRight: () => (
-            <Button
-              style={{ marginRight: -5 }}
-              textColor={theme.colors.tertiary}
-              onPress={() => {
-                navigation.navigate('TextSettings')
-              }}
-            >
-              {FONT}
-            </Button>
-          )
+          }
         })}
       />
     </Stack.Navigator>

mobile/screens/__snapshots__/settings.test.js.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TextSettingsScreen /> renders correctly 1`] = `
+<Context.Provider
+  value={
+    {
+      "getServerState": undefined,
+      "noopCheck": "once",
+      "stabilityCheck": "once",
+      "store": {
+        "@@observable": [Function],
+        "dispatch": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+      },
+      "subscription": {
+        "addNestedSub": [Function],
+        "getListeners": [Function],
+        "handleChangeWrapper": [Function],
+        "isSubscribed": [Function],
+        "notifyNestedSubs": [Function],
+        "trySubscribe": [Function],
+        "tryUnsubscribe": [Function],
+      },
+    }
+  }
+>
+  <ForwardRef(NavigationContainerInner)>
+    <TextSettings />
+  </ForwardRef(NavigationContainerInner)>
+</Context.Provider>
+`;