From 0ad136fcc6037bf121fdd90f94591cf5334e21e2 Mon Sep 17 00:00:00 2001
From: Mo Tarbin <mhed.t91@gmail.com>
Date: Thu, 24 Apr 2025 01:45:59 -0400
Subject: [PATCH] Refactor to use @tanstack/react-query for data fetching in
 various components

---
 src/App.jsx                            |  2 +-
 src/queries/ResourceQueries.jsx        |  8 +++++---
 src/queries/UserQueries.jsx            | 22 ++++++++++++----------
 src/views/Labels/LabelQueries.jsx      |  7 ++++---
 src/views/Labels/LabelView.jsx         |  2 +-
 src/views/Modals/Inputs/LabelModal.jsx |  4 ++--
 6 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 4f66e0f..bd3f0e8 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,8 +1,8 @@
 import NavBar from '@/views/components/NavBar'
 import { Button, Snackbar, Typography, useColorScheme } from '@mui/joy'
 import Tracker from '@openreplay/tracker'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
-import { QueryClient, QueryClientProvider } from 'react-query'
 import { Outlet } from 'react-router-dom'
 import { useRegisterSW } from 'virtual:pwa-register/react'
 import { registerCapacitorListeners } from './CapacitorListener'
diff --git a/src/queries/ResourceQueries.jsx b/src/queries/ResourceQueries.jsx
index c310631..e09e61e 100644
--- a/src/queries/ResourceQueries.jsx
+++ b/src/queries/ResourceQueries.jsx
@@ -1,9 +1,11 @@
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { GetResource } from '../utils/Fetcher'
 
 export const useResource = () => {
-  const { data, isLoading, error } = useQuery('resource', GetResource, {
-    cacheTime: 1000 * 60 * 10, // 1 minute
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['resource'],
+    queryFn: GetResource,
+    cacheTime: 1000 * 60 * 10, // 10 minutes
   })
   return { data, isLoading, error }
 }
diff --git a/src/queries/UserQueries.jsx b/src/queries/UserQueries.jsx
index d5f2d56..c37428b 100644
--- a/src/queries/UserQueries.jsx
+++ b/src/queries/UserQueries.jsx
@@ -1,21 +1,23 @@
-import { useState } from 'react'
-import { useQuery } from 'react-query'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { GetAllCircleMembers, GetAllUsers } from '../utils/Fetcher'
 
 export const useAllUsers = () => {
-  return useQuery('allUsers', GetAllUsers)
+  return useQuery({
+    queryKey: ['allUsers'],
+    queryFn: GetAllUsers,
+  })
 }
 
 export const useCircleMembers = () => {
-  const [refetchKey, setRefetchKey] = useState(0)
+  const queryClient = useQueryClient()
+
+  const { data, error, isLoading, refetch } = useQuery({
+    queryKey: ['allCircleMembers'],
+    queryFn: GetAllCircleMembers,
+  })
 
-  const { data, error, isLoading, refetch } = useQuery(
-    ['allCircleMembers', refetchKey],
-    GetAllCircleMembers,
-  )
   const handleRefetch = () => {
-    setRefetchKey(prevKey => prevKey + 1)
-    refetch()
+    queryClient.invalidateQueries(['allCircleMembers'])
   }
 
   return { data, error, isLoading, handleRefetch }
diff --git a/src/views/Labels/LabelQueries.jsx b/src/views/Labels/LabelQueries.jsx
index ebf587e..5328f63 100644
--- a/src/views/Labels/LabelQueries.jsx
+++ b/src/views/Labels/LabelQueries.jsx
@@ -1,8 +1,9 @@
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { GetLabels } from '../../utils/Fetcher'
-
 export const useLabels = () => {
-  return useQuery('labels', GetLabels, {
+  return useQuery({
+    queryKey: ['labels'],
+    queryFn: GetLabels,
     initialData: [],
   })
 }
diff --git a/src/views/Labels/LabelView.jsx b/src/views/Labels/LabelView.jsx
index 4bc83fb..4291133 100644
--- a/src/views/Labels/LabelView.jsx
+++ b/src/views/Labels/LabelView.jsx
@@ -15,7 +15,7 @@ import { useLabels } from './LabelQueries'
 
 // import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { Add } from '@mui/icons-material'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 import { useNavigate } from 'react-router-dom'
 import { getTextColorFromBackgroundColor } from '../../utils/Colors'
 import { DeleteLabel } from '../../utils/Fetcher'
diff --git a/src/views/Modals/Inputs/LabelModal.jsx b/src/views/Modals/Inputs/LabelModal.jsx
index 2804d1f..2cf3b04 100644
--- a/src/views/Modals/Inputs/LabelModal.jsx
+++ b/src/views/Modals/Inputs/LabelModal.jsx
@@ -11,7 +11,7 @@ import {
 } from '@mui/joy'
 import { useEffect, useState } from 'react'
 
-import { useMutation, useQueryClient } from 'react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 import LABEL_COLORS from '../../../utils/Colors.jsx'
 import { CreateLabel, UpdateLabel } from '../../../utils/Fetcher'
 import { useLabels } from '../../Labels/LabelQueries'
@@ -109,7 +109,7 @@ function LabelModal({ isOpen, onClose, label }) {
               <Typography
                 startDecorator={
                   <Box
-                    className='h-4 w-4'
+                    className='size-4'
                     borderRadius={10}
                     sx={{ background: selected.value }}
                   />