Start localization without auto detecting

2022-12-19 21:48:31 -05:00
parent 923bbabd3a
commit 2e55d41adf
8 changed files with 249 additions and 67 deletions
--- a/App.js
+++ b/App.js
@@ -16,7 +16,7 @@ import SinglePost from './Views/SinglePost.js'
 import * as Device from 'expo-device';
 import * as Notifications from 'expo-notifications';
 import API from './API.js';
-
+import i18n from "./i18nMessages.js";

 const Tab = createBottomTabNavigator();
 const Stack = createNativeStackNavigator();
@@ -118,7 +118,7 @@ const MainNavigation = () => {
                name="Feed"
                component={Feed}
                options={{
-                    tabBarLabel: 'Home',
+                    tabBarLabel: i18n.t("message.feed"),
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="home" color={color} size={26} />
                    ),
@@ -135,7 +135,7 @@ const MainNavigation = () => {
                name="Notifications"
                component={NotificationsView}
                options={{
-                    tabBarLabel: 'Notifications',
+                    tabBarLabel: i18n.t('message.notifications'),
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="notifications" color={color} size={26} />
                    ),
@@ -146,7 +146,7 @@ const MainNavigation = () => {
                name="Search"
                component={Search}
                options={{
-                    tabBarLabel: 'Search',
+                    tabBarLabel: i18n.t('message.search'),
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="search" color={color} size={26} />
                    ),
@@ -157,7 +157,7 @@ const MainNavigation = () => {
                name="Groups"
                component={Groups}
                options={{
-                    tabBarLabel: 'Groups',
+                    tabBarLabel: i18n.t('message.groups'),
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="groups" color={color} size={26} />
                    ),
@@ -168,7 +168,7 @@ const MainNavigation = () => {
                name="Courses"
                component={Courses}
                options={{
-                    tabBarLabel: 'Courses',
+                    tabBarLabel: i18n.t('message.courses'),
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="subscriptions" color={color} size={26} />
                    ),
@@ -180,7 +180,7 @@ const MainNavigation = () => {
                name="Logout"
                component={Login}
                options={{
-                    tabBarLabel: 'Logout',
+                    tabBarLabel: i18n.t('message.logout'),
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="logout" color={color} size={26} />
                    ),
@@ -212,7 +212,7 @@ export default function App() {
                        name="Profile"
                        component={Profile}
                        options={{
-                            tabBarLabel: 'Profile'
+                            tabBarLabel: i18n.t('message.profile')
                        }}
                    />
                    <Stack.Screen name="SinglePost" component={SinglePost} />
--- a/Views/Courses.js
+++ b/Views/Courses.js
@@ -6,7 +6,7 @@ import API from "../API";
 import CourseCard from "../components/CourseCard";
 import { useSnapshot } from 'valtio';
 import GlobalState from '../contexts/GlobalState.js';
-
+import i18n from "../i18nMessages.js";

 const getCourses = async (profileObj) => {
    let courses;
@@ -126,13 +126,16 @@ const Courses = () => {
    return (
        <SafeAreaView style={styles.container}>
            <Searchbar
-                placeholder="Search Users"
+                placeholder = {i18n.t("message.searchCourses")}
                onChangeText={onChangeSearch}
                value={searchQuery}
            />
            {groups.length ? <></> : <ActivityIndicator />}
            <ScrollView>
-                <Title>Continue Watching:</Title>
+                {
+                    watching.length ?
+                    <>
+                        <Title>{i18n.t("message.continueWatching")}:</Title>
                        <FlatList
                            horizontal={true}
                            data={watching}
@@ -140,7 +143,12 @@ const Courses = () => {
                            keyExtractor={item => item.profile._id}
                            initialNumToRender={2}
                        />
-                <Title>Recently Added:</Title>
+                    </> : <></>
+                }
+                {
+                    groups.length ?
+                    <>
+                        <Title>{i18n.t("message.recentlyAdded")}:</Title>
                        <FlatList
                            horizontal={true}
                            data={groups}
@@ -148,7 +156,12 @@ const Courses = () => {
                            keyExtractor={item => item._id}
                            initialNumToRender={2}
                        />
-                <Title>Popular:</Title>
+                    </> : <></>
+                }
+                {
+                    popular.length ?
+                    <>
+                        <Title>{i18n.t("message.popularCourses")}:</Title>
                        <FlatList
                            horizontal={true}
                            data={popular}
@@ -156,6 +169,8 @@ const Courses = () => {
                            keyExtractor={item => item._id}
                            initialNumToRender={2}
                        />
+                    </> : <></>
+                }
            </ScrollView>
        </SafeAreaView>
    )
--- a/components/NewPost.js
+++ b/components/NewPost.js
@@ -5,6 +5,7 @@ import API from './../API.js';
 import { useNavigation } from '@react-navigation/native';
 import * as ImagePicker from 'expo-image-picker';
 import Media from './Media.js';
+import i18n from "../i18nMessages.js";


 let NewPost = ({ profileid, newPostCB }) => {
--- a/components/Post.js
+++ b/components/Post.js
@@ -10,6 +10,7 @@ import NewComment from './NewComment.js';
 import Moment from 'moment';
 import { useSnapshot } from 'valtio';
 import GlobalState from '../contexts/GlobalState.js';
+import i18n from "../i18nMessages.js";

 let Post = (props) => {
    const gState = useSnapshot(GlobalState);
@@ -72,7 +73,7 @@ let Post = (props) => {
                            <Media content={post.content} postId={post._id} />
                        </View> :
                        <View>
-                            <Chip icon="new-releases" style={{ width: 100 }} >News</Chip>
+                            <Chip icon="new-releases" style={{ width: 100 }} >{i18n.t("message.news")}</Chip>
                            <Text style={{ fontSize: 18 }}>{cleanContent}</Text>
                            <Media content={post.content} />
                        </View>
--- a/components/basics/FollowButton.js
+++ b/components/basics/FollowButton.js
@@ -3,6 +3,7 @@ import { Button } from 'react-native-paper';
 import API from './../../API.js';
 import { useSnapshot } from 'valtio';
 import GlobalState from '../../contexts/GlobalState.js';
+import i18n from "../../i18nMessages.js";

 const followProfile = async (profileid, me, setFollowing, setPending) => {
    // Simulates the changes on the DB to speed up the UI
@@ -55,8 +56,8 @@ let FollowButton = ({ profile }) => {


    const type = profile._id ? (!profile.isGroup ? "User" : (profile.isCourse ? "Course" : "Group")) : "User";
-    const action = type === 'User' ? (following ? "Unfollow" : "Follow") :
-        (following ? "Unsubscribe" : (pending ? "Pending" : "Subscribe"));
+    const action = type === 'User' ? (following ? i18n.t("message.unfollow") : i18n.t("message.follow")) :
+        (following ? i18n.t("message.unsubscribe") : (pending ? i18n.t("message.pending") : i18n.t("message.subscribe")));


    const toggleFollowThisProfile = () => {
--- a/i18nMessages.js
+++ b/i18nMessages.js
@@ -0,0 +1,130 @@
+//import { getLocales } from 'expo-localization';
+import { I18n } from 'i18n-js';
+import Moment from 'moment';
+import 'moment/min/locales.min';
+
+const messages = {
+    en: {
+        message: {
+            feed: 'Feed',
+            events: "Events",
+            livestream: "Livestrem",
+            search: 'Search',
+            invite: 'Invite',
+            groups: 'Groups',
+            courses: "Courses",
+            giving: "Giving",
+            profile: "Profile",
+            settings: 'Settings',
+            logout: "Logout",
+            statusUpdate: "New Post",
+            newsPost: "News Post",
+            post: "Post",
+            add: 'Add',
+            whatIsNew: "What is new?",
+            saySomethingTo: "Say something to ",
+            follow: "Follow",
+            unfollow: "Unfollow",
+            subscribe: "Subscribe",
+            unsubscribe: 'Unsubscribe',
+            pending: "Pending",
+            subscribers: "Subscribers",
+            loading: "Loading",
+            login: 'Login',
+            email: "Email",
+            password: "Password",
+            rpassword: "Repeat Password",
+            register: "Register",
+            name: "Nombre",
+            lastName: "Last Name",
+            describeYourself: 'Describe Yourself',
+            continueWatching: "Continues Watching",
+            createCourse: "Create a your own new course!",
+            createGroup: "Create a your own new group!",
+            title: "Title",
+            subtitle: "Subtitle",
+            recentlyAdded: "Recently added",
+            popularCourses: "Popular Courses",
+            privateGroup: "Private Group",
+            tithesAndOfferings: "Tithes and Offerings",
+            type: "Type",
+            description: "Description",
+            amount: "Amount",
+            tithes: "Tithes",
+            offerings: "Offerings",
+            event: "Event",
+            proceedToPayment: "Proceed to Payment",
+            minimumAmount: "The minimum amount is ",
+            notifications: "Notifications",
+            searchUsers: "Search Users",
+            searchCourses: "Search Courses",
+            news: "News",
+        },
+    },
+    es: {
+        message: {
+            feed: 'Mural',
+            events: "Eventos",
+            livestream: "En Vivo",
+            search: 'Busqueda',
+            invite: "Invitaciones",
+            groups: 'Grupos',
+            courses: 'Cursos',
+            giving: "Ofrendas",
+            profile: "Perfil",
+            settings: 'Configuraciones',
+            logout: "Cerrar Sesión",
+            statusUpdate: "Publicación Nueva",
+            newsPost: "Noticias?",
+            post: "Publica",
+            add: 'Añade',
+            whatIsNew: "Que hay de nuevo?",
+            saySomethingTo: "Publica algo para ",
+            follow: "Seguir",
+            unfollow: "Dejar",
+            subscribe: "Subscribirse",
+            unsubscribe: 'Abandonar',
+            pending: "Pendiente",
+            subscribers: "Subscriptores",
+            loading: "Cargando",
+            login: 'Inicia Sesión',
+            email: "Correo Electronico",
+            password: "Contraseña",
+            rpassword: "Confirma tu Contraseña",
+            register: "Registrate",
+            name: 'Nombre',
+            lastName: "Apeido",
+            describeYourself: 'Describete en unas cuantas palabras',
+            continueWatching: "Continua viendo",
+            createCourse: "Crea tu propio curso!",
+            createGroup: "Crea un grupo nuevo!",
+            title: "Titulo",
+            subtitle: "Subtitulo",
+            recentlyAdded: "Recientemente añadido",
+            popularCourses: "Cursos populares",
+            privateGroup: "Grupo privado",
+            tithesAndOfferings: "Diezmos y Ofrendas",
+            type: "Tipo",
+            description: "Descripción",
+            amount: "Cantidad",
+            tithes: "Diezmos",
+            offerings: "Ofrendas",
+            event: "Evento",
+            proceedToPayment: "Continuar con el pago",
+            minimumAmount: "La cantidad mínima es de ",
+            notifications: "Notificaciones",
+            searchUsers: "Busca Usuarios",
+            searchCourses: "Busca Cursos",
+            news: "Noticias",
+        },
+    }
+}
+
+// Set the key-value pairs for the different languages you want to support.
+const i18n = new I18n(messages);
+
+// Set the locale once at the beginning of your app.
+i18n.locale = 'es';//getLocales()[0].languageCode;
+Moment.updateLocale(i18n.locale);
+
+export default i18n;
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,10 +18,11 @@
        "expo-dev-client": "~2.0.1",
        "expo-device": "~5.0.0",
        "expo-image-picker": "~14.0.2",
+        "expo-localization": "~14.0.0",
        "expo-notifications": "~0.17.0",
        "expo-status-bar": "~1.4.2",
-        "expo-task-manager": "~11.0.1",
        "expo-updates": "~0.15.6",
+        "i18n-js": "^4.2.2",
        "moment": "^2.29.1",
        "react": "18.1.0",
        "react-dom": "18.1.0",
@@ -5050,6 +5051,14 @@
        "node": ">=0.6"
      }
    },
+    "node_modules/bignumber.js": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.1.1.tgz",
+      "integrity": "sha512-pHm4LsMJ6lzgNGVfZHjMoO8sdoRhOzOH4MLmY65Jg70bpxCKu5iOHNJyfF6OyvYw7t8Fpf35RuzUyqnQsj8Vig==",
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/bl": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -6689,6 +6698,17 @@
        "expo": "*"
      }
    },
+    "node_modules/expo-localization": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/expo-localization/-/expo-localization-14.0.0.tgz",
+      "integrity": "sha512-Rx4ZAANTTVuY6EnM3WXjNWn+CSpDUOaJziHPB4Az+lb4r3JMQ1H+go9s8KY9DYP0IiRM3sQhiyFQqSWzsUgvHA==",
+      "dependencies": {
+        "rtl-detect": "^1.0.2"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
    "node_modules/expo-manifests": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/expo-manifests/-/expo-manifests-0.4.0.tgz",
@@ -6880,17 +6900,6 @@
      "resolved": "https://registry.npmjs.org/expo-structured-headers/-/expo-structured-headers-3.0.1.tgz",
      "integrity": "sha512-x6hkzuQL5HJoyB+xQyBf9M04ZUmrjFWqEW7gzIYWN/6LA+dgyaV4fF6U9++Re+GgGjF03vHJFqR1xYaosKKZYQ=="
    },
-    "node_modules/expo-task-manager": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/expo-task-manager/-/expo-task-manager-11.0.1.tgz",
-      "integrity": "sha512-9KXWkQyzldiTBz0+wRe7ypQQ0m02j838f8j0pDRrDbW2X5hBUJWzDGq7OItJ5F9vDjJ3oRZikOAhFGj+wxh3EA==",
-      "dependencies": {
-        "unimodules-app-loader": "~4.0.0"
-      },
-      "peerDependencies": {
-        "expo": "*"
-      }
-    },
    "node_modules/expo-updates": {
      "version": "0.15.6",
      "resolved": "https://registry.npmjs.org/expo-updates/-/expo-updates-0.15.6.tgz",
@@ -7649,6 +7658,15 @@
      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
    },
+    "node_modules/i18n-js": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/i18n-js/-/i18n-js-4.2.2.tgz",
+      "integrity": "sha512-Mpr6g9T3uB7xHD4LpuyeCEKVRKxedeTFduT+ft0Xu+i0qqWRJ3T+bIcb73bd0/qH2u2IHnCTRMfAKtjf6NsjJg==",
+      "dependencies": {
+        "bignumber.js": "*",
+        "lodash": "*"
+      }
+    },
    "node_modules/iconv-lite": {
      "version": "0.4.24",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -11329,6 +11347,11 @@
        "rimraf": "bin.js"
      }
    },
+    "node_modules/rtl-detect": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/rtl-detect/-/rtl-detect-1.0.4.tgz",
+      "integrity": "sha512-EBR4I2VDSSYr7PkBmFy04uhycIpDKp+21p/jARYXlCSjQksTBQcJ0HFUPOO79EPPH5JS6VAhiIQbycf0O3JAxQ=="
+    },
    "node_modules/run-parallel": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -12721,11 +12744,6 @@
        "node": ">=4"
      }
    },
-    "node_modules/unimodules-app-loader": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/unimodules-app-loader/-/unimodules-app-loader-4.0.0.tgz",
-      "integrity": "sha512-YlV0rOM9pjdeTMEGR0rr/u+F7f1ygINUsTEiRIPvBewTk3Si/Sm8Ur5f92n+f0Sy1EIuOTGgyGaUdjJBfAd0YA=="
-    },
    "node_modules/union-value": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
@@ -17002,6 +17020,11 @@
      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
      "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg=="
    },
+    "bignumber.js": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.1.1.tgz",
+      "integrity": "sha512-pHm4LsMJ6lzgNGVfZHjMoO8sdoRhOzOH4MLmY65Jg70bpxCKu5iOHNJyfF6OyvYw7t8Fpf35RuzUyqnQsj8Vig=="
+    },
    "bl": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -18271,6 +18294,14 @@
      "integrity": "sha512-44ZjgLE4lnce2d40Pv8xsjMVc6R5GvgHOwZfkLYtGmgYG9TYrEJeEj5UfSeweXPL3pBFhXKfFU8xpGYMaHdP0A==",
      "requires": {}
    },
+    "expo-localization": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/expo-localization/-/expo-localization-14.0.0.tgz",
+      "integrity": "sha512-Rx4ZAANTTVuY6EnM3WXjNWn+CSpDUOaJziHPB4Az+lb4r3JMQ1H+go9s8KY9DYP0IiRM3sQhiyFQqSWzsUgvHA==",
+      "requires": {
+        "rtl-detect": "^1.0.2"
+      }
+    },
    "expo-manifests": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/expo-manifests/-/expo-manifests-0.4.0.tgz",
@@ -18423,14 +18454,6 @@
      "resolved": "https://registry.npmjs.org/expo-structured-headers/-/expo-structured-headers-3.0.1.tgz",
      "integrity": "sha512-x6hkzuQL5HJoyB+xQyBf9M04ZUmrjFWqEW7gzIYWN/6LA+dgyaV4fF6U9++Re+GgGjF03vHJFqR1xYaosKKZYQ=="
    },
-    "expo-task-manager": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/expo-task-manager/-/expo-task-manager-11.0.1.tgz",
-      "integrity": "sha512-9KXWkQyzldiTBz0+wRe7ypQQ0m02j838f8j0pDRrDbW2X5hBUJWzDGq7OItJ5F9vDjJ3oRZikOAhFGj+wxh3EA==",
-      "requires": {
-        "unimodules-app-loader": "~4.0.0"
-      }
-    },
    "expo-updates": {
      "version": "0.15.6",
      "resolved": "https://registry.npmjs.org/expo-updates/-/expo-updates-0.15.6.tgz",
@@ -19017,6 +19040,15 @@
      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
    },
+    "i18n-js": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/i18n-js/-/i18n-js-4.2.2.tgz",
+      "integrity": "sha512-Mpr6g9T3uB7xHD4LpuyeCEKVRKxedeTFduT+ft0Xu+i0qqWRJ3T+bIcb73bd0/qH2u2IHnCTRMfAKtjf6NsjJg==",
+      "requires": {
+        "bignumber.js": "*",
+        "lodash": "*"
+      }
+    },
    "iconv-lite": {
      "version": "0.4.24",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -21816,6 +21848,11 @@
        "glob": "^7.1.3"
      }
    },
+    "rtl-detect": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/rtl-detect/-/rtl-detect-1.0.4.tgz",
+      "integrity": "sha512-EBR4I2VDSSYr7PkBmFy04uhycIpDKp+21p/jARYXlCSjQksTBQcJ0HFUPOO79EPPH5JS6VAhiIQbycf0O3JAxQ=="
+    },
    "run-parallel": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -22886,11 +22923,6 @@
      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w=="
    },
-    "unimodules-app-loader": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/unimodules-app-loader/-/unimodules-app-loader-4.0.0.tgz",
-      "integrity": "sha512-YlV0rOM9pjdeTMEGR0rr/u+F7f1ygINUsTEiRIPvBewTk3Si/Sm8Ur5f92n+f0Sy1EIuOTGgyGaUdjJBfAd0YA=="
-    },
    "union-value": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
--- a/package.json
+++ b/package.json
@@ -21,9 +21,11 @@
    "expo-dev-client": "~2.0.1",
    "expo-device": "~5.0.0",
    "expo-image-picker": "~14.0.2",
+    "expo-localization": "~14.0.0",
    "expo-notifications": "~0.17.0",
    "expo-status-bar": "~1.4.2",
    "expo-updates": "~0.15.6",
+    "i18n-js": "^4.2.2",
    "moment": "^2.29.1",
    "react": "18.1.0",
    "react-dom": "18.1.0",