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'
}