Filter Conferences by Date Range

[JuanPabloDiaz]

Reference #749 react-datepicker

[cgrail]

Looks good. But there is a compile error

[JuanPabloDiaz]

Looks good. But there is a compile error

I finally got it lol

[JuanPabloDiaz]

I am happy how it turns out

Let's test it!

[nimzco]

Hey @JuanPabloDiaz, thank you for this proposal and this PR!

In terms of usability, how about only showing months instead of full dates in the picker? I'm even thinking, only showing one month, to be like: "show me conference after this date".

If we were to keep start and end date, I would like the filter to update as soon as I select the start date. Meaning: I don't need to select the end date to see the conference list change. Additionally, we need to handle the mobile view, or to hide it on mobile.

[JuanPabloDiaz]

Hi @nimzco @cgrail,

I am happy with how it turns out. Here is the summary of this PR:

https://github.com/user-attachments/assets/5a46559a-bacc-4b07-b866-959bb75c0487

This pull request introduces a date range filter to the Conference List page, allowing users to filter conferences by start and end dates. It also includes styling updates and minor code improvements. Below is a summary of the most important changes:

🎉 New! Filter conferences by date range

• Added startDate and endDate state variables to the ConferenceListPage component, along with handlers to manage date selection and validation (src/scenes/ConferenceList/ConferenceList.tsx).
• Integrated react-datepicker for date selection, including importing the library and its styles (src/scenes/ConferenceList/ConferenceList.tsx). [1] [2]
• Updated the ConferenceList component to accept startDate and endDate as props and filter conferences based on the selected date range (src/scenes/ConferenceList/components/ConferenceList/ConferenceList.tsx). [1] [2] [3]

Styling Updates

• Added styles for the date range picker and its clear button in ConferenceList.module.scss and ConferenceListPage.module.scss to ensure proper layout and responsiveness (src/scenes/ConferenceList/ConferenceList.module.scss, src/scenes/ConferenceList/components/ConferenceList/ConferenceList.module.scss). [1] [2]

Minor Improvements

• Added width: 100% to the Search component for better alignment and responsiveness (src/components/Search/Search.module.scss).
• Suppressed prettier warnings for certain lines in scripts/heroku-start.js to improve code readability without formatting conflicts.
• Added a Clear button
• Follow the responsive design
• Proper alignment of all date picker elements

[JuanPabloDiaz]

Thanks for your feedback @nimzco! I've implemented your suggestions, and everything should now be working as you requested.

https://github.com/user-attachments/assets/35cfabe8-56b4-440d-a747-7f356e89a80c

feat: improve date filtering UX and fix input alignment

• Filters now apply immediately upon selecting start or end dates.
• Auto-focus end date picker for better UX
• Fix alignment between search box and date inputs
• Enhance date range overlap detection
• Improve dark mode and accessibility

[nimzco]

When testing locally, the conference list don't update anymore after I change the dates.

[JuanPabloDiaz]

When testing locally, the conference list don't update anymore after I change the dates.

Hmm, it doesn’t update when you only change the dates @nimzco?

It works for me when I test the date filter alone. I still need to work on how this new feature interacts with other filters when combined.

[JuanPabloDiaz]

Thanks @nimzco! You're absolutely right.

Date filtering was client-side while other filters were server-side, causing conflicts.

Fixed! Moved date filtering to Algolia level so it works with other filters.

Should be working now! 🎯