added new endpoint for top bar data

src/component/home/TopBar.jsx

@@ -1,20 +1,37 @@
-import React from 'react'
-import { useQuery } from '@tanstack/react-query'
+import React, {useEffect} from 'react'
+import { useMutation } from '@tanstack/react-query'
 import { topBar } from '../../services/services'
-import queryKeys from '../../services/queryKeys'
 
 export default function TopBar() {
 
-    const {data, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.topBar,
-        queryFn: () => topBar()
-    })
+  const topBarData = useMutation({
+    mutationFn: (reqData) => {
+        return topBar(reqData)
+    },
+    onError: (error) => {
+        console.log(error)
+        location.reload();
+    },
+      onSuccess: (res) => {
+        if(res?.data?.resultCode != '0'){
+            throw({message: 'Something went wrong'})
+        }
+    }
+  })
 
-    const topData = data?.data?.bar_data?.top_bar
+    useEffect(()=>{
+      let reqData = {
+        token: localStorage.getItem('token'), // USER TOKEN
+        uid: localStorage.getItem('uid') // USER UID
+      }
+      topBarData.mutate(reqData)
+    },[])
+    
+    const data = topBarData?.data?.data?.top_bar // top bar data
 
   return (
     <>
-        {isFetching ? 
+        {topBarData.isPending ? 
         <>
             <div className="col-12">
                 <div className="card p-4">
@@ -22,15 +39,15 @@ export default function TopBar() {
                 </div>
             </div>
         </>
-        : isError ?
+        : topBarData.error ?
         <div className="col-12">
             <div className="card p-4">
-                <p className='text-danger'>{error.message}</p>
+                <p className='text-danger'>{topBarData.error.message}</p>
             </div>
         </div>
         :
         <>
-        {topData && topData?.map((item, index)=>{
+        {data && data?.map((item, index)=>{
             let textColor = item?.description == 'Contacts' ? 'text-danger' : item?.description == 'Site Traffic' ? 'text-primary' : item?.description == 'Appointments' ? 'text-orange' : 'text-success'
             return (
             <div key={item.id + index} className="col-sm-6 col-xxl-3">