Skip to content

feat: add filters to public explore page #1231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conversation

kimcascante
Copy link
Contributor

🔍 Add Filters to Public Explore Page

Closes #1202

✏️ Summary

Added the same filters available on the logged user explore page (/profile/explore) to the public explore page (/tasks/open), providing consistent filtering functionality across both interfaces.

📋 Description

This PR implements the requested feature to display filters on the public explore page that were previously only available to logged-in users. The implementation ensures both pages now have identical filtering capabilities.

🔧 Changes Made:

  1. Enhanced TaskExplorer Container (frontend/src/containers/task-explorer.js)

    • Added filterTasks action import and dispatch
    • Added tasks data access via mapStateToProps
    • Connected filtered tasks selector
  2. Updated TaskExplorer Component (frontend/src/components/areas/public/features/task/task-explorer.js)

    • Imported TaskFiltersContainer
    • Integrated filters when showing Issues tab (state.value === 0)
    • Set correct baseUrl for public pages ("/tasks/")
  3. Created Comprehensive Storybook Stories

    • TaskFilters main component stories
    • TaskFilterLabels component stories
    • LanguageFilter component stories

🎯 Available Filters Now on Public Page:

  • Status Filter Dropdown: All issues / With bounties / Without bounties
  • Labels Filter: Multi-select with checkboxes (bug, enhancement, documentation, etc.)
  • Language Filter: Multi-select with checkboxes (JavaScript, Python, React, etc.)

🧪 Testing

Manual Testing:

  1. Navigate to localhost:8082/#/tasks/open
  2. Verify filters appear above the task list
  3. Test each filter functionality:
    • Status filter dropdown changes task list
    • Labels multi-select filters by labels
    • Language multi-select filters by programming languages

Storybook Testing:

  1. Run npm run storybook
  2. Check stories under:
    • Features/Task/TaskFilters
    • Features/Task/TaskFilterLabels
    • Features/Task/LanguageFilter

✅ Requirements Met

  • Filters from logged page are now on public page
  • All components use base Material-UI Select component
  • Complete Storybook documentation
  • Maintains existing functionality
  • Same filtering experience across both pages

🧰 Stack Used

  • React
  • Material-UI
  • Storybook
  • Redux (for state management)

Note: This implementation ensures feature parity between public and logged user experiences while maintaining all existing functionality.

- Add TaskFilters component to public explore page (/tasks/open)
- Update TaskExplorer container to include filterTasks action and tasks data
- Integrate filters with Issues tab on public page
- Create comprehensive Storybook stories for filter components
- Maintain same filtering functionality as logged user page (/profile/explore)

Resolves: Add filters from logged explore page to public explore page
@dosubot dosubot bot added feature react Task that require react knowledge testing Testing tasks labels Jul 1, 2025
@alexanmtz
Copy link
Member

Great @kimcascante , thanks you for your contribution 🙏

@alexanmtz alexanmtz merged commit 1a137ba into worknenjoy:master Jul 10, 2025
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature react Task that require react knowledge testing Testing tasks
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[UI] Move issue filters to explore page
2 participants