TOP-202 schedule filter

src/App.jsx

@@ -35,7 +35,7 @@ import Filter from "./components/Filter"
 import RadioFilter from "./components/Filter/RadioFilter"
 import KeywordFilter from "./components/Filter/KeywordFilter"
 import AgeFilter from "./components/Filter/AgeFilter"
-import StarttimeEndtimeDayFilter from "./components/Filter/StarttimeEndtimeDay"
+import StarttimeEndtimeDayFilter from "./components/Filter/StarttimeEndtimeDayFilter"
 import ListMap from "./components/ListMap"
 import ListMapStatic from "./components/ListMapStatic"
 import Pagination from "./components/Pagination"
@@ -44,6 +44,7 @@ import { theme } from "./themes/theme_generator"
 import ClearFilters from "./components/ClearFilters"
 import { checkCookiesAccepted } from "./lib/cookies"
 import AlertStatic from "./components/AlertStatic"
+import ScheduleFilter from "./components/Filter/ScheduleFilter"
 
 const App = ({ children, location, navigate }) => {
   const [keywords, setKeywords] = useQuery("keywords", "")
@@ -69,6 +70,9 @@ const App = ({ children, location, navigate }) => {
   const [suitabilities, setSuitabilities] = useQuery("suitabilities", [], {
     array: true,
   })
+  const [schedule, setSchedule] = useQuery("schedule", false)
+  const [startDate, setStartDate] = useQuery("startDate", false)
+  const [endDate, setEndDate] = useQuery("endDate", false)
   const [days, setDays] = useQuery("days", [], { array: true })
   const [startTime, setStartTime] = useQuery("start_time", [], { array: true })
   const [endTime, setEndTime] = useQuery("end_time", [], { array: true })
@@ -288,7 +292,7 @@ const App = ({ children, location, navigate }) => {
     />
   )
 
-  const filterStarttimeEndTimeDay = daysOptions.length > 0 && (
+  const filterStarttimeEndTimeDay = (
     <StarttimeEndtimeDayFilter
       key="opening-times"
       legend="Availability"
@@ -303,6 +307,21 @@ const App = ({ children, location, navigate }) => {
     />
   )
 
+  const filterSchedule = (
+    <ScheduleFilter
+      key="event-times"
+      legend="Schedule"
+      schedule={schedule}
+      startDate={startDate}
+      endDate={endDate}
+      setSchedule={setSchedule}
+      setStartDate={setStartDate}
+      setEndDate={setEndDate}
+      setPage={setPage}
+      foldable
+    />
+  )
+
   const filterSuitabilities = suitabilityOptions.length > 0 && (
     <Filter
       key="suitabilities"
@@ -346,6 +365,11 @@ const App = ({ children, location, navigate }) => {
       clear: [setStartTime, setEndTime, setDay],
       clearValue: [[], [], []],
     },
+    schedule: {
+      component: filterSchedule,
+      clear: [setSchedule, setStartDate, setEndDate],
+      clearValue: [false, false, false],
+    },
     suitabilities: {
       component: filterSuitabilities,
       clear: [setSuitabilities],

src/components/Filter/ScheduleFilter.jsx

@@ -0,0 +1,173 @@
+import React, { useEffect, useState } from "react"
+import styled from "styled-components"
+import {
+  Outer,
+  Legend,
+  Header,
+  UnfoldButton,
+  Content,
+  Label,
+  InputCheckbox,
+  Field,
+  RadioLabel,
+  RadioField,
+  InputRadio,
+} from "./layout"
+import { set } from "react-ga"
+
+const ColumnContent = styled(Content)`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 25px;
+  border-bottom: 0;
+`
+
+const ColumnField = styled.div`
+  margin-bottom: 25px;
+  @supports (display: grid) {
+    margin-bottom: 0px;
+  }
+`
+
+const LabelWithMargin = styled.label`
+  color: ${props => props.theme.styles.text};
+  cursor: pointer;
+  display: block;
+  margin-bottom: 7px;
+`
+
+const Input = styled.input`
+  font-size: 0.9rem;
+  padding: 7px;
+  border: 2px solid ${props => props.theme.styles.text};
+  display: block;
+  width: 100%;
+  &:focus {
+    outline: 3px solid ${props => props.theme.styles.focus};
+  }
+  &::placeholder {
+    opacity: 0.3;
+  }
+`
+const scheduleOptions = [
+  ["Today", "today"],
+  ["Tomorrow", "tomorrow"],
+  ["Next 7 Days", "next7Days"],
+  ["Next 30 Days", "next30Days"],
+]
+
+const today = new Date()
+const tomorrow = new Date(today)
+tomorrow.setDate(today.getDate() + 1)
+
+const next7DaysStart = new Date(today)
+const next7DaysEnd = new Date(today)
+next7DaysEnd.setDate(today.getDate() + 7)
+
+const next30DaysStart = new Date(today)
+const next30DaysEnd = new Date(today)
+next30DaysEnd.setDate(today.getDate() + 30)
+
+const scheduleOptionValues = {
+  today: {
+    startDate: today,
+    endDate: today,
+  },
+  tomorrow: {
+    startDate: tomorrow,
+    endDate: tomorrow,
+  },
+  next7Days: {
+    startDate: next7DaysStart,
+    endDate: next7DaysEnd,
+  },
+  next30Days: {
+    startDate: next30DaysStart,
+    endDate: next30DaysEnd,
+  },
+}
+
+const ScheduleFilter = ({
+  legend,
+  schedule,
+  startDate,
+  endDate,
+  setSchedule,
+  setStartDate,
+  setEndDate,
+  setPage,
+  foldable,
+}) => {
+  const [unfolded, setUnfolded] = useState(schedule)
+
+  const handleScheduleChange = e => {
+    const selectedSchedule = e.target.value
+    setSchedule(selectedSchedule)
+    const scheduleValues = scheduleOptionValues[selectedSchedule]
+    if (scheduleValues) {
+      setStartDate(scheduleValues.startDate.toISOString().split("T")[0])
+      setEndDate(scheduleValues.endDate.toISOString().split("T")[0])
+    }
+    setPage(1)
+  }
+
+  return (
+    <Outer>
+      <Header>
+        {foldable ? (
+          <UnfoldButton
+            type="button"
+            aria-expanded={unfolded ? "true" : "false"}
+            onClick={() => setUnfolded(!unfolded)}
+          >
+            <Legend>{legend}</Legend>
+          </UnfoldButton>
+        ) : (
+          <Legend>{legend}</Legend>
+        )}
+      </Header>
+      {(!foldable || unfolded) && (
+        <>
+          <Content>
+            {scheduleOptions.map(([label, slug], i) => (
+              <RadioField key={`${slug}-${i}`}>
+                <InputRadio
+                  type="radio"
+                  id={`${slug}-${i}`}
+                  name="schedule"
+                  value={slug}
+                  onChange={handleScheduleChange}
+                  checked={schedule === slug}
+                />
+                <RadioLabel htmlFor={`${slug}-${i}`}>{label}</RadioLabel>
+              </RadioField>
+            ))}
+
+            <ColumnContent>
+              <ColumnField>
+                <LabelWithMargin htmlFor="from_date">From</LabelWithMargin>
+                <Input
+                  id={`from_date`}
+                  onChange={e => setStartDate(e.target.value)}
+                  value={startDate}
+                  type="date"
+                />
+              </ColumnField>
+              <ColumnField>
+                <LabelWithMargin htmlFor="to_date">To</LabelWithMargin>
+                <Input
+                  id={`to_date`}
+                  onChange={e => setEndDate(e.target.value)}
+                  value={endDate}
+                  type="date"
+                />
+              </ColumnField>
+            </ColumnContent>
+          </Content>
+        </>
+      )}
+    </Outer>
+  )
+}
+
+export default ScheduleFilter

src/components/Filter/StarttimeEndtimeDayFilter.jsx

@@ -138,19 +138,19 @@ const AllFieldsForm = ({
       ))}
       <ColumnContent>
         <ColumnField>
-          <LabelWithMargin htmlFor="start_date">Opens at</LabelWithMargin>
+          <LabelWithMargin htmlFor="start_time">Opens at</LabelWithMargin>
           <Input
-            id={`start_date`}
+            id={`start_time`}
             onChange={handleStartTimeChange}
             value={startTimeValue}
             type="time"
             step="60"
           />
         </ColumnField>
         <ColumnField>
-          <LabelWithMargin htmlFor="end_date">Closes at</LabelWithMargin>
+          <LabelWithMargin htmlFor="end_time">Closes at</LabelWithMargin>
           <Input
-            id={`end_date`}
+            id={`end_time`}
             onChange={handleEndTimeChange}
             value={endTimeValue}
             type="time"

src/lib/order-filters.js

@@ -25,6 +25,9 @@ export const orderFilters = (filters, filterOrder) => {
       case "starttime-endtime-day":
         output.push(filters.startTimeEndTimeDay.component)
         break
+      case "schedule":
+        output.push(filters.schedule.component)
+        break
       case "suitabilities":
         output.push(filters.suitabilities.component)
         break

src/themes/bfis/vars_bfis.jsx

@@ -143,6 +143,10 @@ export const vars_bfis = {
       order: 4,
       name: "starttime-endtime-day",
     },
+    {
+      order: 5,
+      name: "schedule",
+    },
   ],
   headerComponents: (
     <SingleStrongLink