Eliminated Prop Drilling and Performance Optimization

[Abh1noob]

📌 Purpose

This PR implements a major architectural refactoring and performance optimization for the catalogue filtering system. It addresses two issues:

1. Eliminated Prop Drilling: Removed excessive prop passing (17 props!) by implementing React Context pattern
2. Performance Optimization: Fixed wasteful API re-fetching on every filter change, reducing response time.

Problems Solved

Before this PR:

• SideBar component received 17 props from CatalogueContent (extreme prop drilling)
• Every filter change triggered an unnecessary API call
• Code was difficult to maintain with a lot of state variables in one component

After this PR:

• SideBar has zero props - uses useFilters() hook instead
• Filters apply instantly with zero API calls
• No loading states or page flicker during filtering
• Clean separation of concerns: data fetching vs. data filtering
• Single source of truth for all filter logic

---

Corresponding issue:

closes #262
closes #304

---

🖼️ Showcase

there is no visual change

Architecture Flow

Before (Inefficient):

User applies filter → API call → Loading spinner → Page flicker → Results (200-500ms)

After (Optimized):

User applies filter → In-memory filtering → Instant results (<50ms)

---

🔧 Changes

Major Changes

1. Created FilterContext (src/context/filterContext.tsx)

• Centralized state management for all filter-related logic
• Exports useFilters() hook for consuming components
• Manages filter state, paper selection, pagination, and bulk operations
• Implements URL synchronization with router.replace() (non-navigating)

2. Refactored CatalogueContent (src/components/CatalogueContent.tsx)

• Eliminated local state variables - now uses FilterContext
• Separated useEffects: One for data fetching (subject changes), one for filtering (client-side)
• Wrapped in FilterProvider to provide context to child components
• Clean separation of concerns: fetching vs. filtering

3. Refactored SideBar (src/components/SideBar.tsx)

• Reduced from 15+ props to 0 props using useFilters() hook
• Completely self-contained component
• Works identically in desktop and mobile (Sheet drawer) views
• No code changes to UI logic. Just uses context instead of props

Technical Improvements

Performance Optimizations

• Separated data fetching from filtering
  • Fetch: Only when subject changes (API call)
  • Filter: Client-side on already-loaded data (instant)
• Changed URL updates from router.push() to router.replace({ scroll: false })
  • No navigation triggers
  • No loading states
  • Preserves scroll position

Code Quality

• Single source of truth for filter state
• Eliminated prop drilling through component tree
• Easy to add new filters (just update context)
• Better developer experience

Files Modified

• Created: src/context/filterContext.tsx
• Modified: src/components/CatalogueContent.tsx
• Modified: src/components/SideBar.tsx

---

[abhitrueprogrammer]