Filter Conferences by Date Range

Work in progress

tech-conferences#749

src/scenes/ConferenceList/ConferenceList.tsx

@@ -2,6 +2,7 @@ import algoliasearch from 'algoliasearch/lite'
 import { subMonths } from 'date-fns'
 import qs from 'qs'
 import React, { useMemo, useState } from 'react'
+import DatePicker from 'react-datepicker'
 import {
   Configure,
   InstantSearch,
@@ -41,6 +42,8 @@ import {
   QUERY_SEPARATOR,
 } from './utils'
 
+import 'react-datepicker/dist/react-datepicker.css'
+
 const CURRENT_YEAR = new Date().getFullYear()
 const TODAY = new Date()
 
@@ -84,6 +87,16 @@ const ConferenceListPage: React.FC<Props> = ({
   const [hitsPerPage, setHitsPerPage] = useState(600)
   const [sortBy, setSortBy] = useState<SortBy>('startDate')
   const [online, setOnline] = useState<OnlineOptions>('hybrid')
+  const [startDate, setStartDate] = useState<Date | null>(null)
+  const [endDate, setEndDate] = useState<Date | null>(null)
+
+  const handleStartDateSelect = (date: Date) => {
+    setStartDate(date)
+  }
+
+  const handleEndDateSelect = (date: Date) => {
+    setEndDate(date)
+  }
 
   const [sortDirection] = useState<SortDirection>(showPast ? 'desc' : 'asc')
   const [pastConferencePage, setPastConferencePage] = useState(
@@ -196,6 +209,29 @@ const ConferenceListPage: React.FC<Props> = ({
             </Link>
           </p>
           <Search />
+          <div className={styles.dateRangePicker}>
+            <DatePicker
+              className={styles.customDatePicker}
+              selected={startDate}
+              onSelect={handleStartDateSelect}
+              onChange={() => {}}
+              selectsStart
+              startDate={startDate}
+              endDate={endDate}
+              placeholderText='Start Date'
+            />
+            <DatePicker
+              className={styles.customDatePicker}
+              selected={endDate}
+              onSelect={handleEndDateSelect}
+              onChange={() => {}}
+              selectsEnd
+              startDate={startDate}
+              endDate={endDate}
+              placeholderText='End Date'
+            />
+          </div>
+
           <RefinementList
             limit={40}
             attribute='topics'
@@ -259,6 +295,8 @@ const ConferenceListPage: React.FC<Props> = ({
           sortBy={sortBy}
           sortDirection={sortDirection}
           showCFP={showCFP}
+          startDate={startDate}
+          endDate={endDate}
         />
       </InstantSearch>
 

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

@@ -46,3 +46,21 @@
   font-size: 0.9em;
   margin: spacing(extra-loose);
 }
+
+.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;
+  }
+}

src/scenes/ConferenceList/components/ConferenceList/ConferenceList.tsx

@@ -1,4 +1,4 @@
-import { isPast, parseISO } from 'date-fns'
+import { isPast, parseISO, isWithinInterval } from 'date-fns'
 import { filter } from 'lodash'
 import React from 'react'
 import { connectInfiniteHits } from 'react-instantsearch-dom'
@@ -22,6 +22,8 @@ interface Props {
   hasMore?: boolean
   hits: Conference[]
   onLoadMore(): void
+  startDate: Date | null
+  endDate: Date | null
 }
 
 const ConferenceList: React.FC<Props> = ({
@@ -31,6 +33,8 @@ const ConferenceList: React.FC<Props> = ({
   sortDirection,
   hasMore,
   onLoadMore,
+  startDate,
+  endDate,
 }) => {
   let filteredConferences = hits as Conference[]
 
@@ -39,6 +43,20 @@ const ConferenceList: React.FC<Props> = ({
       return conf.cfpEndDate && !isPast(parseISO(conf.cfpEndDate))
     }) as Conference[]
   }
+  if (startDate && endDate) {
+    filteredConferences = filteredConferences.filter((conf) => {
+      const conferenceStartDate = parseISO(conf.startDate)
+      const conferenceEndDate = parseISO(conf.endDate)
+      return (
+        isWithinInterval(conferenceStartDate, {
+          start: startDate,
+          end: endDate,
+        }) ||
+        isWithinInterval(conferenceEndDate, { start: startDate, end: endDate })
+      )
+    })
+  }
+
   const confs = groupAndSortConferences(
     filteredConferences,
     sortBy,