useAsync

'use client'
import * as React from 'react'
import { DataTable, useAsync, type DataTableColumn } from '@partodata/ui'
import { ListPage, pageState } from '@partodata/ui/templates'

type Source = { id: string; name: string }

// درخواست API اپ، در سطح ماژول (پس `load` پایین میان رندرها همان تابع می‌ماند)
async function getSources(q: string): Promise<Source[]> {
  const response = await fetch(`/api/sources?q=${encodeURIComponent(q)}`)
  if (!response.ok) throw new Error(`sources: ${response.status}`)
  return response.json()
}

const columns: DataTableColumn<Source>[] = [{ id: 'name', header: 'منبع', cell: (row) => row.name }]

export function Sources({ q }: { q: string }) {
  const { data, isLoading, error, run } = useAsync<Source[]>()
  // مقدارهای درخواست در خود فراخوانی، همان مقدارها در وابستگی‌ها
  const load = React.useCallback(() => run(() => getSources(q)), [run, q])
  React.useEffect(() => {
    load()
  }, [load])
  return (
    <ListPage
      title="منبع‌ها"
      state={pageState({ data, isLoading, error, onRetry: load, emptyCopy: { title: 'هنوز منبعی ثبت نشده است' } })}
    >
      <DataTable columns={columns} data={data ?? []} />
    </ListPage>
  )
}