diff --git a/src/pages/Home/components/ShelterListView/ShelterListView.tsx b/src/pages/Home/components/ShelterListView/ShelterListView.tsx index ec57fc7b..dc1bcde3 100644 --- a/src/pages/Home/components/ShelterListView/ShelterListView.tsx +++ b/src/pages/Home/components/ShelterListView/ShelterListView.tsx @@ -1,4 +1,4 @@ -import React, { Fragment } from 'react'; +import React, { Fragment, useState, useEffect } from 'react'; import { CircleAlert, ListFilter, X } from 'lucide-react'; import { @@ -12,6 +12,8 @@ import { cn } from '@/lib/utils'; import { IShelterListViewProps } from './types'; import { useSearchParams } from 'react-router-dom'; import { LoadingSkeleton } from '@/components/LoadingSkeleton'; +import { Badge } from '@/components/ui/badge'; +import { FilterKey } from './types'; const ShelterListView = React.forwardRef( (props, ref) => { @@ -33,6 +35,44 @@ const ShelterListView = React.forwardRef( const [searchParams] = useSearchParams(); + const [filteredData, setFilteredData] = useState(data); + const [filters, setFilters] = useState({ + isPetFriendlyFiltered: false, + isAvailableFiltered: false, + isUnavailableFiltered: false, + needVolunteers: false, + isConfirmFiltered: false, + }); + + useEffect(() => { + applyFilters(); + }, [data, filters]); + + const toggleFilter = (filterName: FilterKey) => { + setFilters((prevFilters) => ({ + ...prevFilters, + [filterName]: !prevFilters[filterName], + })); + }; + + const applyFilters = () => { + let filtered = data; + + if (filters.isPetFriendlyFiltered) { + filtered = filtered.filter(shelter => shelter.petFriendly === true); + } + + if (filters.isAvailableFiltered) { + filtered = filtered.filter(shelter => (shelter.shelteredPeople ?? 0) < (shelter.capacity ?? 0)); + } + + if (filters.needVolunteers) { + filtered = filtered.filter(shelter => shelter.shelterSupplies.some(supply => supply.tags.includes('NeedVolunteers'))); + } + + setFilteredData(filtered); + }; + return (

@@ -65,13 +105,13 @@ const ShelterListView = React.forwardRef(

))} -
+
@@ -86,15 +126,24 @@ const ShelterListView = React.forwardRef( Limpar Filtros )} + toggleFilter('isPetFriendlyFiltered')} variant={filters.isPetFriendlyFiltered ? 'destructive' : 'outline'}> + Aceita Pets + + toggleFilter('needVolunteers')} variant={filters.needVolunteers ? 'destructive' : 'outline'}> + Voluntários + + toggleFilter('isAvailableFiltered')} variant={filters.isAvailableFiltered ? 'destructive' : 'outline'}> + Disponível +
{loading ? ( - ) : data.length === 0 ? ( + ) : filteredData.length === 0 ? ( ) : ( - {data.map((s, idx) => ( + {filteredData.map((s, idx) => ( ))} {hasMoreItems ? ( diff --git a/src/pages/Home/components/ShelterListView/types.ts b/src/pages/Home/components/ShelterListView/types.ts index 6e817200..7410a30e 100644 --- a/src/pages/Home/components/ShelterListView/types.ts +++ b/src/pages/Home/components/ShelterListView/types.ts @@ -1,6 +1,8 @@ import { IUseSheltersData } from '@/hooks/useShelters/types'; import { IFilterFormProps } from '../Filter/types'; +export type FilterKey = 'isPetFriendlyFiltered' | 'needVolunteers' | 'isAvailableFiltered' | 'isUnavailableFiltered' | 'isConfirmFiltered'; + export interface IShelterListViewProps extends React.ComponentPropsWithoutRef<'div'> { count: number;