Rails for Front-end Development: Essential Tools/

...

/

Responding to Filters

Responding to Filters

Let's deal with the filters in our All-React application.

We'll cover the following...

Calendar filters

The first filter we want to deal with is the calendar filter that controls the entire days on the schedule display. Here’s the React component for one of those calendar days. There’s a parent component that we are not showing that generates the entire list of these and passes each the appropriate ScheduleDay object:

Press + to interact
import * as React from "react"
import { useDispatch } from "react-redux"
import { ScheduleDay } from "contexts/schedule_context"
export interface SingleDayProps {
  day: ScheduleDay
}
export const SingleDayFilter = ({
  day,
}: SingleDayProps): React.ReactElement => {
  const dispatch = useDispatch()
  const calendarClick = (): void => {
    dispatch({ type: "calendarToggle", day: day.id })
  }
  const cssClasses = (): string => {
    return `text-center border-b-2 border-transparent ${
      day.filtered === "yes" ? "border-red-700" : ""
    }`
  }
  return (
    <div className={cssClasses()} onClick={calendarClick}>
      {day.day.month} {day.day.date}
    </div>
  )
}
export default SingleDayFilter

Note: We created a subdirectory for the schedule components and also made one for the existing venue components, so all the imports of all those files updated, but we’re not showing ...