23 lines
681 B
TypeScript
23 lines
681 B
TypeScript
// src/components/FlyerCountDisplay.tsx
|
|
import React from 'react';
|
|
import { ErrorDisplay } from './ErrorDisplay';
|
|
import { useFlyers } from '../hooks/useFlyers';
|
|
|
|
/**
|
|
* A simple component that displays the number of flyers available.
|
|
* It demonstrates consuming the useFlyers hook for its state.
|
|
*/
|
|
export const FlyerCountDisplay: React.FC = () => {
|
|
const { flyers, isLoadingFlyers: isLoading, flyersError: error } = useFlyers();
|
|
|
|
if (isLoading) {
|
|
return <div data-testid="loading-spinner">Loading...</div>;
|
|
}
|
|
|
|
if (error) {
|
|
return <ErrorDisplay message={error.message} />;
|
|
}
|
|
|
|
return <div data-testid="flyer-count">Number of flyers: {flyers.length}</div>;
|
|
};
|