ReduxReactQuery/App.js
2024-05-24 16:30:01 +02:00

122 lines
3.1 KiB
JavaScript

//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