All files / src/components FlyerCountDisplay.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
 
 
 
 
 
 
 
1x
3x
 
3x
1x
 
 
2x
1x
 
 
1x
 
 
// 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>;
};