Filter Conferences by Date Range by JuanPabloDiaz · Pull Request #761 · tech-conferences/confs.tech

JuanPabloDiaz · 2024-09-11T17:36:02Z

Reference #749
react-datepicker

Work in progress tech-conferences#749

cgrail · 2024-09-11T17:43:59Z

Looks good. But there is a compile error

JuanPabloDiaz · 2024-09-11T17:56:27Z

Looks good. But there is a compile error

I finally got it lol

JuanPabloDiaz · 2024-09-13T11:19:51Z

I am happy how it turns out

Let's test it!

nimzco · 2024-09-14T00:22:13Z

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.

nimzco · 2024-09-14T00:23:41Z

src/scenes/ConferenceList/ConferenceList.tsx

+
+  const handleStartDateSelect = (date: Date | null) => {
+    if (date) {
+      setStartDate(date)


Don't you want to handle when the user empties the input? (comment is meant for the line above)

nimzco · 2024-09-14T00:25:38Z

src/scenes/ConferenceList/ConferenceList.module.scss

+.dateRangePicker {
+  display: flex;
+  width: 400px;
+  padding: 2px;


This padding breaks the vertical alignment, see:

wow, I had to zoom in to see that.

Great catch! I will work on it

src/scenes/ConferenceList/ConferenceList.module.scss

Co-authored-by: Nima Izadi <[email protected]>

style: update formatting in .prettierrc refactor: add eslint-disable comments in heroku-start script

JuanPabloDiaz · 2025-07-09T13:20:16Z

Hi @nimzco @cgrail,

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

date.mov

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

nimzco

A few comments, but it looks good!

When selecting a start date, I would expect the results to change. They don't until we select the end date.
We could also auto-open the end-date after selecting the start-date, but I would start filtering already.

UI:

The height of the inputs are not the same with the search
The X is not center-aligned.

- Filter results immediately on start date selection - 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

JuanPabloDiaz · 2025-07-13T00:45:01Z

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

fixed.mov

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

I follow his feedback and I've implemented his suggestions

nimzco · 2025-07-13T13:07:18Z

src/components/Search/Search.module.scss

 .Search {
-  margin-bottom: spacing.spacing();
+  width: 100%;
+  margin: 0; // Remove bottom margin that might affect alignment


You need to keep the margin bottom. The search bar is smooshed with the filters below.

I restored margin-bottom. I though it was conflicting with the aligment but its not longer a problem.

nimzco · 2025-07-13T13:08:32Z

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

JuanPabloDiaz · 2025-07-13T13:43:06Z

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 · 2025-07-13T14:07:02Z

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! 🎯

…ructure

…ner appearance

nimzco · 2025-07-14T00:12:31Z

src/scenes/ConferenceList/components/ConferenceList/ConferenceList.module.scss

+.dateRangePicker {
+  display: flex !important;
+  flex-direction: row !important; // Force it to be in a row
+  gap: 0.5rem !important;
+  align-items: center !important;
+  padding: 0.5rem !important;
+
+  .customDatePicker {
+    border: 1px solid #d1d5db !important;
+    padding: 0.25rem !important;
+    width: auto !important;
+    max-width: 12rem !important;
+    height: 35px !important;
+    color: black !important;
+    border-radius: 0.375rem !important;
+  }
+}


Are you sure all of this is needed? I don't see the CSS applied and if I remove the code, the behavior is still the same. 🤔

you are right, I forgot to remove that. I add it in this commit but we no longer need it.

nimzco

Aside of my last comment. I've tested locally, and it works as expected. 🚢
Thanks for the feature addition!

Filter Conferences by Date Range

b7f7af3

Work in progress tech-conferences#749

JuanPabloDiaz added 2 commits September 11, 2024 13:47

fix error handleStartDateSelect

2520786

date set to undefined

bd502ac

JuanPabloDiaz requested review from cgrail and nimzco September 11, 2024 17:56

update datebox styling

99b9713

align

c9a5277

nimzco reviewed Sep 14, 2024

View reviewed changes

src/scenes/ConferenceList/ConferenceList.module.scss Outdated Show resolved Hide resolved

JuanPabloDiaz and others added 8 commits January 28, 2025 21:27

Merge branch 'tech-conferences:main' into Filter-by-Date-Range

32868d8

Hide the dateRangePicker on mobile devices

6a184dd

Update src/scenes/ConferenceList/ConferenceList.module.scss

7ef9b0b

Co-authored-by: Nima Izadi <[email protected]>

Merge main branch into Filter-by-Date-Range - resolve conflicts

a88ef12

fix: remove unused date-fns imports in ConferenceList component

a1f1a24

style: update formatting in .prettierrc refactor: add eslint-disable comments in heroku-start script

fix: correct spacing function usage in dateRangePicker styles

cec7427

fix the vertical alignment

3f2c74e

feat: add clear date range button and improve date selection logic

4328b89

nimzco previously requested changes Jul 12, 2025

View reviewed changes

JuanPabloDiaz added 2 commits July 12, 2025 20:26

feat: improve date filtering UX and fix input alignment

edb363f

- Filter results immediately on start date selection - 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

fix: enhance date range filtering logic to include end date selection

60f8723

JuanPabloDiaz requested a review from nimzco July 13, 2025 00:45

JuanPabloDiaz self-assigned this Jul 13, 2025

fix

0d3720a

nimzco reviewed Jul 13, 2025

View reviewed changes

fix: adjust margins bottom

d786bca

feat: implement date range filtering for conference listings

347f067

JuanPabloDiaz added 2 commits July 13, 2025 10:13

fix: change header links from paragraph to div for better semantic st…

7c9d3f8

…ructure

fix: remove outline and focus styles from date picker button for clea…

57c05c1

…ner appearance

nimzco reviewed Jul 14, 2025

View reviewed changes

nimzco approved these changes Jul 14, 2025

View reviewed changes

removed unnecessary css

753202a

JuanPabloDiaz merged commit a195bd9 into tech-conferences:main Jul 14, 2025
4 checks passed

JuanPabloDiaz deleted the Filter-by-Date-Range branch July 14, 2025 01:38

JuanPabloDiaz mentioned this pull request Jul 15, 2025

Feature Request: Filter Conferences by Date Range #749

Closed

Conversation

JuanPabloDiaz commented Sep 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cgrail commented Sep 11, 2024

Uh oh!

JuanPabloDiaz commented Sep 11, 2024

Uh oh!

JuanPabloDiaz commented Sep 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nimzco commented Sep 14, 2024

Uh oh!

nimzco Sep 14, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nimzco Sep 14, 2024

Choose a reason for hiding this comment

Uh oh!

JuanPabloDiaz Jan 29, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

JuanPabloDiaz commented Jul 9, 2025

🎉 New! Filter conferences by date range

Styling Updates

Minor Improvements

Uh oh!

nimzco left a comment

Choose a reason for hiding this comment

Uh oh!

JuanPabloDiaz commented Jul 13, 2025

Uh oh!

nimzco Jul 13, 2025

Choose a reason for hiding this comment

Uh oh!

JuanPabloDiaz Jul 13, 2025

Choose a reason for hiding this comment

Uh oh!

nimzco commented Jul 13, 2025

Uh oh!

JuanPabloDiaz commented Jul 13, 2025

Uh oh!

JuanPabloDiaz commented Jul 13, 2025

Uh oh!

nimzco Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

JuanPabloDiaz Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

nimzco left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

JuanPabloDiaz commented Sep 11, 2024 •

edited

Loading

JuanPabloDiaz commented Sep 13, 2024 •

edited

Loading

nimzco Sep 14, 2024 •

edited

Loading