need4deed-org / need4deed-org/fe

refactor: share the opportunity list filter wiring instead of hand-copying it per filter

Open
#970 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
3
Forks
24
Avg merge
2d 16h
Merged PRs (30d)
44

Description

What's wrong

Every new filter on the opportunity list has to be added by hand in six different files. Nothing in the type system catches a missed one, so forgetting a step doesn't fail the build, it just silently doesn't work at runtime. I hit this adding the skills filter in #936, and @arturasmckwcz asked me to backlog it.

What needs to happen

One config where a filter is defined once, so adding the next one is a single entry instead of six edits in six files.

The six sites a new filter has to touch.
  • Opportunities/Filters/types.ts — add the key to OpportunityCardsFilter
  • Opportunities/Filters/constants.ts — add the empty default
  • Opportunities.tsx — createFilterFromOption entry
  • Opportunities/Filters/helpers.ts — the filter block, the return, and the flat array
  • Opportunities/Filters/FiltersContent.tsx — destructure plus one more AccordionFilter
  • Opportunities/helpers.ts — serialize and deserialize
What I tried

I tried it on #936 and reverted it. OpportunityCardsFilter keys search, district, language and availability off QueryParamsKeys, but activity and skill off EntityTableName. The two consumers want different key types:

  • generateNestedFilterControlItems wants keyof OpportunityCardsFilter
  • createFilterFromOption wants keyof ApiOptionLists

So one config value can't satisfy both while the interface mixes the two enums. I didn't find a way around it without changing the filter type itself, which felt out of scope for PR #936

Question: should this cover Volunteers and Agents too?

Volunteers/helpers.ts and Agents/helpers.ts have the same shape of hand-written blocks. Should the config cover all three lists, or just Opportunities for now?
Refs #936

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by comparing the six Opportunities files listed in the issue, then trace how OpportunityCardsFilter, QueryParamsKeys, EntityTableName, and ApiOptionLists flow through filter creation and serialization. Check Volunteers/helpers.ts and Agents/helpers.ts to resolve the intended scope. Done means a new Opportunities filter has one configuration entry and remains wired through rendering, filtering, serialization, and deserialization.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.