useSubscriptionInvoices
The useSubscriptionInvoices
hook provides a convenient way to fetch and paginate a list of invoices associated with a specific subscription from Firebase Firestore. It manages loading states, errors, and supports infinite scrolling by providing a loadMore
function.
Features
- Invoice Fetching: Retrieves invoices from the
invoices
sub-collection of a given subscription. - Pagination: Supports pagination with a configurable page size, allowing for efficient loading of large invoice lists.
- Infinite Scrolling Support: Provides a
loadMore
function to fetch subsequent pages of invoices, enabling infinite scrolling UIs. - Loading and Error Handling: Exposes
loading
anderror
states to manage UI feedback during data fetching. hasMore
Indicator: Indicates whether there are more invoices to load.
Props (Parameters)
subscriptionId
: A string representing the ID of the subscription for which to fetch invoices.pageSize
: Optional number specifying how many invoices to fetch per page. Defaults to10
.
Returns
An object with the following properties:
invoices
: An array ofInvoice
objects representing the fetched invoices.loading
: A boolean indicating whether invoices are currently being loaded.error
: AnError
object if an error occurred during fetching, otherwisenull
.hasMore
: A boolean indicating whether there are more invoices available to load.loadMore
: An asynchronous function that, when called, attempts to load the next page of invoices.
Hooks Used
useState
,useEffect
: To manage the state of invoices, loading, error,hasMore
, and the last fetched document for pagination.getFirestore
,collection
,query
,orderBy
,limit
,getDocs
,startAfter
: Firebase Firestore functions used for querying invoice data.
Firebase Interaction
This hook interacts with Firebase Firestore:
- It queries the
invoices
sub-collection within a specific subscription document (subscriptions/{subscriptionId}/invoices
). - Invoices are ordered by their
created
timestamp in descending order. - It uses
limit
for initial fetching andstartAfter
for subsequentloadMore
calls to implement cursor-based pagination.
Usage
The useSubscriptionInvoices
hook is typically used in components that display a list of invoices, such as an InvoiceList
component.
import React from 'react';
import { useSubscriptionInvoices } from '@fireact.dev/app'; // Assuming the hook is imported
import { useSubscription } from '@fireact.dev/app'; // Assuming useSubscription is available for subscriptionId
function MyInvoiceListDisplay() {
const { subscription } = useSubscription(); // Get current subscription ID from context
const { invoices, loading, error, hasMore, loadMore } = useSubscriptionInvoices({
subscriptionId: subscription?.id || '', // Pass the subscription ID
pageSize: 5 // Optional: fetch 5 invoices per page
});
if (!subscription?.id) {
return <div>Please select a subscription to view invoices.</div>;
}
if (loading && invoices.length === 0) {
return <div>Loading invoices...</div>;
}
if (error) {
return <div>Error: {error.message}</div>;
}
return (
<div>
<h2>Your Invoices</h2>
<ul>
{invoices.map(invoice => (
<li key={invoice.id}>
Invoice ID: {invoice.id}, Amount: {invoice.amount_due}, Status: {invoice.status}
</li>
))}
</ul>
{hasMore && (
<button onClick={loadMore} disabled={loading}>
{loading ? 'Loading more...' : 'Load More Invoices'}
</button>
)}
{!hasMore && invoices.length > 0 && <div>No more invoices.</div>}
{invoices.length === 0 && !loading && <div>No invoices found for this subscription.</div>}
</div>
);
}
export default MyInvoiceListDisplay;
Important Notes
- This hook requires a valid
subscriptionId
to fetch data. Ensure it’s provided, typically from aSubscriptionContext
. - The
Invoice
type is expected to be defined in the@fireact.dev/app/types
module. - The
loadMore
function should be called when the user scrolls to the end of the list or clicks a “Load More” button.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.