map issue resolve on android
This commit is contained in:
Ninjas Code - 4
parent
481b9f1a94
commit
7caec6e3a3
|
|
@ -0,0 +1,8 @@
|
|||
> Why do I have a folder named ".expo" in my project?
|
||||
The ".expo" folder is created when an Expo project is started using "expo start" command.
|
||||
> What do the files contain?
|
||||
- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
|
||||
- "settings.json": contains the server configuration that is used to serve the application manifest.
|
||||
> Should I commit the ".expo" folder?
|
||||
No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
|
||||
Upon project creation, the ".expo" folder is already added to your ".gitignore" file.
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"devices": []
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"expoServerPort": null,
|
||||
"packagerPort": null,
|
||||
"packagerPid": null,
|
||||
"expoServerNgrokUrl": null,
|
||||
"packagerNgrokUrl": null,
|
||||
"ngrokPid": null,
|
||||
"webpackServerPort": null
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"hostType": "lan",
|
||||
"lanType": "ip",
|
||||
"dev": true,
|
||||
"minify": false,
|
||||
"urlRandomness": null,
|
||||
"https": false,
|
||||
"scheme": null,
|
||||
"devClient": false
|
||||
}
|
||||
|
|
@ -2,10 +2,9 @@
|
|||
"expo": {
|
||||
"name": "Enatega Rider",
|
||||
"description": "Enatega is a starter kit food ordering app built in React Native using Expo for IOS and Android. It's made keeping good aesthetics in mind as well keeping the best coding practices in mind. Its fully customisable to easily help you in your next food delivery project. https://market.nativebase.io/view/react-native-food-delivery-backend-app",
|
||||
"version": "4.2.3",
|
||||
"version": "4.2.4",
|
||||
"slug": "food-delivery-rider",
|
||||
"privacy": "public",
|
||||
|
||||
"androidStatusBar": {
|
||||
"backgroundColor": "#000"
|
||||
},
|
||||
|
|
@ -21,7 +20,8 @@
|
|||
"backgroundColor": "#ffffff"
|
||||
},
|
||||
"updates": {
|
||||
"fallbackToCacheTimeout": 0
|
||||
"fallbackToCacheTimeout": 0,
|
||||
"url": "https://u.expo.dev/e3fb49ee-7c4f-4e4a-91fe-8f4f93662dde"
|
||||
},
|
||||
"assetBundlePatterns": [
|
||||
"**/*"
|
||||
|
|
@ -37,7 +37,6 @@
|
|||
"bitcode": false,
|
||||
"supportsTablet": true,
|
||||
"bundleIdentifier": "com.enatega.driver",
|
||||
|
||||
"config": {
|
||||
"googleMapsApiKey": ""
|
||||
},
|
||||
|
|
@ -52,7 +51,7 @@
|
|||
}
|
||||
},
|
||||
"android": {
|
||||
"versionCode": 13,
|
||||
"versionCode": 14,
|
||||
"googleServicesFile": "./google-services.json",
|
||||
"permissions": [
|
||||
"ACCESS_COARSE_LOCATION",
|
||||
|
|
@ -60,7 +59,7 @@
|
|||
],
|
||||
"config": {
|
||||
"googleMaps": {
|
||||
"apiKey": ""
|
||||
"apiKey": "AIzaSyCzNP5qQql2a5y8lOoO-1yj1lj_tzjVImA"
|
||||
}
|
||||
},
|
||||
"package": "com.enatega.rider"
|
||||
|
|
@ -69,6 +68,9 @@
|
|||
"eas": {
|
||||
"projectId": "e3fb49ee-7c4f-4e4a-91fe-8f4f93662dde"
|
||||
}
|
||||
},
|
||||
"runtimeVersion": {
|
||||
"policy": "sdkVersion"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,6 @@
|
|||
"development": {
|
||||
"developmentClient": true,
|
||||
"distribution": "internal",
|
||||
"android": {
|
||||
"buildType": "apk"
|
||||
},
|
||||
"ios": {
|
||||
"resourceClass": "m-medium"
|
||||
}
|
||||
|
|
@ -20,10 +17,8 @@
|
|||
}
|
||||
},
|
||||
"production": {
|
||||
"developmentClient": false,
|
||||
"releaseChannel": "production",
|
||||
"android": {
|
||||
"buildType": "apk"
|
||||
"ios": {
|
||||
"resourceClass": "m-medium"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
* environment.js
|
||||
* path: '/environment.js' (root of your project)
|
||||
******************************/
|
||||
|
||||
import Constants from "expo-constants";
|
||||
|
||||
const ENV = {
|
||||
|
|
@ -22,7 +21,7 @@ const ENV = {
|
|||
},
|
||||
};
|
||||
|
||||
const getEnvVars = (env = Constants.manifest.releaseChannel) => {
|
||||
const getEnvVars = (env = Constants.manifest) => {
|
||||
// What is __DEV__ ?
|
||||
// This variable is set to true when react-native is running in Dev mode.
|
||||
// __DEV__ is true when run locally, but false when published.
|
||||
|
|
|
|||
|
|
@ -31,8 +31,10 @@
|
|||
"expo-font": "~11.0.1",
|
||||
"expo-localization": "~14.0.0",
|
||||
"expo-location": "~15.0.1",
|
||||
"expo-navigation-bar": "~2.0.1",
|
||||
"expo-notifications": "~0.17.0",
|
||||
"expo-splash-screen": "~0.17.5",
|
||||
"expo-system-ui": "~2.0.1",
|
||||
"expo-task-manager": "~11.0.1",
|
||||
"expo-updates": "~0.15.6",
|
||||
"graphql": "^14.3.1",
|
||||
|
|
@ -3350,9 +3352,9 @@
|
|||
"integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw=="
|
||||
},
|
||||
"node_modules/@graphql-typed-document-node/core": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.1.2.tgz",
|
||||
"integrity": "sha512-9anpBMM9mEgZN4wr2v8wHJI2/u5TnnggewRN6OlvXTTnuVyoY19X6rOv9XTqKRw6dcGKwZsBi8n0kDE2I5i4VA==",
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz",
|
||||
"integrity": "sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==",
|
||||
"peerDependencies": {
|
||||
"graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
|
||||
}
|
||||
|
|
@ -3423,9 +3425,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@jest/create-cache-key-function/node_modules/@types/yargs": {
|
||||
"version": "17.0.22",
|
||||
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.22.tgz",
|
||||
"integrity": "sha512-pet5WJ9U8yPVRhkwuEIp5ktAeAqRZOq4UdAyWLWzxbtpyXnzbtLdKiXAjJzi/KLmPGS9wk86lUFWZFN6sISo4g==",
|
||||
"version": "17.0.23",
|
||||
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.23.tgz",
|
||||
"integrity": "sha512-yuogunc04OnzGQCrfHx+Kk883Q4X0aSwmYZhKjI21m+SVYzjIbrWl8dOOwSv5hf2Um2pdCOXWo9isteZTNXUZQ==",
|
||||
"dependencies": {
|
||||
"@types/yargs-parser": "*"
|
||||
}
|
||||
|
|
@ -4917,9 +4919,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "18.15.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.3.tgz",
|
||||
"integrity": "sha512-p6ua9zBxz5otCmbpb5D3U4B5Nanw6Pk3PPyX05xnxbB/fRv71N7CPmORg7uAD5P70T0xmx1pzAx/FUfa5X+3cw=="
|
||||
"version": "18.15.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.6.tgz",
|
||||
"integrity": "sha512-YErOafCZpK4g+Rp3Q/PBgZNAsWKGunQTm9FA3/Pbcm0VCriTEzcrutQ/SxSc0rytAp0NoFWue669jmKhEtd0sA=="
|
||||
},
|
||||
"node_modules/@types/parse-json": {
|
||||
"version": "4.0.0",
|
||||
|
|
@ -4943,9 +4945,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@types/scheduler": {
|
||||
"version": "0.16.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
|
||||
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
|
||||
"version": "0.16.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
|
||||
"integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
|
||||
},
|
||||
"node_modules/@types/yargs": {
|
||||
"version": "15.0.15",
|
||||
|
|
@ -6201,9 +6203,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001467",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001467.tgz",
|
||||
"integrity": "sha512-cEdN/5e+RPikvl9AHm4uuLXxeCNq8rFsQ+lPHTfe/OtypP3WwnVVbjn+6uBV7PaFL6xUFzTh+sSCOz1rKhcO+Q==",
|
||||
"version": "1.0.30001469",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001469.tgz",
|
||||
"integrity": "sha512-Rcp7221ScNqQPP3W+lVOYDyjdR6dC+neEQCttoNr5bAyz54AboB4iwpnWgyi8P4YUsPybVzT4LgWiBbI3drL4g==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
|
|
@ -7103,9 +7105,9 @@
|
|||
"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.4.333",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.333.tgz",
|
||||
"integrity": "sha512-YyE8+GKyGtPEP1/kpvqsdhD6rA/TP1DUFDN4uiU/YI52NzDxmwHkEb3qjId8hLBa5siJvG0sfC3O66501jMruQ=="
|
||||
"version": "1.4.339",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.339.tgz",
|
||||
"integrity": "sha512-MSXHBJGcbBydq/DQDlpBeUKnJ6C7aTiNCTRpfDV5Iz0sNr/Ng6RJFloq82AAicp/SrmDq4zF6XsKG0B8Xwn1UQ=="
|
||||
},
|
||||
"node_modules/emoji-regex": {
|
||||
"version": "8.0.0",
|
||||
|
|
@ -8389,6 +8391,18 @@
|
|||
"invariant": "^2.2.4"
|
||||
}
|
||||
},
|
||||
"node_modules/expo-navigation-bar": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/expo-navigation-bar/-/expo-navigation-bar-2.0.1.tgz",
|
||||
"integrity": "sha512-lR+77eOJ4unrDVtrOHRK95c2QGsbRlYt2PmAST9Y+AFEiqVsYWg2JZTp2f2XZxe/10i8jqgSHBMRm7I7w2DcBA==",
|
||||
"dependencies": {
|
||||
"@react-native/normalize-color": "^2.0.0",
|
||||
"debug": "^4.3.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"expo": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/expo-notifications": {
|
||||
"version": "0.17.0",
|
||||
"resolved": "https://registry.npmjs.org/expo-notifications/-/expo-notifications-0.17.0.tgz",
|
||||
|
|
@ -8458,6 +8472,18 @@
|
|||
"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-system-ui": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/expo-system-ui/-/expo-system-ui-2.0.1.tgz",
|
||||
"integrity": "sha512-lspSKU71G2+6y3kI/p/sZUFSBvzd5HdnKuSX0J6b4yqOEAhMIA4JtmkU/0as1FY1Fnz+48fLs2ZL9gzbr7+njA==",
|
||||
"dependencies": {
|
||||
"@react-native/normalize-color": "^2.0.0",
|
||||
"debug": "^4.3.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"expo": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/expo-task-manager": {
|
||||
"version": "11.0.1",
|
||||
"resolved": "https://registry.npmjs.org/expo-task-manager/-/expo-task-manager-11.0.1.tgz",
|
||||
|
|
@ -10655,9 +10681,9 @@
|
|||
"integrity": "sha512-dZ6Ra7u1G8c4Letq/B5EzAxj4tLFHL+cGtdpR+PVm4yzPDj+lCk+AbivWt1eOM+ikzkowtyV7qSqX6qr3t71Ww=="
|
||||
},
|
||||
"node_modules/joi": {
|
||||
"version": "17.8.4",
|
||||
"resolved": "https://registry.npmjs.org/joi/-/joi-17.8.4.tgz",
|
||||
"integrity": "sha512-jjdRHb5WtL+KgSHvOULQEPPv4kcl+ixd1ybOFQq3rWLgEEqc03QMmilodL0GVJE14U/SQDXkUhQUSZANGDH/AA==",
|
||||
"version": "17.9.1",
|
||||
"resolved": "https://registry.npmjs.org/joi/-/joi-17.9.1.tgz",
|
||||
"integrity": "sha512-FariIi9j6QODKATGBrEX7HZcja8Bsh3rfdGYy/Sb65sGlZWK/QWesU1ghk7aJWDj95knjXlQfSmzFSPPkLVsfw==",
|
||||
"dependencies": {
|
||||
"@hapi/hoek": "^9.0.0",
|
||||
"@hapi/topo": "^5.0.0",
|
||||
|
|
@ -15618,9 +15644,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/sucrase": {
|
||||
"version": "3.29.0",
|
||||
"resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.29.0.tgz",
|
||||
"integrity": "sha512-bZPAuGA5SdFHuzqIhTAqt9fvNEo9rESqXIG3oiKdF8K4UmkQxC4KlNL3lVyAErXp+mPvUqZ5l13qx6TrDIGf3A==",
|
||||
"version": "3.30.0",
|
||||
"resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.30.0.tgz",
|
||||
"integrity": "sha512-7d37d3vLF0IeH2dzvHpzDNDxUqpbDHJXTJOAnQ8jvMW04o2Czps6mxtaSnKWpE+hUS/eczqfWPUgQTrazKZPnQ==",
|
||||
"dependencies": {
|
||||
"commander": "^4.0.0",
|
||||
"glob": "7.1.6",
|
||||
|
|
|
|||
|
|
@ -69,7 +69,9 @@
|
|||
"react-native-screens": "~3.18.0",
|
||||
"react-native-svg": "13.4.0",
|
||||
"react-native-webview": "11.23.1",
|
||||
"subscriptions-transport-ws": "^0.9.16"
|
||||
"subscriptions-transport-ws": "^0.9.16",
|
||||
"expo-system-ui": "~2.0.1",
|
||||
"expo-navigation-bar": "~2.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-preset-expo": "~9.2.1",
|
||||
|
|
|
|||
|
|
@ -1,84 +1,84 @@
|
|||
import AsyncStorage from '@react-native-async-storage/async-storage'
|
||||
import { ApolloClient } from 'apollo-client'
|
||||
import { ApolloLink, split, concat, Observable } from 'apollo-link'
|
||||
import { createHttpLink } from 'apollo-link-http'
|
||||
import { WebSocketLink } from 'apollo-link-ws'
|
||||
import { getMainDefinition } from 'apollo-utilities'
|
||||
import { InMemoryCache } from 'apollo-cache-inmemory'
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
import { ApolloClient } from "apollo-client";
|
||||
import { ApolloLink, split, concat, Observable } from "apollo-link";
|
||||
import { createHttpLink } from "apollo-link-http";
|
||||
import { WebSocketLink } from "apollo-link-ws";
|
||||
import { getMainDefinition } from "apollo-utilities";
|
||||
import { InMemoryCache } from "apollo-cache-inmemory";
|
||||
// import { withClientState } from 'apollo-link-state'
|
||||
|
||||
import getEnvVars from '../../environment'
|
||||
const { GRAPHQL_URL, WS_GRAPHQL_URL } = getEnvVars()
|
||||
import getEnvVars from "../../environment";
|
||||
const { GRAPHQL_URL, WS_GRAPHQL_URL } = getEnvVars();
|
||||
|
||||
export let clientRef = null
|
||||
export let clientRef = null;
|
||||
|
||||
function setupApolloClient() {
|
||||
const cache = new InMemoryCache()
|
||||
const cache = new InMemoryCache();
|
||||
|
||||
const httpLink = createHttpLink({
|
||||
uri: GRAPHQL_URL
|
||||
})
|
||||
uri: GRAPHQL_URL,
|
||||
});
|
||||
const wsLink = new WebSocketLink({
|
||||
uri: WS_GRAPHQL_URL,
|
||||
options: {
|
||||
reconnect: true
|
||||
}
|
||||
})
|
||||
reconnect: true,
|
||||
},
|
||||
});
|
||||
|
||||
// const stateLink = withClientState({
|
||||
// cache
|
||||
// })
|
||||
|
||||
const request = async operation => {
|
||||
const token = await AsyncStorage.getItem('rider-token')
|
||||
const request = async (operation) => {
|
||||
const token = await AsyncStorage.getItem("rider-token");
|
||||
|
||||
operation.setContext({
|
||||
// get the authentication token from local storage if it exists
|
||||
// return the headers to the context so httpLink can read them
|
||||
headers: {
|
||||
authorization: token ? `Bearer ${token}` : ''
|
||||
}
|
||||
})
|
||||
}
|
||||
authorization: token ? `Bearer ${token}` : "",
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const requestLink = new ApolloLink(
|
||||
(operation, forward) =>
|
||||
new Observable(observer => {
|
||||
new Observable((observer) => {
|
||||
// console.log(observer)
|
||||
let handle
|
||||
let handle;
|
||||
Promise.resolve(operation)
|
||||
.then(oper => request(oper))
|
||||
.then((oper) => request(oper))
|
||||
.then(() => {
|
||||
handle = forward(operation).subscribe({
|
||||
next: observer.next.bind(observer),
|
||||
error: observer.error.bind(observer),
|
||||
complete: observer.complete.bind(observer)
|
||||
complete: observer.complete.bind(observer),
|
||||
});
|
||||
})
|
||||
})
|
||||
.catch(observer.error.bind(observer))
|
||||
.catch(observer.error.bind(observer));
|
||||
|
||||
return () => {
|
||||
if (handle) handle.unsubscribe()
|
||||
}
|
||||
if (handle) handle.unsubscribe();
|
||||
};
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
const terminatingLink = split(
|
||||
({ query }) => {
|
||||
const { kind, operation } = getMainDefinition(query)
|
||||
return kind === 'OperationDefinition' && operation === 'subscription'
|
||||
const { kind, operation } = getMainDefinition(query);
|
||||
return kind === "OperationDefinition" && operation === "subscription";
|
||||
},
|
||||
wsLink
|
||||
// httpLink,
|
||||
)
|
||||
);
|
||||
|
||||
const client = new ApolloClient({
|
||||
// link: ApolloLink.from([stateLink, authLink.concat(httpLink)]),
|
||||
link: concat(ApolloLink.from([terminatingLink, requestLink]), httpLink),
|
||||
cache,
|
||||
resolvers: {}
|
||||
})
|
||||
clientRef = client
|
||||
return client
|
||||
resolvers: {},
|
||||
});
|
||||
clientRef = client;
|
||||
return client;
|
||||
}
|
||||
export default setupApolloClient
|
||||
export default setupApolloClient;
|
||||
|
|
|
|||
|
|
@ -1,86 +1,86 @@
|
|||
import { useMutation, useQuery } from '@apollo/react-hooks'
|
||||
import { useNavigation, useRoute } from '@react-navigation/native'
|
||||
import gql from 'graphql-tag'
|
||||
import React, { useContext, useLayoutEffect } from 'react'
|
||||
import { useMutation, useQuery } from "@apollo/react-hooks";
|
||||
import { useNavigation, useRoute } from "@react-navigation/native";
|
||||
import gql from "graphql-tag";
|
||||
import React, { useContext, useLayoutEffect } from "react";
|
||||
import {
|
||||
Image,
|
||||
Linking,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
View
|
||||
} from 'react-native'
|
||||
import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps'
|
||||
import { assignOrder, updateOrderStatusRider } from '../../apollo/mutations'
|
||||
import { assignedOrders, configuration } from '../../apollo/queries'
|
||||
import { MainWrapper, Spinner, TextDefault, TextError } from '../../components'
|
||||
import { FlashMessage } from '../../components//FlashMessage/FlashMessage'
|
||||
import UserContext from '../../context/user'
|
||||
import { alignment } from '../../utilities/alignment'
|
||||
import colors from '../../utilities/colors'
|
||||
import { linkToMapsApp } from '../../utilities/links'
|
||||
import { scale } from '../../utilities/scaling'
|
||||
import styles from './styles'
|
||||
View,
|
||||
} from "react-native";
|
||||
import MapView, { Marker, PROVIDER_GOOGLE } from "react-native-maps";
|
||||
import { assignOrder, updateOrderStatusRider } from "../../apollo/mutations";
|
||||
import { assignedOrders, configuration } from "../../apollo/queries";
|
||||
import { MainWrapper, Spinner, TextDefault, TextError } from "../../components";
|
||||
import { FlashMessage } from "../../components//FlashMessage/FlashMessage";
|
||||
import UserContext from "../../context/user";
|
||||
import { alignment } from "../../utilities/alignment";
|
||||
import colors from "../../utilities/colors";
|
||||
import { linkToMapsApp } from "../../utilities/links";
|
||||
import { scale } from "../../utilities/scaling";
|
||||
import styles from "./styles";
|
||||
|
||||
const CONFIGURATION = gql`
|
||||
${configuration}
|
||||
`
|
||||
`;
|
||||
const UPDATE_ORDER_STATUS = gql`
|
||||
${updateOrderStatusRider}
|
||||
`
|
||||
`;
|
||||
const ASSIGN_ORDER = gql`
|
||||
${assignOrder}
|
||||
`
|
||||
`;
|
||||
const ORDERS = gql`
|
||||
${assignedOrders}
|
||||
`
|
||||
const LATITUDE_DELTA = 0.0022
|
||||
const LONGITUDE_DELTA = 0.0021
|
||||
`;
|
||||
const LATITUDE_DELTA = 0.0022;
|
||||
const LONGITUDE_DELTA = 0.0021;
|
||||
|
||||
function OrderDetail() {
|
||||
const navigation = useNavigation()
|
||||
const route = useRoute()
|
||||
const navigation = useNavigation();
|
||||
const route = useRoute();
|
||||
const {
|
||||
unAssignedOrders,
|
||||
assignedOrders,
|
||||
loadingAssigned,
|
||||
loadingUnAssigned
|
||||
} = useContext(UserContext)
|
||||
loadingUnAssigned,
|
||||
} = useContext(UserContext);
|
||||
|
||||
// const [selectedOrder, setOrder] = useState(selectedOrder)
|
||||
const selectedOrder =
|
||||
unAssignedOrders.find(o => o._id === route.params?.id) ||
|
||||
assignedOrders.find(o => o._id === route.params?.id) ||
|
||||
null
|
||||
unAssignedOrders.find((o) => o._id === route.params?.id) ||
|
||||
assignedOrders.find((o) => o._id === route.params?.id) ||
|
||||
null;
|
||||
const { data, loading: loadingConfig, error: errorConfig } = useQuery(
|
||||
CONFIGURATION
|
||||
)
|
||||
);
|
||||
const [mutate, { loading: loadingMutation }] = useMutation(
|
||||
UPDATE_ORDER_STATUS,
|
||||
{
|
||||
onCompleted,
|
||||
onError,
|
||||
refetchQueries: [{ query: ORDERS }]
|
||||
refetchQueries: [{ query: ORDERS }],
|
||||
}
|
||||
)
|
||||
);
|
||||
const [mutateAssignOrder, { loading }] = useMutation(ASSIGN_ORDER, {
|
||||
onCompleted,
|
||||
onError
|
||||
})
|
||||
onError,
|
||||
});
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!selectedOrder) return
|
||||
if (!selectedOrder) return;
|
||||
navigation.setOptions({
|
||||
title: `Order ${selectedOrder.order_id}`
|
||||
})
|
||||
}, [selectedOrder])
|
||||
title: `Order ${selectedOrder.order_id}`,
|
||||
});
|
||||
}, [selectedOrder]);
|
||||
async function onCompleted({ updateOrderStatusRider, assignOrder }) {
|
||||
if (updateOrderStatusRider) {
|
||||
FlashMessage({
|
||||
message: `Order marked as ${updateOrderStatusRider.order_status}`
|
||||
})
|
||||
if (updateOrderStatusRider.order_status === 'DELIVERED') {
|
||||
navigation.goBack()
|
||||
return
|
||||
message: `Order marked as ${updateOrderStatusRider.order_status}`,
|
||||
});
|
||||
if (updateOrderStatusRider.order_status === "DELIVERED") {
|
||||
navigation.goBack();
|
||||
return;
|
||||
}
|
||||
// setOrder({ ...order, order_status: updateOrderStatusRider.order_status })
|
||||
}
|
||||
|
|
@ -90,13 +90,13 @@ function OrderDetail() {
|
|||
}
|
||||
|
||||
function onError({ graphQLErrors, networkError }) {
|
||||
let message = 'Unknown error occured'
|
||||
if (networkError) message = 'Internal Server Error'
|
||||
if (graphQLErrors) message = graphQLErrors.map(o => o.message).join(', ')
|
||||
let message = "Unknown error occured";
|
||||
if (networkError) message = "Internal Server Error";
|
||||
if (graphQLErrors) message = graphQLErrors.map((o) => o.message).join(", ");
|
||||
|
||||
FlashMessage({
|
||||
message: message
|
||||
})
|
||||
message: message,
|
||||
});
|
||||
}
|
||||
|
||||
function getAddons(addons, currencySymbol) {
|
||||
|
|
@ -108,7 +108,8 @@ function OrderDetail() {
|
|||
<View style={styles.orderTextCenterContainer}>
|
||||
<TextDefault
|
||||
bolder
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}>
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
|
||||
>
|
||||
{addon.title}:{option.title}
|
||||
</TextDefault>
|
||||
</View>
|
||||
|
|
@ -116,15 +117,16 @@ function OrderDetail() {
|
|||
<TextDefault
|
||||
textColor={colors.placeHolderColor}
|
||||
bolder
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}>
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
|
||||
>
|
||||
{currencySymbol}
|
||||
{option.price.toFixed(2)}
|
||||
</TextDefault>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
))
|
||||
})
|
||||
));
|
||||
});
|
||||
}
|
||||
|
||||
function getOrderItems(items, currencySymbol) {
|
||||
|
|
@ -137,14 +139,16 @@ function OrderDetail() {
|
|||
<TextDefault
|
||||
textColor={colors.fontMainColor}
|
||||
bolder
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}>
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
|
||||
>
|
||||
{item.quantity}x
|
||||
</TextDefault>
|
||||
</View>
|
||||
<View style={styles.orderTextCenterContainer}>
|
||||
<TextDefault
|
||||
bolder
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}>
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
|
||||
>
|
||||
{item.food.title}({item.variation.title})
|
||||
</TextDefault>
|
||||
</View>
|
||||
|
|
@ -153,7 +157,8 @@ function OrderDetail() {
|
|||
numberOfLines={1}
|
||||
textColor={colors.placeHolderColor}
|
||||
bolder
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}>
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
|
||||
>
|
||||
{currencySymbol}
|
||||
{(item.variation.price * item.quantity).toFixed(2)}
|
||||
</TextDefault>
|
||||
|
|
@ -162,23 +167,23 @@ function OrderDetail() {
|
|||
</View>
|
||||
{!item.addons ? null : getAddons(item.addons, currencySymbol)}
|
||||
</View>
|
||||
)
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
if (loadingAssigned || loadingUnAssigned) {
|
||||
return <TextError text="Loading orders" />
|
||||
return <TextError text="Loading orders" />;
|
||||
}
|
||||
if (loadingConfig) {
|
||||
return <Spinner />
|
||||
return <Spinner />;
|
||||
}
|
||||
if (errorConfig) {
|
||||
return <TextError text="Something is worng" />
|
||||
return <TextError text="Something is worng" />;
|
||||
}
|
||||
if (!selectedOrder) {
|
||||
return (
|
||||
<TextError text="Order assgined to other rider,(something like that)" />
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -186,7 +191,8 @@ function OrderDetail() {
|
|||
<ScrollView
|
||||
style={styles.flex}
|
||||
contentContainerStyle={{ flexGrow: 1 }}
|
||||
showsVerticalScrollIndicator={false}>
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<View style={styles.customerCard}>
|
||||
<View style={styles.customerSubCard}>
|
||||
<View style={styles.customerHeader}>
|
||||
|
|
@ -194,7 +200,8 @@ function OrderDetail() {
|
|||
H3
|
||||
bolder
|
||||
textColor={colors.tagColor}
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}>
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
|
||||
>
|
||||
Customer Details
|
||||
</TextDefault>
|
||||
</View>
|
||||
|
|
@ -205,7 +212,8 @@ function OrderDetail() {
|
|||
<TextDefault
|
||||
bolder
|
||||
textColor={colors.placeHolderColor}
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}>
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
|
||||
>
|
||||
Name
|
||||
</TextDefault>
|
||||
<TextDefault bolder style={{ ...alignment.PBxSmall }}>
|
||||
|
|
@ -218,7 +226,8 @@ function OrderDetail() {
|
|||
<TextDefault
|
||||
bolder
|
||||
textColor={colors.placeHolderColor}
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}>
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
|
||||
>
|
||||
Contact
|
||||
</TextDefault>
|
||||
<TextDefault bolder style={{ ...alignment.PBxSmall }}>
|
||||
|
|
@ -231,13 +240,15 @@ function OrderDetail() {
|
|||
<TextDefault
|
||||
bolder
|
||||
textColor={colors.placeHolderColor}
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}>
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
|
||||
>
|
||||
Delviery Location
|
||||
</TextDefault>
|
||||
<TextDefault
|
||||
numberOfLines={2}
|
||||
bolder
|
||||
style={{ ...alignment.PBxSmall }}>
|
||||
style={{ ...alignment.PBxSmall }}
|
||||
>
|
||||
{`${selectedOrder.delivery_address.delivery_address}`}
|
||||
</TextDefault>
|
||||
</View>
|
||||
|
|
@ -253,7 +264,8 @@ function OrderDetail() {
|
|||
H3
|
||||
bolder
|
||||
textColor={colors.tagColor}
|
||||
style={{ ...alignment.PTmedium }}>
|
||||
style={{ ...alignment.PTmedium }}
|
||||
>
|
||||
Order Details
|
||||
</TextDefault>
|
||||
</View>
|
||||
|
|
@ -270,7 +282,8 @@ function OrderDetail() {
|
|||
<TextDefault
|
||||
textColor={colors.placeHolderColor}
|
||||
bolder
|
||||
style={{ ...alignment.PTmedium, ...alignment.PLmedium }}>
|
||||
style={{ ...alignment.PTmedium, ...alignment.PLmedium }}
|
||||
>
|
||||
Subtotal
|
||||
</TextDefault>
|
||||
</View>
|
||||
|
|
@ -279,7 +292,8 @@ function OrderDetail() {
|
|||
numberOfLines={1}
|
||||
textColor={colors.placeHolderColor}
|
||||
bolder
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PTmedium }}>
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PTmedium }}
|
||||
>
|
||||
{data.configuration.currency_symbol}
|
||||
{(
|
||||
selectedOrder.order_amount -
|
||||
|
|
@ -295,7 +309,8 @@ function OrderDetail() {
|
|||
<TextDefault
|
||||
textColor={colors.placeHolderColor}
|
||||
bolder
|
||||
style={{ ...alignment.PLmedium }}>
|
||||
style={{ ...alignment.PLmedium }}
|
||||
>
|
||||
Delivery Charges
|
||||
</TextDefault>
|
||||
</View>
|
||||
|
|
@ -303,7 +318,8 @@ function OrderDetail() {
|
|||
<TextDefault
|
||||
numberOfLines={1}
|
||||
textColor={colors.placeHolderColor}
|
||||
bolder>
|
||||
bolder
|
||||
>
|
||||
{data.configuration.currency_symbol}
|
||||
{selectedOrder.delivery_charges.toFixed(2)}
|
||||
</TextDefault>
|
||||
|
|
@ -323,7 +339,8 @@ function OrderDetail() {
|
|||
numberOfLines={1}
|
||||
textColor={colors.fontMainColor}
|
||||
H4
|
||||
bolder>
|
||||
bolder
|
||||
>
|
||||
{data.configuration.currency_symbol}
|
||||
{selectedOrder.order_amount.toFixed(2)}
|
||||
</TextDefault>
|
||||
|
|
@ -335,35 +352,39 @@ function OrderDetail() {
|
|||
</View>
|
||||
<View style={styles.baseSpacer} />
|
||||
<View style={styles.mapContainer}>
|
||||
{selectedOrder.delivery_address && (
|
||||
<MapView
|
||||
style={styles.flex}
|
||||
scrollEnabled={false}
|
||||
zoomEnabled={false}
|
||||
loadingBackgroundColor={colors.tagColor}
|
||||
zoomControlEnabled={false}
|
||||
rotateEnabled={false}
|
||||
cacheEnabled={true}
|
||||
googleMapsApiKey="AIzaSyCzNP5qQql2a5y8lOoO-1yj1lj_tzjVImA"
|
||||
initialRegion={{
|
||||
latitude: parseFloat(selectedOrder.delivery_address.latitude),
|
||||
latitudeDelta: LATITUDE_DELTA,
|
||||
longitude: parseFloat(selectedOrder.delivery_address.longitude),
|
||||
longitudeDelta: LONGITUDE_DELTA
|
||||
longitudeDelta: LONGITUDE_DELTA,
|
||||
}}
|
||||
provider={PROVIDER_GOOGLE}
|
||||
onPress={() => {
|
||||
linkToMapsApp(
|
||||
{
|
||||
latitude: selectedOrder.delivery_address.latitude,
|
||||
longitude: selectedOrder.delivery_address.longitude
|
||||
longitude: selectedOrder.delivery_address.longitude,
|
||||
},
|
||||
'Destination'
|
||||
)
|
||||
}}>
|
||||
"Destination"
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Marker
|
||||
title="Delivery Address"
|
||||
coordinate={{
|
||||
latitude: parseFloat(selectedOrder.delivery_address.latitude),
|
||||
longitude: parseFloat(selectedOrder.delivery_address.longitude)
|
||||
longitude: parseFloat(
|
||||
selectedOrder.delivery_address.longitude
|
||||
),
|
||||
}}
|
||||
onPress={() =>
|
||||
Linking.openURL(
|
||||
|
|
@ -371,25 +392,28 @@ function OrderDetail() {
|
|||
selectedOrder.delivery_address.longitude
|
||||
)}+${parseFloat(selectedOrder.delivery_address.longitude)}`
|
||||
)
|
||||
}>
|
||||
}
|
||||
>
|
||||
<Image
|
||||
source={require('../../../assets/images/ui/markerEnatega.png')}
|
||||
source={require("../../../assets/images/ui/markerEnatega.png")}
|
||||
style={{ width: scale(40), height: scale(40) }}
|
||||
/>
|
||||
</Marker>
|
||||
</MapView>
|
||||
)}
|
||||
</View>
|
||||
<View style={styles.actionContainer}>
|
||||
{selectedOrder.order_status === 'ACCEPTED' && !selectedOrder.rider && (
|
||||
{selectedOrder.order_status === "ACCEPTED" && !selectedOrder.rider && (
|
||||
<TouchableOpacity
|
||||
disabled={loading}
|
||||
style={[
|
||||
styles.cancelBtnStyle,
|
||||
{ backgroundColor: colors.buttonBackground }
|
||||
{ backgroundColor: colors.buttonBackground },
|
||||
]}
|
||||
onPress={() => {
|
||||
mutateAssignOrder({ variables: { id: selectedOrder._id } })
|
||||
}}>
|
||||
mutateAssignOrder({ variables: { id: selectedOrder._id } });
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<Spinner spinnerColor={colors.buttonText} />
|
||||
) : (
|
||||
|
|
@ -397,7 +421,8 @@ function OrderDetail() {
|
|||
textColor={colors.fontMainColor}
|
||||
H4
|
||||
bold
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}>
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
|
||||
>
|
||||
Assign to me
|
||||
</TextDefault>
|
||||
)}
|
||||
|
|
@ -406,39 +431,43 @@ function OrderDetail() {
|
|||
{loadingMutation && <Spinner />}
|
||||
{!loadingMutation && selectedOrder.rider && (
|
||||
<View style={styles.actionSubContainer}>
|
||||
{selectedOrder.order_status === 'ACCEPTED' && (
|
||||
{selectedOrder.order_status === "ACCEPTED" && (
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.cancelBtnStyle,
|
||||
{ backgroundColor: colors.tagColor }
|
||||
{ backgroundColor: colors.tagColor },
|
||||
]}
|
||||
onPress={() => {
|
||||
mutate({
|
||||
variables: { id: selectedOrder._id, status: 'PICKED' }
|
||||
})
|
||||
}}>
|
||||
variables: { id: selectedOrder._id, status: "PICKED" },
|
||||
});
|
||||
}}
|
||||
>
|
||||
<TextDefault
|
||||
textColor={colors.fontMainColor}
|
||||
H4
|
||||
bold
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}>
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
|
||||
>
|
||||
Picked
|
||||
</TextDefault>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
{selectedOrder.order_status === 'PICKED' && (
|
||||
{selectedOrder.order_status === "PICKED" && (
|
||||
<TouchableOpacity
|
||||
style={styles.acceptBtnStyle}
|
||||
onPress={() => {
|
||||
mutate({
|
||||
variables: { id: selectedOrder._id, status: 'DELIVERED' }
|
||||
})
|
||||
}}>
|
||||
variables: { id: selectedOrder._id, status: "DELIVERED" },
|
||||
});
|
||||
}}
|
||||
>
|
||||
<TextDefault
|
||||
textColor={colors.fontMainColor}
|
||||
H4
|
||||
bold
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}>
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
|
||||
>
|
||||
Delivered
|
||||
</TextDefault>
|
||||
</TouchableOpacity>
|
||||
|
|
@ -448,7 +477,7 @@ function OrderDetail() {
|
|||
</View>
|
||||
</ScrollView>
|
||||
</MainWrapper>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default OrderDetail
|
||||
export default OrderDetail;
|
||||
|
|
|
|||
Loading…
Reference in New Issue