changes

src/OrderComponent.js

@@ -1,51 +1,26 @@
-import React, { useState } from 'react'
-import { usePlaceOrder } from './usePlaceOrder'
-import {ToastAndroid} from 'react-native';
+import React, {useState} from 'react';
+import {ToastAndroid, Text, View, Button} from 'react-native';
+import {useMutation} from '@tanstack/react-query';
 
 function OrderComponent() {
-  const { mutate, isLoading, isError, error, data } = usePlaceOrder()
-  const [orderData, setOrderData] = useState({ title: '', body: '', userId: 1 })
+  const mutation = useMutation(['placeOrder']);
+  const [orderData, setOrderData] = useState({title: '', body: '', userId: 1});
 
-  const handlePlaceOrder = () => {
-    mutate(orderData)
-  }
+  const handlePlaceOrder = id => {
+    mutation.mutate({title: '', body: '', userId: id});
+  };
 
   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 })}
+    <View>
+      <Text>Place Order</Text>
+      <Button
+        title="Make order"
+        onPress={handlePlaceOrder(Math.floor(Math.random() * 100))}
       />
-          </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>
-  )
+      {mutation.isError && <Text>Error: {mutation.error.message}</Text>}
+      {mutation.data && <Text>Order ID: {mutation.data.id}</Text>}
+    </View>
+  );
 }
 
-export default OrderComponent
+export default OrderComponent;

src/queryClient.js

@@ -1,10 +1,11 @@
-import { QueryClient, MutationCache } from '@tanstack/react-query'
-import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
+import { QueryClient, MutationCache } from '@tanstack/react-query';
+import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import {ToastAndroid} from 'react-native';
 
 // Create a persister using localStorrage
-const persister = createSyncStoragePersister({
-  storage: window.localStorage,
+const persister = createAsyncStoragePersister({
+  storage: AsyncStorage,
 })
 
 // Create a QueryClient instance
@@ -13,6 +14,9 @@ const queryClient = new QueryClient({
     mutations: {
       retry: true, // Retry indefinitely
     },
+    queries: {
+      gcTime: 1000 * 60 * 60 * 24, // 24 hours
+    },
   },
   mutationCache: new MutationCache({
     onSuccess: (data) => {

src/usePlaceOrder.js

@@ -1,5 +1,5 @@
 import { useMutation } from '@tanstack/react-query'
 
 export function usePlaceOrder() {
-  return useMutation(['placeOrder'])
+  return useMutation(['placeOrder']);
 }

tsconfig.json

@@ -1,3 +1,6 @@
 {
-  "extends": "@react-native/typescript-config/tsconfig.json"
+  "extends": "@react-native/typescript-config/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true
+  }
 }