Add manual sync trigger to SearchModal

Wires the existing /sync endpoint to a "Refresh Data" button so Homebox data can be re-vectorized before searching, without waiting for it to be triggered automatically on login. Co-Authored-By: Claude Sonnet 5 <[email protected]>
2026-07-20 16:32:25 +02:00
parent bb7bef18d9
commit f2ab2b31ed
4 changed files with 108 additions and 60 deletions
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState, type SyntheticEvent } from 'react'
 import '../ui/Modal.scss'
-import { type PagedSearchResponse, type ServiceItem, type SearchRequest } from '../../types/search'
-import { search } from '../../api/searches'
+import { type PagedSearchResponse, type ServiceItem, type SearchRequest, type SyncRequest } from '../../types/search'
+import { syncVectorData, search } from '../../api/searches'
 import type { ServiceType } from '../../types/connection'

 interface Props {
@@ -17,9 +17,10 @@ export function SearchModal({ serviceType, label, appUrl, username, onClose }: R
  const [results, setResults] = useState<PagedSearchResponse<ServiceItem> | null>(null)
  
  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
+  const [searchError, setSearchError] = useState<string | null>(null)
+  const [syncError, setSyncError] = useState<string | null>(null)
  //TODO: implement aiSearch
-  const [aiSearch, setAiSearch] = useState(false);
+  const [aiSearch, setAiSearch] = useState(false)
  const firstInputRef = useRef<HTMLInputElement>(null)
  const dialogRef = useRef<HTMLDialogElement>(null)

@@ -40,16 +41,27 @@ export function SearchModal({ serviceType, label, appUrl, username, onClose }: R

  const handleSubmit = async (e: SyntheticEvent<HTMLFormElement>) => {
    e.preventDefault()
-    setError(null)
+    setSearchError(null)
    setLoading(true)
    try {
      const req: SearchRequest = { appUrl, serviceType, username, query, aiSearch}
      const res = await search(req)
-      console.log(req)
      setResults(res)
-      console.log('results', results)
    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Search failed')
+      setSearchError(err instanceof Error ? err.message : 'Search failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleSync = async () => {
+    setSyncError(null)
+    setLoading(true)
+    try {
+      const req: SyncRequest = { appUrl, serviceType, username}
+      await syncVectorData(req)
+    } catch (err) {
+      setSyncError(err instanceof Error ? err.message: 'Refreshing data failed')
    } finally {
      setLoading(false)
    }
@@ -66,10 +78,12 @@ export function SearchModal({ serviceType, label, appUrl, username, onClose }: R
          <input id='search' className='modal__input'
                  value={query} onChange={e => setQuery(e.target.value)} />
        </div>
-        {error && <p className='modal__error'>{error}</p>}
-        <button className='modal__submit' type='submit' disabled={loading}>
-          Search
-        </button>
+        {searchError && <p className='modal__error'>{searchError}</p>}
+        {syncError && <p className='modal__error'>{syncError}</p>}
+        <div className='modal__actions'>
+          <button className='modal__other' title={`Syncs your ${serviceType} database for vectorization`} type='button' disabled={loading} onClick={handleSync}>Refresh Data</button>
+          <button className='modal__submit' type='submit' disabled={loading}>Search</button>
+        </div>
      </form>
      {results && (
        <div className='modal__results'>