Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Acho que não sei ser concisa no código

No Filtro > index.tsx

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

const Filtro: React.FC = () => {

  const [data, setData] = useState('')
  const [status, setStatus] = useState('todos')
  const setFiltroDeEvento = useSetRecoilState<IFiltroDeEventos>(filtroDeEventos)

  const submeterForm = (evento: React.FormEvent<HTMLFormElement>) => {
    evento.preventDefault()
    const filtro: IFiltroDeEventos = {}

    if(data && status === 'todos') {
      filtro.data = new Date(data)
      filtro.status = 'todos'
    }

    if((data && status === 'completos') || (data && status === 'incompletos')){
      filtro.data = new Date(data)
      filtro.status = status
    }

    if((!data && status === 'completos') || (!data && status === 'incompletos')) {
      filtro.status = status
    }
   
    setFiltroDeEvento(filtro);
  }

  return (<form className={style.Filtro} onSubmit={submeterForm}>
    <div>
      <h3 className={style.titulo}>Filtrar por data</h3>
      <input
        type="date"
        name="data"
        className={style.input}
        onChange={evento => setData(evento.target.value)}
        placeholder="Por data"
        value={data} />
    </div>
    <div>
      <h3 className={style.titulo}>Filtrar por status</h3>
      <select name='status' className={style.input} onChange={evento => setStatus(evento.target.value)} value={status}>
        <option value="completos">Completos</option>
        <option value="incompletos">Incompletos</option>
        <option value="todos">Todos</option>
      </select>
    </div>

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

  </form>)
}

export default Filtro

No 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 eventos = todosOsEventos.filter(evento => {
      if (filtro.data) {
        const ehOMesmoDia = filtro.data.toISOString().slice(0, 10) === evento.inicio.toISOString().slice(0, 10)

        return filtro.status !== 'todos'
          ? filtro.status === 'completos'
          ? ehOMesmoDia && evento.completo
          : ehOMesmoDia && !evento.completo
        : ehOMesmoDia;
      }
      
      if(filtro.status === 'completos') return evento.completo;
      if(filtro.status === 'incompletos') return !evento.completo;

      return true

    })
    return eventos
  }
})

No IFiltroDeEventos

export interface IFiltroDeEventos {
  data?: Date | null
  status?: 'completos' | 'incompletos' | 'todos'
}
1 resposta
solução!

Oi Deborah, tudo bem?

Muito obrigada por compartilhar seu código! A prática é essencial para o crescimento como desenvolvedora. Não se preocupe se você acha que não consegue ser concisa no momento. Com o tempo, você vai ganhar mais experiência e encontrar maneiras de escrever código de forma mais concisa.

O importante é continuar praticando e se esforçando para melhorar. À medida que você ganha mais experiência, você aprenderá padrões e técnicas que podem ajudar a tornar seu código mais sucinto e eficiente.

Parabéns por praticar com os desafios propostos no curso!

Um abraço e bons estudos.