feat: wire up search and filter on Team page #4265
Conversation
| @@ -223,6 +235,7 @@ const Team: React.FC = () => { | |||
| ); | |||
| setFlows(sortedFlows); | |||
| setFilteredFlows(sortedFlows); | |||
| setSearchedFlows(sortedFlows); | |||
There was a problem hiding this comment.
Don't need to setMatchedFlows since this will happen when these two state variables are set
| const [searchedFlows, setSearchedFlows] = useState<FlowSummary[] | null>( | ||
| null, | ||
| ); | ||
| const [matchingFlows, setMatchingflows] = useState<FlowSummary[] | null>( |
There was a problem hiding this comment.
Going through a few iterations, this seemed the easiest to read, while functionally working as expected.
There was a problem hiding this comment.
This looks good and correct - one note on naming here!
Not tested as there's no pizza, I can do so on the feature branch though.
You can configure the GHA to build pizzas on PRs going into ian/team-page-rebuild not just main so that we can test these 👍 I think this is worth doing!
| ); | ||
|
|
||
| useEffect(() => { | ||
| const diffFlows = |
There was a problem hiding this comment.
This is an intersection we're checking for, not a difference.
An intersection is an item which is in both lists, a difference would be items in one list but not the other.
|
Tested locally and working as expected 👌 |
|
Removed vultr server and associated DNS entries |
What does this PR do?
This PR follows on from the
SearchBoxandFiltercomponent PRs. Each component would filterflowsand up until this point, they wouldsetFilteredFlows. The issue we run into now is when a user wants to Search and Filter.To get round this and make it clear what does what. Each component will still search/filter
flowsbut they will set their own arraysearchedFlows || filteredFlows- this will then be filtered in theuseEffectand set a new state variable calledmatchedFlowsMy thinking is that:
searchedFlowswill changefilteredFlowswill be equal toflowssearchedFlowsis filtered based on whether they exist infilteredFlowsmatchedFlowsfilteredFlowswill changesearchedFlowswill be equal toflowssearchedFlowswill be based on whether it exists infilteredFlowsmatchedFlowsTo Test
Use different combinations of searching and filtering, doing so in different orders.
It is best to create your own target filter and toggle it
offlineoronlineand just filtering bystatus. Filtering by multiple criteria shouldn't affect this work.