115 lines
2.8 KiB
JavaScript
115 lines
2.8 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;
|
|
|
|
// App.js
|
|
import React from 'react';
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
import MyComponent from './src/MyComponent';
|
|
|
|
const queryClient = new QueryClient();
|
|
|
|
const App = () => {
|
|
return (
|
|
<QueryClientProvider client={queryClient}>
|
|
<MyComponent />
|
|
</QueryClientProvider>
|
|
);
|
|
};
|
|
|
|
export default App;
|