Skip to content

Code Duplication Refactoring Summary

Overview

This refactoring addressed significant code duplication issues identified in the SonarQube report, reducing duplication from 13.3% to an estimated <5%.

Issues Addressed

1. Map Layer Components (82.3% and 79.7% duplication)

Files affected:

  • tracker-frontend/src/components/map/StorageLocationLayer.tsx
  • tracker-frontend/src/components/map/DeliveryLocationLayer.tsx

Solution:

  • Created generic LocationLayer.tsx component with TypeScript generics
  • Extracted configuration constants for different location types
  • Reduced both files from ~50 lines to ~10 lines each
  • Eliminated ~80% of duplicated code

2. Dashboard Context (25.0% duplication)

File affected:

  • tracker-frontend/src/features/dashboard/context/DashboardContext.tsx

Solution:

  • Created useFilteredData custom hook to extract filtering logic
  • Created usePagination custom hook for pagination logic
  • Created filterUtils.ts with reusable filtering functions
  • Reduced context file complexity significantly

New Files Created

1. tracker-frontend/src/components/map/LocationLayer.tsx

  • Generic component supporting both storage and delivery locations
  • Type-safe with TypeScript generics
  • Configurable styling and behavior
  • Single responsibility principle

2. tracker-frontend/src/features/dashboard/utils/filterUtils.ts

  • Reusable filtering functions
  • Generic text search utility
  • Location filtering by context
  • Sorting utilities
  • Statistics calculation

3. tracker-frontend/src/features/dashboard/hooks/useFilteredData.ts

  • Custom hook for complex filtering logic
  • Handles all data filtering scenarios
  • Memoized for performance
  • Type-safe interfaces

4. tracker-frontend/src/features/dashboard/hooks/usePagination.ts

  • Simple, reusable pagination logic
  • Generic implementation
  • Calculates total pages and paginated items

Quality Standards Applied

SonarQube Compliance

✅ Code Structure & Complexity:

  • Cyclomatic complexity ≤ 10 per function
  • Function parameters ≤ 7
  • Function length ≤ 15 lines (with documented exceptions)
  • Nesting depth ≤ 3 levels
  • No duplicate code blocks >3 lines
  • Single responsibility per function

✅ TypeScript Best Practices:

  • Proper type annotations throughout
  • Meaningful variable names
  • Constants extracted from magic numbers/strings
  • Readonly interfaces where appropriate

Trunk Integration

✅ Automated Quality Checks:

  • Prettier formatting applied
  • Import organization
  • ESLint compliance
  • Type checking passed

Benefits Achieved

  1. Reduced Duplication: From 13.3% to estimated <5%
  2. Improved Maintainability: Changes only need to be made in one place
  3. Better Type Safety: Consistent interfaces and proper TypeScript usage
  4. Enhanced Reusability: Generic components and utilities
  5. Lower Cognitive Complexity: Smaller, focused functions
  6. DRY Principle: Follows "Don't Repeat Yourself" guidelines

Performance Considerations

  • All filtering logic is memoized using useMemo
  • Custom hooks prevent unnecessary re-renders
  • Generic components maintain performance while reducing duplication
  • Pagination logic is optimized for large datasets

Future Maintenance

The refactored code is now:

  • Easier to test (smaller, focused functions)
  • Easier to modify (single source of truth)
  • More consistent (shared utilities)
  • Better documented (clear interfaces and comments)
  • Compliant with project quality standards

Files Modified Summary

New Files (4):

  • tracker-frontend/src/components/map/LocationLayer.tsx
  • tracker-frontend/src/features/dashboard/utils/filterUtils.ts
  • tracker-frontend/src/features/dashboard/hooks/useFilteredData.ts
  • tracker-frontend/src/features/dashboard/hooks/usePagination.ts

Modified Files (3):

  • tracker-frontend/src/components/map/StorageLocationLayer.tsx (simplified)
  • tracker-frontend/src/components/map/DeliveryLocationLayer.tsx (simplified)
  • tracker-frontend/src/features/dashboard/context/DashboardContext.tsx (refactored)

Fixed Files (1):

  • tracker-frontend/src/features/dashboard/components/StatusTimeline.tsx (syntax error)

This refactoring successfully addresses the code duplication issues while maintaining all functionality and improving code quality metrics across the board.