Now uses ApiContext

src/components/Dashboard/context/SpotlightContext.jsx

@@ -14,7 +14,8 @@ import {
   useEffect,
   useState,
   useRef,
-  createElement
+  createElement,
+  useContext
 } from 'react'
 import axios from 'axios'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -29,6 +30,8 @@ import {
   getModelByPrefix
 } from '../../../database/ObjectModels'
 import InfoCircleIcon from '../../Icons/InfoCircleIcon'
+import { ApiServerContext } from './ApiServerContext'
+import { AuthContext } from './AuthContext'
 
 const SpotlightContext = createContext()
 
@@ -41,6 +44,8 @@ const SpotlightProvider = ({ children }) => {
   const [listData, setListData] = useState([])
   const [messageApi, contextHolder] = message.useMessage()
   const [inputPrefix, setInputPrefix] = useState({ prefix: '', mode: null })
+  const { fetchSpotlightData } = useContext(ApiServerContext)
+  const { token } = useContext(AuthContext)
 
   // Refs for throttling/debouncing
   const lastFetchTime = useRef(0)
@@ -116,7 +121,7 @@ const SpotlightProvider = ({ children }) => {
       setLoading(true)
       setListData([])
 
-      let response
+      let data
 
       // Check if we have a prefix with ? mode (filter mode)
       if (inputPrefix && inputPrefix.mode === '?') {
@@ -128,37 +133,34 @@ const SpotlightProvider = ({ children }) => {
         // Parse the query parameters
         const params = new URLSearchParams(queryParams)
 
-        response = await axios.get(`${config.backendUrl}/spotlight/${prefix}`, {
+        // For ? mode, use axios directly with query params
+        const response = await axios.get(
+          `${config.backendUrl}/spotlight/${prefix}`,
+          {
             params: params,
             headers: {
-            Accept: 'application/json'
-          },
-          withCredentials: true
-        })
-      } else {
-        // For other modes (:, ^), use the original behavior
-        response = await axios.get(
-          `${config.backendUrl}/spotlight/${encodeURIComponent(searchQuery.trim())}`,
-          {
-            headers: {
-              Accept: 'application/json'
-            },
-            withCredentials: true
+              Accept: 'application/json',
+              Authorization: `Bearer ${token}`
+            }
           }
         )
+        data = response.data
+      } else {
+        // For other modes (:, ^), use fetchSpotlightData from ApiServerContext
+        data = await fetchSpotlightData(searchQuery.trim())
       }
 
       setLoading(false)
       // If the query contains a prefix mode character, and the response is an object, wrap it in an array
       if (
         /[:?^]/.test(searchQuery) &&
-        response.data &&
-        !Array.isArray(response.data) &&
-        typeof response.data === 'object'
+        data &&
+        !Array.isArray(data) &&
+        typeof data === 'object'
       ) {
-        setListData([response.data])
+        setListData([data])
       } else {
-        setListData(response.data)
+        setListData(data)
       }
 
       // Check if there's a pending query after this fetch completes
@@ -464,11 +466,22 @@ const SpotlightProvider = ({ children }) => {
                         align='center'
                         justify='space-between'
                       >
-                        <Flex gap={'small'} align='center'>
+                        <Flex
+                          gap={'small'}
+                          align='center'
+                          style={{ flexGrow: 1 }}
+                        >
                           {Icon ? <Icon style={{ fontSize: '20px' }} /> : null}
 
                           {item.name ? (
-                            <Text ellipsis style={{ maxWidth: 170 }}>
+                            <Text
+                              ellipsis
+                              style={{
+                                maxWidth: 170,
+                                flexGrow: 1,
+                                width: '100%'
+                              }}
+                            >
                               {item.name}
                             </Text>
                           ) : null}