Add filter dropdown and change task card style in mine page

[pankajjs]

Date: 19 Sep 2024

Developer Name: Pankaj Sha

---

Issue Ticket Number

• Closes #1262

Description

This pr adds a filter dropdown component, changes the style of task card and implements filter logic.

Documentation Updated?

• [ ] Yes
• [x] No

Under Feature Flag

• [x] Yes
• [ ] No

Database Changes

• [ ] Yes
• [x] No

Breaking Changes

• [ ] Yes
• [x] No

Development Tested?

• [x] Yes
• [ ] No

Screenshots

Working video

https://github.com/user-attachments/assets/56dadf8b-a767-4b83-aa7a-f90ff74e2f83

Test Coverage

Screenshot 1

Screenshot 2

Additional Notes

[vercel[bot]]

@pankajjs is attempting to deploy a commit to the RDS-Team Team on Vercel.

A member of the Team first needs to authorize it.

[vinit717]

Did you design doc got approved?

[Ayushsanjdev]

1. PR name doesn't make any sense.
2. Screen recording doesn't play. @pankajjs

[pankajjs]

Did you design doc got approved?

Not approved till now. But you asked me to do some changes. I did.

[vinit717]

Where is TDD PR? as mentioned in the design doc you are following TDD right

[pankajjs]

Where is TDD PR? as mentioned in the design doc you are following TDD right

I have followed TDD. However I was not aware that I have to raise pr for TDD first. This pr contains every changes.

[pankajjs]

don't we need FF here

Added FF.

[vinit717]

@pankajjs are we not using the same component for the task tab as the UI and functionality are the same

[pankajjs]

@pankajjs are we not using the same component for the task tab as the UI and functionality are the same

1. Tasks page uses this two components with its own filter logic inside a component named TasksContent as it receives data in chunks while scrolling.

2. In Mine page, we receive data at once. Therefore, we are using these two components with its own filter logic.
3. I have made the functionality looks same even the logic is different because of its data fetching technique.

[vinit717]

@pankajjs are we not using the same component for the task tab as the UI and functionality are the same

1. Tasks page uses this two components with its own filter logic inside a component named TasksContent as it receives data in chunks while scrolling.

2. In Mine page, we receive data at once. Therefore, we are using these two components with its own filter logic.
3. I have made the functionality looks same even the logic is different because of its data fetching technique.

But self API should be paginate then as by this we don't need to create another component for this we can reuse it can you confirm this with @ankushdharkar

[pankajjs]

@vinit717 Even If we make self API paginated, we need another component to make the filter and search should work as same as Tasks page because the TaskContent is tightly coupled with the hook which returns the tasks list.

[vinit717]

@vinit717 Even If we make self API paginated, we need another component to make the filter and search should work as same as Tasks page because the TaskContent is tightly coupled with the hook which returns the tasks list.

But we need to make the component dumb so it get the data and show accordingly for now we can merge your PR and If you want, make the backend API paginated and change the frontend logic accordingly

[pankajjs]

@vinit717 Even If we make self API paginated, we need another component to make the filter and search should work as same as Tasks page because the TaskContent is tightly coupled with the hook which returns the tasks list.

But we need to make the component dumb so it get the data and show accordingly for now we can merge your PR and If you want, make the backend API paginated and change the frontend logic accordingly

We can merge this Pr. For the backend, I will pick it in another task.