diff --git a/src/components/filters/AddFilter.tsx b/src/components/filters/AddFilter.tsx index e413e50..cb614f0 100644 --- a/src/components/filters/AddFilter.tsx +++ b/src/components/filters/AddFilter.tsx @@ -1,5 +1,6 @@ import { useRef, useState } from 'react' import DateFilter from './DateFilter' +import DescFilter from './DescFilter' import LatLongFilter from './LatLongFilter' import { filterDispatchType, filterProps } from '@/pages/StatsDashboard' import { LucideCalendar, LucideGlobe, LucideMapPin, LucidePlus, LucideTags, LucideText } from 'lucide-react' @@ -54,7 +55,7 @@ const possibleFilters: FilterInfo[] = [ { name: 'Descripción', icon: LucideText, - component: DateFilter, // TODO: Change this to the actual component + component: DescFilter, description: 'Filtrar por palabras clave en la descripción', }, ] diff --git a/src/components/filters/DescFilter.tsx b/src/components/filters/DescFilter.tsx new file mode 100644 index 0000000..77d633c --- /dev/null +++ b/src/components/filters/DescFilter.tsx @@ -0,0 +1,34 @@ +import { filterProps } from '@/pages/StatsDashboard' +import BaseFilter from './BaseFilter' +import { LucideCalendar, LucideTrash2 } from 'lucide-react' +import { useState, useEffect } from 'react' + +const FilterDesc = ({ id, dispatch }: filterProps) => { + const [search, setSearch] = useState('') + + useEffect(() => { + const lowercaseSearch = search.toLowerCase() + dispatch({ + type: 'UPDATE_FILTER', + payload: { + id: id, + operation: (incident) => incident.description.toLowerCase().includes(lowercaseSearch), + }, + }) + }, [search]) + + const removeThisFilter = () => { + dispatch({ type: 'REMOVE_FILTER', payload: { id: id } }) + } + + return ( + } text={`La descripción contiene «${search}»`}> + + setSearch(e.target.value)} value={search} className="mr-6 rounded-md border border-gray-300 p-1" /> + + ) +} + +export default FilterDesc