Show user invokers in a table

import CardContent from '@mui/material/CardContent'

import CircularProgress from '@mui/material/CircularProgress'

import Alert from '@mui/material/Alert'

import List from '@mui/material/List'

import ListItem from '@mui/material/ListItem'

import ListItemText from '@mui/material/ListItemText'

import Typography from '@mui/material/Typography'

import Button from '@mui/material/Button'

import Dialog from '@mui/material/Dialog'

import TextField from '@mui/material/TextField'

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'

import { getMyInvokers, onboardInvoker } from 'src/configs/apiService'

import Link from 'next/link'

import ListItemButton from '@mui/material/ListItemButton'

import { errorMessage, retryServerErrorsOnly } from 'src/configs/queryHelpers'

import { useAuth } from 'src/hooks/useAuth'

import EntityTable from 'src/views/me/EntityTable'

const MY_INVOKERS_KEY = ['my-invokers']

const EMPTY_FORM = { apiInvokerInformation: '', notificationDestination: '' }

const InvokerList = () => {

  const { user } = useAuth()

  const { data, isPending, isError, error } = useQuery({

    queryKey: MY_INVOKERS_KEY,

    queryFn: getMyInvokers,

    retry: retryServerErrorsOnly

  })

  // Derived during render: `data` is undefined until the first response arrives.

  const invokers = data?.invokers ?? []

  const rows = (data?.invokers ?? []).map(invoker => ({

    id: invoker.apiInvokerId,

    date: invoker.onboardedAt

  }))

  if (isPending) {

    return (

    return <Alert severity='error'>{errorMessage(error, 'Could not load your invokers.')}</Alert>

  }

  if (invokers.length === 0) {

  if (rows.length === 0) {

    return <Typography>{"You don't have an invoker yet."}</Typography>

  }

  return (

    <List>

      {invokers.map(id => (

        <ListItem key={id} disablePadding>

          <ListItemButton component={Link} href={`/me/invokers/${encodeURIComponent(id)}`}>

            <ListItemText primary={id} />

          </ListItemButton>

        </ListItem>

      ))}

    </List>

    <EntityTable

      rows={rows}

      idLabel='Invoker ID'

      owner={user?.username}

      hrefFor={id => `/me/invokers/${encodeURIComponent(id)}`}

    />

  )

}