[UI] Move issue filters to explore page

[alexanmtz]

✏️ Summary

We have some filters on logged issues page that we would like to display on public explore page as well

📋 Description

We have two pages in the platform where we display public issues (see screenshots).

We have one in Explore: https://gitpay.me/#/tasks/open
We have one for logged area (you need to have an user and be logged to view): https://gitpay.me/#/profile/explore

We want to have the filters on the public explore page, the same as we have in the logged view.

🔍 Steps to Reproduce

1. Follow our README to run the project locally
2. Import an Issue
3. Go to the public explore page: localhost:8082/#/tasks/open
4. Go to the logged explore page: ocalhost:8082/#/profile/explore
5. You need to have the same filters from the logged page

✅ Expected Result

1. Filters on logged page are on the public page
2. You have the filters components on Storybook, all using the base select component
3. You should have the Stories for these components

🖼️ Screenshot / Mockup

🧰 UI Stack Used

React, Material UI, Storybook

💰 Is there a bounty for this issue?

No

💵 Bounty Amount (if any)

No Bounty for this issue

📜 Bounty Details (if applicable)

There's no Bounty for this issue.

This issue is part of the Only Dust Hackathon: https://onlydust.notion.site/May-28th-Open-Source-Hackathon-1f244b682a80801890e5fda15b779746

[dosubot]

Here’s what I found about moving the issue filters from the logged issues page to the public explore page:

• The filters on the logged issues page are implemented using components like TaskStatusFilter and Taskfilters, which are built with React and Material UI. These manage filter states for statuses such as "open", "in_progress", "closed", "issuesWithBounties", and "contribution" and update their state based on URL parameters, calling an onFilter function to apply the selected filter [source].
• The logged explore page uses the UserTasksExploreContainer component, which integrates these filters and supports filtering functionality [source].
• The Explore page (/tasks/open) uses similar logic and already imports and uses the Taskfilters component to apply filters to the task list [source].
• The Redux selectors and actions (getFilteredTasks, filterTasks) are used to apply the filters to the task data [source].

Storybook:
I was unable to find any specific Storybook stories or documentation for the filter components in the repository. While there are general Storybook setup files and stories for other components, there is no evidence that the filter components currently have their own documented stories or examples.

Summary of next steps:

• The filter logic and components are already modular and used in both logged and explore contexts, so reusing them on the public explore page should be straightforward.
• If you want these filters to be documented in Storybook, you may need to create new stories for the relevant filter components (such as TaskStatusFilter and Taskfilters) to demonstrate their usage and props.

If you need guidance on how to create Storybook stories for these components, let me know!

To reply, just mention my name @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[kimcascante]

Hello! I’m Kim Cascante 👋
With experience in React, Typescript, Javascript, and Next.js, here’s how I plan to approach this issue:

1. Review the current implementation of the filters on the logged-in explore page.
2. Reuse and adapt the same filter components for the public explore page, ensuring consistency.
3. Verify functionality, responsiveness, and visual alignment with existing Storybook components.
4. Submit a clear and well-documented Pull Request.
   Excited to contribute to this project and continue learning through the Only Dust Hackathon!

[devfoma]

May I take on this issue?

[alexanmtz]

Hey @kimcascante , any progress on this? Otherwise I will assign to another dev

[kimcascante]

@alexanmtz Hi, I am so sorry I didn't know I was assigned to this issue. I will review this and create a PR today. I hope it is ok.