[Sugestão] Compartilhando minha solução para o desafio

Pessoal, segue meu desenvolvimento para a solução do desafio. Espero que contribua.

Filtro/index.tsx

import React, { useState } from "react";
import { useSetRecoilState } from "recoil";
import {
  IFiltroDeEventos,
  IFiltroStatus,
} from "../../interfaces/IFiltroDeEventos";
import { filtroDeEventos } from "../../state/atom";
import style from "./Filtro.module.scss";

const Filtro: React.FC = () => {
  const [data, setData] = useState("");
  const [status, setStatus] = useState<IFiltroStatus>("Ambos");

  const setFiltroDeEvento = useSetRecoilState(filtroDeEventos);

  const submeterForm = (evento: React.FormEvent<HTMLFormElement>) => {
    evento.preventDefault();
    const filtro: IFiltroDeEventos = {
      status,
    };
    data ? (filtro.data = new Date(data)) : (filtro.data = null);

    setFiltroDeEvento(filtro);
  };

  const opcoesFiltro = ["Ambos", "Completos", "Incompletos"];

  return (
    <form className={style.Filtro} onSubmit={submeterForm}>
      <h3 className={style.titulo}>Filtros</h3>
      <label htmlFor="data">Por data</label>
      <input
        type="date"
        name="data"
        className={style.input}
        onChange={(evento) => setData(evento.target.value)}
        placeholder="Por data"
        value={data}
      />
      <label htmlFor="status">Por status</label>
      <select
        name="status"
        id="filtro-status"
        className={style.input}
        onChange={(event) => setStatus(event.target.value as IFiltroStatus)}
      >
        {opcoesFiltro.map((opcao, index) => (
          <option key={index} value={opcao}>
            {opcao}
          </option>
        ))}
      </select>

      <button className={style.botao}>Filtrar</button>
    </form>
  );
};

export default Filtro;

interfaces/IFiltroDeEventos.ts

export type IFiltroStatus = "Completos" | "Incompletos" | "Ambos";

export interface IFiltroDeEventos {
  data?: Date | null;
  status: IFiltroStatus;
}

seletores/index.ts

import { selector } from "recoil";
import { filtroDeEventos, listaDeEventosState } from "../atom";

export const eventosFiltradosState = selector({
  key: "eventosFiltradosState",
  get: ({ get }) => {
    const filtro = get(filtroDeEventos);
    const todosOsEventos = get(listaDeEventosState);
    const eventoComStatus = todosOsEventos.filter((evento) =>
      filtro.status === "Completos"
        ? evento.completo
        : filtro.status === "Incompletos"
        ? !evento.completo
        : true
    );
    const eventos = eventoComStatus.filter((evento) => {
      if (!filtro.data) {
        return true;
      } else {
        const eHOMesmoDia =
          evento.inicio.toISOString().slice(0, 10) ===
          filtro.data.toISOString().slice(0, 10);
        return eHOMesmoDia;
      }
    });
    return eventos;
  },
});

state/atom.ts

import { atom } from "recoil";
import { IEvento } from "../interfaces/IEvento";
import { IFiltroDeEventos } from "../interfaces/IFiltroDeEventos";

export const listaDeEventosState = atom<IEvento[]>({
  key: "listaDeEventosState",
  default: [
    {
      descricao: "Estudar React",
      inicio: new Date("2023-07-19T09:00"),
      fim: new Date("2023-07-19T13:00"),
      completo: false,
      id: 1642342747,
    },
    {
      descricao: "Estudar Recoil",
      inicio: new Date("2023-07-20T09:00"),
      fim: new Date("2023-07-20T11:00"),
      completo: false,
      id: 1642342959,
    },
  ],
});

export const filtroDeEventos = atom<IFiltroDeEventos>({
  key: "filtroDeEventos",
  default: {
    data: null,
    status: "Ambos",
  },
});