344 dev make the filter buttons work by lyannne · Pull Request #355 · Code-4-Community/bcan

lyannne · 2026-03-13T06:47:00Z

ℹ️ Issue

Closes #344

📝 Description

Write a short summary of what you added. Why is it important? Any member of C4C should be able to read this and understand your contribution -- not just your team members.

Briefly list the changes made to the code:

Added methods to ProcessGrantData to support new filtering features
Added new mutators & actions & fields to the store
Made edits to FilterCard component to accommodate for both amount and date
Made default null instead of increasing for date and amount filters
Changed StatusDropdown component to contain just the dropdown so the button would be in the FilterBar component and match the rest of the buttons
Small styling fixes.

✔️ Verification

What steps did you take to verify your changes work? These should be clear enough for someone to be able to clone the branch and follow the steps themselves.

Provide screenshots of any new components, styling changes, or pages.

Test Changes

If your new feature required some test to be changed or added to fit the new functionality or changes please document these changes here.

N/A

🏕️ (Optional) Future Work / Notes

Notes:

Only one dropdown can show at a time! Clicking outside the dropdown will close it as well as clicking the button again.
If a button has an active sorting/filtering, it will remain highlighted to show there is something active with that category.

Questions:

The colors when clicking and unclicking the buttons are kind of ugly imo. If anyone has suggestions on what colors to make those, I'm more than happy to take it!
Alphabetical sorting cycles through 3 clicks (ascending, descending, neither). Not sure if there's a better way to implement this, since ascending and descending look the same, as the button is highlighted for both.
When grants are sorted/filtered should we change it so the the new grant on display is the first one in the new ordered/filtered list?
Made it so clicking "BCAN Eligible" only shows ones BCAN qualifies for; I hope that was the intended functionality 😅
I wish there were a way within the button to see if something is sorted ascending or descending, but it is one icon and having part of it be grey is kind of ugly; any thoughts?
Also noticed in the design, the status dropdown should have a clear all, but is that necessary if it's single selection? should that be changed to multi select? lmk!
Also, just to confirm, we don't care about filters/sorting persisting across reloads right?

…e-pr

…-make-the-filter-buttons-work

…lter-buttons-work

…e or amount

Copilot

Pull request overview

This PR enhances the grants page UX by introducing a new filter/sort control bar (status dropdown, “my grants”, eligibility, amount/date ranges) and wiring those controls into the existing MobX/Satchel grant processing pipeline.

Changes:

Replaced the old status/date filter UI with a new FilterBar that supports additional filters and sorting.
Extended grant filtering logic (ProcessGrantData + grantFilters) to include eligibility, amount range, and “my grants” (user email) filtering.
Added new Satchel store fields/actions/mutators to track the additional filter state.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
frontend/src/main-page/grants/GrantPage.tsx	Integrates new `FilterBar`, adds auth-based redirects, and adds a bell button in-page
frontend/src/main-page/grants/grant-list/GrantCard.tsx	Adjusts eligibility badge z-index class
frontend/src/main-page/grants/filter-bar/StatusDropdown.tsx	Adds a new status selection dropdown UI
frontend/src/main-page/grants/filter-bar/processGrantData.ts	Applies new filters (eligible, amount range, user email) to grant processing
frontend/src/main-page/grants/filter-bar/grantFilters.ts	Adds `eligibleFilter`, `amountRangeFilter`, and `userEmailFilter` predicates
frontend/src/main-page/grants/filter-bar/FilterBar.tsx	Implements the new filtering/sorting control bar UI and store wiring
frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx	Generalizes range filtering card to support date/number ranges + direction
frontend/src/external/bcanSatchel/store.ts	Adds new filter fields to the app store and persists `emailFilter`
frontend/src/external/bcanSatchel/mutators.ts	Adds mutators for the new filter actions
frontend/src/external/bcanSatchel/actions.ts	Adds actions for new filters and allows `updateSort(null)`

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

frontend/src/main-page/grants/GrantPage.tsx

frontend/src/main-page/grants/grant-list/GrantCard.tsx

frontend/src/main-page/grants/filter-bar/StatusDropdown.tsx

frontend/src/external/bcanSatchel/store.ts

frontend/src/external/bcanSatchel/mutators.ts

prooflesben

The arrows when sorting alphabetically do not change depending on what direction we are sorting. Also we might want to have 3 clicks on that button to go from up alphabetical -> down alphabetical -> no alphabetical sort.

In regards to the arrows we might want to find a way to have the arrow direction reflect which way we are sorting for the other buttons as well such as due date and

I would also change the specific date to use the css built in date picker instead of having the user put in the number.

lyannne · 2026-03-13T22:20:43Z

The arrows when sorting alphabetically do not change depending on what direction we are sorting. Also we might want to have 3 clicks on that button to go from up alphabetical -> down alphabetical -> no alphabetical sort.

In regards to the arrows we might want to find a way to have the arrow direction reflect which way we are sorting for the other buttons as well such as due date and

I would also change the specific date to use the css built in date picker instead of having the user put in the number.

The current behavior of the alphabetical button is the 3 clicks, so i assume that needs no changes. The design has the icon on those buttons as the both the up & down triangles if ykwim, so unless we change that to have an up arrow if its ascending and down for descending, not sure if its possible. should i do that?

janekamata · 2026-03-15T03:08:47Z

Some of this code looks kind of outdated. It might be good to merge main into this before merging this pr

…lter-buttons-work

lyannne · 2026-03-15T04:22:01Z

Some of this code looks kind of outdated. It might be good to merge main into this before merging this pr

should be up to date now! thanks jane :)

janekamata · 2026-03-15T04:23:17Z

Some of this code looks kind of outdated. It might be good to merge main into this before merging this pr

should be up to date now! thanks jane :)

Actually I think it was fine looking it over. My current branch is just a lot further ahead because I've been working on it for three weeks taking spring break into account, so no worries. Thanks for doing it though

janekamata

Few comments but overall good job. Thanks for deleting the unused files. I didn't review the full pr before when I made that comment before so this is my actual review

frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx

frontend/src/main-page/grants/filter-bar/FilterBar.tsx

frontend/src/main-page/grants/filter-bar/StatusDropdown.tsx

frontend/src/main-page/grants/GrantPage.tsx

prooflesben · 2026-03-15T05:08:58Z

The arrows when sorting alphabetically do not change depending on what direction we are sorting. Also we might want to have 3 clicks on that button to go from up alphabetical -> down alphabetical -> no alphabetical sort.
In regards to the arrows we might want to find a way to have the arrow direction reflect which way we are sorting for the other buttons as well such as due date and
I would also change the specific date to use the css built in date picker instead of having the user put in the number.

The current behavior of the alphabetical button is the 3 clicks, so i assume that needs no changes. The design has the icon on those buttons as the both the up & down triangles if ykwim, so unless we change that to have an up arrow if its ascending and down for descending, not sure if its possible. should i do that?

Could you have the little up down icon change depending on which click it is? Just so a user could know how they are sorting

lyannne · 2026-03-15T05:11:41Z

The arrows when sorting alphabetically do not change depending on what direction we are sorting. Also we might want to have 3 clicks on that button to go from up alphabetical -> down alphabetical -> no alphabetical sort.
In regards to the arrows we might want to find a way to have the arrow direction reflect which way we are sorting for the other buttons as well such as due date and
I would also change the specific date to use the css built in date picker instead of having the user put in the number.

The current behavior of the alphabetical button is the 3 clicks, so i assume that needs no changes. The design has the icon on those buttons as the both the up & down triangles if ykwim, so unless we change that to have an up arrow if its ascending and down for descending, not sure if its possible. should i do that?

Could you have the little up down icon change depending on which click it is? Just so a user could know how they are sorting

yessir i did that

prooflesben

lgtm

janekamata

Lgtm now

commit c99368c Author: Lyanne Xu <xu.ly@northeastern.edu> Date: Mon Mar 16 22:51:55 2026 -0400 344 dev make the filter buttons work (#355) * base dropdown, needs edits * small changes ot dropdown and filterbar * commented out unused imports * start of addressing comments * addressed comments, commented out unused import in grantpage * styling * massive commit (sorry ben) * click outside dropdown will close it * small visual big with eligible/ineligible hover * fixing mistake from main merge * fixed button highlight to show when any filter/sort is applied to date or amount * made status button match the rest * changed status button to match the rest for good code * resolving copilot comments * remove unused line * made dropdown responsive * deleted unused components, added date picker into filtercard * made it so arrow changes if increasing or decreasing sorting is applied * type error * type error * fixed datepicker so previous months days dont show + type error * type * unused import * on sort or filter, will display first grant in newlist * input heights * changed alphabetical button to org name, deleted unused code --------- Co-authored-by: Camila Carrillo <carrillo.ca@northeastern.edu> Co-authored-by: Jane Kamata <38163243+janekamata@users.noreply.github.com> commit ac93a4f Merge: cf492d4 828f769 Author: prooflesben <122566738+prooflesben@users.noreply.github.com> Date: Sun Mar 15 15:25:01 2026 -0400 Merge pull request #354 from Code-4-Community/345-dev---cashflow-page-layout 345 dev cashflow page layout commit 828f769 Author: Camila Carrillo <carrillo.ca@northeastern.edu> Date: Wed Mar 11 00:14:53 2026 -0400 completed cashflow lo fi commit e25dc03 Author: Camila Carrillo <carrillo.ca@northeastern.edu> Date: Tue Mar 10 13:29:26 2026 -0400 base cashflow structure

camila-carrillo and others added 16 commits February 22, 2026 20:57

base dropdown, needs edits

cecf4de

small changes ot dropdown and filterbar

357c71e

commented out unused imports

c22c087

Merge branch 'main' into camila/implement-grant-status-design-w-lyann…

45030ea

…e-pr

start of addressing comments

d9a2ebc

addressed comments, commented out unused import in grantpage

2e66e09

styling

c0e1239

Merge remote-tracking branch 'origin/310/grant-filter' into 344-dev--…

6b9e630

…-make-the-filter-buttons-work

massive commit (sorry ben)

99f7bd5

click outside dropdown will close it

24d3ac5

small visual big with eligible/ineligible hover

d829b39

Merge remote-tracking branch 'origin/main' into 344-dev---make-the-fi…

85d4ef3

…lter-buttons-work

fixing mistake from main merge

2aa937c

fixed button highlight to show when any filter/sort is applied to dat…

64cc628

…e or amount

made status button match the rest

4592c82

changed status button to match the rest for good code

d9b7222

lyannne linked an issue Mar 13, 2026 that may be closed by this pull request

DEV - Make the filter buttons work #344

Closed

Copilot AI review requested due to automatic review settings March 13, 2026 06:47

Copilot started reviewing on behalf of lyannne March 13, 2026 06:47 View session

Copilot AI reviewed Mar 13, 2026

View reviewed changes

lyannne added 3 commits March 13, 2026 03:10

resolving copilot comments

ddb354b

remove unused line

1d6a093

made dropdown responsive

7223553

prooflesben requested changes Mar 13, 2026

View reviewed changes

lyannne added 5 commits March 13, 2026 21:48

deleted unused components, added date picker into filtercard

33e1167

made it so arrow changes if increasing or decreasing sorting is applied

6abfff5

type error

3478ae5

type error

97675fc

fixed datepicker so previous months days dont show + type error

7dc0534

lyannne added 2 commits March 13, 2026 22:17

type

fe84e49

unused import

aa0f060

lyannne requested a review from prooflesben March 14, 2026 02:20

on sort or filter, will display first grant in newlist

ee4c50d

Merge remote-tracking branch 'origin/main' into 344-dev---make-the-fi…

c6f0a4e

…lter-buttons-work

janekamata requested changes Mar 15, 2026

View reviewed changes

input heights

33a0d1c

prooflesben approved these changes Mar 15, 2026

View reviewed changes

changed alphabetical button to org name, deleted unused code

1bda17d

janekamata approved these changes Mar 15, 2026

View reviewed changes

janekamata merged commit c99368c into main Mar 17, 2026
1 check passed

janekamata mentioned this pull request Mar 17, 2026

Camila/implement grant status design w lyanne pr #336

Closed

Conversation

lyannne commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

ℹ️ Issue

📝 Description

✔️ Verification

Test Changes

🏕️ (Optional) Future Work / Notes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

prooflesben left a comment

Choose a reason for hiding this comment

Uh oh!

lyannne commented Mar 13, 2026

Uh oh!

janekamata commented Mar 15, 2026

Uh oh!

lyannne commented Mar 15, 2026

Uh oh!

janekamata commented Mar 15, 2026

Uh oh!

janekamata left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

prooflesben commented Mar 15, 2026

Uh oh!

lyannne commented Mar 15, 2026

Uh oh!

prooflesben left a comment

Choose a reason for hiding this comment

Uh oh!

janekamata left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

lyannne commented Mar 13, 2026 •

edited

Loading

janekamata left a comment •

edited

Loading