From 2e55d41adf17c7e9aa60b5d84cdb6cc46094e5eb Mon Sep 17 00:00:00 2001 From: Adolfo Reyna Date: Mon, 19 Dec 2022 21:48:31 -0500 Subject: [PATCH] Start localization without auto detecting --- App.js | 16 ++-- Views/Courses.js | 67 +++++++++------ components/NewPost.js | 1 + components/Post.js | 3 +- components/basics/FollowButton.js | 5 +- i18nMessages.js | 130 ++++++++++++++++++++++++++++++ package-lock.json | 92 ++++++++++++++------- package.json | 2 + 8 files changed, 249 insertions(+), 67 deletions(-) create mode 100644 i18nMessages.js diff --git a/App.js b/App.js index 31e0ec8..1afa62f 100644 --- 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 }) => ( ), @@ -135,7 +135,7 @@ const MainNavigation = () => { name="Notifications" component={NotificationsView} options={{ - tabBarLabel: 'Notifications', + tabBarLabel: i18n.t('message.notifications'), tabBarIcon: ({ color }) => ( ), @@ -146,7 +146,7 @@ const MainNavigation = () => { name="Search" component={Search} options={{ - tabBarLabel: 'Search', + tabBarLabel: i18n.t('message.search'), tabBarIcon: ({ color }) => ( ), @@ -157,7 +157,7 @@ const MainNavigation = () => { name="Groups" component={Groups} options={{ - tabBarLabel: 'Groups', + tabBarLabel: i18n.t('message.groups'), tabBarIcon: ({ color }) => ( ), @@ -168,7 +168,7 @@ const MainNavigation = () => { name="Courses" component={Courses} options={{ - tabBarLabel: 'Courses', + tabBarLabel: i18n.t('message.courses'), tabBarIcon: ({ color }) => ( ), @@ -180,7 +180,7 @@ const MainNavigation = () => { name="Logout" component={Login} options={{ - tabBarLabel: 'Logout', + tabBarLabel: i18n.t('message.logout'), tabBarIcon: ({ color }) => ( ), @@ -212,7 +212,7 @@ export default function App() { name="Profile" component={Profile} options={{ - tabBarLabel: 'Profile' + tabBarLabel: i18n.t('message.profile') }} /> diff --git a/Views/Courses.js b/Views/Courses.js index ed29b58..c0b8efd 100644 --- 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,36 +126,51 @@ const Courses = () => { return ( {groups.length ? <> : } - Continue Watching: - item.profile._id} - initialNumToRender={2} - /> - Recently Added: - item._id} - initialNumToRender={2} - /> - Popular: - item._id} - initialNumToRender={2} - /> + { + watching.length ? + <> + {i18n.t("message.continueWatching")}: + item.profile._id} + initialNumToRender={2} + /> + : <> + } + { + groups.length ? + <> + {i18n.t("message.recentlyAdded")}: + item._id} + initialNumToRender={2} + /> + : <> + } + { + popular.length ? + <> + {i18n.t("message.popularCourses")}: + item._id} + initialNumToRender={2} + /> + : <> + } ) diff --git a/components/NewPost.js b/components/NewPost.js index 455713f..95270ff 100644 --- 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 }) => { diff --git a/components/Post.js b/components/Post.js index ab49327..b00b12b 100644 --- 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) => { : - News + {i18n.t("message.news")} {cleanContent} diff --git a/components/basics/FollowButton.js b/components/basics/FollowButton.js index a98a822..13a80fe 100644 --- 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 = () => { diff --git a/i18nMessages.js b/i18nMessages.js new file mode 100644 index 0000000..a7a57ed --- /dev/null +++ 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; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e7bf2b7..0403d47 100644 --- 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", diff --git a/package.json b/package.json index b6a0d01..c6efbc7 100644 --- 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",