useTickets
Reactive list of the identified customer's tickets. Loading, error, and refetch baked in. Calls the chat client under the hood. The customer must be identified.
Usage
MyTickets.tsx
import { useTickets } from '@cstar.help/react';
export function MyTickets() {
// The identified customer's tickets. No filters: filter the array yourself.
const { tickets, isLoading, error, create, refresh } = useTickets();
if (isLoading) return <p>Loading...</p>;
if (error) return <p>Couldn't load. Try again?</p>;
return (
<div>
<button onClick={async () => {
await create({ subject: 'New question' });
// create() adds the new ticket to the list; refresh() refetches it
}}>
New ticket
</button>
<ul>
{tickets.map((t) => (
<li key={t.id}>{t.subject}</li>
))}
</ul>
</div>
);
}What it returns
tickets: array. Empty until the first fetch resolves.isLoading: boolean. True during the initial fetch and refetches.error: Error | null.create({ subject, message? }): Promise. Adds the new ticket to the top of the list.hasMore: boolean. True when there are more tickets to load.refresh(): Promise. Fetches the list again.