کشوی موجودیت با نشانی (EntityDrawer)

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

type Account = { id: string; name: string; status: string }

async function getAccounts(): Promise<Account[]> {
  const response = await fetch('/api/accounts')
  if (!response.ok) throw new Error(`accounts: ${response.status}`)
  return response.json()
}
async function getAccount(id: string): Promise<Account> {
  const response = await fetch(`/api/accounts/${id}`)
  if (!response.ok) throw new Error(`account: ${response.status}`)
  return response.json()
}

export function AccountsScreen() {
  const list = useAsync<Account[]>()
  const loadList = React.useCallback(() => list.run(() => getAccounts()), [list.run])
  React.useEffect(() => {
    loadList()
  }, [loadList])
  const rows = list.data ?? []
  const drawer = useEntityDrawer({ param: 'account', ids: rows.map((row) => row.id) })
  const account = useAsync<Account>()
  const runAccount = account.run
  const loadAccount = React.useCallback(() => {
    if (drawer.openId) runAccount(() => getAccount(drawer.openId!))
  }, [runAccount, drawer.openId])
  React.useEffect(() => {
    loadAccount()
  }, [loadAccount])
  const columns = [
    {
      id: 'name',
      header: 'حساب',
      cell: (row: Account) => (
        <Button variant="link" {...drawer.triggerProps(row.id)}>
          {row.name}
        </Button>
      ),
    },
    { id: 'status', header: 'وضعیت', cell: (row: Account) => row.status },
  ]
  return (
    <ListPage
      title="حساب‌ها"
      state={pageState({
        data: list.data,
        isLoading: list.isLoading,
        error: list.error,
        onRetry: loadList,
        emptyCopy: { title: 'هنوز حسابی افزوده نشده است' },
      })}
    >
      <DataTable columns={columns} data={rows} />
      <EntityDrawer
        drawer={drawer}
        title={rows.find((row) => row.id === drawer.openId)?.name ?? 'حساب'}
        state={pageState({
          data: account.data,
          isLoading: account.isLoading,
          error: account.error,
          onRetry: loadAccount,
        })}
      >
        <p>{account.data?.status}</p>
      </EntityDrawer>
    </ListPage>
  )
}