migrate to tanstack query v5

src/app/chats/chat.tsx

@@ -22,8 +22,12 @@ export function ChatScreen() {
   const { ndk } = useNDK();
   const { pubkey } = useParams();
   const { fetchNIP04Messages } = useNostr();
-  const { status, data } = useQuery(['nip04-dm', pubkey], async () => {
-    return await fetchNIP04Messages(pubkey);
+  const { status, data } = useQuery({
+    queryKey: ['nip04-dm', pubkey],
+    queryFn: async () => {
+      return await fetchNIP04Messages(pubkey);
+    },
+    refetchOnWindowFocus: false,
   });
 
   const renderItem = useCallback(
@@ -69,7 +73,7 @@ export function ChatScreen() {
             <User pubkey={pubkey} variant="simple" />
           </div>
           <div className="h-full w-full flex-1 px-3 py-3">
-            {status === 'loading' ? (
+            {status === 'pending' ? (
               <div className="flex h-full w-full items-center justify-center">
                 <div className="flex flex-col items-center gap-1.5">
                   <LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />

src/app/chats/components/chatListItem.tsx

@@ -19,7 +19,7 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
   const svgURI =
     'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(event.pubkey, 90, 50));
 
-  if (status === 'loading') {
+  if (status === 'pending') {
     return (
       <div className="flex items-center gap-2.5 rounded-md px-3">
         <div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-400 dark:bg-neutral-600" />

src/app/chats/components/mediaUploader.tsx

@@ -3,14 +3,11 @@ import { Dispatch, SetStateAction, useState } from 'react';
 
 import { LoaderIcon, MediaIcon } from '@shared/icons';
 
-import { useNostr } from '@utils/hooks/useNostr';
-
 export function MediaUploader({
   setState,
 }: {
   setState: Dispatch<SetStateAction<string>>;
 }) {
-  const { upload } = useNostr();
   const [loading, setLoading] = useState(false);
 
   const uploadMedia = async () => {

src/app/chats/index.tsx

@@ -11,18 +11,16 @@ import { useNostr } from '@utils/hooks/useNostr';
 
 export function ChatsScreen() {
   const { getAllNIP04Chats } = useNostr();
-  const { status, data } = useQuery(
-    ['nip04-chats'],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['nip04-chats'],
+    queryFn: async () => {
       return await getAllNIP04Chats();
     },
-    {
-      refetchOnWindowFocus: false,
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-      staleTime: Infinity,
-    }
-  );
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    staleTime: Infinity,
+  });
 
   const renderItem = useCallback(
     (event: NDKEvent) => {
@@ -43,7 +41,7 @@ export function ChatsScreen() {
           </h3>
         </div>
         <div className="flex h-full flex-col gap-1">
-          {status === 'loading' ? (
+          {status === 'pending' ? (
             <div className="flex h-full w-full items-center justify-center pb-16">
               <div className="inline-flex flex-col items-center justify-center gap-2">
                 <LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />