FEAT: Wipe Contacts table on ingest to prevent duplicates, and commit infinite scroll contacts list

gerbil-manager-web/src/pages/KontaktePage.tsx

@@ -1,35 +1,48 @@
-/** FEAT-2: Kontakte-Liste — Gridify-Namenssuche + Paging, Link auf Detailseite. */
-import { useState } from 'react'
+/** FEAT-2: Kontakte-Liste — Gridify-Namenssuche + Infinite Scroll, Link auf Detailseite. */
+import { useEffect, useRef, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { de } from '../strings/de'
 import { listContactsPaged } from '../api/contacts'
-import { condition, type GridifyQuery } from '../api/gridify'
-import { useApi } from '../hooks/useApi'
+import { condition } from '../api/gridify'
+import { useInfiniteList } from '../hooks/useInfiniteList'
 
 const PAGE_SIZE = 20
 
 export default function KontaktePage() {
   const t = de.pages.kontakte
   const [search, setSearch] = useState('')
-  const [page, setPage] = useState(1)
 
   const filter = search.trim()
     ? condition({ field: 'name', op: 'contains', value: search.trim() })
     : undefined
-  const query: GridifyQuery = { filter, orderBy: 'name', page, pageSize: PAGE_SIZE }
+  // Infinite scroll: one page at a time, accumulated. The trailing `id` makes the
+  // ordering a total order so OFFSET pagination never repeats/omits a row.
+  const list = useInfiniteList(
+    (page) => listContactsPaged({ filter, orderBy: 'name,id', page, pageSize: PAGE_SIZE }),
+    `${filter ?? ''}`,
+  )
+  const { items, total, hasMore, loading, loadingMore, loadMore } = list
 
-  const contacts = useApi(() => listContactsPaged(query), [filter, page])
-
-  const total = contacts.data?.totalCount ?? 0
-  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
-  const items = contacts.data?.items ?? []
+  const sentinelRef = useRef<HTMLDivElement | null>(null)
+  useEffect(() => {
+    const el = sentinelRef.current
+    if (!el) return
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasMore && !loading && !loadingMore) loadMore()
+      },
+      { rootMargin: '300px 0px' },
+    )
+    io.observe(el)
+    return () => io.disconnect()
+  }, [hasMore, loading, loadingMore, loadMore])
 
   return (
     <section className="page">
       <header className="page-head">
         <div>
           <h2>{t.title}</h2>
-          {contacts.data && (
+          {!loading && (
             <p className="muted">
               {total} {t.countLabel}
             </p>
@@ -46,27 +59,22 @@ export default function KontaktePage() {
           className="input"
           placeholder={t.searchPlaceholder}
           value={search}
-          onChange={(e) => {
-            setSearch(e.target.value)
-            setPage(1)
-          }}
+          onChange={(e) => setSearch(e.target.value)}
           aria-label={t.fields.name}
         />
       </div>
 
-      {contacts.loading && <p className="muted">{de.common.loading}</p>}
-      {contacts.error && (
+      {loading && <p className="muted">{de.common.loading}</p>}
+      {list.error && (
         <div className="alert alert--error">
-          <span>{contacts.error}</span>
-          <button type="button" className="btn" onClick={contacts.reload}>
+          <span>{list.error}</span>
+          <button type="button" className="btn" onClick={list.reload}>
             {de.common.retry}
           </button>
         </div>
       )}
 
-      {!contacts.loading && !contacts.error && items.length === 0 && (
-        <p className="muted">{t.empty}</p>
-      )}
+      {!loading && !list.error && items.length === 0 && <p className="muted">{t.empty}</p>}
 
       {items.length > 0 && (
         <ul className="card-list">
@@ -115,28 +123,12 @@ export default function KontaktePage() {
         </ul>
       )}
 
-      {totalPages > 1 && (
-        <nav className="pager" aria-label="Seitennavigation">
-          <button
-            type="button"
-            className="btn"
-            disabled={page <= 1}
-            onClick={() => setPage((p) => Math.max(1, p - 1))}
-          >
-            {de.common.previous}
-          </button>
-          <span className="muted">
-            {de.common.page} {page} {de.common.of} {totalPages}
-          </span>
-          <button
-            type="button"
-            className="btn"
-            disabled={page >= totalPages}
-            onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
-          >
-            {de.common.next}
-          </button>
-        </nav>
+      {/* Infinite-scroll sentinel + "loading more" indicator. */}
+      {hasMore && <div ref={sentinelRef} aria-hidden="true" style={{ height: 1 }} />}
+      {loadingMore && (
+        <p className="muted" style={{ textAlign: 'center', padding: '0.75rem 0' }}>
+          {de.common.loading}
+        </p>
       )}
     </section>
   )