Vue.js das progressive Framework für moderne UIs

'use client'
import { useEffect, useState } from 'react'
import { searchTopics, type Topic } from './search-source'

export function TopicSearch() {
  const [query, setQuery] = useState('')
  const [items, setItems] = useState<Topic[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')

  useEffect(() => {
    const controller = new AbortController()
    setLoading(true)
    setError('')
    const timer = setTimeout(async () => {
      try {
        const results = await searchTopics(query, { signal: controller.signal })
        if (!controller.signal.aborted) setItems(results)
      } catch {
        if (!controller.signal.aborted) setError('Die Suche ist nicht erreichbar.')
      } finally {
        if (!controller.signal.aborted) setLoading(false)
      }
    }, 250)
    return () => { clearTimeout(timer); controller.abort() }
  }, [query])

  return <section>
    <label>Thema suchen
      <input value={query} onChange={event => setQuery(event.target.value)} />
    </label>
    <div role="status" aria-live="polite" aria-busy={loading}>
      {loading ? <p>Suche läuft …</p> : error ? <p>{error}</p> :
        items.length === 0 ? <p>Keine passenden Themen.</p> :
        <ul>{items.map(item => <li key={item.id}>{item.title}</li>)}</ul>}
    </div>
  </section>
}

<script setup lang="ts">
import { ref, watch } from 'vue'
import { searchTopics, type Topic } from './search-source'

const query = ref('')
const items = ref<Topic[]>([])
const loading = ref(true)
const error = ref('')

watch(query, (value, _, onCleanup) => {
  const controller = new AbortController()
  loading.value = true
  error.value = ''
  const timer = setTimeout(async () => {
    try {
      const results = await searchTopics(value, { signal: controller.signal })
      if (!controller.signal.aborted) items.value = results
    } catch {
      if (!controller.signal.aborted) error.value = 'Die Suche ist nicht erreichbar.'
    } finally {
      if (!controller.signal.aborted) loading.value = false
    }
  }, 250)
  onCleanup(() => { clearTimeout(timer); controller.abort() })
}, { immediate: true })
</script>

<template>
  <section>
    <label>Thema suchen <input v-model="query" /></label>
    <div role="status" aria-live="polite" :aria-busy="loading">
      <p v-if="loading">Suche läuft …</p>
      <p v-else-if="error">{{ error }}</p>
      <p v-else-if="items.length === 0">Keine passenden Themen.</p>
      <ul v-else><li v-for="item in items" :key="item.id">{{ item.title }}</li></ul>
    </div>
  </section>
</template>

<script lang="ts">
import { searchTopics, type Topic } from './search-source'

let query = $state('')
let items = $state<Topic[]>([])
let loading = $state(true)
let error = $state('')

$effect(() => {
  const value = query // Abhängigkeit vor dem asynchronen Abruf lesen
  const controller = new AbortController()
  loading = true
  error = ''
  const timer = setTimeout(async () => {
    try {
      const results = await searchTopics(value, { signal: controller.signal })
      if (!controller.signal.aborted) items = results
    } catch {
      if (!controller.signal.aborted) error = 'Die Suche ist nicht erreichbar.'
    } finally {
      if (!controller.signal.aborted) loading = false
    }
  }, 250)
  return () => { clearTimeout(timer); controller.abort() }
})
</script>

<section>
  <label>Thema suchen <input bind:value={query} /></label>
  <div role="status" aria-live="polite" aria-busy={loading}>
    {#if loading}<p>Suche läuft …</p>
    {:else if error}<p>{error}</p>
    {:else if items.length === 0}<p>Keine passenden Themen.</p>
    {:else}<ul>{#each items as item (item.id)}<li>{item.title}</li>{/each}</ul>
    {/if}
  </div>
</section>