544 migrate to react query v4 (#547)

* Update all imports

* Update isLoading

* Update onlineManager

src/components/Relationship/Incoming.tsx

@@ -8,7 +8,7 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, View } from 'react-native'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 
 export interface Props {
   id: Mastodon.Account['id']

src/components/Relationship/Outgoing.tsx

@@ -10,7 +10,7 @@ import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 
 export interface Props {
   id: Mastodon.Account['id']

src/components/Timeline/Conversation.tsx

@@ -8,7 +8,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback } from 'react'
 import { Pressable, View } from 'react-native'
-import { useMutation, useQueryClient } from 'react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 import TimelineActions from './Shared/Actions'
 import TimelineContent from './Shared/Content'
 import StatusContext from './Shared/Context'

src/components/Timeline/Refresh.tsx

@@ -20,7 +20,7 @@ import Animated, {
   useSharedValue,
   withTiming
 } from 'react-native-reanimated'
-import { InfiniteData, useQueryClient } from 'react-query'
+import { InfiniteData, useQueryClient } from '@tanstack/react-query'
 
 export interface Props {
   flRef: RefObject<FlatList<any>>

src/components/Timeline/Shared/Actions.tsx

@@ -17,7 +17,7 @@ import { uniqBy } from 'lodash'
 import React, { useCallback, useContext, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Pressable, StyleSheet, View } from 'react-native'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 import { useSelector } from 'react-redux'
 import StatusContext from './Context'
 

src/components/Timeline/Shared/HeaderConversation.tsx

@@ -8,7 +8,7 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Pressable, View } from 'react-native'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 import StatusContext from './Context'
 import HeaderSharedCreated from './HeaderShared/Created'
 import HeaderSharedMuted from './HeaderShared/Muted'

src/components/Timeline/Shared/Poll.tsx

@@ -16,7 +16,7 @@ import { maxBy } from 'lodash'
 import React, { useCallback, useContext, useMemo, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Pressable, View } from 'react-native'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 import StatusContext from './Context'
 
 const TimelinePoll: React.FC = () => {

src/components/Timeline/Shared/Translate.tsx

@@ -56,7 +56,7 @@ const TimelineTranslate = () => {
     : settingsLanguage || Localization.locale || 'en'
 
   const [enabled, setEnabled] = useState(false)
-  const { refetch, data, isLoading, isSuccess, isError } = useTranslateQuery({
+  const { refetch, data, isFetching, isSuccess, isError } = useTranslateQuery({
     source: detectedLanguage.language,
     target: targetLanguage,
     text,
@@ -111,7 +111,7 @@ const TimelineTranslate = () => {
         <CustomText
           fontStyle='M'
           style={{
-            color: isLoading || isSuccess ? colors.secondary : isError ? colors.red : colors.blue
+            color: isFetching || isSuccess ? colors.secondary : isError ? colors.red : colors.blue
           }}
         >
           {isError
@@ -125,7 +125,7 @@ const TimelineTranslate = () => {
                 })
             : t('shared.translate.default')}
         </CustomText>
-        {isLoading ? (
+        {isFetching ? (
           <Circle
             size={StyleConstants.Font.Size.M}
             color={colors.disabled}

src/components/contextMenu/account.ts

@@ -17,7 +17,7 @@ import { getInstanceAccount } from '@utils/slices/instancesSlice'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Platform } from 'react-native'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 import { useSelector } from 'react-redux'
 
 const menuAccount = ({

src/components/contextMenu/instance.ts

@@ -3,7 +3,7 @@ import { QueryKeyTimeline, useTimelineMutation } from '@utils/queryHooks/timelin
 import { getInstanceUrl } from '@utils/slices/instancesSlice'
 import { useTranslation } from 'react-i18next'
 import { Alert } from 'react-native'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 import { useSelector } from 'react-redux'
 
 const menuInstance = ({

src/components/contextMenu/status.ts

@@ -12,7 +12,7 @@ import { checkInstanceFeature, getInstanceAccount } from '@utils/slices/instance
 import { useTheme } from '@utils/styles/ThemeManager'
 import { useTranslation } from 'react-i18next'
 import { Alert } from 'react-native'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 import { useSelector } from 'react-redux'
 
 const menuStatus = ({