Components

Component Structure Overview

The notification system is built with a modular component architecture:

OrganisationLogin/Notification/
├── Container/
│   └── index.tsx                    # Main container (smart component)
├── Components/
│   ├── Filters/
│   │   └── index.tsx                # Filter controls
│   ├── List/
│   │   └── index.tsx                # Notification list grid
│   ├── ShowNotificationAlert/
│   │   └── index.tsx                # In-app notification alert
│   └── CriticalNotification/
│       └── CriticalNotificationForm.tsx
├── Utils/
│   ├── helpers.ts                   # API and utility functions
│   ├── constant.ts                  # Constants and configuration
│   └── interface.ts                 # TypeScript interfaces
├── styles.module.scss               # Scoped styles
└── index.tsx                        # Component export

Main Components

1. Notification Container

File: src/components/OrganisationLogin/Notification/Container/index.tsx

GitHub: View on GitHub

The main container component that manages state and orchestrates child components.

Key Features:

• Manages notification state from Redux
• Handles notification clicks and marks them as read
• Filters and paginates notifications
• Displays loading states and unread badges
• Integrates with Firebase messaging service

2. Filters Component

File: src/components/OrganisationLogin/Notification/Components/Filters/index.tsx

GitHub: View on GitHub

Allows users to filter notifications by status, date range, and search text.

Key Features:

• Filter by read/unread/all status
• Date range selection (today, last 7 days, last 30 days, all time)
• Debounced search input for performance
• Real-time filter updates

3. Notification List Component

File: src/components/OrganisationLogin/Notification/Components/List/index.tsx

GitHub: View on GitHub

Displays notifications in a grid/list format using AG Grid.

Key Features:

• AG Grid integration for powerful data display
• Sortable and filterable columns
• Custom cell renderers for title, message, date, and status
• Pagination support
• Responsive column widths
• Empty state handling

4. Show Notification Alert Component

File: src/components/OrganisationLogin/Notification/Components/ShowNotificationAlert/index.tsx

GitHub: View on GitHub

Displays a toast-like alert when a new notification arrives.

Key Features:

• Auto-dismissing toast notifications
• Customizable display duration
• Smooth animations
• Optional dismiss callback
• Non-intrusive positioning

5. Critical Notification Form Component

File: src/components/OrganisationLogin/Notification/Components/CriticalNotification/CriticalNotificationForm.tsx

GitHub: View on GitHub

Handles critical/urgent notifications with special styling and actions.

Key Features:

• Prominent red styling for critical alerts
• Expandable/collapsible notification detail
• "Review Now" action button
• Dismiss functionality
• Emergency alert emoji indicator (🚨)

Component Integration Example

Here's how to integrate the notification components in your main app:

import NotificationContainer from './components/OrganisationLogin/Notification/Container';

function Dashboard() {
  const handleNotificationClick = (notificationId: number) => {
    console.log('Notification clicked:', notificationId);
    // Handle navigation or other actions
  };

  return (
    <div>
      <NotificationContainer onNotificationClick={handleNotificationClick} />
      {/* Other dashboard components */}
    </div>
  );
}

Component Props Reference

NotificationContainer Props

Filters Props

NotificationList Props

ShowNotificationAlert Props

CriticalNotificationForm Props

Styling

All components use the global styles defined in styles.module.scss. Key CSS classes:

• .notificationContainer - Main container wrapper
• .header - Header section with title and badge
• .filters - Filter controls section
• .notificationList - List grid container
• .notificationAlert - In-app alert/toast
• .loader - Loading spinner
• .pagination - Pagination controls

Best Practices

1. Memoization: Use useMemo for expensive computations (like column definitions)
2. Callbacks: Properly debounce search inputs to avoid excessive API calls
3. Accessibility: Include aria-label attributes on form elements
4. Error Handling: Display user-friendly error messages
5. Performance: Lazy load components if needed using React.lazy()
6. Testing: Write unit tests for each component in isolation

Next Steps: Continue to Redux State to understand state management.