Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update/filtro casos activos #191

Closed
wants to merge 2 commits into from
Closed

Update/filtro casos activos #191

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2aeea56
Update page.tsx
GuillePrograma94 Nov 10, 2024
84ba9da
Update page.tsx
GuillePrograma94 Nov 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 28 additions & 4 deletions src/app/casos-activos/ofertas/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Pagination from '@/components/Pagination';
import { tiposAyudaOptions } from '@/helpers/constants';
import { useRouter, useSearchParams } from 'next/navigation';
import OfferCard from '@/components/OfferCard';
import { useTowns } from '@/context/TownProvider';
import { HelpRequestData } from '@/types/Requests';

export const dynamic = 'force-dynamic';
Expand All @@ -21,7 +22,7 @@ export default function OfertasPage() {
function Ofertas() {
const searchParams = useSearchParams();
const router = useRouter();
const {} = router;
const { towns, isLoading: townsLoading, error: townsError } = useTowns();

const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
Expand All @@ -35,17 +36,18 @@ function Ofertas() {
return Math.ceil(count / itemsPerPage) || 0;
};

const updateFilter = (filter: 'ayuda' | 'page', value: string | number) => {
const updateFilter = (filter: 'ayuda' | 'pueblo' | 'page', value: string | number) => {
const params = new URLSearchParams(searchParams.toString());
params.set(filter, value.toString());
router.push(`?${params.toString()}`);
};

const [filtroData, setFiltroData] = useState({
ayuda: searchParams.get('acepta') || 'todas',
pueblo: searchParams.get('pueblo') || 'todos',
});

const changeDataFilter = (type: 'ayuda', newFilter: string) => {
const changeDataFilter = (type: 'ayuda' | 'pueblo', newFilter: string) => {
setFiltroData((prev) => ({
...prev,
[type]: newFilter,
Expand All @@ -67,11 +69,16 @@ function Ofertas() {
// Comenzamos la consulta
const query = supabase.from('help_requests').select('*', { count: 'exact' }).eq('type', 'ofrece');

// Solo agregar filtro si no es "todos"
// Solo agregar filtro de ayuda si no es "todos"
if (filtroData.ayuda !== 'todas') {
query.contains('help_type', [filtroData.ayuda]);
}

// Solo agregar filtro de pueblo si no es "todos"
if (filtroData.pueblo !== 'todos') {
query.eq('town_id', filtroData.pueblo); // Filtra por el ID del pueblo
}

query.neq('status', 'finished');
// Ejecutar la consulta con paginación
const { data, count, error } = await query
Expand Down Expand Up @@ -112,12 +119,15 @@ function Ofertas() {
);
}

const sortedTowns = towns.slice().sort((a, b) => (a.name ?? "").localeCompare(b.name ?? "")); // Organizamos de A-Z los nombres de los pueblos obtenidos.

return (
<>
{/* FILTROS */}
<div className="flex flex-col sm:flex-row gap-2 items-center justify-between">
<p className="font-bold text-md">Filtros</p>
<div className="flex flex-col sm:flex-row gap-2 w-full justify-end">
{/* Filtro de Ayuda */}
<select
value={filtroData.ayuda}
onChange={(e) => changeDataFilter('ayuda', e.target.value)}
Expand All @@ -130,6 +140,20 @@ function Ofertas() {
</option>
))}
</select>

{/* Filtro de Pueblo */}
<select
value={filtroData.pueblo}
onChange={(e) => changeDataFilter('pueblo', e.target.value)}
className="px-4 py-2 rounded-lg w-full sm:w-auto border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white text-gray-900 shadow-sm"
>
<option value="todos">Todos los pueblos</option>
{sortedTowns.map((town) => (
<option key={town.id} value={town.id}>
{town.name}
</option>
))}
</select>
</div>
</div>
<div className="grid gap-4">
Expand Down
4 changes: 3 additions & 1 deletion src/app/casos-activos/solicitudes/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,8 @@ function Solicitudes() {
);
}

const sortedTowns = towns.slice().sort((a, b) => (a.name ?? "").localeCompare(b.name ?? "")); // Organizamos de A-Z los nombres de los pueblos obtenidos.

return (
<>
{/* FILTROS */}
Expand Down Expand Up @@ -183,7 +185,7 @@ function Solicitudes() {
className="px-4 py-2 rounded-lg w-full border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white text-gray-900 shadow-sm"
>
<option value="todos">Todos los pueblos</option>
{towns.map((item) => (
{sortedTowns.map((item) => (
<option key={item.id} value={item.id}>
{item.name}
</option>
Expand Down
Loading