diff --git a/src/app/punto-recogida/page.js b/src/app/punto-recogida/page.js index b993a420..e61daec3 100644 --- a/src/app/punto-recogida/page.js +++ b/src/app/punto-recogida/page.js @@ -1,13 +1,14 @@ 'use client'; -import { useState, useCallback } from 'react'; -import { Package } from 'lucide-react'; +import { useState, useCallback, useEffect } from 'react'; import { supabase } from '@/lib/supabase/client'; +import { MapPin, Phone, Package, House, Contact, Megaphone } from 'lucide-react'; +import AddressAutocomplete from '@/components/AddressAutocomplete'; import { isValidPhone } from '@/helpers/utils'; import { PhoneInput } from '@/components/PhoneInput'; -export default function PuntoRecogida() { - const [formData, setFormData] = useState({ +export default function PuntosRecogida() { + const initialFormData = { name: '', type: 'permanente', location: '', @@ -17,13 +18,14 @@ export default function PuntoRecogida() { accepted_items: [], urgent_needs: '', status: 'active', - }); + }; - const [status, setStatus] = useState({ - isSubmitting: false, - error: null, - success: false, - }); + const [formData, setFormData] = useState(initialFormData); + const [showForm, setShowForm] = useState(false); + const [loading, setLoading] = useState(false); + const [collectionPoints, setCollectionPoints] = useState([]); + const [error, setError] = useState(null); + const [success, setSuccess] = useState(false); const tiposAyuda = ['Alimentos', 'Agua', 'Ropa', 'Mantas', 'Medicamentos', 'Productos de higiene']; @@ -31,18 +33,36 @@ export default function PuntoRecogida() { setFormData((formData) => ({ ...formData, contact_phone: phoneNumber })); }, []); - const handleSubmit = async (e) => { + useEffect(() => { + fetchCollectionPoints(); + }, []); + + async function fetchCollectionPoints() { + try { + let { data, error } = await supabase + .from('collection_points') + .select('*') + .order('created_at', { ascending: false }); + + if (error) throw error; + setCollectionPoints(data || []); + } catch (error) { + console.error('Error:', error); + setError('Error al cargar los puntos de recogida'); + } + } + + async function handleSubmit(e) { e.preventDefault(); - setStatus({ isSubmitting: true, error: null, success: false }); + setLoading(true); + setError(null); try { - // Validar campos requeridos - if (!formData.name || !formData.location || !formData.city || !formData.contact_name || !formData.contact_phone) { - throw new Error('Por favor, complete todos los campos obligatorios'); - } + const requiredFields = ['name', 'location', 'contact_phone']; + const missingFields = requiredFields.filter((field) => !formData[field]); - if (formData.accepted_items.length === 0) { - throw new Error('Seleccione al menos un tipo de ayuda'); + if (missingFields.length > 0) { + throw new Error('Por favor completa todos los campos obligatorios'); } if (!isValidPhone(formData.contact_phone)) { @@ -50,150 +70,261 @@ export default function PuntoRecogida() { return; } - // Insertar en Supabase directamente - const { error } = await supabase.from('collection_points').insert([formData]); - - if (error) throw error; - - // Limpiar formulario - setFormData({ - name: '', + const pointData = { + name: formData.name, type: 'permanente', - location: '', - city: '', - contact_name: '', - contact_phone: '', - accepted_items: [], - urgent_needs: '', + location: formData.location, + city: formData.city || null, + contact_name: formData.contact_name || null, + contact_phone: formData.contact_phone, + accepted_items: formData.accepted_items || [], + urgent_needs: formData.urgent_needs || null, status: 'active', - }); + }; + + const { error: insertError } = await supabase.from('collection_points').insert([pointData]); - setStatus({ isSubmitting: false, error: null, success: true }); - setTimeout(() => setStatus((prev) => ({ ...prev, success: false })), 5000); + if (insertError) throw insertError; + + await fetchCollectionPoints(); + setSuccess(true); + setShowForm(false); + setFormData(initialFormData); + + setTimeout(() => setSuccess(false), 3000); } catch (error) { - console.error('Error:', error); - setStatus({ - isSubmitting: false, - error: error.message || 'Error al registrar el punto de recogida', - success: false, - }); + console.error('Error al registrar punto de recogida:', error); + setError(error.message || 'Error al registrar el punto de recogida'); + } finally { + setLoading(false); } - }; + } return ( -
{status.error}
-Punto de recogida registrado correctamente
-