steve
/
keepyourmouthshut
mirror of https://github.com/ninjas-code-official/food-delivery-singlevendor
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #45 from ninjas-code-official/aliyan-checking-issues 

Fixed Language change triggers app reload issue
This commit is contained in:
usama sattar 2024-02-14 13:23:37 +05:00 committed by GitHub
parent 69a424fdf1 efa0e57385
commit 8c0ae6b58b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
22 changed files with 1619 additions and 902 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
RiderApp/App.js
View File

@ -6,7 +6,6 @@ import * as SplashScreen from "expo-splash-screen";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Platform, StatusBar } from "react-native"; import { Platform, StatusBar } from "react-native";
import FlashMessage from "react-native-flash-message"; import FlashMessage from "react-native-flash-message";
import i18n from "./i18n";
import setupApolloClient from "./src/apollo/index"; import setupApolloClient from "./src/apollo/index";
import { AuthContext } from "./src/context/auth"; import { AuthContext } from "./src/context/auth";
import { ConfigurationProvider } from "./src/context/configuration"; import { ConfigurationProvider } from "./src/context/configuration";
@ -56,7 +55,6 @@ export default function App() {
}; };
async function loadData() { async function loadData() {
await i18n.initAsync();
await Font.loadAsync({ await Font.loadAsync({
MuseoSans300: require("./assets/font/MuseoSans/MuseoSans300.ttf"), MuseoSans300: require("./assets/font/MuseoSans/MuseoSans300.ttf"),
MuseoSans500: require("./assets/font/MuseoSans/MuseoSans500.ttf"), MuseoSans500: require("./assets/font/MuseoSans/MuseoSans500.ttf"),

24
RiderApp/i18n.js
View File

@ -1,24 +0,0 @@
import * as Localization from 'expo-localization'
import AsyncStorage from "@react-native-async-storage/async-storage";
import { Platform } from 'react-native'
import i18n from 'i18n-js'
import { en } from './languages/en'
import { fr } from './languages/fr'
import { km } from './languages/km'
import { zh } from './languages/zh'
import { de } from './languages/de'
import { ar } from './languages/ar'
i18n.initAsync = async () => {
i18n.fallbacks = true
i18n.translations = { fr, en, km, zh, de, ar }
// i18n.locale = 'km'
if (Platform.OS === 'android') {
const lang = await AsyncStorage.getItem('enatega-language')
i18n.locale = lang || 'en'
} else {
i18n.locale = Localization.locale
}
}
export default i18n

43
RiderApp/i18next.js Normal file
View File

@ -0,0 +1,43 @@
import i18next from "i18next";
import { initReactI18next } from "react-i18next";
import { Platform } from "react-native";
import { en } from "./languages/en";
import { de } from "./languages/de";
import { fr } from "./languages/fr";
import { km } from "./languages/km";
import { zh } from "./languages/zh";
import { ar } from "./languages/ar";
import AsyncStorage from "@react-native-async-storage/async-storage";
export const languageResources = {
en: { translation: en },
zh: { translation: zh },
de: { translation: de },
fr: { translation: fr },
km: { translation: km },
ar: { translation: ar },
};
const i18n = i18next.createInstance();
// Configure i18next instance
i18n
.use(initReactI18next) // Ensure initReactI18next is used
.init({
compatibilityJSON: "v3",
lng: "en", // Default language
fallbackLng: "en",
resources: languageResources,
});
// Fetch stored language and set i18next instance accordingly
const getStoredLanguage = async () => {
const lng = await AsyncStorage.getItem("enatega-language");
i18n.changeLanguage(lng || "en"); // Change language
};
// Execute language initialization based on platform
if (Platform.OS === "android" || Platform.OS === "ios") {
getStoredLanguage();
}
export default i18n;

290
RiderApp/languages/en.js
View File

@ -1,154 +1,154 @@
export const en = { export const en = {
title0: 'Selected Language', title0: "Selected Language",
subtitle0: 'English', subtitle0: "English",
description0: description0:
'Select any language of your choice to change the content of the app to your required language.', "Select any language of your choice to change the content of the app to your required language.",
title1: 'Tasty', title1: "Tasty",
subtitle1: 'BreakFast', subtitle1: "BreakFast",
description1: description1:
'Breakfast is everything. The beginning, the first thing. It is the mouthful that is the commitment to a new day, a continuing life.', "Breakfast is everything. The beginning, the first thing. It is the mouthful that is the commitment to a new day, a continuing life.",
title2: 'Refreshing', title2: "Refreshing",
subtitle2: 'Drinks', subtitle2: "Drinks",
description2: description2:
'True silence is the rest of the mind, and is to the spirit what sleep is to the body, nourishment and refreshment.', "True silence is the rest of the mind, and is to the spirit what sleep is to the body, nourishment and refreshment.",
title3: 'Delicous', title3: "Delicous",
subtitle3: 'Icecream', subtitle3: "Icecream",
description3: description3:
'Age does not diminish the extreme disappointment of having a scoop of ice cream fall from the cone', "Age does not diminish the extreme disappointment of having a scoop of ice cream fall from the cone",
getStarted: 'Get Started!', getStarted: "Get Started!",
welcome: 'Welcome', welcome: "Welcome",
loginBtn: 'Login', loginBtn: "Login",
registerBtn: 'Register', registerBtn: "Register",
name: 'Name', name: "Name",
phone: 'Phone', phone: "Phone",
email: 'Email', email: "Email",
emailphone: 'Email or Phone', emailphone: "Email or Phone",
username: 'Username', username: "Username",
password: 'Password', password: "Password",
deliveryAddress: 'Delivery Address', deliveryAddress: "Delivery Address",
registerText: 'Or Register With', registerText: "Or Register With",
forgotPassword: 'Forgot Password?', forgotPassword: "Forgot Password?",
loginText: 'Or Login With', loginText: "Or Login With",
deliveryLocation: deliveryLocation:
'Turn on location so we could send you endless taste of delicious food.', "Turn on location so we could send you endless taste of delicious food.",
locationBtn: 'Turn on Location', locationBtn: "Turn on Location",
locationPermissionDenied: 'Permission to access location was denied', locationPermissionDenied: "Permission to access location was denied",
cameraRollPermissionDenied: 'Permission to access Camera Roll was denied', cameraRollPermissionDenied: "Permission to access Camera Roll was denied",
locationOff: 'Turn on location and try again', locationOff: "Turn on location and try again",
titleLanguage: 'Change Language', titleLanguage: "Change Language",
titleMenu: 'Menu', titleMenu: "Menu",
titleOrders: 'My Orders', titleOrders: "My Orders",
NewOrders: 'New Orders', NewOrders: "New Orders",
titleNotifications: 'Notifications', titleNotifications: "Notifications",
titleReviews: 'Reviews', titleReviews: "Reviews",
titleSettings: 'Settings', titleSettings: "Settings",
titleHelp: 'Help', titleHelp: "Help",
titleLogout: 'Logout', titleLogout: "Logout",
titleCart: 'My Cart', titleCart: "My Cart",
titlePayment: 'Payment', titlePayment: "Payment",
orderId: 'Order ID', orderId: "Order ID",
totalOrderAmount: 'Total Order Amount', totalOrderAmount: "Total Order Amount",
reOrder: 'Reorder', reOrder: "Reorder",
unReadNotifications: 'No unread notifications', unReadNotifications: "No unread notifications",
upload: 'Upload', upload: "Upload",
saveBtn: 'Save', saveBtn: "Save",
emailUs: 'Email us at', emailUs: "Email us at",
question1: 'Where do we find the food?', question1: "Where do we find the food?",
question2: 'How do we contact?', question2: "How do we contact?",
question3: 'How can I pay the delivery person?', question3: "How can I pay the delivery person?",
question4: 'Is the service available in my city?', question4: "Is the service available in my city?",
answer1: answer1:
'You can find the food at your nearest store without paying anything to customer service.Our charges are extremely low as compared to others.', "You can find the food at your nearest store without paying anything to customer service.Our charges are extremely low as compared to others.",
answer2: 'You can contact us through our email, phone number or our website.', answer2: "You can contact us through our email, phone number or our website.",
answer3: answer3:
'You can pay the delivery person in person or pay online as well through credit or debit card.', "You can pay the delivery person in person or pay online as well through credit or debit card.",
answer4: answer4:
'Currently this service is available in cities Islamabad and Karachi you can contact us to avail this service in your city.', "Currently this service is available in cities Islamabad and Karachi you can contact us to avail this service in your city.",
add: 'ADD', add: "ADD",
quantity: 'Quantity', quantity: "Quantity",
size: 'Size', size: "Size",
addToCart: 'Add to Cart', addToCart: "Add to Cart",
orderNow: 'Order Now', orderNow: "Order Now",
addToCartMessage: 'Added to cart', addToCartMessage: "Added to cart",
emptyCart: 'No items in cart', emptyCart: "No items in cart",
itemTotal: 'Item Total', itemTotal: "Item Total",
delvieryCharges: 'Delivery Charges', delvieryCharges: "Delivery Charges",
total: 'Total', total: "Total",
contactInfo: 'Contact Info', contactInfo: "Contact Info",
deliveryAddressmessage: 'Set delivery address', deliveryAddressmessage: "Set delivery address",
proceedCheckout: 'Proceed to Checkout', proceedCheckout: "Proceed to Checkout",
paymentText: 'How do you wish to pay?', paymentText: "How do you wish to pay?",
checkout: 'Checkout', checkout: "Checkout",
header_title1: 'Credit Card/Debit Card', header_title1: "Credit Card/Debit Card",
header_subscript1: 'Pay with Credit or Debit Card', header_subscript1: "Pay with Credit or Debit Card",
header_title2: 'PayPal', header_title2: "PayPal",
header_subscript2: 'Pay online with PayPal', header_subscript2: "Pay online with PayPal",
header_title3: 'Cash on delivery', header_title3: "Cash on delivery",
header_subscript3: 'Pay when you recieve the item', header_subscript3: "Pay when you recieve the item",
thankYou: 'Thank You!', thankYou: "Thank You!",
orderConfirmed: 'Your Order is confirmed', orderConfirmed: "Your Order is confirmed",
orderAmount: 'Your Order Amount', orderAmount: "Your Order Amount",
orderDetail: 'Order Detail', orderDetail: "Order Detail",
paymentMethod: 'Payment Method', paymentMethod: "Payment Method",
trackOrder: 'Track Order', trackOrder: "Track Order",
backToMenu: 'Back To Menu', backToMenu: "Back To Menu",
foodItem: 'Food item', foodItem: "Food item",
deliveredTo: 'Delivered to', deliveredTo: "Delivered to",
writeAReview: 'Write a Review', writeAReview: "Write a Review",
orderReceived: 'Order Received', orderReceived: "Order Received",
cancelled: 'Cancelled', cancelled: "Cancelled",
foodPreparing: 'Food is being prepared', foodPreparing: "Food is being prepared",
Delivered: 'Delivered', Delivered: "Delivered",
rateAndReview: 'Rate and Review', rateAndReview: "Rate and Review",
reviewPlaceholder: 'More detailed reviews get more visibility...', reviewPlaceholder: "More detailed reviews get more visibility...",
submit: 'Submit', submit: "Submit",
noWorriesText: 'No worries, let us help you out!', noWorriesText: "No worries, let us help you out!",
yourEmail: 'Your Email', yourEmail: "Your Email",
send: 'Send', send: "Send",
apply: 'Apply', apply: "Apply",
checkEmail: 'Check your email for reset password link', checkEmail: "Check your email for reset password link",
languageText: 'Please select your required language', languageText: "Please select your required language",
countryCodePickerTranslation: 'eng', countryCodePickerTranslation: "eng",
countryCodeSelect: 'Select Country Code', countryCodeSelect: "Select Country Code",
paymentNotSupported: 'This payment method does not support this Currency', paymentNotSupported: "This payment method does not support this Currency",
Orders: 'Orders', Orders: "Orders",
deliveryTime: 'Delivery Time', deliveryTime: "Delivery Time",
myOrders: 'My Orders', myOrders: "My Orders",
newOrders: 'New Orders', newOrders: "New Orders",
titleChat: 'Chat', titleChat: "Chat",
NoNewOrder: 'No New Order', NoNewOrder: "No New Order",
Somethingisworng: 'Something is worng', Somethingisworng: "Something is worng",
PENDING: 'PENDING', PENDING: "PENDING",
ACCEPTED: 'ACCEPTED', ACCEPTED: "ACCEPTED",
PICKED: 'PICKED', PICKED: "PICKED",
DELIVERED: 'DELIVERED', DELIVERED: "DELIVERED",
COMPLETED: 'COMPLETED', COMPLETED: "COMPLETED",
YourOrderID: 'Your Order ID', YourOrderID: "Your Order ID",
ProductPage: 'Product Page', ProductPage: "Product Page",
Docs: 'Docs', Docs: "Docs",
Blog: 'Blog', Blog: "Blog",
AboutUs: 'About Us', AboutUs: "About Us",
Done: 'Done', Done: "Done",
Cancel: 'Cancel', Cancel: "Cancel",
Usernameisrequired: 'Username is required', Usernameisrequired: "Username is required",
Passwordisrequired: 'Password is required', Passwordisrequired: "Password is required",
Loggedin: 'Logged in', Loggedin: "Logged in",
EnteryourEmailandPassword: 'Enter your Email and Password', EnteryourEmailandPassword: "Enter your Email and Password",
EmailorPhone: 'Email or Phone', EmailorPhone: "Email or Phone",
Password: 'Password', Password: "Password",
NoOrdersAssignedyet: 'No Orders Assigned yet', NoOrdersAssignedyet: "No Orders Assigned yet",
Loadingorders: 'Loading orders', Loadingorders: "Loading orders",
Orderassginedtootherrider: 'Order assgined to other rider', Orderassginedtootherrider: "Order assgined to other rider",
CustomerDetails: 'Customer Details', CustomerDetails: "Customer Details",
Contact: 'Contact', Contact: "Contact",
DelvieryLocation: 'Delviery Location', DelvieryLocation: "Delivery Location",
OrderDetails: 'Order Details', OrderDetails: "Order Details",
Subtotal: 'Subtotal', Subtotal: "Subtotal",
Assigntome: 'Assign to me', Assigntome: "Assign to me",
'About Us': 'About Us', "About Us": "About Us",
'Product Page': 'Product Page', "Product Page": "Product Page",
Order: 'Order', Order: "Order",
OrderMarkedAs: 'Order marked as', OrderMarkedAs: "Order marked as",
titleLogin: 'Login', titleLogin: "Login",
Picked: 'Picked' Picked: "Picked",
} };

1086
RiderApp/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
RiderApp/package.json
View File

@ -43,7 +43,6 @@
"expo": "^47.0.0", "expo": "^47.0.0",
"expo-constants": "~14.0.2", "expo-constants": "~14.0.2",
"expo-font": "~11.0.1", "expo-font": "~11.0.1",
"expo-localization": "~14.0.0",
"expo-location": "~15.0.1", "expo-location": "~15.0.1",
"expo-modules-autolinking": "^1.5.1", "expo-modules-autolinking": "^1.5.1",
"expo-navigation-bar": "~2.0.1", "expo-navigation-bar": "~2.0.1",
@ -54,10 +53,11 @@
"expo-updates": "~0.15.6", "expo-updates": "~0.15.6",
"graphql": "^14.3.1", "graphql": "^14.3.1",
"graphql-tag": "^2.10.1", "graphql-tag": "^2.10.1",
"i18n-js": "^3.3.0", "i18next": "^23.8.2",
"patch-package": "^6.5.1", "patch-package": "^6.5.1",
"react": "18.1.0", "react": "18.1.0",
"react-apollo": "^2.5.8", "react-apollo": "^2.5.8",
"react-i18next": "^14.0.5",
"react-native": "0.70.8", "react-native": "0.70.8",
"react-native-animatable": "^1.3.2", "react-native-animatable": "^1.3.2",
"react-native-flash-message": "^0.1.13", "react-native-flash-message": "^0.1.13",

45
RiderApp/src/components/AssignedOrders/AssignedOrders.js
View File

@ -1,35 +1,36 @@
import React, { useContext } from 'react' import React, { useContext } from "react";
import { FlatList } from 'react-native' import { FlatList } from "react-native";
import Spinner from '../Spinner/Spinner' import Spinner from "../Spinner/Spinner";
import Order from '../Order/Order' import Order from "../Order/Order";
import ConfigurationContext from '../../context/configuration' import ConfigurationContext from "../../context/configuration";
import UserContext from '../../context/user' import UserContext from "../../context/user";
import TextError from '../Text/TextError/TextError' import TextError from "../Text/TextError/TextError";
import { useNavigation } from '@react-navigation/native' import { useNavigation } from "@react-navigation/native";
import { verticalScale } from '../../utilities/scaling' import { verticalScale } from "../../utilities/scaling";
import i18n from '../../../i18n' import { useTranslation } from "react-i18next";
export default function Orders() { export default function Orders() {
const navigation = useNavigation() const { t } = useTranslation();
const configuration = useContext(ConfigurationContext) const navigation = useNavigation();
const configuration = useContext(ConfigurationContext);
const { const {
loadingAssigned, loadingAssigned,
errorAssigned, errorAssigned,
assignedOrders, assignedOrders,
refetchAssigned, refetchAssigned,
networkStatusAssigned networkStatusAssigned,
} = useContext(UserContext) } = useContext(UserContext);
if (loadingAssigned) return <Spinner /> if (loadingAssigned) return <Spinner />;
if (errorAssigned) return <TextError text={i18n.t('Somethingisworng')} /> if (errorAssigned) return <TextError text={t("Somethingisworng")} />;
function emptyView() { function emptyView() {
return <TextError text={i18n.t('NoOrdersAssignedyet')} /> return <TextError text={t("NoOrdersAssignedyet")} />;
} }
return ( return (
<FlatList <FlatList
keyExtractor={item => item._id} keyExtractor={(item) => item._id}
data={assignedOrders.length > 0 ? assignedOrders.slice().reverse() : []} data={assignedOrders.length > 0 ? assignedOrders.slice().reverse() : []}
refreshing={networkStatusAssigned === 4} refreshing={networkStatusAssigned === 4}
onRefresh={() => refetchAssigned()} onRefresh={() => refetchAssigned()}
@ -45,13 +46,13 @@ export default function Orders() {
orderDatetime={item.createdAt} orderDatetime={item.createdAt}
paymentMethod={item.payment_method} paymentMethod={item.payment_method}
onPress={() => { onPress={() => {
navigation.navigate('OrderDetail', { navigation.navigate("OrderDetail", {
id: item._id, id: item._id,
orderId: item.order_id orderId: item.order_id,
}) });
}} }}
/> />
)} )}
/> />
) );
} }

7
RiderApp/src/components/NewOrders/NewOrders.js
View File

@ -7,9 +7,10 @@ import UserContext from '../../context/user'
import TextError from '../Text/TextError/TextError' import TextError from '../Text/TextError/TextError'
import { useNavigation } from '@react-navigation/native' import { useNavigation } from '@react-navigation/native'
import { verticalScale } from '../../utilities/scaling' import { verticalScale } from '../../utilities/scaling'
import i18n from '../../../i18n' import { useTranslation } from "react-i18next";
export default function Orders() { export default function Orders() {
const { t } = useTranslation();
const navigation = useNavigation() const navigation = useNavigation()
const configuration = useContext(ConfigurationContext) const configuration = useContext(ConfigurationContext)
const { const {
@ -21,11 +22,11 @@ export default function Orders() {
} = useContext(UserContext) } = useContext(UserContext)
function emptyView() { function emptyView() {
return <TextError text={i18n.t('NoNewOrder')} /> return <TextError text={t('NoNewOrder')} />
} }
if (loadingUnAssigned) return <Spinner /> if (loadingUnAssigned) return <Spinner />
if (errorUnAssigned) return <TextError text={i18n.t('Somethingisworng')} /> if (errorUnAssigned) return <TextError text={t('Somethingisworng')} />
return ( return (
<FlatList <FlatList

18
RiderApp/src/components/Order/Order.js
View File

@ -3,7 +3,7 @@ import { View, TouchableOpacity } from 'react-native'
import { scale } from '../../utilities/scaling' import { scale } from '../../utilities/scaling'
import colors from '../../utilities/colors' import colors from '../../utilities/colors'
import styles from './style' import styles from './style'
import i18n from '../../../i18n' import { useTranslation } from "react-i18next";
import TextDefault from '../Text/TextDefault/TextDefault' import TextDefault from '../Text/TextDefault/TextDefault'
import { alignment } from '../../utilities/alignment' import { alignment } from '../../utilities/alignment'
import { AntDesign } from '@expo/vector-icons' import { AntDesign } from '@expo/vector-icons'
@ -36,7 +36,7 @@ function Order(props) {
// const cardHeight = props.height // const cardHeight = props.height
// ? props.height // ? props.height
// : PixelRatio.getFontScale() * verticalScale(150) // : PixelRatio.getFontScale() * verticalScale(150)
const { t } = useTranslation();
const checkStatus = status => { const checkStatus = status => {
const obj = orderStatuses.filter(x => { const obj = orderStatuses.filter(x => {
return x.key === status return x.key === status
@ -60,7 +60,7 @@ function Order(props) {
numberOfLines={2} numberOfLines={2}
bold bold
textColor={colors.placeHolderColor}> textColor={colors.placeHolderColor}>
{i18n.t('YourOrderID')} {t('YourOrderID')}
</TextDefault> </TextDefault>
<TextDefault H4 bolder> <TextDefault H4 bolder>
{props.orderId} {props.orderId}
@ -77,7 +77,7 @@ function Order(props) {
bold bold
uppercase uppercase
style={{ ...alignment.PLxSmall, ...alignment.PRxSmall }}> style={{ ...alignment.PLxSmall, ...alignment.PRxSmall }}>
{i18n.t(props.orderStatus)} {t(props.orderStatus)}
</TextDefault> </TextDefault>
</View> </View>
<View style={{ paddingLeft: '5%' }}> <View style={{ paddingLeft: '5%' }}>
@ -100,19 +100,19 @@ function Order(props) {
style={alignment.MTmedium} style={alignment.MTmedium}
textColor={colors.placeHolderColor} textColor={colors.placeHolderColor}
bold> bold>
{i18n.t('totalOrderAmount')} {t('totalOrderAmount')}
</TextDefault> </TextDefault>
<TextDefault <TextDefault
textColor={colors.placeHolderColor} textColor={colors.placeHolderColor}
bold bold
style={{ ...alignment.MTxSmall }}> style={{ ...alignment.MTxSmall }}>
{i18n.t('paymentMethod')} {t('paymentMethod')}
</TextDefault> </TextDefault>
<TextDefault <TextDefault
textColor={colors.placeHolderColor} textColor={colors.placeHolderColor}
bold bold
style={{ ...alignment.MTxSmall }}> style={{ ...alignment.MTxSmall }}>
{i18n.t('deliveryTime')} {t('deliveryTime')}
</TextDefault> </TextDefault>
</View> </View>
<View> <View>
@ -140,14 +140,14 @@ function Order(props) {
{/* <View style={[styles.card_container__left]}> {/* <View style={[styles.card_container__left]}>
<View style={[styles.left_toptextLine]}> <View style={[styles.left_toptextLine]}>
<TextDefault center H5 bold textColor={colors.placeHolderColor}> <TextDefault center H5 bold textColor={colors.placeHolderColor}>
Your {i18n.t('orderId')} Your {t('orderId')}
</TextDefault> </TextDefault>
<TextDefault H3 bolder> <TextDefault H3 bolder>
{props.orderId} {props.orderId}
</TextDefault> </TextDefault>
</View> */} </View> */}
{/* <TextDefault style={alignment.MTmedium} textColor={colors.placeHolderColor} bold> {/* <TextDefault style={alignment.MTmedium} textColor={colors.placeHolderColor} bold>
{i18n.t('totalOrderAmount')} - {props.orderAmount} {t('totalOrderAmount')} - {props.orderAmount}
</TextDefault> </TextDefault>
<TextDefault <TextDefault
textColor={colors.placeHolderColor} textColor={colors.placeHolderColor}

37
RiderApp/src/components/Sidebar/Profile/Profile.js
View File

@ -1,23 +1,24 @@
import React from 'react' import React from "react";
import { View } from 'react-native' import { View } from "react-native";
import gql from 'graphql-tag' import gql from "graphql-tag";
import Spinner from '../../Spinner/Spinner' import Spinner from "../../Spinner/Spinner";
import styles from './styles' import styles from "./styles";
import { profile } from '../../../apollo/queries' import { profile } from "../../../apollo/queries";
import { useQuery } from '@apollo/react-hooks' import { useQuery } from "@apollo/react-hooks";
import TextDefault from '../../Text/TextDefault/TextDefault' import TextDefault from "../../Text/TextDefault/TextDefault";
import colors from '../../../utilities/colors' import colors from "../../../utilities/colors";
import TextError from '../../Text/TextError/TextError' import TextError from "../../Text/TextError/TextError";
import i18n from '../../../../i18n' import { useTranslation } from "react-i18next";
const PROFILE = gql` const PROFILE = gql`
${profile} ${profile}
` `;
function Profile() { function Profile() {
const { data, loading, error } = useQuery(PROFILE) const { t } = useTranslation();
if (loading) return <Spinner /> const { data, loading, error } = useQuery(PROFILE);
if (error) return <TextError text="Something is worng" /> if (loading) return <Spinner />;
if (error) return <TextError text="Something is worng" />;
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.leftContainer}> <View style={styles.leftContainer}>
@ -31,14 +32,14 @@ function Profile() {
</View> </View>
<View style={styles.rightContainer}> <View style={styles.rightContainer}>
<TextDefault H5 bold textColor={colors.fontSecondColor}> <TextDefault H5 bold textColor={colors.fontSecondColor}>
{i18n.t('welcome')} {t("welcome")}
</TextDefault> </TextDefault>
<TextDefault H3 textColor={colors.fontSecondColor} bolder> <TextDefault H3 textColor={colors.fontSecondColor} bolder>
{data.rider.username} {data.rider.username}
</TextDefault> </TextDefault>
</View> </View>
</View> </View>
) );
} }
export default Profile export default Profile;

7
RiderApp/src/components/Sidebar/Sidebar.js
View File

@ -1,7 +1,7 @@
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import React, { useContext } from 'react' import React, { useContext } from 'react'
import { Platform, View } from 'react-native' import { Platform, View } from 'react-native'
import i18n from '../../../i18n' import { useTranslation } from "react-i18next";
import { AuthContext } from '../../context/auth' import { AuthContext } from '../../context/auth'
import { NAVIGATION_SCREEN } from '../../utilities/constant' import { NAVIGATION_SCREEN } from '../../utilities/constant'
import NavItem from './NavItem/NavItem' import NavItem from './NavItem/NavItem'
@ -40,6 +40,7 @@ const datas = [
] ]
function SidebBar({ navigation }) { function SidebBar({ navigation }) {
const { t } = useTranslation();
const { logout } = useContext(AuthContext) const { logout } = useContext(AuthContext)
// if (loading) return <Spinner /> // if (loading) return <Spinner />
@ -64,7 +65,7 @@ function SidebBar({ navigation }) {
} }
}} }}
icon={data.icon} icon={data.icon}
title={i18n.t(data.title)} title={t(data.title)}
/> />
</View> </View>
) )
@ -78,7 +79,7 @@ function SidebBar({ navigation }) {
navigation.closeDrawer() navigation.closeDrawer()
}} }}
icon={'sign-out'} icon={'sign-out'}
title={i18n.t('titleLogout')} title={t('titleLogout')}
/> />
</View> </View>
</View> </View>

146
RiderApp/src/screens/Chat/Chat.js
View File

@ -1,91 +1,97 @@
import { Feather, FontAwesome } from '@expo/vector-icons' import { Feather, FontAwesome } from "@expo/vector-icons";
import { useNavigation } from '@react-navigation/native' import { useNavigation } from "@react-navigation/native";
import React, { useCallback, useEffect, useState, useLayoutEffect } from 'react' import React, {
import { Keyboard, View } from 'react-native' useCallback,
useEffect,
useState,
useLayoutEffect,
} from "react";
import { Keyboard, View } from "react-native";
import { import {
Bubble, Bubble,
GiftedChat, GiftedChat,
InputToolbar, InputToolbar,
Send Send,
} from 'react-native-gifted-chat' } from "react-native-gifted-chat";
import { MainWrapper, TextDefault } from '../../components' import { MainWrapper, TextDefault } from "../../components";
import { alignment } from '../../utilities/alignment' import { alignment } from "../../utilities/alignment";
import colors from '../../utilities/colors' import colors from "../../utilities/colors";
import { scale } from '../../utilities/scaling' import { scale } from "../../utilities/scaling";
import useStyle from './styles' import useStyle from "./styles";
import i18n from '../../../i18n' import { useTranslation } from "react-i18next";
const UserInfo = { const UserInfo = {
_id: 1, _id: 1,
name: 'Jason', name: "Jason",
active: true active: true,
} };
function Chat() { function Chat() {
const styles = useStyle() const { t } = useTranslation();
const navigation = useNavigation() const styles = useStyle();
const [messages, setMessages] = useState([]) const navigation = useNavigation();
const [isTyping, setIsTyping] = useState(false) const [messages, setMessages] = useState([]);
const [isTyping, setIsTyping] = useState(false);
useEffect(() => { useEffect(() => {
Keyboard.addListener('keyboardDidShow', _keyboardDidShow) Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
Keyboard.addListener('keyboardDidHide', _keyboardDidHide) Keyboard.addListener("keyboardDidHide", _keyboardDidHide);
// cleanup function // cleanup function
return () => { return () => {
Keyboard.removeListener('keyboardDidShow', _keyboardDidShow) Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
Keyboard.removeListener('keyboardDidHide', _keyboardDidHide) Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);
} };
}, []) }, []);
const _keyboardDidShow = () => setIsTyping(true) const _keyboardDidShow = () => setIsTyping(true);
const _keyboardDidHide = () => setIsTyping(false) const _keyboardDidHide = () => setIsTyping(false);
useEffect(() => { useEffect(() => {
navigation.setOptions({ navigation.setOptions({
headerTitle: i18n.t('titleChat') headerTitle: t("titleChat"),
}) });
setMessages([ setMessages([
{ {
_id: 1, _id: 1,
text: 'How can I help you?', text: "How can I help you?",
sent: true, sent: true,
received: true, received: true,
createdAt: new Date(), createdAt: new Date(),
user: { user: {
_id: 2, _id: 2,
name: 'React Native', name: "React Native",
avatar: 'https://placeimg.com/140/140/any' avatar: "https://placeimg.com/140/140/any",
} },
} },
]) ]);
}, [navigation]) }, [navigation]);
const onSend = useCallback((messages = []) => { const onSend = useCallback((messages = []) => {
setMessages(previousMessages => setMessages((previousMessages) =>
GiftedChat.append(previousMessages, messages) GiftedChat.append(previousMessages, messages)
) );
}, []) }, []);
const renderBubble = props => { const renderBubble = (props) => {
return ( return (
<Bubble <Bubble
{...props} {...props}
textStyle={{ textStyle={{
right: { right: {
color: colors.fontMainColor color: colors.fontMainColor,
}, },
left: { left: {
color: colors.fontMainColor color: colors.fontMainColor,
} },
}} }}
bottomContainerStyle={{ bottomContainerStyle={{
right: { right: {
...alignment.PTxSmall ...alignment.PTxSmall,
}, },
left: { left: {
...alignment.PTxSmall ...alignment.PTxSmall,
} },
}} }}
wrapperStyle={{ wrapperStyle={{
right: { right: {
@ -100,11 +106,11 @@ function Chat() {
shadowColor: colors.black, shadowColor: colors.black,
shadowOffset: { shadowOffset: {
width: 0, width: 0,
height: 1 height: 1,
}, },
shadowOpacity: 0.2, shadowOpacity: 0.2,
shadowRadius: 2, shadowRadius: 2,
elevation: 3 elevation: 3,
}, },
left: { left: {
minWidth: 150, minWidth: 150,
@ -118,36 +124,36 @@ function Chat() {
shadowColor: colors.black, shadowColor: colors.black,
shadowOffset: { shadowOffset: {
width: 0, width: 0,
height: 1 height: 1,
}, },
shadowOpacity: 0.2, shadowOpacity: 0.2,
shadowRadius: 2, shadowRadius: 2,
elevation: 3 elevation: 3,
} },
}} }}
/> />
) );
} };
const renderSend = props => ( const renderSend = (props) => (
<Send {...props} containerStyle={styles.sendBtn}> <Send {...props} containerStyle={styles.sendBtn}>
<View style={styles.rightBtn}> <View style={styles.rightBtn}>
<Feather <Feather
name={'send'} name={"send"}
color={colors.buttonText} color={colors.buttonText}
size={scale(17)} size={scale(17)}
style={{ style={{
transform: [ transform: [
{ rotateZ: '45deg' }, { rotateZ: "45deg" },
{ translateY: 2 }, { translateY: 2 },
{ translateX: -1 } { translateX: -1 },
] ],
}} }}
/> />
</View> </View>
</Send> </Send>
) );
const customtInputToolbar = props => { const customtInputToolbar = (props) => {
return ( return (
<InputToolbar <InputToolbar
{...props} {...props}
@ -155,8 +161,8 @@ function Chat() {
renderSend={renderSend} renderSend={renderSend}
render render
/> />
) );
} };
return ( return (
<MainWrapper> <MainWrapper>
@ -167,7 +173,7 @@ function Chat() {
color={UserInfo.active ? colors.iconPink : colors.fontSecondColor} color={UserInfo.active ? colors.iconPink : colors.fontSecondColor}
/> />
<TextDefault medium H5 style={alignment.PLsmall}> <TextDefault medium H5 style={alignment.PLsmall}>
{UserInfo.active ? UserInfo.name : 'Offline'} {UserInfo.active ? UserInfo.name : "Offline"}
</TextDefault> </TextDefault>
</View> </View>
<GiftedChat <GiftedChat
@ -176,7 +182,7 @@ function Chat() {
user={UserInfo} user={UserInfo}
isTyping={isTyping} isTyping={isTyping}
messages={messages} messages={messages}
onSend={messages => onSend(messages)} onSend={(messages) => onSend(messages)}
renderAvatar={() => null} renderAvatar={() => null}
renderBubble={renderBubble} renderBubble={renderBubble}
renderInputToolbar={customtInputToolbar} renderInputToolbar={customtInputToolbar}
@ -193,20 +199,20 @@ function Chat() {
// } // }
timeTextStyle={{ timeTextStyle={{
left: { left: {
width: '100%', width: "100%",
color: colors.fontMainColor, color: colors.fontMainColor,
fontSize: 11, fontSize: 11,
textAlign: 'right' textAlign: "right",
}, },
right: { right: {
color: colors.fontMainColor, color: colors.fontMainColor,
fontSize: 11 fontSize: 11,
} },
}} }}
/> />
</View> </View>
</MainWrapper> </MainWrapper>
) );
} }
export default Chat export default Chat;

56
RiderApp/src/screens/Help/Help.js
View File

@ -1,36 +1,39 @@
import { AntDesign } from '@expo/vector-icons' import { AntDesign } from "@expo/vector-icons";
import { useNavigation } from '@react-navigation/native' import { useNavigation } from "@react-navigation/native";
import React, { useLayoutEffect } from 'react' import React, { useLayoutEffect } from "react";
import { TouchableOpacity, View } from 'react-native' import { TouchableOpacity, View } from "react-native";
import i18n from '../../../i18n' import { useTranslation } from "react-i18next";
import { MainWrapper, TextDefault } from '../../components' import { MainWrapper, TextDefault } from "../../components";
import colors from '../../utilities/colors' import colors from "../../utilities/colors";
import { scale, verticalScale } from '../../utilities/scaling' import { scale, verticalScale } from "../../utilities/scaling";
import styles from './styles' import styles from "./styles";
const links = [ const links = [
{ {
title: 'Product Page', title: "Product Page",
url: url: "https://enatega.com/enatega-single-vendor/",
'https://enatega.com/enatega-single-vendor/'
}, },
{ title: 'Docs', url: 'https://enatega.com/docs/enatega-singlevendor-rider-app-introduction/' },
{ {
title: 'Blog', title: "Docs",
url: url:
'https://enatega.com/blog/' "https://enatega.com/docs/enatega-singlevendor-rider-app-introduction/",
}, },
{ title: 'About Us', url: 'https://ninjascode.com/our-team/' } {
] title: "Blog",
url: "https://enatega.com/blog/",
},
{ title: "About Us", url: "https://ninjascode.com/our-team/" },
];
function Help() { function Help() {
const navigation = useNavigation() const { t } = useTranslation();
const navigation = useNavigation();
useLayoutEffect(() => { useLayoutEffect(() => {
navigation.setOptions({ navigation.setOptions({
headerRight: null, headerRight: null,
headerTitle: i18n.t('titleHelp') headerTitle: t("titleHelp"),
}) });
}, [navigation]) }, [navigation]);
return ( return (
<MainWrapper> <MainWrapper>
@ -38,17 +41,18 @@ function Help() {
{links.map(({ title, url }, index) => ( {links.map(({ title, url }, index) => (
<TouchableOpacity <TouchableOpacity
activeOpacity={0.8} activeOpacity={0.8}
onPress={() => navigation.navigate('HelpBrowser', { title, url })} onPress={() => navigation.navigate("HelpBrowser", { title, url })}
style={styles.itemContainer} style={styles.itemContainer}
key={index}> key={index}
>
<TextDefault textColor={colors.fontMainColor} H4> <TextDefault textColor={colors.fontMainColor} H4>
{i18n.t(title)} {t(title)}
</TextDefault> </TextDefault>
<AntDesign name="arrowright" size={scale(20)} /> <AntDesign name="arrowright" size={scale(20)} />
</TouchableOpacity> </TouchableOpacity>
))} ))}
</MainWrapper> </MainWrapper>
) );
} }
export default Help export default Help;

27
RiderApp/src/screens/HelpBrowser/HelpBrowser.js
View File

@ -1,20 +1,21 @@
import { useNavigation, useRoute } from '@react-navigation/native' import { useNavigation, useRoute } from "@react-navigation/native";
import React, { useLayoutEffect } from 'react' import React, { useLayoutEffect } from "react";
import { WebView } from 'react-native-webview' import { WebView } from "react-native-webview";
import { MainWrapper, Spinner } from '../../components' import { MainWrapper, Spinner } from "../../components";
import i18n from '../../../i18n' import { useTranslation } from "react-i18next";
function HelpBrowser() { function HelpBrowser() {
const navigation = useNavigation() const { t } = useTranslation();
const route = useRoute() const navigation = useNavigation();
const { title, url } = route.params const route = useRoute();
const { title, url } = route.params;
useLayoutEffect(() => { useLayoutEffect(() => {
navigation.setOptions({ navigation.setOptions({
headerRight: null, headerRight: null,
headerTitle: i18n.t(title) headerTitle: t(title),
}) });
}, [navigation]) }, [navigation]);
return ( return (
<MainWrapper> <MainWrapper>
@ -24,7 +25,7 @@ function HelpBrowser() {
renderLoading={() => <Spinner />} renderLoading={() => <Spinner />}
/> />
</MainWrapper> </MainWrapper>
) );
} }
export default HelpBrowser export default HelpBrowser;

141
RiderApp/src/screens/Language/Language.js
View File

@ -1,68 +1,72 @@
import AsyncStorage from '@react-native-async-storage/async-storage' import AsyncStorage from "@react-native-async-storage/async-storage";
import { useNavigation } from '@react-navigation/native' import { useNavigation } from "@react-navigation/native";
import * as Localization from 'expo-localization' import React, { useEffect, useLayoutEffect, useState } from "react";
import * as Updates from 'expo-updates' import { TouchableOpacity, View, ActivityIndicator } from "react-native";
import React, { useEffect, useLayoutEffect, useState } from 'react' import i18n from "../../../i18next";
import { Platform, TouchableOpacity, View } from 'react-native' import { useTranslation } from "react-i18next";
import i18n from '../../../i18n' import { MainWrapper } from "../../components";
import { MainWrapper } from '../../components' import RadioButton from "../../components/FdRadioBtn/RadioBtn";
import RadioButton from '../../components/FdRadioBtn/RadioBtn' import TextDefault from "../../components/Text/TextDefault/TextDefault";
import TextDefault from '../../components/Text/TextDefault/TextDefault' import { alignment } from "../../utilities/alignment";
import { alignment } from '../../utilities/alignment' import colors from "../../utilities/colors";
import colors from '../../utilities/colors' import { scale } from "../../utilities/scaling";
import { scale } from '../../utilities/scaling' import styles from "./styles";
import styles from './styles'
const languageTypes = [ const languageTypes = [
{ value: 'English', code: 'en', index: 0 }, { value: "English", code: "en", index: 0 },
{ value: 'français', code: 'fr', index: 1 }, { value: "français", code: "fr", index: 1 },
{ value: 'ភាសាខ្មែរ', code: 'km', index: 2 }, { value: "ភាសាខ្មែរ", code: "km", index: 2 },
{ value: '中文', code: 'zh', index: 3 }, { value: "中文", code: "zh", index: 3 },
{ value: 'Deutsche', code: 'de', index: 4 }, { value: "Deutsche", code: "de", index: 4 },
{ value: 'Arabic', code: 'ar', index: 5 } { value: "Arabic", code: "ar", index: 5 },
] ];
function Language() { function Language() {
const navigation = useNavigation() const { t } = useTranslation();
const [activeRadio, setActiveRadio] = useState(languageTypes[0].index) const navigation = useNavigation();
// eslint-disable-next-line no-unused-vars const [activeRadio, setActiveRadio] = useState(languageTypes[0].index);
const [languageName, languageNameSetter] = useState('English') const [languageName, languageNameSetter] = useState("English");
const [loadinglang, setLoadingLang] = useState(false);
useLayoutEffect(() => { useLayoutEffect(() => {
navigation.setOptions({ navigation.setOptions({
title: i18n.t('titleLanguage') title: t("titleLanguage"),
}) });
}, [navigation]) }, [t, navigation]);
useEffect(() => { useEffect(() => {
selectedLanguageFunc() selectedLanguageFunc();
}, []) }, []);
async function selectedLanguageFunc() { async function selectedLanguageFunc() {
const lang = await AsyncStorage.getItem('enatega-language') const lang = await AsyncStorage.getItem("enatega-language");
if (lang) { if (lang) {
const defLang = languageTypes.findIndex(el => el.code === lang) const defLang = languageTypes.findIndex((el) => el.code === lang);
const langName = languageTypes[defLang].value const langName = languageTypes[defLang].value;
setActiveRadio(defLang) setActiveRadio(defLang);
languageNameSetter(langName) languageNameSetter(langName);
} }
} }
async function onSelectedLanguage() { async function onSelectedLanguage() {
const languageInd = activeRadio
if (Platform.OS === 'android') {
const localization = await Localization.getLocalizationAsync()
localization.locale = languageTypes[languageInd].code
await AsyncStorage.setItem(
'enatega-language',
languageTypes[languageInd].code
)
try { try {
Updates.reloadAsync() setLoadingLang(true);
} catch (error) { const languageInd = activeRadio;
console.log('err', error) await AsyncStorage.setItem(
"enatega-language",
languageTypes[languageInd].code
);
var lang = await AsyncStorage.getItem("enatega-language");
if (lang) {
const defLang = languageTypes.findIndex((el) => el.code === lang);
const langName = languageTypes[defLang].value;
languageNameSetter(langName);
} }
i18n.changeLanguage(lang);
} catch (error) {
console.error("Error during language selection:", error);
} finally {
setLoadingLang(false);
} }
} }
@ -75,7 +79,8 @@ function Language() {
activeOpacity={0.7} activeOpacity={0.7}
key={index} key={index}
onPress={() => setActiveRadio(item.index)} onPress={() => setActiveRadio(item.index)}
style={[styles.radioContainer]}> style={[styles.radioContainer]}
>
<TextDefault <TextDefault
numberOfLines={1} numberOfLines={1}
textColor={ textColor={
@ -85,11 +90,12 @@ function Language() {
} }
bold bold
H5 H5
style={alignment.MLsmall}> style={alignment.MLsmall}
>
{item.value} {item.value}
</TextDefault> </TextDefault>
<RadioButton <RadioButton
animation={'bounceIn'} animation={"bounceIn"}
size={13} size={13}
outerColor={colors.tagColor} outerColor={colors.tagColor}
innerColor={colors.radioColor} innerColor={colors.radioColor}
@ -106,35 +112,42 @@ function Language() {
onPress={() => onSelectedLanguage()} onPress={() => onSelectedLanguage()}
style={{ style={{
backgroundColor: colors.tagColor, backgroundColor: colors.tagColor,
width: '72%', width: "72%",
borderRadius: scale(10), borderRadius: scale(10),
alignSelf: 'center', alignSelf: "center",
alignItems: 'center', alignItems: "center",
height: scale(40), height: scale(40),
justifyContent: 'center' justifyContent: "center",
}}> }}
>
<TextDefault H5 bold textColor={colors.fontSecondColor}> <TextDefault H5 bold textColor={colors.fontSecondColor}>
{i18n.t('Done')} {t("Done")}
</TextDefault> </TextDefault>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
activeOpacity={0.8} activeOpacity={0.8}
onPress={() => navigation.goBack()} onPress={() => navigation.goBack()}
style={{ style={{
width: '72%', width: "72%",
alignSelf: 'center', alignSelf: "center",
alignItems: 'center', alignItems: "center",
height: scale(40), height: scale(40),
justifyContent: 'center' justifyContent: "center",
}}> }}
>
<TextDefault H5 bold textColor={colors.fontMainColor}> <TextDefault H5 bold textColor={colors.fontMainColor}>
{i18n.t('Cancel')} {t("Cancel")}
</TextDefault> </TextDefault>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
{loadinglang && (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" />
</View>
)}
</View> </View>
</MainWrapper> </MainWrapper>
) );
} }
export default Language export default Language;

16
RiderApp/src/screens/Language/languageContext.js Normal file
View File

@ -0,0 +1,16 @@
// LanguageContext.js
import React, { createContext, useState, useContext } from 'react';
const LanguageContext = createContext();
export const LanguageProvider = ({ children }) => {
const [selectedLanguage, setSelectedLanguage] = useState("en");
return (
<LanguageContext.Provider value={{ selectedLanguage, setSelectedLanguage }}>
{children}
</LanguageContext.Provider>
);
};
export const useLanguage = () => useContext(LanguageContext);

158
RiderApp/src/screens/Login/Login.js
View File

@ -1,114 +1,117 @@
import { useMutation } from '@apollo/react-hooks' import { useMutation } from "@apollo/react-hooks";
import AsyncStorage from '@react-native-async-storage/async-storage' import AsyncStorage from "@react-native-async-storage/async-storage";
import { useNavigation } from '@react-navigation/native' import { useNavigation } from "@react-navigation/native";
import Constants from 'expo-constants' import Constants from "expo-constants";
import * as Notifications from 'expo-notifications' import * as Notifications from "expo-notifications";
import gql from 'graphql-tag' import gql from "graphql-tag";
import React, { useContext, useEffect, useState,useLayoutEffect } from 'react' import React, { useContext, useEffect, useState, useLayoutEffect } from "react";
import { import {
KeyboardAvoidingView, KeyboardAvoidingView,
Platform, Platform,
ScrollView, ScrollView,
TouchableOpacity, TouchableOpacity,
View View,
} from 'react-native' } from "react-native";
import { FilledTextField } from 'react-native-material-textfield' import { FilledTextField } from "react-native-material-textfield";
import Logo from '../../../assets/images/Svg/Logo' import Logo from "../../../assets/images/Svg/Logo";
import i18n from '../../../i18n' import { useTranslation } from "react-i18next";
import { riderLogin } from '../../apollo/mutations' import { riderLogin } from "../../apollo/mutations";
import { Spinner, TextDefault, WrapperView } from '../../components' import { Spinner, TextDefault, WrapperView } from "../../components";
import { FlashMessage } from '../../components/FlashMessage/FlashMessage' import { FlashMessage } from "../../components/FlashMessage/FlashMessage";
import { AuthContext } from '../../context/auth' import { AuthContext } from "../../context/auth";
import { alignment } from '../../utilities/alignment' import { alignment } from "../../utilities/alignment";
import colors from '../../utilities/colors' import colors from "../../utilities/colors";
import { scale } from '../../utilities/scaling' import { scale } from "../../utilities/scaling";
import useStyle from './styles' import useStyle from "./styles";
const RIDER_LOGIN = gql` const RIDER_LOGIN = gql`
${riderLogin} ${riderLogin}
` `;
export default function Login() { export default function Login() {
const styles = useStyle() const { t } = useTranslation();
const navigation = useNavigation() const styles = useStyle();
const [username, setUsername] = useState('rider') const navigation = useNavigation();
const [password, setPassword] = useState('123123') const [username, setUsername] = useState("rider");
const [usernameError, setUsernameError] = useState('') const [password, setPassword] = useState("123123");
const [passwordError, setPasswordError] = useState('') const [usernameError, setUsernameError] = useState("");
const [passwordError, setPasswordError] = useState("");
const { setTokenAsync } = useContext(AuthContext)
const { setTokenAsync } = useContext(AuthContext);
useLayoutEffect(() => { useLayoutEffect(() => {
navigation.setOptions({ navigation.setOptions({
headerRight: null, headerRight: null,
headerTitle: i18n.t('titleHelp') headerTitle: t("titleHelp"),
}) });
}, [navigation]) }, [navigation]);
const [mutate, { loading }] = useMutation(RIDER_LOGIN, { const [mutate, { loading }] = useMutation(RIDER_LOGIN, {
onCompleted, onCompleted,
onError onError,
}) });
function validateForm() { function validateForm() {
let res = true let res = true;
setUsernameError('') setUsernameError("");
setPasswordError('') setPasswordError("");
if (!username) { if (!username) {
setUsernameError(i18n.t('Usernameisrequired')) setUsernameError(t("Usernameisrequired"));
res = false res = false;
} }
if (!password) { if (!password) {
setPasswordError(i18n.t('Passwordisrequired')) setPasswordError(t("Passwordisrequired"));
res = false res = false;
} }
return res return res;
} }
async function onCompleted(data) { async function onCompleted(data) {
FlashMessage({ FlashMessage({
message: i18n.t('Loggedin') message: t("Loggedin"),
}) });
await AsyncStorage.setItem('rider-id', data.riderLogin.userId) await AsyncStorage.setItem("rider-id", data.riderLogin.userId);
setTokenAsync(data.riderLogin.token) setTokenAsync(data.riderLogin.token);
} }
function onError({ networkError, graphQLErrors }) { function onError({ networkError, graphQLErrors }) {
console.log('errors', networkError, graphQLErrors) console.log("errors", networkError, graphQLErrors);
let message = '' let message = "";
if (!!graphQLErrors && graphQLErrors.length) { if (!!graphQLErrors && graphQLErrors.length) {
message = graphQLErrors[0].message message = graphQLErrors[0].message;
} }
if (!!networkError) { if (!!networkError) {
message = networkError.result.errors[0].message message = networkError.result.errors[0].message;
} }
FlashMessage({ FlashMessage({
message: message message: message,
}) });
} }
return ( return (
<WrapperView> <WrapperView>
<KeyboardAvoidingView <KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'} behavior={Platform.OS === "ios" ? "padding" : "height"}
style={styles.flex}> style={styles.flex}
>
<ScrollView <ScrollView
style={styles.flex} style={styles.flex}
contentContainerStyle={styles.scrollContent}> contentContainerStyle={styles.scrollContent}
>
<View style={[styles.flex, styles.container]}> <View style={[styles.flex, styles.container]}>
<Logo width={scale(130)} height={scale(130)} /> <Logo width={scale(130)} height={scale(130)} />
<View style={styles.width100}> <View style={styles.width100}>
<TextDefault <TextDefault
style={alignment.MBmedium} style={alignment.MBmedium}
textColor={colors.placeHolderColor}> textColor={colors.placeHolderColor}
{i18n.t('EnteryourEmailandPassword')} >
{t("EnteryourEmailandPassword")}
</TextDefault> </TextDefault>
<FilledTextField <FilledTextField
defaultValue={'rider'} defaultValue={"rider"}
error={usernameError} error={usernameError}
keyboardType={'email-address'} keyboardType={"email-address"}
label={i18n.t('EmailorPhone')} label={t("EmailorPhone")}
labelFontSize={scale(12)} labelFontSize={scale(12)}
fontSize={scale(12)} fontSize={scale(12)}
activeLineWidth={0} activeLineWidth={0}
@ -120,15 +123,15 @@ export default function Login() {
tintColor={colors.tagColor} tintColor={colors.tagColor}
labelTextStyle={styles.labelStyle} labelTextStyle={styles.labelStyle}
inputContainerStyle={styles.textContainer} inputContainerStyle={styles.textContainer}
onChangeText={text => { onChangeText={(text) => {
setUsername(text.toLowerCase().trim()) setUsername(text.toLowerCase().trim());
}} }}
/> />
<View style={styles.mt15} /> <View style={styles.mt15} />
<FilledTextField <FilledTextField
defaultValue={'123123'} defaultValue={"123123"}
error={passwordError} error={passwordError}
label={i18n.t('Password')} label={t("Password")}
secureTextEntry secureTextEntry
labelFontSize={scale(12)} labelFontSize={scale(12)}
fontSize={scale(12)} fontSize={scale(12)}
@ -141,8 +144,8 @@ export default function Login() {
tintColor={colors.tagColor} tintColor={colors.tagColor}
labelTextStyle={styles.labelStyle} labelTextStyle={styles.labelStyle}
inputContainerStyle={styles.textContainer} inputContainerStyle={styles.textContainer}
onChangeText={text => { onChangeText={(text) => {
setPassword(text.trim()) setPassword(text.trim());
}} }}
/> />
<View style={[styles.lower_form]}> <View style={[styles.lower_form]}>
@ -151,30 +154,31 @@ export default function Login() {
<TouchableOpacity <TouchableOpacity
onPress={async () => { onPress={async () => {
if (validateForm()) { if (validateForm()) {
let notificationToken = null let notificationToken = null;
if (Constants.isDevice) { if (Constants.isDevice) {
const { const {
status: existingStatus status: existingStatus,
} = await Notifications.getPermissionsAsync() } = await Notifications.getPermissionsAsync();
if (existingStatus === 'granted') { if (existingStatus === "granted") {
notificationToken = ( notificationToken = (
await Notifications.getExpoPushTokenAsync() await Notifications.getExpoPushTokenAsync()
).data ).data;
} }
} }
mutate({ mutate({
variables: { variables: {
username: username.toLowerCase(), username: username.toLowerCase(),
password: password, password: password,
notificationToken notificationToken,
} },
}) });
} }
}} }}
activeOpacity={0.5} activeOpacity={0.5}
style={[styles.RContainer]}> style={[styles.RContainer]}
>
<TextDefault textColor={colors.fontMainColor} H5 bold> <TextDefault textColor={colors.fontMainColor} H5 bold>
{i18n.t('loginBtn')} {t("loginBtn")}
</TextDefault> </TextDefault>
</TouchableOpacity> </TouchableOpacity>
)} )}
@ -184,5 +188,5 @@ export default function Login() {
</ScrollView> </ScrollView>
</KeyboardAvoidingView> </KeyboardAvoidingView>
</WrapperView> </WrapperView>
) );
} }

7
RiderApp/src/screens/NewOrders/NewOrders.js
View File

@ -6,9 +6,10 @@ import UserContext from '../../context/user'
import styles from './style' import styles from './style'
import { TextError, Spinner } from '../../components' import { TextError, Spinner } from '../../components'
import { useNavigation } from '@react-navigation/native' import { useNavigation } from '@react-navigation/native'
import i18n from '../../../i18n' import { useTranslation } from "react-i18next";
export default function Orders() { export default function Orders() {
const { t } = useTranslation();
const navigation = useNavigation() const navigation = useNavigation()
const configuration = useContext(ConfigurationContext) const configuration = useContext(ConfigurationContext)
const { const {
@ -20,11 +21,11 @@ export default function Orders() {
} = useContext(UserContext) } = useContext(UserContext)
function emptyView() { function emptyView() {
return <TextError text={i18n.t('NoNewOrder')} /> return <TextError text={t('NoNewOrder')} />
} }
if (loadingUnAssigned) return <Spinner /> if (loadingUnAssigned) return <Spinner />
if (errorUnAssigned) return <TextError text={i18n.t('Somethingisworng')} /> if (errorUnAssigned) return <TextError text={t('Somethingisworng')} />
return ( return (
<View style={styles.flex}> <View style={styles.flex}>

39
RiderApp/src/screens/OrderDetail/OrderDetail.js
View File

@ -20,7 +20,7 @@ import colors from "../../utilities/colors";
import { linkToMapsApp } from "../../utilities/links"; import { linkToMapsApp } from "../../utilities/links";
import { scale } from "../../utilities/scaling"; import { scale } from "../../utilities/scaling";
import styles from "./styles"; import styles from "./styles";
import i18n from "../../../i18n"; import { useTranslation } from "react-i18next";
const CONFIGURATION = gql` const CONFIGURATION = gql`
${configuration} ${configuration}
@ -38,6 +38,7 @@ const LATITUDE_DELTA = 0.0022;
const LONGITUDE_DELTA = 0.0021; const LONGITUDE_DELTA = 0.0021;
function OrderDetail() { function OrderDetail() {
const { t } = useTranslation();
const navigation = useNavigation(); const navigation = useNavigation();
const route = useRoute(); const route = useRoute();
const { const {
@ -71,13 +72,15 @@ function OrderDetail() {
useLayoutEffect(() => { useLayoutEffect(() => {
if (!selectedOrder) return; if (!selectedOrder) return;
navigation.setOptions({ navigation.setOptions({
title: `${i18n.t('Order')} ${selectedOrder.order_id}`, title: `${t("Order")} ${selectedOrder.order_id}`,
}); });
}, [selectedOrder]); }, [selectedOrder]);
async function onCompleted({ updateOrderStatusRider, assignOrder }) { async function onCompleted({ updateOrderStatusRider, assignOrder }) {
if (updateOrderStatusRider) { if (updateOrderStatusRider) {
FlashMessage({ FlashMessage({
message: `${i18n.t('OrderMarkedAs')} ${i18n.t(updateOrderStatusRider.order_status)}`, message: `${t("OrderMarkedAs")} ${t(
updateOrderStatusRider.order_status
)}`,
}); });
if (updateOrderStatusRider.order_status === "DELIVERED") { if (updateOrderStatusRider.order_status === "DELIVERED") {
navigation.goBack(); navigation.goBack();
@ -173,18 +176,16 @@ function OrderDetail() {
} }
if (loadingAssigned || loadingUnAssigned) { if (loadingAssigned || loadingUnAssigned) {
return <TextError text={i18n.t('Loadingorders')} />; return <TextError text={t("Loadingorders")} />;
} }
if (loadingConfig) { if (loadingConfig) {
return <Spinner />; return <Spinner />;
} }
if (errorConfig) { if (errorConfig) {
return <TextError text={i18n.t('Somethingisworng')} />; return <TextError text={t("Somethingisworng")} />;
} }
if (!selectedOrder) { if (!selectedOrder) {
return ( return <TextError text={t("Orderassginedtootherrider")} />;
<TextError text={i18n.t('Orderassginedtootherrider')} />
);
} }
return ( return (
@ -203,7 +204,7 @@ function OrderDetail() {
textColor={colors.tagColor} textColor={colors.tagColor}
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }} style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
> >
{i18n.t('CustomerDetails')} {t("CustomerDetails")}
</TextDefault> </TextDefault>
</View> </View>
<View style={styles.customerContent}> <View style={styles.customerContent}>
@ -215,7 +216,7 @@ function OrderDetail() {
textColor={colors.placeHolderColor} textColor={colors.placeHolderColor}
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }} style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
> >
{i18n.t('name')} {t("name")}
</TextDefault> </TextDefault>
<TextDefault bolder style={{ ...alignment.PBxSmall }}> <TextDefault bolder style={{ ...alignment.PBxSmall }}>
{selectedOrder.user.name} {selectedOrder.user.name}
@ -229,7 +230,7 @@ function OrderDetail() {
textColor={colors.placeHolderColor} textColor={colors.placeHolderColor}
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }} style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
> >
{i18n.t('Contact')} {t("Contact")}
</TextDefault> </TextDefault>
<TextDefault bolder style={{ ...alignment.PBxSmall }}> <TextDefault bolder style={{ ...alignment.PBxSmall }}>
{selectedOrder.user.phone} {selectedOrder.user.phone}
@ -243,7 +244,7 @@ function OrderDetail() {
textColor={colors.placeHolderColor} textColor={colors.placeHolderColor}
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }} style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
> >
{i18n.t('DelvieryLocation')} {t("DelvieryLocation")}
</TextDefault> </TextDefault>
<TextDefault <TextDefault
numberOfLines={2} numberOfLines={2}
@ -267,7 +268,7 @@ function OrderDetail() {
textColor={colors.tagColor} textColor={colors.tagColor}
style={{ ...alignment.PTmedium }} style={{ ...alignment.PTmedium }}
> >
{i18n.t('OrderDetails')} {t("OrderDetails")}
</TextDefault> </TextDefault>
</View> </View>
<View style={styles.orderSpacer} /> <View style={styles.orderSpacer} />
@ -285,7 +286,7 @@ function OrderDetail() {
bolder bolder
style={{ ...alignment.PTmedium, ...alignment.PLmedium }} style={{ ...alignment.PTmedium, ...alignment.PLmedium }}
> >
{i18n.t('Subtotal')} {t("Subtotal")}
</TextDefault> </TextDefault>
</View> </View>
<View style={styles.orderTextRight}> <View style={styles.orderTextRight}>
@ -312,7 +313,7 @@ function OrderDetail() {
bolder bolder
style={{ ...alignment.PLmedium }} style={{ ...alignment.PLmedium }}
> >
{i18n.t('delvieryCharges')} {t("delvieryCharges")}
</TextDefault> </TextDefault>
</View> </View>
<View style={styles.orderTextRight}> <View style={styles.orderTextRight}>
@ -332,7 +333,7 @@ function OrderDetail() {
<View style={styles.orderSubRow}> <View style={styles.orderSubRow}>
<View style={styles.orderTextLeft}> <View style={styles.orderTextLeft}>
<TextDefault H4 bolder> <TextDefault H4 bolder>
{i18n.t('total')} {t("total")}
</TextDefault> </TextDefault>
</View> </View>
<View style={styles.orderTextRight}> <View style={styles.orderTextRight}>
@ -424,7 +425,7 @@ function OrderDetail() {
bold bold
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }} style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
> >
{i18n.t('Assigntome')} {t("Assigntome")}
</TextDefault> </TextDefault>
)} )}
</TouchableOpacity> </TouchableOpacity>
@ -450,7 +451,7 @@ function OrderDetail() {
bold bold
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }} style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
> >
{i18n.t('Picked')} {t("Picked")}
</TextDefault> </TextDefault>
</TouchableOpacity> </TouchableOpacity>
)} )}
@ -469,7 +470,7 @@ function OrderDetail() {
bold bold
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }} style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
> >
{i18n.t('Delivered')} {t("Delivered")}
</TextDefault> </TextDefault>
</TouchableOpacity> </TouchableOpacity>
)} )}

219
RiderApp/src/screens/OrderDetail/styles.js
View File

@ -1,197 +1,198 @@
import { Dimensions, StyleSheet } from 'react-native' import { Dimensions, StyleSheet } from "react-native";
import { alignment } from '../../utilities/alignment' import { alignment } from "../../utilities/alignment";
import colors from '../../utilities/colors' import colors from "../../utilities/colors";
import { scale, verticalScale } from '../../utilities/scaling' import { scale, verticalScale } from "../../utilities/scaling";
const { height } = Dimensions.get('window') const { height } = Dimensions.get("window");
export default { export default {
flex: { flex: {
flex: 1, flex: 1,
backgroundColor: colors.themeBackground backgroundColor: colors.themeBackground,
}, },
line: { line: {
width: '80%', width: "80%",
height: StyleSheet.hairlineWidth, height: StyleSheet.hairlineWidth,
backgroundColor: colors.horizontalLine, backgroundColor: colors.horizontalLine,
alignSelf: 'center', alignSelf: "center",
...alignment.MTmedium, ...alignment.MTmedium,
...alignment.MBmedium ...alignment.MBmedium,
}, },
customerCard: { customerCard: {
width: '100%', width: "100%",
height: height * 0.4, height: height * 0.4,
justifyContent: 'center', justifyContent: "center",
alignItems: 'center' alignItems: "center",
}, },
customerSubCard: { customerSubCard: {
width: '85%', width: "85%",
height: '90%', height: "90%",
borderWidth: 2, borderWidth: 2,
borderStyle: 'dashed', borderStyle: "dashed",
backgroundColor: '#F3FAFE', backgroundColor: "#F3FAFE",
borderRadius: scale(10), borderRadius: scale(10),
borderColor: colors.horizontalLine borderColor: colors.horizontalLine,
}, },
customerHeader: { customerHeader: {
width: '100%', width: "100%",
height: '30%', height: "30%",
justifyContent: 'center', justifyContent: "center",
alignItems: 'center' alignItems: "center",
}, },
customerContent: { customerContent: {
flex: 1, flex: 1,
justifyContent: 'flex-start' justifyContent: "flex-start",
}, },
customerSubContent: { customerSubContent: {
width: '80%', width: "80%",
height: '95%', height: "95%",
justifyContent: 'space-around' justifyContent: "space-around",
}, },
customerContentRow: { customerContentRow: {
width: '100%', width: "100%",
height: '50%', height: "50%",
flexDirection: 'row', flexDirection: "row",
paddingLeft: '8%' paddingLeft: "8%",
}, },
customerImgContainer: { customerImgContainer: {
width: '20%', width: "20%",
height: '100%', height: "100%",
justifyContent: 'center', justifyContent: "center",
alignItems: 'center' alignItems: "center",
}, },
customerTextContainer: { customerTextContainer: {
flex: 1, flex: 1,
justifyContent: 'center' justifyContent: "center",
}, },
customerAddContainer: { customerAddContainer: {
justifyContent: 'center', flex: 1,
width: '90%' justifyContent: "center",
width: "90%",
}, },
orderContainer: { orderContainer: {
width: '100%', width: "100%",
flexGrow: 1, flexGrow: 1,
justifyContent: 'center', justifyContent: "center",
alignItems: 'center', alignItems: "center",
...alignment.PTxSmall, ...alignment.PTxSmall,
...alignment.PBxSmall ...alignment.PBxSmall,
}, },
orderSubContainer: { orderSubContainer: {
width: '85%', width: "85%",
minHeight: height * 0.3, minHeight: height * 0.3,
borderWidth: 2, borderWidth: 2,
borderStyle: 'dashed', borderStyle: "dashed",
borderRadius: scale(20), borderRadius: scale(20),
backgroundColor: '#F3FAFE', backgroundColor: "#F3FAFE",
borderColor: colors.horizontalLine borderColor: colors.horizontalLine,
}, },
orderHeader: { orderHeader: {
width: '100%', width: "100%",
height: height * 0.08, height: height * 0.08,
justifyContent: 'center', justifyContent: "center",
alignItems: 'center' alignItems: "center",
}, },
orderContent: { orderContent: {
width: '100%', width: "100%",
alignItems: 'center' alignItems: "center",
}, },
orderSubContent: { orderSubContent: {
width: '90%', width: "90%",
flexDirection: 'row' flexDirection: "row",
}, },
orderTextLeftContainer: { orderTextLeftContainer: {
width: '10%', width: "10%",
justifyContent: 'center', justifyContent: "center",
alignItems: 'center' alignItems: "center",
}, },
orderTextCenterContainer: { orderTextCenterContainer: {
width: '65%', width: "65%",
justifyContent: 'center', justifyContent: "center",
alignItems: 'flex-start' alignItems: "flex-start",
}, },
orderTextRightContainer: { orderTextRightContainer: {
width: '25%', width: "25%",
justifyContent: 'center', justifyContent: "center",
alignItems: 'flex-end' alignItems: "flex-end",
}, },
orderSpacer: { orderSpacer: {
width: '100%', width: "100%",
height: height * 0.02 height: height * 0.02,
}, },
orderRow: { orderRow: {
width: '100%', width: "100%",
height: height * 0.05, height: height * 0.05,
alignItems: 'center' alignItems: "center",
}, },
orderRow2: { orderRow2: {
width: '100%', width: "100%",
height: height * 0.07, height: height * 0.07,
alignItems: 'center', alignItems: "center",
...alignment.PBlarge ...alignment.PBlarge,
}, },
orderSubRow: { orderSubRow: {
width: '90%', width: "90%",
height: '100%', height: "100%",
flexDirection: 'row' flexDirection: "row",
}, },
orderTextLeft: { orderTextLeft: {
width: '50%', width: "50%",
height: '100%', height: "100%",
paddingLeft: '5%', paddingLeft: "5%",
justifyContent: 'center', justifyContent: "center",
alignItems: 'flex-start' alignItems: "flex-start",
}, },
orderTextRight: { orderTextRight: {
width: '50%', width: "50%",
height: '100%', height: "100%",
alignItems: 'flex-end', alignItems: "flex-end",
justifyContent: 'center' justifyContent: "center",
}, },
actionContainer: { actionContainer: {
width: '100%', width: "100%",
height: height * 0.1, height: height * 0.1,
justifyContent: 'center', justifyContent: "center",
alignItems: 'center', alignItems: "center",
...alignment.MTmedium, ...alignment.MTmedium,
...alignment.MBlarge ...alignment.MBlarge,
}, },
actionSubContainer: { actionSubContainer: {
width: '90%', width: "90%",
height: '80%', height: "80%",
flexDirection: 'row', flexDirection: "row",
justifyContent: 'space-around', justifyContent: "space-around",
alignItems: 'center', alignItems: "center",
borderRadius: scale(10), borderRadius: scale(10),
...alignment.MBlarge ...alignment.MBlarge,
}, },
cancelBtnStyle: { cancelBtnStyle: {
width: '80%', width: "80%",
height: '70%', height: "70%",
justifyContent: 'center', justifyContent: "center",
alignItems: 'center', alignItems: "center",
borderRadius: scale(10) borderRadius: scale(10),
}, },
acceptBtnStyle: { acceptBtnStyle: {
backgroundColor: colors.tagColor, backgroundColor: colors.tagColor,
width: '80%', width: "80%",
height: '70%', height: "70%",
justifyContent: 'center', justifyContent: "center",
alignItems: 'center', alignItems: "center",
borderRadius: scale(10) borderRadius: scale(10),
}, },
removeBtnStyle: { removeBtnStyle: {
backgroundColor: colors.tagColor, backgroundColor: colors.tagColor,
width: '45%', width: "45%",
height: '70%', height: "70%",
justifyContent: 'center', justifyContent: "center",
alignItems: 'center' alignItems: "center",
}, },
baseSpacer: { baseSpacer: {
marginTop: verticalScale(15) marginTop: verticalScale(15),
}, },
mapContainer: { mapContainer: {
width: '85%', width: "85%",
alignSelf: 'center', alignSelf: "center",
height: verticalScale(200) height: verticalScale(200),
} },
} };

55
RiderApp/src/screens/Orders/Orders.js
View File

@ -1,33 +1,34 @@
import React, { useEffect, useState, useLayoutEffect } from 'react' import React, { useEffect, useState, useLayoutEffect } from "react";
import { useNavigation } from '@react-navigation/native' import { useNavigation } from "@react-navigation/native";
import { import {
ImageBackground, ImageBackground,
StatusBar, StatusBar,
TouchableOpacity, TouchableOpacity,
View View,
} from 'react-native' } from "react-native";
import i18n from '../../../i18n' import { useTranslation } from "react-i18next";
import { AssignedOrders, NewOrders, TextDefault } from '../../components' import { AssignedOrders, NewOrders, TextDefault } from "../../components";
import colors from '../../utilities/colors' import colors from "../../utilities/colors";
import useStyle from './style' import useStyle from "./style";
const BACKGROUND_IMAGE = require('../../../assets/images/ui/BG.png') const BACKGROUND_IMAGE = require("../../../assets/images/ui/BG.png");
export default function Orders() { export default function Orders() {
const styles = useStyle() const { t } = useTranslation();
const [isNewOrderSelected, setIsNewOrderSelected] = useState(false) const styles = useStyle();
const navigation = useNavigation() const [isNewOrderSelected, setIsNewOrderSelected] = useState(false);
const navigation = useNavigation();
useEffect(() => { useEffect(() => {
StatusBar.setBarStyle('light-content') StatusBar.setBarStyle("light-content");
}, [isNewOrderSelected]) }, [isNewOrderSelected]);
useLayoutEffect(() => { useLayoutEffect(() => {
navigation.setOptions({ navigation.setOptions({
headerRight: null, headerRight: null,
headerTitle: i18n.t('Orders') headerTitle: t("Orders"),
}) });
}, [navigation]) }, [t, navigation]);
return ( return (
<View style={[styles.flex, styles.bottom]}> <View style={[styles.flex, styles.bottom]}>
@ -41,11 +42,12 @@ export default function Orders() {
{ {
backgroundColor: !isNewOrderSelected backgroundColor: !isNewOrderSelected
? colors.buttonBackgroundPink ? colors.buttonBackgroundPink
: 'transparent' : "transparent",
} },
]}> ]}
>
<TextDefault bold H5 numberOfLines={1}> <TextDefault bold H5 numberOfLines={1}>
{i18n.t('myOrders')} {t("myOrders")}
</TextDefault> </TextDefault>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
@ -56,16 +58,17 @@ export default function Orders() {
{ {
backgroundColor: isNewOrderSelected backgroundColor: isNewOrderSelected
? colors.buttonBackgroundPink ? colors.buttonBackgroundPink
: 'transparent' : "transparent",
} },
]}> ]}
>
<TextDefault bold H5 numberOfLines={1}> <TextDefault bold H5 numberOfLines={1}>
{i18n.t('newOrders')} {t("newOrders")}
</TextDefault> </TextDefault>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</ImageBackground> </ImageBackground>
{!isNewOrderSelected ? <AssignedOrders /> : <NewOrders />} {!isNewOrderSelected ? <AssignedOrders /> : <NewOrders />}
</View> </View>
) );
} }

94
RiderApp/src/utilities/alignment.js
View File

@ -1,135 +1,135 @@
import { scale } from './scaling' import { scale } from "./scaling";
const XSMALL = 5 const XSMALL = 5;
const SMALL = 10 const SMALL = 10;
const MEDIUM = 15 const MEDIUM = 15;
const LARGE = 20 const LARGE = 20;
export const alignment = { export const alignment = {
MxSmall: { MxSmall: {
margin: scale(XSMALL) margin: scale(XSMALL),
}, },
MBxSmall: { MBxSmall: {
marginBottom: scale(XSMALL) marginBottom: scale(XSMALL),
}, },
MTxSmall: { MTxSmall: {
marginTop: scale(XSMALL) marginTop: scale(XSMALL),
}, },
MRxSmall: { MRxSmall: {
marginRight: scale(XSMALL) marginRight: scale(XSMALL),
}, },
MLxSmall: { MLxSmall: {
marginLeft: scale(XSMALL) marginLeft: scale(XSMALL),
}, },
Msmall: { Msmall: {
margin: scale(SMALL) margin: scale(SMALL),
}, },
MBsmall: { MBsmall: {
marginBottom: scale(SMALL) marginBottom: scale(SMALL),
}, },
MTsmall: { MTsmall: {
marginTop: scale(SMALL) marginTop: scale(SMALL),
}, },
MRsmall: { MRsmall: {
marginRight: scale(SMALL) marginRight: scale(SMALL),
}, },
MLsmall: { MLsmall: {
marginLeft: scale(SMALL) marginLeft: scale(SMALL),
}, },
Mmedium: { Mmedium: {
margin: scale(MEDIUM) margin: scale(MEDIUM),
}, },
MBmedium: { MBmedium: {
marginBottom: scale(MEDIUM) marginBottom: scale(MEDIUM),
}, },
MTmedium: { MTmedium: {
marginTop: scale(MEDIUM) marginTop: scale(MEDIUM),
}, },
MRmedium: { MRmedium: {
marginRight: scale(MEDIUM) marginRight: scale(MEDIUM),
}, },
MLmedium: { MLmedium: {
marginLeft: scale(MEDIUM) marginLeft: scale(MEDIUM),
}, },
Mlarge: { Mlarge: {
margin: scale(LARGE) margin: scale(LARGE),
}, },
MBlarge: { MBlarge: {
marginBottom: scale(LARGE) marginBottom: scale(LARGE),
}, },
MTlarge: { MTlarge: {
marginTop: scale(LARGE) marginTop: scale(LARGE),
}, },
MRlarge: { MRlarge: {
marginRight: scale(LARGE) marginRight: scale(LARGE),
}, },
MLlarge: { MLlarge: {
marginLeft: scale(LARGE) marginLeft: scale(LARGE),
}, },
// Padding // Padding
PxSmall: { PxSmall: {
padding: scale(XSMALL) padding: scale(XSMALL),
}, },
PBxSmall: { PBxSmall: {
paddingBottom: scale(XSMALL) paddingBottom: scale(XSMALL),
}, },
PTxSmall: { PTxSmall: {
paddingTop: scale(XSMALL) paddingTop: scale(XSMALL),
}, },
PRxSmall: { PRxSmall: {
paddingRight: scale(XSMALL) paddingRight: scale(XSMALL),
}, },
PLxSmall: { PLxSmall: {
paddingLeft: scale(XSMALL) paddingLeft: scale(XSMALL),
}, },
Psmall: { Psmall: {
padding: scale(SMALL) padding: scale(SMALL),
}, },
PBsmall: { PBsmall: {
paddingBottom: scale(SMALL) paddingBottom: scale(SMALL),
}, },
PTsmall: { PTsmall: {
paddingTop: scale(SMALL) paddingTop: scale(SMALL),
}, },
PRsmall: { PRsmall: {
paddingRight: scale(SMALL) paddingRight: scale(SMALL),
}, },
PLsmall: { PLsmall: {
paddingLeft: scale(SMALL) paddingLeft: scale(SMALL),
}, },
Pmedium: { Pmedium: {
padding: scale(MEDIUM) padding: scale(MEDIUM),
}, },
PBmedium: { PBmedium: {
paddingBottom: scale(MEDIUM) paddingBottom: scale(MEDIUM),
}, },
PTmedium: { PTmedium: {
paddingTop: scale(MEDIUM) paddingTop: scale(MEDIUM),
}, },
PRmedium: { PRmedium: {
paddingRight: scale(MEDIUM) paddingRight: scale(MEDIUM),
}, },
PLmedium: { PLmedium: {
paddingLeft: scale(MEDIUM) paddingLeft: scale(MEDIUM),
}, },
Plarge: { Plarge: {
padding: scale(LARGE) padding: scale(LARGE),
}, },
PBlarge: { PBlarge: {
paddingBottom: scale(LARGE) paddingBottom: scale(LARGE),
}, },
PTlarge: { PTlarge: {
paddingTop: scale(LARGE) paddingTop: scale(LARGE),
}, },
PRlarge: { PRlarge: {
paddingRight: scale(LARGE) paddingRight: scale(LARGE),
}, },
PLlarge: { PLlarge: {
paddingLeft: scale(LARGE) paddingLeft: scale(LARGE),
} },
} };