Skip to content

refactor(frontend): split SearchaliciousSearchMixin into smaller mixins#398

Open
SaitejaKommi wants to merge 1 commit intoopenfoodfacts:mainfrom
SaitejaKommi:refactor/frontend-search-controller
Open

refactor(frontend): split SearchaliciousSearchMixin into smaller mixins#398
SaitejaKommi wants to merge 1 commit intoopenfoodfacts:mainfrom
SaitejaKommi:refactor/frontend-search-controller

Conversation

@SaitejaKommi
Copy link
Copy Markdown

Summary

This PR addresses technical debt in the frontend search controller by splitting the monolithic SearchaliciousSearchMixin into smaller, logically separated mixins.

The refactor improves separation of concerns by isolating state management, DOM interactions, and API handling, while preserving the existing external behavior and controller composition.


Related Issue

Fixes #397


What Changed

Extracted State Management

Created search-ctl-state.ts containing SearchaliciousStateMixin, responsible for:

  • @property decorators
  • @state decorators
  • Internal state coordination
  • Preact signal updates

Extracted DOM Interactions

Created search-ctl-dom.ts containing SearchaliciousDomMixin, responsible for:

  • Facet element queries
  • Chart lookups
  • Sort element handling
  • DOM-derived search parameter helpers

Extracted API Handling

Created search-ctl-api.ts containing SearchaliciousApiMixin, responsible for:

  • search() request flow
  • Dynamic parameter construction
  • Fetch lifecycle handling
  • Response state updates

Recomposed Controller

Updated search-ctl.ts to compose the new mixins in sequence:

SearchaliciousApiMixin(
  SearchaliciousDomMixin(
    SearchaliciousStateMixin(
      SearchaliciousHistoryMixin(
        EventRegistrationMixin(superClass)
      )
    )
  )
)

Affected Files

  • search-ctl.ts
  • search-ctl-state.ts
  • search-ctl-dom.ts
  • search-ctl-api.ts

Testing

Verification gateway executed successfully:

  • Backend unit tests ✅
  • Backend integration tests ✅
  • Frontend build/tests (dev) ✅
  • Frontend build/tests (prod) ✅

Notes

This is a structural frontend refactor focused on maintainability, readability, and cleaner separation of concerns with no intended runtime behavior changes.

Decoupled the monolithic frontend search controller mixin into:
- SearchaliciousStateMixin: handles state, properties and signal updates
- SearchaliciousDomMixin: handles DOM querying (facets, charts, sorts)
- SearchaliciousApiMixin: handles search API fetching and params building

Composed them back in search-ctl.ts. Validated with TypeScript build and passing tests.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Backlog (ready for dev)

Development

Successfully merging this pull request may close these issues.

Refactor: SearchaliciousSearchMixin is too broad and lacks separation of concerns

1 participant