From a2ec812ba78bc32e05a1bea376bc8eb9b3e093c2 Mon Sep 17 00:00:00 2001 From: Dishank-Kheni Date: Fri, 24 May 2024 16:30:01 +0200 Subject: [PATCH] first commit --- App.js | 121 +++++++++++ .../gradle/wrapper/gradle-wrapper.properties | 2 +- index.js | 2 +- package-lock.json | 193 ++++++++++++++++++ package.json | 7 + src/OrderComponent.js | 51 +++++ src/queryClient.js | 45 ++++ src/usePlaceOrder.js | 5 + 8 files changed, 424 insertions(+), 2 deletions(-) create mode 100644 App.js create mode 100644 src/OrderComponent.js create mode 100644 src/queryClient.js create mode 100644 src/usePlaceOrder.js diff --git a/App.js b/App.js new file mode 100644 index 0000000..f3a3e95 --- /dev/null +++ b/App.js @@ -0,0 +1,121 @@ +//import React, { useEffect, useState } from 'react'; +//import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'; +//import NetInfo from '@react-native-community/netinfo'; +//import AsyncStorage from '@react-native-async-storage/async-storage'; +//import axios from 'axios'; +// +//import { +//FlatList, +// SafeAreaView, +// ScrollView, +// StatusBar, +// StyleSheet, +// Text, +// useColorScheme, +// View, +// Button +//} from "react-native"; +// +//import { +// Colors, +// DebugInstructions, +// Header, +// LearnMoreLinks, +// ReloadInstructions, +//} from "react-native/Libraries/NewAppScreen"; +// +//const initialState = { +// loading: false, +// success: false, +// error: false, +// data: null, +// errorData: null, +//}; +// +//const queryClient = new QueryClient(); +// +//const fetchTodos = async () => { +// const { data } = await axios.get('https://jsonplaceholder.typicode.com/todos'); +// return data; +//}; +// +// +//const Todos = () => { +// const [isConnected, setIsConnected] = useState(true); +// +// // Check internet connection +// useEffect(() => { +// const unsubscribe = NetInfo.addEventListener(state => { +// setIsConnected(state.isConnected); +// }); +// +// return () => unsubscribe(); +// }, []); +// +// const { data, error, isLoading, refetch } = useQuery({ +// queryKey: ['todos'], +// queryFn: fetchTodos, +// +// enabled: isConnected, // Only fetch if there is an internet connection +// onSuccess: async (data) => { +// // Store the data locally on successful fetch +// await AsyncStorage.setItem('@todos', JSON.stringify(data)); +// }, +// onError: async () => { +// // If the fetch fails, try to load the data from local storage +// const localData = await AsyncStorage.getItem('@todos'); +// if (localData) { +// queryClient.setQueryData(['todos'], JSON.parse(localData)); +// } +// }, +// retry: true, // Retry on failure +// } +// ); +// +// if (isLoading) return Loading...; +// if (error) return Error: {error.message}; +// +// return ( +// item.id.toString()} +// renderItem={({ item }) => {item.title}} +// refreshing={isLoading} +// onRefresh={refetch} +// /> +// ); +//}; +// +//const App = () => ( +// +// +// +// +// +//); +// +//export default App; +import React from 'react' +import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client' +import { persister, queryClient } from './src/queryClient' +import OrderComponent from './src/OrderComponent' +import {ToastAndroid} from 'react-native'; + + +function App() { + return ( + { + queryClient.resumePausedMutations().then(() => { + queryClient.invalidateQueries() + }) + }} + > + + + ) +} + +export default App diff --git a/android/gradle/wrapper/gradle-wrapper.properties b/android/gradle/wrapper/gradle-wrapper.properties index 2ea3535..e6aba25 100644 --- a/android/gradle/wrapper/gradle-wrapper.properties +++ b/android/gradle/wrapper/gradle-wrapper.properties @@ -1,6 +1,6 @@ distributionBase=GRADLE_USER_HOME distributionPath=wrapper/dists -distributionUrl=https\://services.gradle.org/distributions/gradle-8.6-all.zip +distributionUrl=https\://services.gradle.org/distributions/gradle-8.5-all.zip networkTimeout=10000 validateDistributionUrl=true zipStoreBase=GRADLE_USER_HOME diff --git a/index.js b/index.js index a850d03..36d484b 100644 --- a/index.js +++ b/index.js @@ -6,4 +6,4 @@ import {AppRegistry} from 'react-native'; import App from './App'; import {name as appName} from './app.json'; -AppRegistry.registerComponent(appName, () => App); +AppRegistry.registerComponent(appName, () => App); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 6ea952c..0c0e90d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,13 @@ "name": "ReduxReactQuery", "version": "0.0.1", "dependencies": { + "@react-native-async-storage/async-storage": "^1.23.1", + "@react-native-community/netinfo": "^11.3.2", + "@tanstack/query-async-storage-persister": "^5.37.1", + "@tanstack/query-sync-storage-persister": "^5.37.1", + "@tanstack/react-query": "^5.37.1", + "@tanstack/react-query-persist-client": "^5.37.1", + "axios": "^1.6.8", "react": "18.2.0", "react-native": "0.74.1" }, @@ -3026,6 +3033,17 @@ "node": ">= 8" } }, + "node_modules/@react-native-async-storage/async-storage": { + "version": "1.23.1", + "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.23.1.tgz", + "integrity": "sha512-Qd2kQ3yi6Y3+AcUlrHxSLlnBvpdCEMVGFlVBneVOjaFaPU61g1huc38g339ysXspwY1QZA2aNhrk/KlHGO+ewA==", + "dependencies": { + "merge-options": "^3.0.4" + }, + "peerDependencies": { + "react-native": "^0.0.0-0 || >=0.60 <1.0" + } + }, "node_modules/@react-native-community/cli": { "version": "13.6.6", "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-13.6.6.tgz", @@ -3920,6 +3938,14 @@ "node": ">=8" } }, + "node_modules/@react-native-community/netinfo": { + "version": "11.3.2", + "resolved": "https://registry.npmjs.org/@react-native-community/netinfo/-/netinfo-11.3.2.tgz", + "integrity": "sha512-YsaS3Dutnzqd1BEoeC+DEcuNJedYRkN6Ef3kftT5Sm8ExnCF94C/nl4laNxuvFli3+Jz8Df3jO25Jn8A9S0h4w==", + "peerDependencies": { + "react-native": ">=0.59" + } + }, "node_modules/@react-native/assets-registry": { "version": "0.74.83", "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.74.83.tgz", @@ -4371,6 +4397,83 @@ "@sinonjs/commons": "^3.0.0" } }, + "node_modules/@tanstack/query-async-storage-persister": { + "version": "5.37.1", + "resolved": "https://registry.npmjs.org/@tanstack/query-async-storage-persister/-/query-async-storage-persister-5.37.1.tgz", + "integrity": "sha512-m0eMC2NNbr3q1w3el2tFLzIE+LmmXG1Nw2CXGdsL7nZb56wOetJh428hJIx8pVizNR3NVcV5CgdvoyqHSKr19A==", + "dependencies": { + "@tanstack/query-persist-client-core": "5.37.1" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/query-core": { + "version": "5.36.1", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.36.1.tgz", + "integrity": "sha512-BteWYEPUcucEu3NBcDAgKuI4U25R9aPrHSP6YSf2NvaD2pSlIQTdqOfLRsxH9WdRYg7k0Uom35Uacb6nvbIMJg==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/query-persist-client-core": { + "version": "5.37.1", + "resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.37.1.tgz", + "integrity": "sha512-mQedWzOvJ/hmh4CyQIgBCM3gUdCUAGg8kUzexW75j/IJdAbIgvd84KnbNGHMs+amUng8zalARR2c5+oE2pN27A==", + "dependencies": { + "@tanstack/query-core": "5.36.1" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/query-sync-storage-persister": { + "version": "5.37.1", + "resolved": "https://registry.npmjs.org/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-5.37.1.tgz", + "integrity": "sha512-xAJAH2o3wHox4HRJL8CFRrznjb55hWj6HuS+avnDRLnzwdajnzIAKzqqJOZ4vkSgsMHSKFL//W+6WxMz6UDNJw==", + "dependencies": { + "@tanstack/query-core": "5.36.1", + "@tanstack/query-persist-client-core": "5.37.1" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/react-query": { + "version": "5.37.1", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.37.1.tgz", + "integrity": "sha512-EhtBNA8GL3XFeSx6VYUjXQ96n44xe3JGKZCzBINrCYlxbZP6UwBafv7ti4eSRWc2Fy+fybQre0w17gR6lMzULA==", + "dependencies": { + "@tanstack/query-core": "5.36.1" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^18.0.0" + } + }, + "node_modules/@tanstack/react-query-persist-client": { + "version": "5.37.1", + "resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.37.1.tgz", + "integrity": "sha512-ZvOH+rzQTU+b10N/8iNkoE44CMMUBwSUbUtTPT54Vo7KiZp8WZjqOOtGba702g3qrYQvKC4j/VaNnO3vUVjNhQ==", + "dependencies": { + "@tanstack/query-persist-client-core": "5.37.1" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "@tanstack/react-query": "^5.37.1", + "react": "^18.0.0" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -5086,6 +5189,11 @@ "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz", "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==" }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, "node_modules/available-typed-arrays": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", @@ -5101,6 +5209,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/axios": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz", + "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/babel-core": { "version": "7.0.0-bridge.0", "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz", @@ -5688,6 +5806,17 @@ "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz", "integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==" }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/command-exists": { "version": "1.2.9", "resolved": "https://registry.npmjs.org/command-exists/-/command-exists-1.2.9.tgz", @@ -6110,6 +6239,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/denodeify": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/denodeify/-/denodeify-1.2.1.tgz", @@ -7496,6 +7633,25 @@ "node": ">=0.4.0" } }, + "node_modules/follow-redirects": { + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -7505,6 +7661,19 @@ "is-callable": "^1.1.3" } }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -8313,6 +8482,14 @@ "node": ">=8" } }, + "node_modules/is-plain-obj": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz", + "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==", + "engines": { + "node": ">=8" + } + }, "node_modules/is-plain-object": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", @@ -10705,6 +10882,17 @@ "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" }, + "node_modules/merge-options": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/merge-options/-/merge-options-3.0.4.tgz", + "integrity": "sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==", + "dependencies": { + "is-plain-obj": "^2.1.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -11892,6 +12080,11 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", diff --git a/package.json b/package.json index 0b4c8fe..06ba4a4 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,13 @@ "test": "jest" }, "dependencies": { + "@react-native-async-storage/async-storage": "^1.23.1", + "@react-native-community/netinfo": "^11.3.2", + "@tanstack/query-async-storage-persister": "^5.37.1", + "@tanstack/query-sync-storage-persister": "^5.37.1", + "@tanstack/react-query": "^5.37.1", + "@tanstack/react-query-persist-client": "^5.37.1", + "axios": "^1.6.8", "react": "18.2.0", "react-native": "0.74.1" }, diff --git a/src/OrderComponent.js b/src/OrderComponent.js new file mode 100644 index 0000000..eda654b --- /dev/null +++ b/src/OrderComponent.js @@ -0,0 +1,51 @@ +import React, { useState } from 'react' +import { usePlaceOrder } from './usePlaceOrder' +import {ToastAndroid} from 'react-native'; + +function OrderComponent() { + const { mutate, isLoading, isError, error, data } = usePlaceOrder() + const [orderData, setOrderData] = useState({ title: '', body: '', userId: 1 }) + + const handlePlaceOrder = () => { + mutate(orderData) + } + + return ( +
+

Place Order

+
{ + e.preventDefault() + handlePlaceOrder() + }} + > +
+ +
+
+