first commit
This commit is contained in:
parent
c4706b43ca
commit
a2ec812ba7
121
App.js
Normal file
121
App.js
Normal file
@ -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 <Text>Loading...</Text>;
|
||||||
|
// if (error) return <Text>Error: {error.message}</Text>;
|
||||||
|
//
|
||||||
|
// return (
|
||||||
|
// <FlatList
|
||||||
|
// data={data}
|
||||||
|
// keyExtractor={(item) => item.id.toString()}
|
||||||
|
// renderItem={({ item }) => <Text>{item.title}</Text>}
|
||||||
|
// refreshing={isLoading}
|
||||||
|
// onRefresh={refetch}
|
||||||
|
// />
|
||||||
|
// );
|
||||||
|
//};
|
||||||
|
//
|
||||||
|
//const App = () => (
|
||||||
|
// <QueryClientProvider client={queryClient}>
|
||||||
|
// <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
|
||||||
|
// <Todos />
|
||||||
|
// </View>
|
||||||
|
// </QueryClientProvider>
|
||||||
|
//);
|
||||||
|
//
|
||||||
|
//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 (
|
||||||
|
<PersistQueryClientProvider
|
||||||
|
client={queryClient}
|
||||||
|
persistOptions={{ persister }}
|
||||||
|
onSuccess={() => {
|
||||||
|
queryClient.resumePausedMutations().then(() => {
|
||||||
|
queryClient.invalidateQueries()
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<OrderComponent />
|
||||||
|
</PersistQueryClientProvider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
@ -1,6 +1,6 @@
|
|||||||
distributionBase=GRADLE_USER_HOME
|
distributionBase=GRADLE_USER_HOME
|
||||||
distributionPath=wrapper/dists
|
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
|
networkTimeout=10000
|
||||||
validateDistributionUrl=true
|
validateDistributionUrl=true
|
||||||
zipStoreBase=GRADLE_USER_HOME
|
zipStoreBase=GRADLE_USER_HOME
|
||||||
|
193
package-lock.json
generated
193
package-lock.json
generated
@ -8,6 +8,13 @@
|
|||||||
"name": "ReduxReactQuery",
|
"name": "ReduxReactQuery",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"dependencies": {
|
"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": "18.2.0",
|
||||||
"react-native": "0.74.1"
|
"react-native": "0.74.1"
|
||||||
},
|
},
|
||||||
@ -3026,6 +3033,17 @@
|
|||||||
"node": ">= 8"
|
"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": {
|
"node_modules/@react-native-community/cli": {
|
||||||
"version": "13.6.6",
|
"version": "13.6.6",
|
||||||
"resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-13.6.6.tgz",
|
"resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-13.6.6.tgz",
|
||||||
@ -3920,6 +3938,14 @@
|
|||||||
"node": ">=8"
|
"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": {
|
"node_modules/@react-native/assets-registry": {
|
||||||
"version": "0.74.83",
|
"version": "0.74.83",
|
||||||
"resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.74.83.tgz",
|
"resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.74.83.tgz",
|
||||||
@ -4371,6 +4397,83 @@
|
|||||||
"@sinonjs/commons": "^3.0.0"
|
"@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": {
|
"node_modules/@types/babel__core": {
|
||||||
"version": "7.20.5",
|
"version": "7.20.5",
|
||||||
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
|
||||||
"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
|
"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": {
|
"node_modules/available-typed-arrays": {
|
||||||
"version": "1.0.7",
|
"version": "1.0.7",
|
||||||
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
|
"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"
|
"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": {
|
"node_modules/babel-core": {
|
||||||
"version": "7.0.0-bridge.0",
|
"version": "7.0.0-bridge.0",
|
||||||
"resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz",
|
||||||
"integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g=="
|
"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": {
|
"node_modules/command-exists": {
|
||||||
"version": "1.2.9",
|
"version": "1.2.9",
|
||||||
"resolved": "https://registry.npmjs.org/command-exists/-/command-exists-1.2.9.tgz",
|
"resolved": "https://registry.npmjs.org/command-exists/-/command-exists-1.2.9.tgz",
|
||||||
@ -6110,6 +6239,14 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"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": {
|
"node_modules/denodeify": {
|
||||||
"version": "1.2.1",
|
"version": "1.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/denodeify/-/denodeify-1.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/denodeify/-/denodeify-1.2.1.tgz",
|
||||||
@ -7496,6 +7633,25 @@
|
|||||||
"node": ">=0.4.0"
|
"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": {
|
"node_modules/for-each": {
|
||||||
"version": "0.3.3",
|
"version": "0.3.3",
|
||||||
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
|
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
|
||||||
@ -7505,6 +7661,19 @@
|
|||||||
"is-callable": "^1.1.3"
|
"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": {
|
"node_modules/fresh": {
|
||||||
"version": "0.5.2",
|
"version": "0.5.2",
|
||||||
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
|
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
|
||||||
@ -8313,6 +8482,14 @@
|
|||||||
"node": ">=8"
|
"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": {
|
"node_modules/is-plain-object": {
|
||||||
"version": "2.0.4",
|
"version": "2.0.4",
|
||||||
"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
|
||||||
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
|
"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": {
|
"node_modules/merge-stream": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
|
||||||
@ -11892,6 +12080,11 @@
|
|||||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||||
"dev": true
|
"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": {
|
"node_modules/punycode": {
|
||||||
"version": "2.3.1",
|
"version": "2.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
||||||
|
@ -10,6 +10,13 @@
|
|||||||
"test": "jest"
|
"test": "jest"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"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": "18.2.0",
|
||||||
"react-native": "0.74.1"
|
"react-native": "0.74.1"
|
||||||
},
|
},
|
||||||
|
51
src/OrderComponent.js
Normal file
51
src/OrderComponent.js
Normal file
@ -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 (
|
||||||
|
<div>
|
||||||
|
<h1>Place Order</h1>
|
||||||
|
<form
|
||||||
|
onSubmit={(e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
handlePlaceOrder()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<label>
|
||||||
|
Title:
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={orderData.title}
|
||||||
|
onChange={(e) => setOrderData({ ...orderData, title: e.target.value })}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>
|
||||||
|
Body:
|
||||||
|
<textarea
|
||||||
|
value={orderData.body}
|
||||||
|
onChange={(e) => setOrderData({ ...orderData, body: e.target.value })}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button type="submit" disabled={isLoading}>
|
||||||
|
{isLoading ? 'Placing Order...' : 'Place Order'}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
{isError && <p>Error: {error.message}</p>}
|
||||||
|
{data && <p>Order ID: {data.id}</p>}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default OrderComponent
|
45
src/queryClient.js
Normal file
45
src/queryClient.js
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
import { QueryClient, MutationCache } from '@tanstack/react-query'
|
||||||
|
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
|
||||||
|
import {ToastAndroid} from 'react-native';
|
||||||
|
|
||||||
|
// Create a persister using localStorrage
|
||||||
|
const persister = createSyncStoragePersister({
|
||||||
|
storage: window.localStorage,
|
||||||
|
})
|
||||||
|
|
||||||
|
// Create a QueryClient instance
|
||||||
|
const queryClient = new QueryClient({
|
||||||
|
defaultOptions: {
|
||||||
|
mutations: {
|
||||||
|
retry: true, // Retry indefinitely
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mutationCache: new MutationCache({
|
||||||
|
onSuccess: (data) => {
|
||||||
|
ToastAndroid.show('Order placed successfully',ToastAndroid.SHORT)
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
ToastAndroid.show('Order placement failed, retrying...',ToastAndroid.SHORT)
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
|
||||||
|
// Set default mutation function to handle orders
|
||||||
|
queryClient.setMutationDefaults(['placeOrder'], {
|
||||||
|
mutationFn: async (orderData) => {
|
||||||
|
const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(orderData),
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Order placement failed')
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json()
|
||||||
|
},
|
||||||
|
retry: true, // Retry indefinitely until it succeeds
|
||||||
|
})
|
||||||
|
|
||||||
|
export { persister, queryClient }
|
5
src/usePlaceOrder.js
Normal file
5
src/usePlaceOrder.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { useMutation } from '@tanstack/react-query'
|
||||||
|
|
||||||
|
export function usePlaceOrder() {
|
||||||
|
return useMutation(['placeOrder'])
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user