Enhance Mentor Filter Functionality

[rdwaynedehoedt]

Purpose

The purpose of this PR is to fix #223. This PR introduces a feature to filter mentors by country, available slots, and category, while also providing sorting functionality. It addresses the need for improved mentor filtering and sorting on the Mentor page.

Goals

• Implement mentor filtering by country and available slots.

Approach

This feature was implemented by:

1. Fetching mentors and their associated countries and available slots.
2. Adding state for the selected filters (country, available slots, and category).
3. Implementing checkboxes for users to filter mentors based on selected countries and available slots.
4. Adding dynamic dropdowns that expand/collapse when clicking on filter options.
5. Implementing the sorting function to sort mentors alphabetically by their first name.
6. Ensuring the mentor list updates based on the selected filters using useEffect hooks.

The logic for available slots ensures that mentors with no available slots (after considering approved mentees) are excluded from the list unless selected by the user.

Screenshots

Checklist

• This PR doesn't commit any keys, passwords, tokens, usernames, or other secrets.
• I have read and understood the development best practices guidelines (http://bit.ly/sef-best-practices)
• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation

Test environment

• OS: macOS
• Browser: Chrome

Learning

• To implement the filtering and sorting functionality, I used React hooks such as useState, useEffect, and useInView for infinite scroll.
• I researched and implemented the dynamic dropdown functionality using conditional rendering to ensure smooth user interaction.

[anjula-sack]

can you check mentor.application object for the availableSlots and approvedMenteesCount. It should be there. @rdwaynedehoedt

[anjula-sack]

Same here.

[anjula-sack]

Slots should be a slider like this,