added search response into searchmodal ui, restructured folders

2026-06-24 15:57:10 +02:00
parent a1ce085123
commit 6e3d3347e2
16 changed files with 110 additions and 34 deletions
@@ -0,0 +1,83 @@
+import { useEffect, useRef, useState, type SyntheticEvent } from 'react'
+import '../ui/Modal.scss'
+import { type PagedSearchResponse, type SearchResponse, type SearchRequest } from '../../types/search'
+import { search } from '../../api/searches'
+
+interface Props {
+  serviceType: string
+  label: string
+  appUrl: string
+  username: string
+  onClose: () => void
+}
+
+export function SearchModal({ serviceType, label, appUrl, username, onClose }: Readonly<Props>) {
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState<PagedSearchResponse<SearchResponse> | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const firstInputRef = useRef<HTMLInputElement>(null)
+
+  const dialogRef = useRef<HTMLDialogElement>(null)
+
+  useEffect(() => {
+    const dialog = dialogRef.current
+    if (!dialog) return
+
+    dialog.showModal()
+    firstInputRef.current?.focus()
+
+    const handleCancel = (e: Event) => {
+      e.preventDefault()
+      onClose()
+    }
+    dialog.addEventListener('cancel', handleCancel)
+    return () => dialog.removeEventListener('cancel', handleCancel)
+  }, [onClose])
+
+  const handleSubmit = async (e: SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setError(null)
+    setLoading(true)
+    try {
+      const req: SearchRequest = { appUrl, serviceType, username, query}
+      const res = await search(req)
+      console.log(req)
+      setResults(res)
+      console.log('results', results)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Search failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <dialog className='modal' ref={dialogRef}>
+      <div className='modal__header'>
+        <h2 className='modal__title' id='modal-title'>Search in {label}</h2>
+        <button className='modal__close' onClick={onClose} aria-label='Close'>×</button>
+      </div>
+      <form className='modal__form' onSubmit={handleSubmit}>
+        <div className='modal__field'>
+          <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>
+      </form>
+      {results && (
+        <div className='modal__results'>
+          <p className='modal__results-count'>{results.totalElements}</p>
+          {results.content.map((item) => (<div key={item.id} className='modal__result-item'>
+            <p className='"modal__result-title'>{item.title}</p>
+            {item.description && <p className='modal__result-desc'>{item.description}</p>}
+
+          </div>))}
+        </div>
+      )}
+    </dialog>
+  )
+}