refactor: replace custom notification context with sonner

Habeeb Unissarequested to merge
sonner into develop

Overview

This MR refactors the existing custom notification system by replacing the NotificationContext implementation with the Sonner library. The goal is to simplify the notification handling, reduce maintenance overhead, and leverage a well-maintained, accessible, and lightweight solution.

What does this MR do and why?

Changes Made

❌ Removed: src/contexts/NotificationContext.tsx useAlertReplacement.ts Notification provider and portal logic ✅ Added: Sonner integration (toast API + ) 🔄 Updated: All usages of: useNotification() showSuccess, showError, showInfo, showWarning Replaced with: toast.success(), toast.error(), toast.info(), toast.warning() 🧪 Test Updates: Removed mocks for custom notification hooks Added global mock for Sonner toast Fixed failing tests caused by refactor

Technical Details

Root cause: Custom notification system functionality already available in libraries Increased complexity and maintenance cost Solution: Replaced context-based system with function-based Sonner API Centralized notification rendering using Architecture decision: Moved from Context + Hook pattern → Stateless utility-based approach

Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to change)
  • 📝 Documentation update
  • 🎨 UI/UX improvement
  • ♻️ Refactor (no functional changes)
  • ⚡ Performance improvement
  • 🧪 Test update
  • 🔧 Configuration change
  • 🚨 Security fix

Related Issues / References

Test Cases Covered:

Scenario Expected Result Status
Success notification toast.success displayed ✅
Error notification toast.error displayed ✅
Info/warning messages correct toast shown ✅
Tests using mocks pass with Sonner mock ✅

Code Quality Checklist

Code Standards

  • Code follows project conventions (naming, structure, formatting)
  • No console.log() or debugger statements left in code
  • No unused imports, variables, or functions
  • No duplicate code and use of existing components for reusability
  • i18n check passed with no hardcoded strings in codebase for i18n support
  • TypeScript types are properly defined (no any unless justified)
  • ESLint and Prettier checks pass

React Best Practices

  • Components are properly split and single-responsibility
  • Hooks follow rules (no conditional hooks, proper dependencies)
  • No unnecessary re-renders (memoization used where needed)

Component Patterns

  • Tailwind classes follow utility-first approach
  • Accessibility attributes included (aria-*, role, etc.)

Error Handling

  • Errors are caught and handled gracefully
  • User-friendly error messages displayed
  • Errors are being toasted properly
  • Network failures handled appropriately

Documentation

  • README.md updated (if setup steps changed)
  • .env.example updated (if new env vars added)
  • CHANGELOG.md updated (if applicable)

Additional Notes

This refactor significantly reduces code complexity and improves maintainability Aligns with best practices by using well-supported external libraries instead of custom implementations No functional changes expected from user perspective

MR Acceptance Checklist

This MR has been verified for:

Code quality Test stability Functional correctness Maintainability improvements

Edited by Habeeb Unissa

Merge request reports