From 6fad85056c0ae82eca7e6eb4f3cc6f36c8574b86 Mon Sep 17 00:00:00 2001
From: Pinx0 <plponce@gmail.com>
Date: Fri, 8 Nov 2024 19:30:36 +0100
Subject: [PATCH 01/15] refactor: swich to TS

---
 src/app/punto-recogida/page.tsx               |  4 +-
 src/app/puntos-entrega/page.tsx               |  4 +-
 ...utocomplete.js => AddressAutocomplete.tsx} | 70 ++++++++++++++-----
 3 files changed, 57 insertions(+), 21 deletions(-)
 rename src/components/{AddressAutocomplete.js => AddressAutocomplete.tsx} (74%)

diff --git a/src/app/punto-recogida/page.tsx b/src/app/punto-recogida/page.tsx
index c0122674..c2b4942b 100644
--- a/src/app/punto-recogida/page.tsx
+++ b/src/app/punto-recogida/page.tsx
@@ -3,7 +3,7 @@
 import { useState, useCallback, useEffect, FormEvent } from 'react';
 import { supabase } from '@/lib/supabase/client';
 import { MapPin, Phone, Package, House, Contact, Megaphone } from 'lucide-react';
-import AddressAutocomplete from '@/components/AddressAutocomplete';
+import AddressAutocomplete, { AddressDetails } from '@/components/AddressAutocomplete';
 import { isValidPhone } from '@/helpers/utils';
 import { PhoneInput } from '@/components/PhoneInput';
 import { CollectionPointData, CollectionPointInsert } from '@/types/DataPoints';
@@ -220,7 +220,7 @@ export default function PuntosRecogida() {
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-1">Dirección completa *</label>
                 <AddressAutocomplete
-                  onSelect={(address: any) => {
+                  onSelect={(address: AddressDetails) => {
                     setFormData((prev) => ({
                       ...prev,
                       location: address.fullAddress,
diff --git a/src/app/puntos-entrega/page.tsx b/src/app/puntos-entrega/page.tsx
index 5ea18b2b..822e7b68 100644
--- a/src/app/puntos-entrega/page.tsx
+++ b/src/app/puntos-entrega/page.tsx
@@ -3,7 +3,7 @@
 import { useState, useEffect, FormEvent } from 'react';
 import { supabase } from '@/lib/supabase/client';
 import { Truck, MapPin, Phone, Mail, Calendar, Package } from 'lucide-react';
-import AddressAutocomplete from '@/components/AddressAutocomplete';
+import AddressAutocomplete, { AddressDetails } from '@/components/AddressAutocomplete';
 import { DeliveryPointData, DeliveryPointInsert, isCoordinates } from '@/types/DataPoints';
 
 export default function PuntosEntrega() {
@@ -226,7 +226,7 @@ export default function PuntosEntrega() {
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-1">Dirección exacta *</label>
                 <AddressAutocomplete
-                  onSelect={(address: any) => {
+                  onSelect={(address: AddressDetails) => {
                     setFormData((prev) => ({
                       ...prev,
                       location: address.fullAddress,
diff --git a/src/components/AddressAutocomplete.js b/src/components/AddressAutocomplete.tsx
similarity index 74%
rename from src/components/AddressAutocomplete.js
rename to src/components/AddressAutocomplete.tsx
index 2cabb82c..4bd52871 100644
--- a/src/components/AddressAutocomplete.js
+++ b/src/components/AddressAutocomplete.tsx
@@ -1,24 +1,60 @@
 'use client';
 
-import { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { MapPin } from 'lucide-react';
 
+type Address = {
+  road: string;
+  house_number: string;
+  postcode: string;
+  city: string;
+  state: string;
+};
+
+type Suggestion = {
+  display_name: string;
+  full_address: string;
+  formatted_address: string;
+  formatted_locality: string;
+  lat: number;
+  lon: number;
+  address: Address;
+};
+
+type Coordinates = {
+  lat: number;
+  lon: number;
+};
+
+export type AddressDetails = {
+  fullAddress: string;
+  coordinates: Coordinates | null;
+  details: Address;
+};
+
+type AddressAutocompleteProps = {
+  onSelect: (details: AddressDetails) => void;
+  placeholder?: string;
+  initialValue?: string;
+  required?: boolean;
+};
+
 export default function AddressAutocomplete({
   onSelect,
   placeholder = 'Buscar dirección...',
   initialValue = '',
   required = false,
-}) {
-  const [query, setQuery] = useState(initialValue);
-  const [suggestions, setSuggestions] = useState([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [showSuggestions, setShowSuggestions] = useState(false);
-  const wrapperRef = useRef(null);
-  const debounceRef = useRef(null);
+}: AddressAutocompleteProps) {
+  const [query, setQuery] = useState<string>(initialValue);
+  const [suggestions, setSuggestions] = useState<Suggestion[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [showSuggestions, setShowSuggestions] = useState<boolean>(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
-    function handleClickOutside(event) {
-      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+    function handleClickOutside(event: MouseEvent) {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
         setShowSuggestions(false);
       }
     }
@@ -26,7 +62,7 @@ export default function AddressAutocomplete({
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
-  const searchAddress = useCallback(async (searchQuery) => {
+  const searchAddress = useCallback(async (searchQuery: string) => {
     if (!searchQuery || searchQuery.length < 3) {
       setSuggestions([]);
       return;
@@ -39,12 +75,12 @@ export default function AddressAutocomplete({
       );
       const data = await response.json();
 
-      const formattedSuggestions = data.map((item) => {
-        const addressParts = [];
+      const formattedSuggestions: Suggestion[] = data.map((item: any) => {
+        const addressParts: string[] = [];
         if (item.address?.road) addressParts.push(item.address.road);
         if (item.address?.house_number) addressParts.push(item.address.house_number);
 
-        const localityParts = [];
+        const localityParts: string[] = [];
         if (item.address?.postcode) localityParts.push(item.address.postcode);
         if (item.address?.city || item.address?.town || item.address?.village) {
           localityParts.push(item.address?.city || item.address?.town || item.address?.village);
@@ -80,7 +116,7 @@ export default function AddressAutocomplete({
     }
   }, []);
 
-  const handleInputChange = (e) => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     setQuery(value);
 
@@ -119,7 +155,7 @@ export default function AddressAutocomplete({
     };
   }, []);
 
-  const handleSelect = (suggestion) => {
+  const handleSelect = (suggestion: Suggestion) => {
     setQuery(suggestion.full_address);
     setShowSuggestions(false);
     onSelect({
@@ -140,6 +176,7 @@ export default function AddressAutocomplete({
           value={query || ''}
           onChange={handleInputChange}
           placeholder={placeholder}
+          required={required}
           className="w-full p-2 pr-10 border rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
         />
         <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
@@ -155,7 +192,6 @@ export default function AddressAutocomplete({
         <div className="absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg max-h-60 overflow-auto">
           {suggestions.map((suggestion, index) => (
             <button
-              required={required}
               key={index}
               onClick={() => handleSelect(suggestion)}
               className="w-full text-left px-4 py-2 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none"

From 00019a001d36c74f3089113ca833d05386d8dcb6 Mon Sep 17 00:00:00 2001
From: Pinx0 <plponce@gmail.com>
Date: Fri, 8 Nov 2024 19:30:56 +0100
Subject: [PATCH 02/15] refactor: narrow down the typing of the data

---
 src/lib/service.ts    | 12 +++++-------
 src/types/Requests.ts | 16 ++++++++++++++--
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/lib/service.ts b/src/lib/service.ts
index a0b2bb42..343357f9 100644
--- a/src/lib/service.ts
+++ b/src/lib/service.ts
@@ -1,20 +1,18 @@
 import { supabase } from './supabase/client';
-import { Database } from '@/types/database';
-import { HelpRequestAssignmentInsert, HelpRequestUpdate } from '@/types/Requests';
+import { HelpRequestAssignmentInsert, HelpRequestData, HelpRequestInsert, HelpRequestUpdate } from '@/types/Requests';
 import { createClient } from '@/lib/supabase/server';
-import { SupabaseClient } from '@supabase/supabase-js';
 
 export const helpRequestService = {
-  async createRequest(requestData: Database['public']['Tables']['help_requests']['Insert']) {
+  async createRequest(requestData: HelpRequestInsert) {
     const { data, error } = await supabase.from('help_requests').insert([requestData]).select();
 
     if (error) throw error;
-    return data[0];
+    return data[0] as HelpRequestData;
   },
   async editRequest(requestData: HelpRequestUpdate, id: number) {
     const { data, error } = await supabase.from('help_requests').update(requestData).eq('id', id).select();
     if (error) throw error;
-    return data;
+    return data[0] as HelpRequestData;
   },
   async getAll() {
     const { data, error } = await supabase.from('help_requests').select('*').order('created_at', { ascending: false });
@@ -26,7 +24,7 @@ export const helpRequestService = {
     const supabase = await getSupabaseClient();
     const { data, error } = await supabase.from('help_requests').select('*').eq('id', id).single();
     if (error) throw error;
-    return data;
+    return data as HelpRequestData;
   },
 
   async getRequestsByUser(user_id: string | undefined) {
diff --git a/src/types/Requests.ts b/src/types/Requests.ts
index 184276ea..67ab3e13 100644
--- a/src/types/Requests.ts
+++ b/src/types/Requests.ts
@@ -3,12 +3,24 @@ import { Database } from './database';
 export type HelpRequestType = 'necesita' | 'ofrece';
 export type HelpRequestUrgencyType = 'alta' | 'media' | 'baja';
 export type HelpRequestStatusType = 'pending' | 'in_progress' | 'active';
-export type HelpRequestData = Database['public']['Tables']['help_requests']['Row'];
-export type HelpRequestUpdate = Database['public']['Tables']['help_requests']['Update'];
+type HelpRequestJsonFields = {
+  additional_info: HelpRequestAdditionalInfo;
+  resources: HelpRequestResources | null;
+};
+export type HelpRequestData = Database['public']['Tables']['help_requests']['Row'] & HelpRequestJsonFields;
+export type HelpRequestInsert = Database['public']['Tables']['help_requests']['Insert'] & HelpRequestJsonFields;
+export type HelpRequestUpdate = Database['public']['Tables']['help_requests']['Update'] & HelpRequestJsonFields;
 export type HelpRequestAssignmentData = Database['public']['Tables']['help_request_assignments']['Row'];
 export type HelpRequestAssignmentInsert = Database['public']['Tables']['help_request_assignments']['Insert'];
 
 export type HelpRequestAdditionalInfo = {
   special_situations?: string;
   email?: string;
+  experience?: string;
+};
+
+export type HelpRequestResources = {
+  radius?: number;
+  vehicle?: string;
+  availability?: string[];
 };

From 7b524b4f5d7cbff18e3df1607c9ec798660ecc1d Mon Sep 17 00:00:00 2001
From: Pinx0 <plponce@gmail.com>
Date: Fri, 8 Nov 2024 19:31:28 +0100
Subject: [PATCH 03/15] refactor: change to ts

---
 src/app/ofertas/editar/[id]/page.tsx          |  13 +-
 src/app/ofrecer-ayuda/page.tsx                |   4 +-
 src/components/HelpOffers/CreateHelpOffer.tsx |  54 ++
 src/components/HelpOffers/EditHelpOffer.tsx   |  66 +++
 src/components/HelpOffers/HelpOfferForm.tsx   | 278 +++++++++++
 src/components/OfferHelp.js                   | 460 ------------------
 src/helpers/constants.ts                      |  20 +-
 7 files changed, 414 insertions(+), 481 deletions(-)
 create mode 100644 src/components/HelpOffers/CreateHelpOffer.tsx
 create mode 100644 src/components/HelpOffers/EditHelpOffer.tsx
 create mode 100644 src/components/HelpOffers/HelpOfferForm.tsx
 delete mode 100644 src/components/OfferHelp.js

diff --git a/src/app/ofertas/editar/[id]/page.tsx b/src/app/ofertas/editar/[id]/page.tsx
index 57c438af..6707924d 100644
--- a/src/app/ofertas/editar/[id]/page.tsx
+++ b/src/app/ofertas/editar/[id]/page.tsx
@@ -1,7 +1,7 @@
-import OfferHelp from '@/components/OfferHelp';
 import Unauthorized from '@/components/Unauthorized';
 import { createClient } from '@/lib/supabase/server';
 import { helpRequestService } from '@/lib/service';
+import EditHelpOffer from '@/components/HelpOffers/EditHelpOffer';
 
 export default async function EditarSolicitud({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
@@ -12,14 +12,5 @@ export default async function EditarSolicitud({ params }: { params: Promise<{ id
   }
   const numberId = Number(id);
   const request = await helpRequestService.getOne(numberId);
-  return (
-    <OfferHelp
-      title="Editar solicitud de ayuda"
-      submitType="edit"
-      data={request}
-      id={numberId}
-      button={['Editar oferta', 'Editando oferta...']}
-      redirect="/ofertas"
-    />
-  );
+  return <EditHelpOffer request={request} id={numberId} />;
 }
diff --git a/src/app/ofrecer-ayuda/page.tsx b/src/app/ofrecer-ayuda/page.tsx
index 63783a6b..4ef3528e 100644
--- a/src/app/ofrecer-ayuda/page.tsx
+++ b/src/app/ofrecer-ayuda/page.tsx
@@ -1,5 +1,5 @@
-import OfferHelp from '@/components/OfferHelp';
+import CreateHelpOffer from '@/components/HelpOffers/CreateHelpOffer';
 
 export default function OfrecerAyuda() {
-  return <OfferHelp />;
+  return <CreateHelpOffer />;
 }
diff --git a/src/components/HelpOffers/CreateHelpOffer.tsx b/src/components/HelpOffers/CreateHelpOffer.tsx
new file mode 100644
index 00000000..17eb256b
--- /dev/null
+++ b/src/components/HelpOffers/CreateHelpOffer.tsx
@@ -0,0 +1,54 @@
+import HelpOfferForm, { HelpOfferFormData } from './HelpOfferForm';
+import { helpRequestService } from '@/lib/service';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { useRouter } from 'next/navigation';
+import { HelpRequestInsert } from '@/types/Requests';
+import { useSession } from '@/context/SessionProvider';
+
+function formToDatabaseMap(userId: string | null, formData: HelpOfferFormData): HelpRequestInsert {
+  return {
+    description: formData.comentarios,
+    resources: {
+      radius: formData.radio,
+      vehicle: formData.vehiculo,
+      availability: formData.disponibilidad,
+    },
+    town_id: formData.pueblo,
+    user_id: userId,
+    type: 'ofrece',
+    other_help: formData.otraAyuda,
+    help_type: formData.tiposAyuda,
+    latitude: formData.coordinates?.lat,
+    longitude: formData.coordinates?.lng,
+    status: formData.status,
+    location: formData.ubicacion,
+    name: formData.nombre,
+    contact_info: formData.telefono,
+    additional_info: {
+      email: formData.email,
+      experience: formData.experiencia,
+    },
+  };
+}
+
+export default function CreateHelpOffer() {
+  const queryClient = useQueryClient();
+  const router = useRouter();
+  const session = useSession();
+
+  const mutation = useMutation({
+    mutationFn: (data: HelpOfferFormData) =>
+      helpRequestService.createRequest(formToDatabaseMap(session.user?.id ?? null, data)),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['help_requests'] });
+      router.push('/casos-activos/ofertas');
+    },
+    onError: (e) => {
+      console.error('Error al crear la oferta de ayuda', e);
+      toast.error('Error al crear la oferta :(');
+    },
+  });
+
+  return <HelpOfferForm submitMutation={mutation.mutateAsync} buttonText={['Ofrecer ayuda', 'Enviando...']} />;
+}
diff --git a/src/components/HelpOffers/EditHelpOffer.tsx b/src/components/HelpOffers/EditHelpOffer.tsx
new file mode 100644
index 00000000..18c72d92
--- /dev/null
+++ b/src/components/HelpOffers/EditHelpOffer.tsx
@@ -0,0 +1,66 @@
+import HelpOfferForm, { HelpOfferFormData } from './HelpOfferForm';
+import { helpRequestService } from '@/lib/service';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { useRouter } from 'next/navigation';
+import { HelpRequestData, HelpRequestUpdate } from '@/types/Requests';
+
+type EditHelpOfferProps = {
+  id: number;
+  request: HelpRequestData;
+};
+
+function formToDatabaseMap(request: HelpRequestData, formData: HelpOfferFormData): HelpRequestUpdate {
+  return {
+    description: formData.comentarios,
+    resources: {
+      radius: formData.radio,
+      vehicle: formData.vehiculo,
+      availability: formData.disponibilidad,
+    },
+    town_id: formData.pueblo,
+    id: request.id,
+    user_id: request.user_id,
+    type: request.type,
+    other_help: formData.otraAyuda,
+    help_type: formData.tiposAyuda,
+    latitude: formData.coordinates?.lat,
+    longitude: formData.coordinates?.lng,
+    status: formData.status,
+    location: formData.ubicacion,
+    created_at: request.created_at,
+    name: formData.nombre,
+    contact_info: formData.telefono,
+    additional_info: {
+      email: formData.email,
+      experience: formData.experiencia,
+    },
+  };
+}
+
+export default function EditHelpOffer({ id, request }: EditHelpOfferProps) {
+  const queryClient = useQueryClient();
+  const router = useRouter();
+
+  const mutation = useMutation({
+    mutationFn: (data: HelpOfferFormData) => helpRequestService.createRequest(formToDatabaseMap(request, data)),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['help_requests'] });
+      router.push(`/ofertas/${id}`);
+    },
+    onError: (e) => {
+      console.error('Error al editar la oferta de ayuda', e);
+      toast.error('Error al editar la oferta :(');
+    },
+  });
+  return (
+    <HelpOfferForm
+      data={{
+        ...request,
+        coordinates: { lat: (request.latitude ?? 0)?.toString(), lng: (request.longitude ?? 0)?.toString() },
+      }}
+      submitMutation={mutation.mutateAsync}
+      buttonText={['Guardar cambios', 'Actualizando...']}
+    />
+  );
+}
diff --git a/src/components/HelpOffers/HelpOfferForm.tsx b/src/components/HelpOffers/HelpOfferForm.tsx
new file mode 100644
index 00000000..8ec6de69
--- /dev/null
+++ b/src/components/HelpOffers/HelpOfferForm.tsx
@@ -0,0 +1,278 @@
+import React, { useState, useCallback } from 'react';
+import AddressAutocomplete from '@/components/AddressAutocomplete';
+import { PhoneInput } from '@/components/PhoneInput';
+import { isValidPhone } from '@/helpers/utils';
+import { HelpRequestData } from '@/types/Requests';
+import { useSession } from '@/context/SessionProvider';
+import { Database } from '@/types/database';
+import { tiposAyudaArray } from '@/helpers/constants';
+
+export interface Coordinates {
+  lat: number;
+  lng: number;
+}
+
+export type HelpOfferFormData = {
+  aceptaProtocolo: boolean;
+  nombre: string;
+  telefono: string;
+  email: string;
+  ubicacion: string;
+  tiposAyuda: Database['public']['Enums']['help_type_enum'][];
+  otraAyuda: string;
+  vehiculo: string;
+  disponibilidad: string[];
+  radio: number;
+  experiencia: string;
+  comentarios: string;
+  pueblo: number;
+  status: string;
+  coordinates?: Coordinates;
+};
+
+export interface HelpOfferProps {
+  town?: { id: string; name: string };
+  onClose?: () => void;
+  isModal?: boolean;
+  data?: HelpRequestData;
+  title?: string;
+  buttonText: [string, string];
+  id?: number;
+  redirect?: string;
+  submitMutation: (data: HelpOfferFormData) => Promise<any>;
+}
+
+export default function HelpOfferForm({ town, onClose, data, buttonText, submitMutation }: HelpOfferProps) {
+  const session = useSession();
+
+  const [formData, setFormData] = useState<HelpOfferFormData>({
+    nombre: data?.name || session?.user?.user_metadata?.full_name || '',
+    telefono: data?.contact_info || session?.user?.user_metadata?.telefono || '',
+    email: data?.additional_info?.email || session?.user?.user_metadata?.email || '',
+    ubicacion: data?.location || '',
+    tiposAyuda: data?.help_type || [],
+    otraAyuda: data?.other_help || '',
+    vehiculo: data?.resources?.vehicle || '',
+    disponibilidad: data?.resources?.availability || [],
+    radio: data?.resources?.radius || 1,
+    experiencia: data?.additional_info?.experience || '',
+    comentarios: data?.description || '',
+    aceptaProtocolo: !!data,
+    pueblo: data?.town_id || 0,
+    status: data?.status || '',
+  });
+
+  const handleTipoAyudaChange = (tipo: Database['public']['Enums']['help_type_enum']) => {
+    setFormData((prev) => ({
+      ...prev,
+      tiposAyuda: prev.tiposAyuda.includes(tipo)
+        ? prev.tiposAyuda.filter((t) => t !== tipo)
+        : [...prev.tiposAyuda, tipo],
+    }));
+  };
+
+  const handlePhoneChange = useCallback((phoneNumber: string) => {
+    setFormData((prev) => ({ ...prev, telefono: phoneNumber }));
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!formData.ubicacion) {
+      alert('La ubicación es obligatoria');
+      return;
+    }
+    if (!formData.aceptaProtocolo) {
+      alert('Debes aceptar el protocolo de actuación');
+      return;
+    }
+    if (!isValidPhone(formData.telefono)) {
+      alert('El teléfono de contacto no es válido.');
+      return;
+    }
+    await submitMutation(formData);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="bg-white rounded-lg p-6 w-full">
+      {/* Datos personales */}
+      <div className="space-y-6 max-h-[65vh] overflow-y-auto p-2">
+        <div className="grid md:grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Nombre completo</label>
+            <input
+              type="text"
+              value={formData.nombre}
+              onChange={(e) => setFormData({ ...formData, nombre: e.target.value })}
+              className="w-full p-2 border rounded focus:ring-2 focus:ring-green-500 focus:border-green-500"
+            />
+          </div>
+          <PhoneInput phoneNumber={formData.telefono} onChange={handlePhoneChange} required />
+        </div>
+
+        {/* Ubicación exacta */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Ubicación exacta *</label>
+          <AddressAutocomplete
+            initialValue={data?.location ?? ''}
+            onSelect={(address) => {
+              setFormData({
+                ...formData,
+                ubicacion: address.fullAddress,
+                coordinates: address.coordinates
+                  ? {
+                      lat: address.coordinates.lat,
+                      lng: address.coordinates.lon,
+                    }
+                  : undefined,
+              });
+            }}
+            placeholder="Calle, número, piso, ciudad..."
+            required
+          />
+        </div>
+
+        {/* Tipo de ayuda */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">Tipo de ayuda que puedes ofrecer</label>
+          <div className="grid md:grid-cols-2 gap-2">
+            {tiposAyudaArray.map((tipo) => (
+              <label
+                key={tipo.id}
+                className="flex items-center p-3 bg-gray-50 rounded hover:bg-gray-100 cursor-pointer"
+              >
+                <input
+                  type="checkbox"
+                  checked={formData.tiposAyuda.includes(tipo.id)}
+                  onChange={() => handleTipoAyudaChange(tipo.id)}
+                  className="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"
+                />
+                <span className="ml-2">{tipo.label}</span>
+              </label>
+            ))}
+          </div>
+        </div>
+
+        {/* Otra ayuda específica */}
+        {formData.tiposAyuda.includes('otros') && (
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">¿Qué tipo de ayuda?</label>
+            <textarea
+              value={formData.otraAyuda}
+              onChange={(e) => setFormData({ ...formData, otraAyuda: e.target.value })}
+              className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500"
+              rows={3}
+              placeholder="Especifica qué tipo de ayuda..."
+            />
+          </div>
+        )}
+
+        {/* Vehículo disponible */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Vehículo disponible</label>
+          <select
+            value={formData.vehiculo}
+            onChange={(e) => setFormData({ ...formData, vehiculo: e.target.value })}
+            className="w-full p-2 border rounded focus:ring-2 focus:ring-green-500 focus:border-green-500"
+          >
+            <option value="">No dispongo de vehículo</option>
+            <option value="coche">Coche</option>
+            <option value="todoterreno">Todoterreno/4x4</option>
+            <option value="furgoneta">Furgoneta</option>
+            <option value="barca">Barca</option>
+          </select>
+        </div>
+
+        {/* Radio de acción */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Radio de acción (km)</label>
+          <input
+            type="number"
+            value={formData.radio}
+            onChange={(e) =>
+              setFormData({
+                ...formData,
+                radio: Number(e.target.value),
+              })
+            }
+            className="w-full p-2 border rounded focus:ring-2 focus:ring-green-500 focus:border-green-500"
+            min={1}
+            placeholder="¿Cuántos kilómetros puedes desplazarte?"
+          />
+        </div>
+
+        {/* Experiencia relevante */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Experiencia relevante</label>
+          <textarea
+            value={formData.experiencia}
+            onChange={(e) => setFormData({ ...formData, experiencia: e.target.value })}
+            className="w-full p-2 border rounded focus:ring-2 focus:ring-green-500 focus:border-green-500"
+            rows={3}
+            placeholder="Describe tu experiencia en situaciones similares, formación, etc."
+          />
+        </div>
+
+        {/* Comentarios adicionales */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Comentarios adicionales</label>
+          <textarea
+            value={formData.comentarios}
+            onChange={(e) => setFormData({ ...formData, comentarios: e.target.value })}
+            className="w-full p-2 border rounded focus:ring-2 focus:ring-green-500 focus:border-green-500"
+            rows={3}
+            placeholder="Información adicional que quieras compartir"
+          />
+        </div>
+
+        {/* Pueblo */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Pueblo *</label>
+          <select
+            value={formData.pueblo?.toString()}
+            onChange={(e) => setFormData({ ...formData, pueblo: Number(e.target.value) })}
+            className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500"
+            required
+          >
+            <option value="">Selecciona un pueblo</option>
+            {town && (
+              <option key={town.id} value={town.id}>
+                {town.name}
+              </option>
+            )}
+          </select>
+        </div>
+
+        {/* Aceptación del protocolo */}
+        <div className="flex items-start">
+          <label className="ml-2 text-sm text-gray-700 flex items-start gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={formData.aceptaProtocolo}
+              onChange={(e) => setFormData({ ...formData, aceptaProtocolo: e.target.checked })}
+              className="mt-1 h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"
+            />
+            Acepto seguir el protocolo de actuación y las indicaciones de las autoridades competentes.
+          </label>
+        </div>
+      </div>
+
+      {/* Botones de acción */}
+      <div className="flex flex-col sm:flex-row gap-4">
+        {onClose && (
+          <button
+            onClick={onClose}
+            className="w-full bg-red-500 hover:bg-red-600 text-white py-3 px-4 rounded-lg font-semibold"
+          >
+            Cancelar
+          </button>
+        )}
+        <button
+          type="submit"
+          className="w-full bg-green-500 hover:bg-green-600 text-white py-3 px-4 rounded-lg font-semibold"
+        >
+          {buttonText[0]}
+        </button>
+      </div>
+    </form>
+  );
+}
diff --git a/src/components/OfferHelp.js b/src/components/OfferHelp.js
deleted file mode 100644
index 524b4495..00000000
--- a/src/components/OfferHelp.js
+++ /dev/null
@@ -1,460 +0,0 @@
-'use client';
-
-import { useState, useCallback } from 'react';
-import { HeartHandshake, Check } from 'lucide-react';
-import { helpRequestService } from '@/lib/service';
-import AddressAutocomplete from '@/components/AddressAutocomplete';
-import { mapToIdAndLabel, tiposAyudaOptions as _tiposAyudaOptions } from '@/helpers/constants';
-import { isValidPhone } from '@/helpers/utils';
-
-import { PhoneInput } from '@/components/PhoneInput';
-import { formatPhoneNumber } from '@/helpers/utils';
-import { useTowns } from '@/context/TownProvider';
-import { useRouter } from 'next/navigation';
-import { useSession } from '@/context/SessionProvider';
-
-export default function OfferHelp({
-  town = undefined,
-  onClose = undefined,
-  isModal = false,
-  data = {},
-  title = '',
-  button = ['Registrar oferta de ayuda', 'Enviando oferta...'],
-  id = 0,
-  redirect = '/casos-activos/ofertas',
-  submitType = 'create',
-}) {
-  const { towns } = useTowns();
-  const session = useSession();
-
-  const router = useRouter();
-
-  const userId = session.user?.id;
-
-  const [formData, setFormData] = useState({
-    nombre: data.name || session?.user?.user_metadata?.full_name || '',
-    telefono: data.contact_info || session?.user?.user_metadata?.telefono || '',
-    email: data.additional_info?.email || session?.user?.user_metadata?.email || '',
-    ubicacion: data.location || '',
-    tiposAyuda: data.help_type || [],
-    otraAyuda: data.other_help || '',
-    vehiculo: data.resources?.vehicle || '',
-    disponibilidad: data.resources?.availability || [],
-    radio: data.resources?.radius || 1,
-    experiencia: data.additional_info?.experience || '',
-    comentarios: data.description || '',
-    aceptaProtocolo: !!submitType,
-    pueblo: submitType === 'edit' ? data?.town_id : town ? town.id : '',
-    status: data?.status || '',
-  });
-
-  const [status, setStatus] = useState({
-    isSubmitting: false,
-    error: null,
-    success: false,
-  });
-
-  const tiposAyudaOptions = mapToIdAndLabel(_tiposAyudaOptions);
-
-  const diasSemana = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'];
-
-  const handleTipoAyudaChange = (tipo) => {
-    setFormData((prev) => ({
-      ...prev,
-      tiposAyuda: prev.tiposAyuda.includes(tipo)
-        ? prev.tiposAyuda.filter((t) => t !== tipo)
-        : [...prev.tiposAyuda, tipo],
-    }));
-  };
-
-  const handleDisponibilidadChange = (dia) => {
-    setFormData((prev) => ({
-      ...prev,
-      disponibilidad: prev.disponibilidad.includes(dia)
-        ? prev.disponibilidad.filter((d) => d !== dia)
-        : [...prev.disponibilidad, dia],
-    }));
-  };
-
-  const handlePhoneChange = useCallback((phoneNumber) => {
-    setFormData((formData) => ({ ...formData, telefono: phoneNumber }));
-  }, []);
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-
-    // Form validation
-    if (!formData.ubicacion) {
-      alert('La ubicación es obligatoria');
-      return;
-    }
-
-    if (!formData.aceptaProtocolo) {
-      alert('Debes aceptar el protocolo de actuación');
-      return;
-    }
-
-    if (!isValidPhone(formData.telefono)) {
-      alert('El teléfono de contacto no es válido.');
-      return;
-    }
-
-    setStatus({ isSubmitting: true, error: null, success: false });
-
-    try {
-      const helpOfferData = {
-        type: 'ofrece',
-        name: formData.nombre,
-        location: formData.ubicacion,
-        description: formData.comentarios,
-        contact_info: formatPhoneNumber(formData.telefono),
-        additional_info: {
-          email: formData.email,
-          experience: formData.experiencia,
-        },
-        resources: {
-          vehicle: formData.vehiculo,
-          availability: formData.disponibilidad,
-          radius: formData.radio,
-        },
-        latitude: formData.coordinates ? parseFloat(formData.coordinates.lat) : null,
-        longitude: formData.coordinates ? parseFloat(formData.coordinates.lng) : null,
-        help_type: formData.tiposAyuda,
-        other_help: formData.otraAyuda,
-        town_id: formData.pueblo,
-        status: formData.status || 'active',
-        user_id: userId,
-      };
-
-      if (submitType === 'create') {
-        const { error } = await helpRequestService.createRequest(helpOfferData);
-        if (error) {
-          throw new Error(error.message);
-        }
-      }
-      if (submitType === 'edit') {
-        console.log('EDITAR');
-        const { error } = await helpRequestService.editRequest(helpOfferData, id);
-        if (error) {
-          throw new Error(error.message);
-        }
-      }
-
-      setFormData({
-        nombre: '',
-        telefono: '',
-        email: '',
-        ubicacion: '',
-        tiposAyuda: [],
-        otraAyuda: '',
-        vehiculo: '',
-        disponibilidad: [],
-        radio: 1,
-        experiencia: '',
-        comentarios: '',
-        aceptaProtocolo: false,
-        pueblo: '',
-        status: 'active',
-      });
-      setStatus({ isSubmitting: false, error: null, success: true });
-      setStatus((prev) => ({ ...prev, success: false }));
-      router.push(redirect);
-    } catch (error) {
-      console.error('Error al registrar oferta de ayuda:', error);
-      setStatus({
-        isSubmitting: false,
-        error: `Error al registrar tu oferta de ayuda: ${error.message || 'Error desconocido'}`,
-        success: false,
-      });
-    }
-  };
-
-  return (
-    <form
-      onSubmit={handleSubmit}
-      className={`bg-white rounded-lg p-6 w-full relative flex flex-col gap-6 ${town ? 'max-w-2xl' : ''}`}
-    >
-      {/* Banner informativo */}
-      {submitType === 'create' ? (
-        <div className="bg-green-50 border-green-500 p-4 rounded">
-          <div className="flex items-start">
-            <HeartHandshake className="h-5 w-5 text-green-500 mt-0.5 mr-2" />
-            <div>
-              <h2 className="text-green-800 font-semibold">
-                Me apunto como voluntario {town ? 'en ' + town.name : ''}
-              </h2>
-              <p className="text-green-700 text-sm mt-1">
-                Al registrarte como voluntario, te comprometes a seguir las indicaciones de las autoridades y los
-                protocolos establecidos.
-              </p>
-            </div>
-          </div>
-        </div>
-      ) : (
-        <h1 className="text-2xl font-bold">{title}</h1>
-      )}
-      {status.error && (
-        <div className="bg-red-100 border-l-4 border-red-500 p-4 rounded">
-          <p className="text-red-700">{status.error}</p>
-        </div>
-      )}
-
-      {/* Formulario */}
-
-      <div className="space-y-6 max-h-[65vh] overflow-y-auto p-2">
-        {/* Datos personales */}
-        <div className="grid md:grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="fullName">
-              Nombre completo
-            </label>
-            <input
-              id="fullName"
-              type="text"
-              value={formData.nombre}
-              onChange={(e) => setFormData({ ...formData, nombre: e.target.value })}
-              className="w-full p-2 border rounded focus:ring-2 focus:ring-green-500 focus:border-green-500"
-            />
-          </div>
-          <PhoneInput phoneNumber={formData.telefono} onChange={handlePhoneChange} required />
-        </div>
-
-        {submitType === 'create' && (
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="userEmail">
-              Correo electrónico
-            </label>
-            <input
-              id="userEmail"
-              type="email"
-              value={formData.email}
-              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-              className="w-full p-2 border rounded focus:ring-2 focus:ring-green-500 focus:border-green-500"
-            />
-          </div>
-        )}
-        {submitType === 'edit' && (
-          <div>
-            <label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-1">
-              Progreso de tu solicitud
-            </label>
-            <select
-              name="status"
-              id="status"
-              value={formData.status}
-              onChange={(e) => setFormData({ ...formData, status: e.target.value })}
-              className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500"
-            >
-              <option value="active">Activa - Aún no ayudo</option>
-              <option value="progress">En progreso - Estoy en ello</option>
-              <option value="finished">Terminada - Ya he ayudado</option>
-            </select>
-          </div>
-        )}
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="address">
-            Ubicación exacta <span className="text-red-500">*</span>
-          </label>
-          <AddressAutocomplete
-            initialValue={data?.location}
-            onSelect={(address) => {
-              setFormData({
-                ...formData,
-                ubicacion: address.fullAddress,
-                coordinates: address.coordinates
-                  ? {
-                      lat: address.coordinates.lat,
-                      lng: address.coordinates.lon,
-                    }
-                  : null,
-              });
-            }}
-            placeholder="Calle, número, piso, ciudad..."
-            required
-          />
-          <p className="mt-1 text-sm text-gray-500">
-            Incluya todos los detalles posibles para poder localizarle (campo obligatorio)
-          </p>
-        </div>
-
-        {/* Tipos de ayuda */}
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-2">Tipo de ayuda que puedes ofrecer</label>
-          <div className="grid md:grid-cols-2 gap-2">
-            {tiposAyudaOptions.map((tipo) => (
-              <label
-                key={tipo.id}
-                className="flex items-center p-3 bg-gray-50 rounded hover:bg-gray-100 cursor-pointer"
-              >
-                <input
-                  type="checkbox"
-                  checked={formData.tiposAyuda.includes(tipo.id)}
-                  onChange={() => handleTipoAyudaChange(tipo.id)}
-                  className="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"
-                />
-                <span className="ml-2">{tipo.label}</span>
-              </label>
-            ))}
-          </div>
-        </div>
-
-        {formData.tiposAyuda.includes('otros') && (
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">¿Qué tipo de ayuda?</label>
-            <textarea
-              name="otraAyuda"
-              value={formData.otraAyuda}
-              onChange={(e) => setFormData({ ...formData, otraAyuda: e.target.value })}
-              className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500"
-              rows="3"
-              placeholder="Especifica qué tipo de ayuda..."
-            />
-          </div>
-        )}
-
-        {/* Vehículo */}
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Vehículo disponible</label>
-          <select
-            value={formData.vehiculo}
-            onChange={(e) => setFormData({ ...formData, vehiculo: e.target.value })}
-            className="w-full p-2 border rounded focus:ring-2 focus:ring-green-500 focus:border-green-500"
-          >
-            <option value="">No dispongo de vehículo</option>
-            <option value="coche">Coche</option>
-            <option value="todoterreno">Todoterreno/4x4</option>
-            <option value="furgoneta">Furgoneta</option>
-            <option value="barca">Barca</option>
-          </select>
-        </div>
-
-        {/* Disponibilidad */}
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-2">Disponibilidad</label>
-          <div className="flex flex-wrap gap-2">
-            {diasSemana.map((dia) => (
-              <label
-                key={dia}
-                className={`flex items-center p-2 rounded cursor-pointer ${
-                  formData.disponibilidad.includes(dia) ? 'bg-green-100 text-green-800' : 'bg-gray-50 hover:bg-gray-100'
-                }`}
-              >
-                <input
-                  type="checkbox"
-                  checked={formData.disponibilidad.includes(dia)}
-                  onChange={() => handleDisponibilidadChange(dia)}
-                  className="sr-only"
-                />
-                <span>{dia}</span>
-              </label>
-            ))}
-          </div>
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Radio de acción (km)</label>
-          <input
-            type="number"
-            value={formData.radio}
-            onChange={(e) => setFormData({ ...formData, radio: Number(e.target.value) })}
-            className="w-full p-2 border rounded focus:ring-2 focus:ring-green-500 focus:border-green-500"
-            min="1"
-            placeholder="¿Cuántos kilómetros puedes desplazarte?"
-          />
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Experiencia relevante</label>
-          <textarea
-            value={formData.experiencia}
-            onChange={(e) => setFormData({ ...formData, experiencia: e.target.value })}
-            className="w-full p-2 border rounded focus:ring-2 focus:ring-green-500 focus:border-green-500"
-            rows="3"
-            placeholder="Describe tu experiencia en situaciones similares, formación, etc."
-          />
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Comentarios adicionales</label>
-          <textarea
-            value={formData.comentarios}
-            onChange={(e) => setFormData({ ...formData, comentarios: e.target.value })}
-            className="w-full p-2 border rounded focus:ring-2 focus:ring-green-500 focus:border-green-500"
-            rows="3"
-            placeholder="Información adicional que quieras compartir"
-          />
-        </div>
-
-        {/* Pueblos */}
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="townName">
-            Pueblo <span className="text-red-500">*</span>
-          </label>
-          <select
-            id="townName"
-            name="pueblo"
-            value={formData.pueblo}
-            onChange={(e) => setFormData({ ...formData, pueblo: e.target.value })}
-            className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500"
-            required
-          >
-            <option value="">Selecciona un pueblo</option>
-            {towns.map((item) => (
-              <option key={item.id} value={item.id}>
-                {item.name}
-              </option>
-            ))}
-          </select>
-        </div>
-        {/* Aceptación de protocolo */}
-        <div className="flex items-start">
-          <label className="ml-2 text-sm text-gray-700 flex items-start gap-2 cursor-pointer">
-            <input
-              type="checkbox"
-              checked={formData.aceptaProtocolo}
-              onChange={(e) => setFormData({ ...formData, aceptaProtocolo: e.target.checked })}
-              className="mt-1 h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"
-            />
-            Acepto seguir el protocolo de actuación y las indicaciones de las autoridades competentes. Entiendo que mi
-            seguridad y la de los demás es prioritaria.
-          </label>
-        </div>
-      </div>
-      <div className="flex flex-col sm:flex-row gap-4">
-        {isModal && (
-          <button
-            type="submit"
-            className={`w-full bg-red-500 hover:bg-red-600 text-white py-3 px-4 rounded-lg font-semibold 
-              focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2`}
-            onClick={onClose}
-          >
-            Cancelar
-          </button>
-        )}
-        <button
-          type="submit"
-          disabled={status.isSubmitting}
-          className={`w-full ${
-            status.isSubmitting ? 'bg-gray-400 cursor-not-allowed' : 'bg-green-500 hover:bg-green-600'
-          } text-white py-3 px-4 rounded-lg font-semibold 
-              focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2`}
-        >
-          {status.isSubmitting ? button[1] : button[0]}
-        </button>
-      </div>
-      {status.success && (
-        <div className="fixed bottom-4 right-4 bg-green-100 border-l-4 border-green-500 p-4 rounded shadow-lg z-50">
-          <div className="flex items-center">
-            <Check className="h-5 w-5 text-green-500 mr-2" />
-            <div>
-              <p className="text-green-700 font-medium">Tu oferta de ayuda ha sido registrada correctamente.</p>
-              <p className="text-green-600 text-sm mt-1">
-                Gracias por tu disposición para ayudar. Te contactaremos si necesitamos tu apoyo.
-              </p>
-            </div>
-          </div>
-        </div>
-      )}
-    </form>
-  );
-}
diff --git a/src/helpers/constants.ts b/src/helpers/constants.ts
index f89eded4..37a254e1 100644
--- a/src/helpers/constants.ts
+++ b/src/helpers/constants.ts
@@ -10,13 +10,17 @@ export const tiposAyudaOptions = {
   reparto: 'Labores de reparto de alimentos a domicilio',
   donaciones: 'Labores de organización de donaciones',
   otros: 'Ayuda general',
-};
+} as const;
 
-export const tiposAyudaAcepta = ['Alimentos', 'Ropa', 'Mantas', 'Agua', 'Productos de higiene', 'Medicamentos'];
+type TipoAyudaId = keyof typeof tiposAyudaOptions;
+type TipoAyudaLabel = (typeof tiposAyudaOptions)[TipoAyudaId];
 
-export const mapToIdAndLabel = (data: any) => {
-  return Object.keys(data).map((key) => ({
-    id: key,
-    label: data[key],
-  }));
-};
+interface TipoAyudaOption {
+  id: TipoAyudaId;
+  label: TipoAyudaLabel;
+}
+
+export const tiposAyudaArray: TipoAyudaOption[] = Object.entries(tiposAyudaOptions).map(([id, label]) => ({
+  id: id as TipoAyudaId,
+  label,
+}));

From 78b1723263ce7e83022a0ec38a898dd4f4b839fb Mon Sep 17 00:00:00 2001
From: Pinx0 <plponce@gmail.com>
Date: Sat, 9 Nov 2024 17:22:58 +0100
Subject: [PATCH 04/15] refactor: unify offer edit and create forms

---
 src/components/HelpOffers/CreateHelpOffer.tsx |  2 ++
 src/components/HelpOffers/EditHelpOffer.tsx   |  9 ++++---
 src/components/HelpOffers/HelpOfferForm.tsx   | 27 +++++--------------
 src/types/Requests.ts                         |  2 ++
 4 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/src/components/HelpOffers/CreateHelpOffer.tsx b/src/components/HelpOffers/CreateHelpOffer.tsx
index 17eb256b..86d3ba77 100644
--- a/src/components/HelpOffers/CreateHelpOffer.tsx
+++ b/src/components/HelpOffers/CreateHelpOffer.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import HelpOfferForm, { HelpOfferFormData } from './HelpOfferForm';
 import { helpRequestService } from '@/lib/service';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
diff --git a/src/components/HelpOffers/EditHelpOffer.tsx b/src/components/HelpOffers/EditHelpOffer.tsx
index 18c72d92..f9fcb622 100644
--- a/src/components/HelpOffers/EditHelpOffer.tsx
+++ b/src/components/HelpOffers/EditHelpOffer.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import HelpOfferForm, { HelpOfferFormData } from './HelpOfferForm';
 import { helpRequestService } from '@/lib/service';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
@@ -6,7 +8,6 @@ import { useRouter } from 'next/navigation';
 import { HelpRequestData, HelpRequestUpdate } from '@/types/Requests';
 
 type EditHelpOfferProps = {
-  id: number;
   request: HelpRequestData;
 };
 
@@ -38,7 +39,7 @@ function formToDatabaseMap(request: HelpRequestData, formData: HelpOfferFormData
   };
 }
 
-export default function EditHelpOffer({ id, request }: EditHelpOfferProps) {
+export default function EditHelpOffer({ request }: EditHelpOfferProps) {
   const queryClient = useQueryClient();
   const router = useRouter();
 
@@ -46,7 +47,7 @@ export default function EditHelpOffer({ id, request }: EditHelpOfferProps) {
     mutationFn: (data: HelpOfferFormData) => helpRequestService.createRequest(formToDatabaseMap(request, data)),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['help_requests'] });
-      router.push(`/ofertas/${id}`);
+      router.push(`/ofertas/${request.id}`);
     },
     onError: (e) => {
       console.error('Error al editar la oferta de ayuda', e);
@@ -60,7 +61,7 @@ export default function EditHelpOffer({ id, request }: EditHelpOfferProps) {
         coordinates: { lat: (request.latitude ?? 0)?.toString(), lng: (request.longitude ?? 0)?.toString() },
       }}
       submitMutation={mutation.mutateAsync}
-      buttonText={['Guardar cambios', 'Actualizando...']}
+      buttonText={['Guardar cambios', 'Guardando...']}
     />
   );
 }
diff --git a/src/components/HelpOffers/HelpOfferForm.tsx b/src/components/HelpOffers/HelpOfferForm.tsx
index 8ec6de69..e3c1259b 100644
--- a/src/components/HelpOffers/HelpOfferForm.tsx
+++ b/src/components/HelpOffers/HelpOfferForm.tsx
@@ -1,11 +1,11 @@
 import React, { useState, useCallback } from 'react';
 import AddressAutocomplete from '@/components/AddressAutocomplete';
-import { PhoneInput } from '@/components/PhoneInput';
+import { PhoneInput } from '@/components/PhoneInput/PhoneInput';
 import { isValidPhone } from '@/helpers/utils';
-import { HelpRequestData } from '@/types/Requests';
+import { HelpRequestData, HelpRequestHelpType } from '@/types/Requests';
 import { useSession } from '@/context/SessionProvider';
-import { Database } from '@/types/database';
 import { tiposAyudaArray } from '@/helpers/constants';
+import { Town } from '@/types/Town';
 
 export interface Coordinates {
   lat: number;
@@ -18,7 +18,7 @@ export type HelpOfferFormData = {
   telefono: string;
   email: string;
   ubicacion: string;
-  tiposAyuda: Database['public']['Enums']['help_type_enum'][];
+  tiposAyuda: HelpRequestHelpType[];
   otraAyuda: string;
   vehiculo: string;
   disponibilidad: string[];
@@ -31,18 +31,13 @@ export type HelpOfferFormData = {
 };
 
 export interface HelpOfferProps {
-  town?: { id: string; name: string };
-  onClose?: () => void;
-  isModal?: boolean;
+  town?: Town;
   data?: HelpRequestData;
-  title?: string;
   buttonText: [string, string];
-  id?: number;
-  redirect?: string;
   submitMutation: (data: HelpOfferFormData) => Promise<any>;
 }
 
-export default function HelpOfferForm({ town, onClose, data, buttonText, submitMutation }: HelpOfferProps) {
+export default function HelpOfferForm({ town, data, buttonText, submitMutation }: HelpOfferProps) {
   const session = useSession();
 
   const [formData, setFormData] = useState<HelpOfferFormData>({
@@ -62,7 +57,7 @@ export default function HelpOfferForm({ town, onClose, data, buttonText, submitM
     status: data?.status || '',
   });
 
-  const handleTipoAyudaChange = (tipo: Database['public']['Enums']['help_type_enum']) => {
+  const handleTipoAyudaChange = (tipo: HelpRequestHelpType) => {
     setFormData((prev) => ({
       ...prev,
       tiposAyuda: prev.tiposAyuda.includes(tipo)
@@ -258,14 +253,6 @@ export default function HelpOfferForm({ town, onClose, data, buttonText, submitM
 
       {/* Botones de acción */}
       <div className="flex flex-col sm:flex-row gap-4">
-        {onClose && (
-          <button
-            onClick={onClose}
-            className="w-full bg-red-500 hover:bg-red-600 text-white py-3 px-4 rounded-lg font-semibold"
-          >
-            Cancelar
-          </button>
-        )}
         <button
           type="submit"
           className="w-full bg-green-500 hover:bg-green-600 text-white py-3 px-4 rounded-lg font-semibold"
diff --git a/src/types/Requests.ts b/src/types/Requests.ts
index 67ab3e13..1b535722 100644
--- a/src/types/Requests.ts
+++ b/src/types/Requests.ts
@@ -7,6 +7,7 @@ type HelpRequestJsonFields = {
   additional_info: HelpRequestAdditionalInfo;
   resources: HelpRequestResources | null;
 };
+export type HelpRequestHelpType = Database['public']['Enums']['help_type_enum'];
 export type HelpRequestData = Database['public']['Tables']['help_requests']['Row'] & HelpRequestJsonFields;
 export type HelpRequestInsert = Database['public']['Tables']['help_requests']['Insert'] & HelpRequestJsonFields;
 export type HelpRequestUpdate = Database['public']['Tables']['help_requests']['Update'] & HelpRequestJsonFields;
@@ -17,6 +18,7 @@ export type HelpRequestAdditionalInfo = {
   special_situations?: string;
   email?: string;
   experience?: string;
+  consent?: boolean;
 };
 
 export type HelpRequestResources = {

From 9c7b4a38de651b176d4605977c37989e46a7c36a Mon Sep 17 00:00:00 2001
From: Pinx0 <plponce@gmail.com>
Date: Sat, 9 Nov 2024 18:00:42 +0100
Subject: [PATCH 05/15] refactor: unify help request edit and create forms

---
 src/app/ofertas/editar/[id]/page.tsx          |   2 +-
 .../_components/Form/FormContainer.tsx        | 217 -----------------
 .../_components/Form/FormRenderer.tsx         | 215 -----------------
 .../solicitar-ayuda/_components/Form/index.ts |   3 -
 .../_components/TipoDeAyudaInputRenderer.tsx  |  27 ---
 .../TownSelector/TownSelectorDataWrapper.tsx  |  33 ---
 .../TownSelector/TownSelectorRenderer.tsx     |  35 ---
 .../_components/TownSelector/index.ts         |   3 -
 .../solicitar-ayuda/_components/constants.ts  |  58 -----
 src/app/solicitar-ayuda/_components/types.ts  |  46 ----
 src/app/solicitar-ayuda/page.tsx              |   4 +-
 src/app/solicitudes/editar/[id]/page.tsx      |  13 +-
 .../HelpRequests/CreateHelpRequest.tsx        |  63 +++++
 .../HelpRequests/EditHelpRequest.tsx          |  66 +++++
 .../HelpRequestForm.tsx}                      | 225 ++++++------------
 ...PhoneInputContainer.tsx => PhoneInput.tsx} |   2 +-
 src/components/PhoneInput/index.ts            |   2 +-
 17 files changed, 214 insertions(+), 800 deletions(-)
 delete mode 100644 src/app/solicitar-ayuda/_components/Form/FormContainer.tsx
 delete mode 100644 src/app/solicitar-ayuda/_components/Form/FormRenderer.tsx
 delete mode 100644 src/app/solicitar-ayuda/_components/Form/index.ts
 delete mode 100644 src/app/solicitar-ayuda/_components/TipoDeAyudaInputRenderer.tsx
 delete mode 100644 src/app/solicitar-ayuda/_components/TownSelector/TownSelectorDataWrapper.tsx
 delete mode 100644 src/app/solicitar-ayuda/_components/TownSelector/TownSelectorRenderer.tsx
 delete mode 100644 src/app/solicitar-ayuda/_components/TownSelector/index.ts
 delete mode 100644 src/app/solicitar-ayuda/_components/constants.ts
 delete mode 100644 src/app/solicitar-ayuda/_components/types.ts
 create mode 100644 src/components/HelpRequests/CreateHelpRequest.tsx
 create mode 100644 src/components/HelpRequests/EditHelpRequest.tsx
 rename src/components/{RequestHelp.js => HelpRequests/HelpRequestForm.tsx} (61%)
 rename src/components/PhoneInput/{PhoneInputContainer.tsx => PhoneInput.tsx} (88%)

diff --git a/src/app/ofertas/editar/[id]/page.tsx b/src/app/ofertas/editar/[id]/page.tsx
index 6707924d..92b783a8 100644
--- a/src/app/ofertas/editar/[id]/page.tsx
+++ b/src/app/ofertas/editar/[id]/page.tsx
@@ -12,5 +12,5 @@ export default async function EditarSolicitud({ params }: { params: Promise<{ id
   }
   const numberId = Number(id);
   const request = await helpRequestService.getOne(numberId);
-  return <EditHelpOffer request={request} id={numberId} />;
+  return <EditHelpOffer request={request} />;
 }
diff --git a/src/app/solicitar-ayuda/_components/Form/FormContainer.tsx b/src/app/solicitar-ayuda/_components/Form/FormContainer.tsx
deleted file mode 100644
index 43971f3c..00000000
--- a/src/app/solicitar-ayuda/_components/Form/FormContainer.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-'use client';
-
-import React, { FormEvent, useCallback, useMemo, useState } from 'react';
-
-import { FormRenderer } from './FormRenderer';
-import { FormData, Status } from '../types';
-import { formatPhoneNumber, isValidPhone } from '@/helpers/utils';
-import { helpRequestService } from '@/lib/service';
-import { Database } from '@/types/database';
-import { Enums } from '@/types/common';
-import { useRouter } from 'next/navigation';
-
-import { TIPOS_DE_AYUDA, TIPOS_DE_AYUDA_MAP } from '../constants';
-import { useSession } from '@/context/SessionProvider';
-
-const mapHelpToEnum = (helpTypeMap: FormData['tiposDeAyuda']): Enums['help_type_enum'][] =>
-  Array.from(helpTypeMap).reduce(
-    (acc, [id, isSelected]) => {
-      if (isSelected) {
-        const value = TIPOS_DE_AYUDA_MAP.get(id);
-        if (!value) {
-          return acc;
-        }
-        return acc.concat(value.enum);
-      }
-      return acc;
-    },
-    [] as Enums['help_type_enum'][],
-  );
-
-export function FormContainer() {
-  const router = useRouter();
-  const session = useSession();
-
-  const userId = session.user?.id;
-
-  const [formData, setFormData] = useState<FormData>({
-    nombre: session?.user?.user_metadata?.full_name || session?.user?.user_metadata?.nombre || ''.split(' ')[0],
-    ubicacion: '',
-    coordinates: null,
-    tiposDeAyuda: new Map(TIPOS_DE_AYUDA.map(({ id }) => [id, false])),
-    numeroDePersonas: undefined,
-    descripcion: '',
-    urgencia: 'alta',
-    situacionEspecial: '',
-    contacto: session?.user?.user_metadata?.telefono || '',
-    consentimiento: false,
-    pueblo: '',
-    email: session?.user?.user_metadata?.email || '',
-  });
-
-  const [status, setStatus] = useState<Status>({
-    isSubmitting: false,
-    error: null,
-    success: false,
-  });
-
-  const handleSubmit = useCallback(
-    async (e: FormEvent) => {
-      e.preventDefault();
-
-      /* Form validation */
-      if (!formData.ubicacion) {
-        alert('La ubicación es un campo obligatorio');
-        return;
-      }
-
-      if (!formData.consentimiento) {
-        alert('Debe aceptar el consentimiento para enviar la solicitud');
-        return;
-      }
-
-      if (!isValidPhone(formData.contacto)) {
-        alert('El teléfono de contacto no es válido.');
-        return;
-      }
-
-      if (!isValidPhone(formData.contacto)) {
-        alert('El teléfono de contacto no es válido.');
-        return;
-      }
-
-      setStatus({ isSubmitting: true, error: null, success: false });
-
-      try {
-        const helpRequestData: Database['public']['Tables']['help_requests']['Insert'] = {
-          type: 'necesita',
-          name: formData.nombre.split(' ')[0],
-          location: formData.ubicacion,
-          latitude: formData.coordinates ? parseFloat(formData.coordinates.lat) : null,
-          longitude: formData.coordinates ? parseFloat(formData.coordinates.lng) : null,
-          help_type: mapHelpToEnum(formData.tiposDeAyuda),
-          description: formData.descripcion,
-          urgency: formData.urgencia,
-          number_of_people: formData.numeroDePersonas || 1,
-          contact_info: formatPhoneNumber(formData.contacto),
-          additional_info: {
-            special_situations: formData.situacionEspecial || null,
-            consent: true,
-            email: formData.email,
-          },
-          town_id: parseInt(formData.pueblo),
-          status: 'active',
-          user_id: userId,
-        };
-
-        await helpRequestService.createRequest(helpRequestData);
-
-        // Limpiar formulario
-        setFormData({
-          nombre: '',
-          ubicacion: '',
-          coordinates: null,
-          tiposDeAyuda: new Map(),
-          numeroDePersonas: undefined,
-          descripcion: '',
-          urgencia: 'alta',
-          situacionEspecial: '',
-          contacto: '',
-          pueblo: '',
-          consentimiento: false,
-          email: '',
-        });
-
-        setStatus({ isSubmitting: false, error: null, success: true });
-        setStatus((prev) => ({ ...prev, success: false }));
-        router.push('/casos-activos/solicitudes');
-      } catch (error: any) {
-        console.log('Error al enviar solicitud:', error.message);
-        setStatus({
-          isSubmitting: false,
-          error: `Error al enviar la solicitud: ${error.message}`,
-          success: false,
-        });
-      }
-    },
-    [userId, formData, router],
-  );
-
-  const handleInputElementChange: React.ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
-    const { name, value, type, checked } = e.target;
-    setFormData((prev) => ({
-      ...prev,
-      [name]: type === 'checkbox' ? checked : value,
-    }));
-  }, []);
-
-  const handleTextAreaElementChange: React.ChangeEventHandler<HTMLTextAreaElement> = useCallback((e) => {
-    const { name, value } = e.target;
-    setFormData((formData) => ({
-      ...formData,
-      [name]: value,
-    }));
-  }, []);
-
-  const handleSelectElementChange: React.ChangeEventHandler<HTMLSelectElement> = useCallback((e) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({
-      ...prev,
-      [name]: value,
-    }));
-  }, []);
-
-  const handleAddressSelection = useCallback((address: any) => {
-    setFormData((formData) => ({
-      ...formData,
-      ubicacion: address.fullAddress,
-      coordinates: address.coordinates
-        ? {
-            lat: address.coordinates.lat,
-            lng: address.coordinates.lon,
-          }
-        : null,
-    }));
-  }, []);
-
-  const handlePhoneChange = useCallback((phoneNumber: string) => {
-    setFormData((formData) => ({
-      ...formData,
-      contacto: phoneNumber,
-    }));
-  }, []);
-
-  const handleHelpTypeChange: React.ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
-    const { id, checked } = event.target;
-
-    setFormData((formData) => {
-      const prevHelp = formData.tiposDeAyuda;
-      const newHelp = new Map([...prevHelp]);
-      newHelp.set(parseInt(id), checked);
-      return { ...formData, tiposDeAyuda: newHelp };
-    });
-  }, []);
-
-  const selectedHelp = useMemo(() => formData.tiposDeAyuda, [formData]);
-
-  return (
-    <FormRenderer
-      formData={formData}
-      isUserLoggedIn={Boolean(session?.user)}
-      handleConsentChange={handleInputElementChange}
-      handleEmailChange={handleInputElementChange}
-      handleAddressSelection={handleAddressSelection}
-      handleDescriptionChange={handleTextAreaElementChange}
-      handleNameChange={handleInputElementChange}
-      handleNumberPeopleChange={handleInputElementChange}
-      handlePhoneChange={handlePhoneChange}
-      handleSituacionEspecialChange={handleTextAreaElementChange}
-      handleTipoAyudaChange={handleHelpTypeChange}
-      handleTownChange={handleSelectElementChange}
-      handleUrgencyChange={handleSelectElementChange}
-      handleSubmit={handleSubmit}
-      status={status}
-      selectedHelp={selectedHelp}
-    />
-  );
-}
diff --git a/src/app/solicitar-ayuda/_components/Form/FormRenderer.tsx b/src/app/solicitar-ayuda/_components/Form/FormRenderer.tsx
deleted file mode 100644
index b0968a8e..00000000
--- a/src/app/solicitar-ayuda/_components/Form/FormRenderer.tsx
+++ /dev/null
@@ -1,215 +0,0 @@
-'use client';
-import React from 'react';
-import { Check } from 'lucide-react';
-
-import { PhoneInput } from '@/components/PhoneInput';
-import AddressAutocomplete from '@/components/AddressAutocomplete.js';
-import { TIPOS_DE_AYUDA } from '../constants';
-import { TipoDeAyudaInputRenderer } from '../TipoDeAyudaInputRenderer';
-import { FormData, HelpCategory, Status } from '../types';
-import { TownSelector } from '../TownSelector';
-
-type FormRendererProps = {
-  status: Status;
-  formData: FormData;
-  isUserLoggedIn: boolean;
-  selectedHelp: Map<HelpCategory['id'], boolean>;
-  handleSubmit: React.FormEventHandler<HTMLFormElement>;
-  handlePhoneChange: (phoneNumber: string) => void;
-  handleAddressSelection: (address: string) => void;
-  handleSituacionEspecialChange: React.ChangeEventHandler<HTMLTextAreaElement>;
-  handleUrgencyChange: React.ChangeEventHandler<HTMLSelectElement>;
-  handleDescriptionChange: React.ChangeEventHandler<HTMLTextAreaElement>;
-  handleTownChange: React.ChangeEventHandler<HTMLSelectElement>;
-  handleTipoAyudaChange: React.ChangeEventHandler<HTMLInputElement>;
-  handleNameChange: React.ChangeEventHandler<HTMLInputElement>;
-  handleEmailChange: React.ChangeEventHandler<HTMLInputElement>;
-  handleNumberPeopleChange: React.ChangeEventHandler<HTMLInputElement>;
-  handleConsentChange: React.ChangeEventHandler<HTMLInputElement>;
-};
-
-export function FormRenderer({
-  handleSubmit,
-  status,
-  formData,
-  isUserLoggedIn,
-  handlePhoneChange,
-  handleAddressSelection,
-  handleSituacionEspecialChange,
-  handleUrgencyChange,
-  handleDescriptionChange,
-  handleTownChange,
-  handleTipoAyudaChange,
-  handleNameChange,
-  handleEmailChange,
-  handleNumberPeopleChange,
-  handleConsentChange,
-  selectedHelp,
-}: FormRendererProps) {
-  return (
-    <>
-      {status.error && (
-        <div className="bg-red-100 border-l-4 border-red-500 p-4 rounded">
-          <p className="text-red-700">{status.error}</p>
-        </div>
-      )}
-
-      {/* Formulario principal */}
-      <div className="bg-white rounded-lg shadow-lg p-6">
-        <h1 className="text-2xl font-bold mb-6">Solicitar Ayuda</h1>
-
-        <form onSubmit={handleSubmit} className="space-y-6">
-          <div className="grid md:grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Nombre</label>
-              <input
-                type="text"
-                name="nombre"
-                value={formData.nombre}
-                onChange={handleNameChange}
-                className="w-full p-2 border rounded focus:ring-2 focus:ring-green-500 focus:border-green-500"
-              />
-            </div>
-            <PhoneInput phoneNumber={formData.contacto} onChange={handlePhoneChange} required />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Correo electrónico <span className="text-red-500">*</span>
-            </label>
-            <input
-              type="email"
-              name="email"
-              value={formData.email}
-              onChange={handleEmailChange}
-              className="w-full p-2 border rounded focus:ring-2 focus:ring-green-500 focus:border-green-500"
-            />
-            <p className="mt-1 text-sm text-gray-500">
-              {isUserLoggedIn
-                ? 'Se utilizará para que puedas eliminar o editar la información de tu solicitud'
-                : 'Se utilizará para que puedas actualizar tu solicitud y marcarla como completada. Para realizar cambios, deberás registrarte con el mismo email'}
-            </p>
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Ubicación exacta <span className="text-red-500">*</span>
-            </label>
-            <AddressAutocomplete
-              onSelect={handleAddressSelection}
-              placeholder="Calle, número, piso, ciudad..."
-              required
-            />
-            <p className="mt-1 text-sm text-gray-500">
-              Incluya todos los detalles posibles para poder localizarle (campo obligatorio)
-            </p>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">Tipo de ayuda necesaria</label>
-            <div className="grid md:grid-cols-2 gap-2">
-              {TIPOS_DE_AYUDA.map(({ id, label }) => (
-                <TipoDeAyudaInputRenderer
-                  key={id}
-                  id={id}
-                  handleTipoAyudaChange={handleTipoAyudaChange}
-                  label={label}
-                  isSelected={selectedHelp.get(id) || false}
-                />
-              ))}
-            </div>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Número de personas afectadas</label>
-            <input
-              type="number"
-              name="numeroPersonas"
-              value={formData.numeroDePersonas}
-              onChange={handleNumberPeopleChange}
-              className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500"
-              min="1"
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Descripción de la situación</label>
-            <textarea
-              name="descripcion"
-              value={formData.descripcion}
-              onChange={handleDescriptionChange}
-              className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500"
-              rows={3}
-              placeholder="Describa su situación actual y el tipo de ayuda que necesita"
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Nivel de urgencia</label>
-            <select
-              name="urgencia"
-              value={formData.urgencia}
-              onChange={handleUrgencyChange}
-              className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500"
-            >
-              <option value="alta">Alta - Necesito ayuda inmediata</option>
-              <option value="media">Media - Puedo esperar unas horas</option>
-              <option value="baja">Baja - No es urgente</option>
-            </select>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Situaciones especiales</label>
-            <textarea
-              name="situacionEspecial"
-              value={formData.situacionEspecial}
-              onChange={handleSituacionEspecialChange}
-              className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500"
-              rows={2}
-              placeholder="Personas mayores, niños pequeños, personas con movilidad reducida, necesidades médicas, mascotas..."
-            />
-          </div>
-          {/* Pueblos */}
-          <TownSelector handleChange={handleTownChange} selectedTown={formData.pueblo} />
-
-          {/* Consentimiento */}
-          <div className="flex items-start">
-            <label className="ml-2 block text-sm text-gray-700 cursor-pointer">
-              <input
-                type="checkbox"
-                name="consentimiento"
-                checked={formData.consentimiento}
-                onChange={handleConsentChange}
-                className="mt-1 h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded mr-2"
-              />
-              Doy mi consentimiento para el tratamiento de los datos proporcionados y confirmo que la información
-              proporcionada es verídica.
-            </label>
-          </div>
-
-          <button
-            type="submit"
-            disabled={status.isSubmitting}
-            className={`w-full ${
-              status.isSubmitting ? 'bg-gray-400 cursor-not-allowed' : 'bg-red-500 hover:bg-red-600'
-            } text-white py-3 px-4 rounded-lg font-semibold`}
-          >
-            {status.isSubmitting ? 'Enviando solicitud...' : 'Enviar Solicitud de Ayuda'}
-          </button>
-        </form>
-      </div>
-
-      {status.success && (
-        <div className="fixed bottom-4 right-4 bg-green-100 border-l-4 border-green-500 p-4 rounded shadow-lg z-50">
-          <div className="flex items-center">
-            <Check className="h-5 w-5 text-green-500 mr-2" />
-            <div>
-              <p className="text-green-700 font-medium">Su solicitud de ayuda ha sido registrada correctamente.</p>
-              <p className="text-green-600 text-sm mt-1">
-                Se está coordinando la ayuda. En caso de empeorar la situación, contacte al 112.
-              </p>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-}
diff --git a/src/app/solicitar-ayuda/_components/Form/index.ts b/src/app/solicitar-ayuda/_components/Form/index.ts
deleted file mode 100644
index fd3c2d5a..00000000
--- a/src/app/solicitar-ayuda/_components/Form/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { FormContainer as Form } from './FormContainer';
-
-export { Form };
diff --git a/src/app/solicitar-ayuda/_components/TipoDeAyudaInputRenderer.tsx b/src/app/solicitar-ayuda/_components/TipoDeAyudaInputRenderer.tsx
deleted file mode 100644
index af0f659f..00000000
--- a/src/app/solicitar-ayuda/_components/TipoDeAyudaInputRenderer.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-
-import { TipoDeAyudaInputRendererProps } from './types';
-
-export function TipoDeAyudaInputRenderer({
-  isSelected,
-  label,
-  handleTipoAyudaChange,
-  id,
-}: TipoDeAyudaInputRendererProps) {
-  return (
-    <label
-      className={`flex items-center p-3 rounded cursor-pointer ${
-        isSelected ? 'bg-red-50 text-red-800' : 'bg-gray-50 hover:bg-gray-100'
-      }`}
-    >
-      <input
-        type="checkbox"
-        checked={isSelected}
-        onChange={handleTipoAyudaChange}
-        className="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded"
-        id={id.toString()}
-      />
-      <span className="ml-2">{label}</span>
-    </label>
-  );
-}
diff --git a/src/app/solicitar-ayuda/_components/TownSelector/TownSelectorDataWrapper.tsx b/src/app/solicitar-ayuda/_components/TownSelector/TownSelectorDataWrapper.tsx
deleted file mode 100644
index 31205134..00000000
--- a/src/app/solicitar-ayuda/_components/TownSelector/TownSelectorDataWrapper.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import { supabase } from '@/lib/supabase/client';
-
-import { TownSelectorRenderer } from './TownSelectorRenderer';
-import { Town } from '../types';
-
-type TownSelectorRendererProps = Pick<
-  React.ComponentProps<typeof TownSelectorRenderer>,
-  'handleChange' | 'selectedTown'
->;
-
-export function TownSelectorDataWrapper({ handleChange, selectedTown }: TownSelectorRendererProps) {
-  const [towns, setTowns] = useState<Town[]>([]);
-
-  useEffect(() => {
-    async function fetchTowns() {
-      const { data, error } = await supabase.from('towns').select('id, name');
-
-      if (error) {
-        console.log('Error fetching towns:', error);
-        return;
-      }
-
-      setTowns(data);
-    }
-
-    fetchTowns();
-  }, []);
-
-  return <TownSelectorRenderer handleChange={handleChange} listOfTowns={towns} selectedTown={selectedTown} />;
-}
diff --git a/src/app/solicitar-ayuda/_components/TownSelector/TownSelectorRenderer.tsx b/src/app/solicitar-ayuda/_components/TownSelector/TownSelectorRenderer.tsx
deleted file mode 100644
index dba49ce2..00000000
--- a/src/app/solicitar-ayuda/_components/TownSelector/TownSelectorRenderer.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-
-import { Town } from '../types';
-
-type TownSelectorRendererProps = {
-  selectedTown: Town['name'];
-  handleChange: React.ChangeEventHandler<HTMLSelectElement>;
-  listOfTowns: Town[];
-};
-
-export function TownSelectorRenderer({ handleChange, listOfTowns, selectedTown }: TownSelectorRendererProps) {
-  return (
-    <div>
-      <div className="flex flex-row justify-between mb-2 items-end">
-        <label className="block text-sm font-medium text-gray-700 mb-1">
-          Pueblo <span className="text-red-500">*</span>
-        </label>
-      </div>
-      <select
-        name="pueblo"
-        value={selectedTown || ''}
-        onChange={handleChange}
-        className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500"
-        required
-      >
-        <option value="">Selecciona un pueblo</option>
-        {listOfTowns.map((item) => (
-          <option key={item.id} value={item.id}>
-            {item.name}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
-}
diff --git a/src/app/solicitar-ayuda/_components/TownSelector/index.ts b/src/app/solicitar-ayuda/_components/TownSelector/index.ts
deleted file mode 100644
index 219a4497..00000000
--- a/src/app/solicitar-ayuda/_components/TownSelector/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { TownSelectorDataWrapper as TownSelector } from './TownSelectorDataWrapper';
-
-export { TownSelector };
diff --git a/src/app/solicitar-ayuda/_components/constants.ts b/src/app/solicitar-ayuda/_components/constants.ts
deleted file mode 100644
index e2a1868e..00000000
--- a/src/app/solicitar-ayuda/_components/constants.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { HelpCategory, HelpTypesMap } from './types';
-
-export const TIPOS_DE_AYUDA: HelpCategory[] = [
-  {
-    id: 1,
-    label: 'Labores de Limpieza',
-    enumLabel: 'limpieza',
-  },
-  {
-    id: 2,
-    label: 'Petición de desplazamiento',
-    enumLabel: 'evacuacion',
-  },
-  {
-    id: 3,
-    label: 'Alojamiento temporal',
-    enumLabel: 'alojamiento',
-  },
-  {
-    id: 4,
-    label: 'Necesidad de suministros y material',
-    enumLabel: 'distribucion',
-  },
-  {
-    id: 5,
-    label: 'Equipo de rescate (evacuación)',
-    enumLabel: 'rescate',
-  },
-  {
-    id: 6,
-    label: 'Asistencia médica',
-    enumLabel: 'medica',
-  },
-  {
-    id: 7,
-    label: 'Apoyo psicológico',
-    enumLabel: 'psicologico',
-  },
-  {
-    id: 8,
-    label: 'Apoyo logístico',
-    enumLabel: 'logistico',
-  },
-  /*
-  { id: 9, label: 'Maquinaria para movilidad reducida', enumLabel: 'otros' },
-  { id: 10, label: 'Maquinaria pesada (grúas, palas, ...)', enumLabel: 'otros' },
-  {
-    id: 11,
-    label: 'Contenedores de escombros',
-    enumLabel: 'otros',
-  },
-  { id: 12, label: 'Equipamiento (botas, palas, guantes, ...)', enumLabel: 'otros' },
-   */
-];
-
-export const TIPOS_DE_AYUDA_MAP: HelpTypesMap = new Map(
-  TIPOS_DE_AYUDA.map((item) => [item.id, { label: item.label, enum: item.enumLabel }]),
-);
diff --git a/src/app/solicitar-ayuda/_components/types.ts b/src/app/solicitar-ayuda/_components/types.ts
deleted file mode 100644
index 94bb4470..00000000
--- a/src/app/solicitar-ayuda/_components/types.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Town as SupabaseTown } from '@/types/Town';
-import { Enums } from '@/types/common';
-
-export type FormData = {
-  nombre: string;
-  contacto: string;
-  email: string;
-  numeroDePersonas: number | undefined;
-  descripcion: string;
-  urgencia: string;
-  situacionEspecial: string;
-  pueblo: string;
-  consentimiento: boolean;
-  ubicacion: string;
-  coordinates: any;
-  tiposDeAyuda: Map<HelpCategory['id'], boolean>;
-};
-
-export type HelpCategory = {
-  id: number;
-  label: string;
-  enumLabel: Enums['help_type_enum'];
-};
-
-export type TipoDeAyudaInputRendererProps = Pick<HelpCategory, 'id' | 'label'> & {
-  isSelected: boolean;
-  handleTipoAyudaChange: React.ChangeEventHandler<HTMLInputElement>;
-};
-
-export type Address = {
-  road: string;
-  house_number: string;
-  postcode: string;
-  city: string;
-  state: string;
-};
-
-export type Status = {
-  error: string | null;
-  isSubmitting: boolean;
-  success: boolean;
-};
-
-export type Town = Pick<SupabaseTown, 'id' | 'name'>;
-
-export type HelpTypesMap = Map<HelpCategory['id'], { label: HelpCategory['label']; enum: Enums['help_type_enum'] }>;
diff --git a/src/app/solicitar-ayuda/page.tsx b/src/app/solicitar-ayuda/page.tsx
index 65f5144a..4b036485 100644
--- a/src/app/solicitar-ayuda/page.tsx
+++ b/src/app/solicitar-ayuda/page.tsx
@@ -1,7 +1,7 @@
 import { AlertTriangle } from 'lucide-react';
 import Image from 'next/image';
-import { Form } from './_components/Form';
 import { CallCenterLink } from '@/components/CallCenterLink';
+import CreateHelpRequest from '@/components/HelpRequests/CreateHelpRequest';
 
 export default function SolicitarAyuda() {
   return (
@@ -55,7 +55,7 @@ export default function SolicitarAyuda() {
           </div>
         </div>
       </div>
-      <Form />
+      <CreateHelpRequest />
     </div>
   );
 }
diff --git a/src/app/solicitudes/editar/[id]/page.tsx b/src/app/solicitudes/editar/[id]/page.tsx
index d5d4fc0e..a865ef66 100644
--- a/src/app/solicitudes/editar/[id]/page.tsx
+++ b/src/app/solicitudes/editar/[id]/page.tsx
@@ -1,7 +1,7 @@
-import RequestHelp from '@/components/RequestHelp';
 import Unauthorized from '@/components/Unauthorized';
 import { helpRequestService } from '@/lib/service';
 import { createClient } from '@/lib/supabase/server';
+import EditHelpRequest from '@/components/HelpRequests/EditHelpRequest';
 
 export default async function EditarSolicitud({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
@@ -12,14 +12,5 @@ export default async function EditarSolicitud({ params }: { params: Promise<{ id
   }
   const request = await helpRequestService.getOne(Number(id));
 
-  return (
-    <RequestHelp
-      title="Editar solicitud de ayuda"
-      submitType="edit"
-      data={request}
-      id={id}
-      button={['Editar solicitud', 'Editando solicitud...']}
-      redirect="/solicitudes"
-    />
-  );
+  return <EditHelpRequest request={request} />;
 }
diff --git a/src/components/HelpRequests/CreateHelpRequest.tsx b/src/components/HelpRequests/CreateHelpRequest.tsx
new file mode 100644
index 00000000..51ba182a
--- /dev/null
+++ b/src/components/HelpRequests/CreateHelpRequest.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import HelpRequestForm, { HelpRequestFormData } from './HelpRequestForm';
+import { helpRequestService } from '@/lib/service';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { useRouter } from 'next/navigation';
+import { HelpRequestInsert } from '@/types/Requests';
+import { useSession } from '@/context/SessionProvider';
+
+function formToDatabaseMap(userId: string | null, formData: HelpRequestFormData): HelpRequestInsert {
+  return {
+    description: formData.descripcion,
+    resources: null,
+    urgency: formData.urgencia,
+    number_of_people: formData.numeroPersonas,
+    town_id: formData.pueblo,
+    user_id: userId,
+    type: 'necesita',
+    help_type: formData.tiposAyuda,
+    latitude: formData.coordinates?.lat,
+    longitude: formData.coordinates?.lng,
+    status: formData.status,
+    location: formData.ubicacion,
+    name: formData.nombre,
+    contact_info: formData.telefono,
+    additional_info: {
+      email: formData.email,
+      consent: formData.consentimiento,
+      special_situations: formData.situacionEspecial,
+    },
+  };
+}
+
+export default function CreateHelpRequest() {
+  const queryClient = useQueryClient();
+  const router = useRouter();
+  const session = useSession();
+
+  const mutation = useMutation({
+    mutationFn: (data: HelpRequestFormData) =>
+      helpRequestService.createRequest(formToDatabaseMap(session.user?.id ?? null, data)),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['help_requests'] });
+      router.push('/casos-activos/solicitudes');
+    },
+    onError: (e) => {
+      console.error('Error al crear la solicitud de ayuda', e);
+      toast.error('Error al crear la solicitud :(');
+    },
+  });
+
+  return (
+    <>
+      <h1 className="text-2xl font-bold mb-6">Solicitar ayuda</h1>
+      <HelpRequestForm
+        submitMutation={mutation.mutateAsync}
+        isSubmitting={mutation.isPending}
+        buttonText={['Enviar solicitud', 'Enviando solicitud...']}
+      />
+    </>
+  );
+}
diff --git a/src/components/HelpRequests/EditHelpRequest.tsx b/src/components/HelpRequests/EditHelpRequest.tsx
new file mode 100644
index 00000000..4c1e3a88
--- /dev/null
+++ b/src/components/HelpRequests/EditHelpRequest.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import HelpRequestForm, { HelpRequestFormData } from './HelpRequestForm';
+import { helpRequestService } from '@/lib/service';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { useRouter } from 'next/navigation';
+import { HelpRequestData, HelpRequestUpdate } from '@/types/Requests';
+
+type EditHelpRequestProps = {
+  request: HelpRequestData;
+};
+
+function formToDatabaseMap(request: HelpRequestData, formData: HelpRequestFormData): HelpRequestUpdate {
+  return {
+    description: formData.descripcion,
+    resources: null,
+    urgency: formData.urgencia,
+    number_of_people: formData.numeroPersonas,
+    town_id: formData.pueblo,
+    id: request.id,
+    user_id: request.user_id,
+    type: request.type,
+    created_at: request.created_at,
+    help_type: formData.tiposAyuda,
+    latitude: formData.coordinates?.lat,
+    longitude: formData.coordinates?.lng,
+    status: formData.status,
+    location: formData.ubicacion,
+    name: formData.nombre,
+    contact_info: formData.telefono,
+    additional_info: {
+      email: formData.email,
+      consent: formData.consentimiento,
+      special_situations: formData.situacionEspecial,
+    },
+  };
+}
+
+export default function EditHelpRequest({ request }: EditHelpRequestProps) {
+  const queryClient = useQueryClient();
+  const router = useRouter();
+
+  const mutation = useMutation({
+    mutationFn: (data: HelpRequestFormData) => helpRequestService.createRequest(formToDatabaseMap(request, data)),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['help_requests'] });
+      router.push(`/solicitudes/${request.id}`);
+    },
+    onError: (e) => {
+      console.error('Error al editar la solicitud de ayuda', e);
+      toast.error('Error al editar la solicitud :(');
+    },
+  });
+
+  return (
+    <>
+      <h1 className="text-2xl font-bold mb-6">Editar solicitud de ayuda</h1>
+      <HelpRequestForm
+        submitMutation={mutation.mutateAsync}
+        isSubmitting={mutation.isPending}
+        buttonText={['Guardar cambios', 'Guardando...']}
+      />
+    </>
+  );
+}
diff --git a/src/components/RequestHelp.js b/src/components/HelpRequests/HelpRequestForm.tsx
similarity index 61%
rename from src/components/RequestHelp.js
rename to src/components/HelpRequests/HelpRequestForm.tsx
index bba68518..a4e8767a 100644
--- a/src/components/RequestHelp.js
+++ b/src/components/HelpRequests/HelpRequestForm.tsx
@@ -1,52 +1,67 @@
 'use client';
 
-import { useCallback, useState } from 'react';
-import { Check, Mail } from 'lucide-react';
+import { ChangeEvent, FormEvent, useCallback, useState } from 'react';
+import { Mail } from 'lucide-react';
 import AddressAutocomplete from '@/components/AddressAutocomplete';
-import { mapToIdAndLabel, tiposAyudaOptions } from '@/helpers/constants';
-import { formatPhoneNumber, isValidPhone } from '@/helpers/utils';
-import { helpRequestService } from '@/lib/service';
+import { tiposAyudaArray } from '@/helpers/constants';
+import { isValidPhone } from '@/helpers/utils';
 
 import { PhoneInput } from '@/components/PhoneInput';
-import { useRouter } from 'next/navigation';
 import { useTowns } from '@/context/TownProvider';
-import { useSession } from '@/context/SessionProvider';
+import { HelpRequestData, HelpRequestHelpType, HelpRequestUrgencyType } from '@/types/Requests';
+import { Coordinates } from '@/components/HelpOffers/HelpOfferForm';
+import { Town } from '@/types/Town';
+import { toast } from 'sonner';
 
-export default function RequestHelp({
-  data = {},
-  title = 'Solicitar Ayuda',
-  button = ['Enviar solicitud de ayuda', 'Enviando solicitud...'],
-  submitType = 'create',
-  id,
-  redirect = '/casos-activos/solicitudes',
-}) {
-  const { towns } = useTowns();
-  const router = useRouter();
-  const session = useSession();
-  const userId = session.user?.id;
-  const [formData, setFormData] = useState({
-    nombre: data.name || '',
-    ubicacion: data.location || '',
-    coordinates: { lat: 3, lng: 3 },
-    tiposAyuda: data.help_type || [],
-    numeroPersonas: data.number_of_people || '',
-    descripcion: data.description || '',
-    urgencia: data.urgency || 'alta',
-    situacionEspecial: data.additional_info?.special_situations || '',
-    contacto: data.contact_info || '',
-    consentimiento: data.additional_info?.consent || false,
-    pueblo: data.town_id || '',
-    email: data.additional_info?.email || '',
-    status: data.status || 'active',
-  });
+export type HelpRequestFormData = {
+  nombre: string;
+  telefono: string;
+  email: string;
+  ubicacion: string;
+  tiposAyuda: HelpRequestHelpType[];
+  pueblo: number;
+  status: string;
+  coordinates?: Coordinates;
+  numeroPersonas: number;
+  descripcion: string;
+  urgencia: HelpRequestUrgencyType;
+  situacionEspecial: string;
+  consentimiento: boolean;
+};
+
+export interface HelpRequestProps {
+  town?: Town;
+  data?: HelpRequestData;
+  buttonText: [string, string];
+  isSubmitting: boolean;
+  submitMutation: (data: HelpRequestFormData) => Promise<any>;
+}
 
-  const [status, setStatus] = useState({
-    isSubmitting: false,
-    error: null,
-    success: false,
+export default function HelpRequestForm({
+  town,
+  data,
+  buttonText = ['Enviar solicitud de ayuda', 'Enviando solicitud...'],
+  isSubmitting,
+  submitMutation,
+}: HelpRequestProps) {
+  const { towns } = useTowns();
+  const [formData, setFormData] = useState<HelpRequestFormData>({
+    nombre: data?.name || '',
+    ubicacion: data?.location || '',
+    coordinates: { lat: 0, lng: 0 },
+    tiposAyuda: data?.help_type || [],
+    numeroPersonas: data?.number_of_people || 1,
+    descripcion: data?.description || '',
+    urgencia: data?.urgency === 'alta' ? 'alta' : data?.urgency === 'media' ? 'media' : 'baja',
+    situacionEspecial: data?.additional_info?.special_situations || '',
+    telefono: data?.contact_info || '',
+    consentimiento: data?.additional_info?.consent || false,
+    pueblo: data?.town_id || town?.id || 0,
+    email: data?.additional_info?.email || '',
+    status: data?.status || 'active',
   });
 
-  const handleTipoAyudaChange = (tipo) => {
+  const handleTipoAyudaChange = (tipo: HelpRequestHelpType) => {
     setFormData((prev) => ({
       ...prev,
       tiposAyuda: prev.tiposAyuda.includes(tipo)
@@ -55,114 +70,44 @@ export default function RequestHelp({
     }));
   };
 
-  const handleSubmit = async (e) => {
+  const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
 
     if (!formData.ubicacion) {
-      alert('La ubicación es un campo obligatorio');
+      toast.error('La ubicación es un campo obligatorio');
       return;
     }
 
     if (!formData.consentimiento) {
-      alert('Debe aceptar el consentimiento para enviar la solicitud');
+      toast.error('Debe aceptar el consentimiento para enviar la solicitud');
       return;
     }
 
-    if (!isValidPhone(formData.contacto)) {
-      alert('El teléfono de contacto no es válido. Si has usado espacios, elimínalos.');
+    if (!isValidPhone(formData.telefono)) {
+      toast.error('El teléfono de contacto no es válido. Si has usado espacios, elimínalos.');
       return;
     }
 
-    setStatus({ isSubmitting: true, error: null, success: false });
-
-    try {
-      const helpRequestData = {
-        type: 'necesita',
-        name: formData.nombre,
-        location: formData.ubicacion,
-        latitude: formData.coordinates ? parseFloat(formData.coordinates.lat) : 3,
-        longitude: formData.coordinates ? parseFloat(formData.coordinates.lng) : 3,
-        help_type: formData.tiposAyuda,
-        description: formData.descripcion,
-        urgency: formData.urgencia,
-        number_of_people: parseInt(formData.numeroPersonas) || 1,
-        contact_info: formatPhoneNumber(formData.contacto),
-        additional_info: {
-          special_situations: formData.situacionEspecial || null,
-          consent: true,
-          email: formData.email,
-        },
-        town_id: formData.pueblo,
-        status: formData.status,
-        user_id: userId,
-      };
-      if (submitType === 'create') {
-        const { error } = await helpRequestService.createRequest(helpRequestData);
-        if (error) {
-          throw new Error(error.message);
-        }
-      }
-      if (submitType === 'edit') {
-        console.log('EDITAR');
-        const { error } = await helpRequestService.editRequest(helpRequestData, id);
-        if (error) {
-          throw new Error(error.message);
-        }
-      }
-
-      setFormData({
-        nombre: '',
-        ubicacion: '',
-        coordinates: { lat: null, lng: null },
-        tiposAyuda: [],
-        numeroPersonas: '',
-        descripcion: '',
-        urgencia: 'alta',
-        situacionEspecial: '',
-        contacto: '',
-        pueblo: '',
-        email: '',
-        consentimiento: false,
-        status: 'active',
-      });
-
-      setStatus({ isSubmitting: false, error: null, success: true });
-      setStatus((prev) => ({ ...prev, success: false }));
-      router.push(redirect);
-    } catch (error) {
-      console.log('Error al enviar solicitud:', error.message);
-      setStatus({
-        isSubmitting: false,
-        error: `Error al enviar la solicitud: ${error.message}`,
-        success: false,
-      });
-    }
+    await submitMutation(formData);
   };
 
-  const handleChange = (e) => {
-    const { name, value, type, checked } = e.target;
+  const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value, type } = e.target;
+    const checked = 'checked' in e.target ? e.target.checked : false;
     setFormData((prev) => ({
       ...prev,
       [name]: type === 'checkbox' ? checked : value || '',
     }));
   };
 
-  const handlePhoneChange = useCallback((e) => {
-    setFormData((formData) => ({ ...formData, contacto: e.target.value }));
+  const handlePhoneChange = useCallback((newPhone: string) => {
+    setFormData((formData) => ({ ...formData, contacto: newPhone }));
   }, []);
 
   return (
     <div className="space-y-6">
-      {status.error && (
-        <div className="bg-red-100 border-l-4 border-red-500 p-4 rounded">
-          <p className="text-red-700">{status.error}</p>
-        </div>
-      )}
-
       {/* Formulario principal */}
       <div className="bg-white rounded-lg shadow-lg p-6">
-        <h1 className="text-2xl font-bold mb-6">{title}</h1>
-
         <form onSubmit={handleSubmit} className="space-y-6">
           <div className="grid md:grid-cols-2 gap-4">
             <div>
@@ -175,9 +120,9 @@ export default function RequestHelp({
                 className="w-full p-2 border rounded focus:ring-2 focus:ring-green-500 focus:border-green-500"
               />
             </div>
-            <PhoneInput phoneNumber={formData.contacto} onChange={handlePhoneChange} required />
+            <PhoneInput phoneNumber={formData.telefono} onChange={handlePhoneChange} required />
           </div>
-          {submitType === 'create' && (
+          {!data && (
             <div>
               <label className="block text-sm font-medium text-gray-700 mb-1">
                 Correo electrónico <span className="text-red-500">*</span>
@@ -194,7 +139,7 @@ export default function RequestHelp({
               </p>
             </div>
           )}
-          {submitType === 'edit' && (
+          {!!data && (
             <div>
               <label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-1">
                 Progreso de tu solicitud
@@ -217,17 +162,17 @@ export default function RequestHelp({
               Ubicación exacta <span className="text-red-500">*</span>
             </label>
             <AddressAutocomplete
-              initialValue={data.location || ''}
+              initialValue={data?.location || ''}
               onSelect={(address) => {
                 setFormData({
                   ...formData,
                   ubicacion: address.fullAddress,
                   coordinates: address.coordinates
                     ? {
-                        lat: address.coordinates.lat,
-                        lng: address.coordinates.lon,
+                        lat: Number(address.coordinates.lat),
+                        lng: Number(address.coordinates.lon),
                       }
-                    : null,
+                    : undefined,
                 });
               }}
               placeholder="Calle, número, piso, ciudad..."
@@ -241,7 +186,7 @@ export default function RequestHelp({
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-2">Tipo de ayuda necesaria</label>
             <div className="grid md:grid-cols-2 gap-2">
-              {mapToIdAndLabel(tiposAyudaOptions).map((tipo) => (
+              {tiposAyudaArray.map((tipo) => (
                 <label
                   key={tipo.id}
                   className={`flex items-center p-3 rounded cursor-pointer ${
@@ -279,7 +224,7 @@ export default function RequestHelp({
               value={formData.descripcion}
               onChange={handleChange}
               className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500"
-              rows="3"
+              rows={3}
               placeholder="Describa su situación actual y el tipo de ayuda que necesita"
             />
           </div>
@@ -305,7 +250,7 @@ export default function RequestHelp({
               value={formData.situacionEspecial}
               onChange={handleChange}
               className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500"
-              rows="2"
+              rows={2}
               placeholder="Personas mayores, niños pequeños, personas con movilidad reducida, necesidades médicas, mascotas..."
             />
           </div>
@@ -355,29 +300,15 @@ export default function RequestHelp({
 
           <button
             type="submit"
-            disabled={status.isSubmitting}
+            disabled={isSubmitting}
             className={`w-full ${
-              status.isSubmitting ? 'bg-gray-400 cursor-not-allowed' : 'bg-red-500 hover:bg-red-600'
+              isSubmitting ? 'bg-gray-400 cursor-not-allowed' : 'bg-red-500 hover:bg-red-600'
             } text-white py-3 px-4 rounded-lg font-semibold`}
           >
-            {status.isSubmitting ? button[1] : button[0]}
+            {isSubmitting ? buttonText[1] : buttonText[0]}
           </button>
         </form>
       </div>
-
-      {status.success && (
-        <div className="fixed bottom-4 right-4 bg-green-100 border-l-4 border-green-500 p-4 rounded shadow-lg z-50">
-          <div className="flex items-center">
-            <Check className="h-5 w-5 text-green-500 mr-2" />
-            <div>
-              <p className="text-green-700 font-medium">Su solicitud de ayuda ha sido registrada correctamente.</p>
-              <p className="text-green-600 text-sm mt-1">
-                Se está coordinando la ayuda. En caso de empeorar la situación, contacte al 112.
-              </p>
-            </div>
-          </div>
-        </div>
-      )}
     </div>
   );
 }
diff --git a/src/components/PhoneInput/PhoneInputContainer.tsx b/src/components/PhoneInput/PhoneInput.tsx
similarity index 88%
rename from src/components/PhoneInput/PhoneInputContainer.tsx
rename to src/components/PhoneInput/PhoneInput.tsx
index 92904220..46e49bc9 100644
--- a/src/components/PhoneInput/PhoneInputContainer.tsx
+++ b/src/components/PhoneInput/PhoneInput.tsx
@@ -6,7 +6,7 @@ import { PhoneInputRenderer } from './PhoneInputRenderer';
 import { PhoneInputProps } from './types';
 import { isValidPhone } from '@/helpers/utils';
 
-export function PhoneInputContainer({ onChange, phoneNumber, required = false }: PhoneInputProps) {
+export function PhoneInput({ onChange, phoneNumber, required = false }: PhoneInputProps) {
   const [isInvalid, setIsInvalid] = useState(false);
 
   const handleChange: PhoneInputProps['onChange'] = useCallback(
diff --git a/src/components/PhoneInput/index.ts b/src/components/PhoneInput/index.ts
index a2f76067..b615f8a6 100644
--- a/src/components/PhoneInput/index.ts
+++ b/src/components/PhoneInput/index.ts
@@ -1,3 +1,3 @@
-import { PhoneInputContainer as PhoneInput } from './PhoneInputContainer';
+import { PhoneInput } from './PhoneInput';
 
 export { PhoneInput };

From 474c0a55857479a43d0fb1086b043c0920c7e266 Mon Sep 17 00:00:00 2001
From: Pinx0 <plponce@gmail.com>
Date: Sat, 9 Nov 2024 18:37:32 +0100
Subject: [PATCH 06/15] refactor: incorporate changes to the location/town

---
 package-lock.json                             |  10 ++
 src/app/casos-activos/ofertas/page.tsx        |   2 +-
 src/app/casos-activos/solicitudes/page.tsx    |   2 +-
 src/app/ofertas/page.tsx                      |   2 +-
 src/app/solicitudes/page.tsx                  |   2 +-
 src/components/AddressMap.tsx                 |   5 +-
 src/components/HelpOffers/CreateHelpOffer.tsx |   2 -
 src/components/HelpOffers/EditHelpOffer.tsx   |   2 -
 src/components/HelpOffers/HelpOfferForm.tsx   |  14 +--
 .../HelpRequests/CreateHelpRequest.tsx        |  18 ++-
 .../HelpRequests/EditHelpRequest.tsx          |  18 ++-
 .../HelpRequests/HelpRequestForm.tsx          | 103 ++----------------
 src/components/input/PhoneInput/index.ts      |   2 +-
 src/components/layout/Sidebar.tsx             |   2 -
 src/lib/service.ts                            |   4 +-
 15 files changed, 56 insertions(+), 132 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 30d7b4e6..63a5e8d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@supabase/ssr": "^0.5.1",
         "@supabase/supabase-js": "^2.46.1",
         "@tanstack/react-query": "^5.59.19",
+        "babel-plugin-react-compiler": "19.0.0-beta-63b359f-20241101",
         "deck.gl": "^9.0.34",
         "leaflet": "^1.9.4",
         "lucide-react": "^0.454.0",
@@ -3497,6 +3498,15 @@
         "npm": ">=6"
       }
     },
+    "node_modules/babel-plugin-react-compiler": {
+      "version": "19.0.0-beta-63b359f-20241101",
+      "resolved": "https://registry.npmjs.org/babel-plugin-react-compiler/-/babel-plugin-react-compiler-19.0.0-beta-63b359f-20241101.tgz",
+      "integrity": "sha512-qrmTHJP3O2kGbtL7kuySX3Lmk+5/4ZR1rHr8QhKa0GzKbmpAUGrTeWOg0NCI5t+QUfKKizxIO1+t0HsZW9x4vQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.19.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "dev": true,
diff --git a/src/app/casos-activos/ofertas/page.tsx b/src/app/casos-activos/ofertas/page.tsx
index d1b8f5de..72058286 100644
--- a/src/app/casos-activos/ofertas/page.tsx
+++ b/src/app/casos-activos/ofertas/page.tsx
@@ -82,7 +82,7 @@ function Ofertas() {
           console.log('Error fetching solicitudes:', error);
           setData([]);
         } else {
-          setData(data || []);
+          setData((data as HelpRequestData[]) || []);
           setCurrentCount(count ?? 0);
         }
       } catch (err) {
diff --git a/src/app/casos-activos/solicitudes/page.tsx b/src/app/casos-activos/solicitudes/page.tsx
index 6274fad4..d1e474f2 100644
--- a/src/app/casos-activos/solicitudes/page.tsx
+++ b/src/app/casos-activos/solicitudes/page.tsx
@@ -116,7 +116,7 @@ function Solicitudes() {
           console.log('Error fetching solicitudes:', error);
           setData([]);
         } else {
-          setData(data || []);
+          setData((data as HelpRequestData[]) || []);
           setCurrentCount(count ?? 0);
         }
       } catch (err) {
diff --git a/src/app/ofertas/page.tsx b/src/app/ofertas/page.tsx
index 03405fb8..6d087b16 100644
--- a/src/app/ofertas/page.tsx
+++ b/src/app/ofertas/page.tsx
@@ -93,7 +93,7 @@ function ListaSolicitudes() {
           console.log('Error fetching solicitudes:', error);
           setData([]);
         } else {
-          setData(data || []);
+          setData((data as HelpRequestData[]) || []);
           setCurrentCount(count);
         }
       } catch (err) {
diff --git a/src/app/solicitudes/page.tsx b/src/app/solicitudes/page.tsx
index 77f8db06..d0aaffdd 100644
--- a/src/app/solicitudes/page.tsx
+++ b/src/app/solicitudes/page.tsx
@@ -31,7 +31,7 @@ export default function ListaSolicitudes() {
     );
   }
 
-  if (error || requests === undefined) {
+  if (error || !requests) {
     return (
       <div className="bg-red-100 border-l-4 border-red-500 p-4 rounded">
         <p className="text-red-700">{error?.message}</p>
diff --git a/src/components/AddressMap.tsx b/src/components/AddressMap.tsx
index 0c89fbab..a9c2f3c1 100644
--- a/src/components/AddressMap.tsx
+++ b/src/components/AddressMap.tsx
@@ -2,10 +2,9 @@
 
 import GeoLocationMap, { LngLat } from '@/components/map/GeolocationMap';
 import { useRef, useState } from 'react';
-import { locationService } from '../lib/service';
+import { locationService } from '@/lib/service';
+import { useDebouncedFunction, useThrottledFunction } from '@/helpers/hooks';
 import GooglePlacesAutocomplete from 'react-google-places-autocomplete';
-
-import { useDebouncedFunction, useThrottledFunction } from '../helpers/hooks';
 import { OnChangeValue } from 'react-select';
 
 export type AddressMapProps = {
diff --git a/src/components/HelpOffers/CreateHelpOffer.tsx b/src/components/HelpOffers/CreateHelpOffer.tsx
index 86d3ba77..19f1d904 100644
--- a/src/components/HelpOffers/CreateHelpOffer.tsx
+++ b/src/components/HelpOffers/CreateHelpOffer.tsx
@@ -21,8 +21,6 @@ function formToDatabaseMap(userId: string | null, formData: HelpOfferFormData):
     type: 'ofrece',
     other_help: formData.otraAyuda,
     help_type: formData.tiposAyuda,
-    latitude: formData.coordinates?.lat,
-    longitude: formData.coordinates?.lng,
     status: formData.status,
     location: formData.ubicacion,
     name: formData.nombre,
diff --git a/src/components/HelpOffers/EditHelpOffer.tsx b/src/components/HelpOffers/EditHelpOffer.tsx
index f9fcb622..99da9a7c 100644
--- a/src/components/HelpOffers/EditHelpOffer.tsx
+++ b/src/components/HelpOffers/EditHelpOffer.tsx
@@ -25,8 +25,6 @@ function formToDatabaseMap(request: HelpRequestData, formData: HelpOfferFormData
     type: request.type,
     other_help: formData.otraAyuda,
     help_type: formData.tiposAyuda,
-    latitude: formData.coordinates?.lat,
-    longitude: formData.coordinates?.lng,
     status: formData.status,
     location: formData.ubicacion,
     created_at: request.created_at,
diff --git a/src/components/HelpOffers/HelpOfferForm.tsx b/src/components/HelpOffers/HelpOfferForm.tsx
index e3c1259b..0465e025 100644
--- a/src/components/HelpOffers/HelpOfferForm.tsx
+++ b/src/components/HelpOffers/HelpOfferForm.tsx
@@ -1,17 +1,12 @@
 import React, { useState, useCallback } from 'react';
 import AddressAutocomplete from '@/components/AddressAutocomplete';
-import { PhoneInput } from '@/components/PhoneInput/PhoneInput';
+import { PhoneInput } from '@/components/input/PhoneInput';
 import { isValidPhone } from '@/helpers/utils';
 import { HelpRequestData, HelpRequestHelpType } from '@/types/Requests';
 import { useSession } from '@/context/SessionProvider';
 import { tiposAyudaArray } from '@/helpers/constants';
 import { Town } from '@/types/Town';
 
-export interface Coordinates {
-  lat: number;
-  lng: number;
-}
-
 export type HelpOfferFormData = {
   aceptaProtocolo: boolean;
   nombre: string;
@@ -27,7 +22,6 @@ export type HelpOfferFormData = {
   comentarios: string;
   pueblo: number;
   status: string;
-  coordinates?: Coordinates;
 };
 
 export interface HelpOfferProps {
@@ -113,12 +107,6 @@ export default function HelpOfferForm({ town, data, buttonText, submitMutation }
               setFormData({
                 ...formData,
                 ubicacion: address.fullAddress,
-                coordinates: address.coordinates
-                  ? {
-                      lat: address.coordinates.lat,
-                      lng: address.coordinates.lon,
-                    }
-                  : undefined,
               });
             }}
             placeholder="Calle, número, piso, ciudad..."
diff --git a/src/components/HelpRequests/CreateHelpRequest.tsx b/src/components/HelpRequests/CreateHelpRequest.tsx
index 51ba182a..850460c4 100644
--- a/src/components/HelpRequests/CreateHelpRequest.tsx
+++ b/src/components/HelpRequests/CreateHelpRequest.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import HelpRequestForm, { HelpRequestFormData } from './HelpRequestForm';
-import { helpRequestService } from '@/lib/service';
+import { helpRequestService, townService } from '@/lib/service';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import { useRouter } from 'next/navigation';
@@ -14,7 +14,7 @@ function formToDatabaseMap(userId: string | null, formData: HelpRequestFormData)
     resources: null,
     urgency: formData.urgencia,
     number_of_people: formData.numeroPersonas,
-    town_id: formData.pueblo,
+    town_id: formData.town_id,
     user_id: userId,
     type: 'necesita',
     help_type: formData.tiposAyuda,
@@ -38,8 +38,18 @@ export default function CreateHelpRequest() {
   const session = useSession();
 
   const mutation = useMutation({
-    mutationFn: (data: HelpRequestFormData) =>
-      helpRequestService.createRequest(formToDatabaseMap(session.user?.id ?? null, data)),
+    mutationFn: async (data: HelpRequestFormData) => {
+      let town_id = data.town_id;
+      if (data.pueblo !== '') {
+        const { data: townResponse, error: townError } = await townService.createIfNotExists(data.pueblo);
+        if (townError) throw townError;
+        town_id = townResponse[0].id;
+      }
+
+      return helpRequestService.createRequest(
+        formToDatabaseMap(session.user?.id ?? null, { ...data, town_id: town_id }),
+      );
+    },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['help_requests'] });
       router.push('/casos-activos/solicitudes');
diff --git a/src/components/HelpRequests/EditHelpRequest.tsx b/src/components/HelpRequests/EditHelpRequest.tsx
index 3b7738d0..4ab295dc 100644
--- a/src/components/HelpRequests/EditHelpRequest.tsx
+++ b/src/components/HelpRequests/EditHelpRequest.tsx
@@ -1,11 +1,12 @@
 'use client';
 
 import HelpRequestForm, { HelpRequestFormData } from './HelpRequestForm';
-import { helpRequestService } from '@/lib/service';
+import { helpRequestService, townService } from '@/lib/service';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import { useRouter } from 'next/navigation';
 import { HelpRequestData, HelpRequestUpdate } from '@/types/Requests';
+import { formatPhoneNumber } from '@/helpers/utils';
 
 type EditHelpRequestProps = {
   request: HelpRequestData;
@@ -17,7 +18,7 @@ function formToDatabaseMap(request: HelpRequestData, formData: HelpRequestFormDa
     resources: null,
     urgency: formData.urgencia,
     number_of_people: formData.numeroPersonas,
-    town_id: formData.pueblo,
+    town_id: formData.town_id,
     id: request.id,
     user_id: request.user_id,
     type: request.type,
@@ -28,7 +29,7 @@ function formToDatabaseMap(request: HelpRequestData, formData: HelpRequestFormDa
     status: formData.status,
     location: formData.ubicacion,
     name: formData.nombre,
-    contact_info: formData.telefono,
+    contact_info: formatPhoneNumber(formData.telefono),
     additional_info: {
       email: request.additional_info.email,
       consent: request.additional_info.consent,
@@ -42,8 +43,15 @@ export default function EditHelpRequest({ request }: EditHelpRequestProps) {
   const router = useRouter();
 
   const mutation = useMutation({
-    mutationFn: (data: HelpRequestFormData) =>
-      helpRequestService.editRequest(formToDatabaseMap(request, data), request.id),
+    mutationFn: async (data: HelpRequestFormData) => {
+      let town_id = data.town_id;
+      if (data.pueblo !== '') {
+        const { data: townResponse, error: townError } = await townService.createIfNotExists(data.pueblo);
+        if (townError) throw townError;
+        town_id = townResponse[0].id;
+      }
+      return helpRequestService.editRequest(formToDatabaseMap(request, { ...data, town_id: town_id }), request.id);
+    },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['help_requests'] });
       router.push(`/solicitudes/${request.id}`);
diff --git a/src/components/HelpRequests/HelpRequestForm.tsx b/src/components/HelpRequests/HelpRequestForm.tsx
index cdb49bdf..a4f58601 100644
--- a/src/components/HelpRequests/HelpRequestForm.tsx
+++ b/src/components/HelpRequests/HelpRequestForm.tsx
@@ -1,25 +1,16 @@
 'use client';
 
 import { ChangeEvent, FormEvent, useCallback, useState } from 'react';
-import { Mail } from 'lucide-react';
-import AddressAutocomplete from '@/components/AddressAutocomplete';
-import { mapToIdAndLabel, tiposAyudaOptions } from '@/helpers/constants';
-import { formatPhoneNumber, isValidPhone } from '@/helpers/utils';
-import { helpRequestService, locationService, townService } from '@/lib/service';
-
-import { tiposAyudaArray } from '@/helpers/constants';
 import { isValidPhone } from '@/helpers/utils';
+import { tiposAyudaArray } from '@/helpers/constants';
 import { PhoneInput } from '@/components/input/PhoneInput';
-import { useRouter } from 'next/navigation';
-import { CallCenterLink } from '@/components/CallCenterLink';
-import AddressMap from './AddressMap';
-import { useTowns } from '@/context/TownProvider';
 import { HelpRequestData, HelpRequestHelpType, HelpRequestUrgencyType } from '@/types/Requests';
-import { Coordinates } from '@/components/HelpOffers/HelpOfferForm';
 import { Town } from '@/types/Town';
 import { toast } from 'sonner';
 import { LimitedTextarea } from '@/components/input/LimitedTextarea';
 import { useSession } from '@/context/SessionProvider';
+import AddressMap, { AddressDescriptor } from '@/components/AddressMap';
+import { LngLat } from '@/components/map/GeolocationMap';
 
 export type HelpRequestFormData = {
   nombre: string;
@@ -27,18 +18,18 @@ export type HelpRequestFormData = {
   email: string;
   ubicacion: string;
   tiposAyuda: HelpRequestHelpType[];
-  pueblo: number;
+  pueblo: string;
   status: string;
-  coordinates?: Coordinates;
+  coordinates: LngLat | null;
   numeroPersonas: number;
   descripcion: string;
   urgencia: HelpRequestUrgencyType;
   situacionEspecial: string;
   consentimiento: boolean;
+  town_id: number;
 };
 
 export interface HelpRequestProps {
-  town?: Town;
   data?: HelpRequestData;
   buttonText: [string, string];
   isSubmitting: boolean;
@@ -46,13 +37,11 @@ export interface HelpRequestProps {
 }
 
 export default function HelpRequestForm({
-  town,
   data,
   buttonText = ['Enviar solicitud de ayuda', 'Enviando solicitud...'],
   isSubmitting,
   submitMutation,
 }: HelpRequestProps) {
-  const { towns } = useTowns();
   const { user } = useSession();
   const userId = user?.id;
   const [formData, setFormData] = useState<HelpRequestFormData>({
@@ -66,9 +55,10 @@ export default function HelpRequestForm({
     situacionEspecial: data?.additional_info?.special_situations || '',
     telefono: data?.contact_info || '',
     consentimiento: data?.additional_info?.consent || false,
-    pueblo: data?.town_id || town?.id || 0,
+    pueblo: '',
     email: data?.additional_info?.email || '',
     status: data?.status || 'active',
+    town_id: data?.town_id || 0,
   });
 
   const handleTipoAyudaChange = (tipo: HelpRequestHelpType) => {
@@ -100,82 +90,9 @@ export default function HelpRequestForm({
     }
 
     await submitMutation(formData);
-    setStatus({ isSubmitting: true, error: null, success: false });
-
-    try {
-      const latitude = String(formData.coordinates.lat);
-      const longitude = String(formData.coordinates.lng);
-      let town_id = formData.town_id;
-
-      if (formData.pueblo !== '') {
-        const { data: townResponse, error: townError } = await townService.createIfNotExists(formData.pueblo);
-        if (townError) throw townError;
-        town_id = townResponse[0].id;
-      }
-
-      const helpRequestData = {
-        type: 'necesita',
-        name: formData.nombre,
-        location: formData.ubicacion,
-        latitude,
-        longitude,
-        help_type: formData.tiposAyuda,
-        description: formData.descripcion,
-        urgency: formData.urgencia,
-        number_of_people: parseInt(formData.numeroPersonas) || 1,
-        contact_info: formatPhoneNumber(formData.contacto),
-        additional_info: {
-          special_situations: formData.situacionEspecial || null,
-          consent: true,
-          email: formData.email,
-        },
-        town_id,
-        status: formData.status,
-        user_id: userId,
-      };
-      if (submitType === 'create') {
-        const { error } = await helpRequestService.createRequest(helpRequestData);
-        if (error) {
-          throw new Error(error.message);
-        }
-      }
-      if (submitType === 'edit') {
-        const { error } = await helpRequestService.editRequest(helpRequestData, id);
-        if (error) {
-          throw new Error(error.message);
-        }
-      }
-
-      setFormData({
-        nombre: '',
-        ubicacion: '',
-        coordinates: { lat: null, lng: null },
-        tiposAyuda: [],
-        numeroPersonas: '',
-        descripcion: '',
-        urgencia: 'alta',
-        situacionEspecial: '',
-        contacto: '',
-        pueblo: '',
-        email: '',
-        consentimiento: false,
-        status: 'active',
-      });
-
-      setStatus({ isSubmitting: false, error: null, success: true });
-      setStatus((prev) => ({ ...prev, success: false }));
-      router.push(redirect);
-    } catch (error) {
-      console.error('Error al enviar solicitud:', error.message);
-      setStatus({
-        isSubmitting: false,
-        error: `Error al enviar la solicitud: ${error.message}`,
-        success: false,
-      });
-    }
   };
 
-  const handleOnNewAddressDescriptor = (addressDescriptor) => {
+  const handleOnNewAddressDescriptor = (addressDescriptor: AddressDescriptor) => {
     setFormData((prev) => ({
       ...prev,
       coordinates: addressDescriptor.coordinates,
@@ -184,8 +101,6 @@ export default function HelpRequestForm({
     }));
   };
 
-  const handleChange = (e) => {
-    const { name, value, type, checked } = e.target;
   const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
     const { name, value, type } = e.target;
     const checked = 'checked' in e.target ? e.target.checked : false;
diff --git a/src/components/input/PhoneInput/index.ts b/src/components/input/PhoneInput/index.ts
index b615f8a6..7499bd42 100644
--- a/src/components/input/PhoneInput/index.ts
+++ b/src/components/input/PhoneInput/index.ts
@@ -1,3 +1,3 @@
-import { PhoneInput } from './PhoneInput';
+import { PhoneInput } from './PhoneInputContainer';
 
 export { PhoneInput };
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 212bcb3a..580c3def 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -15,11 +15,9 @@ import {
   Thermometer,
   Truck,
   Inbox,
-  Car,
   Landmark,
   Scale,
   MessageCircleQuestion,
-  CarTaxiFront,
 } from 'lucide-react';
 import UserInfo from '../UserInfo';
 import { useSession } from '@/context/SessionProvider';
diff --git a/src/lib/service.ts b/src/lib/service.ts
index 43caf80d..6ae341cd 100644
--- a/src/lib/service.ts
+++ b/src/lib/service.ts
@@ -41,7 +41,7 @@ export const helpRequestService = {
       .eq('type', 'necesita')
       .or(`user_id.eq.${user_id},id.in.(${helpRequestIds.join(',')})`);
     if (requestsError) throw requestsError;
-    return requests;
+    return requests as HelpRequestData[];
   },
 
   async getOffersByUser(user_id: string | undefined) {
@@ -52,7 +52,7 @@ export const helpRequestService = {
       .eq('type', 'ofrece')
       .eq('user_id', user_id);
     if (requestsError) throw requestsError;
-    return requests;
+    return requests as HelpRequestData[];
   },
 
   async getAssignments(id: number) {

From 8e0cb3140f39a94ea30512148a080bf3eff4ae3e Mon Sep 17 00:00:00 2001
From: Pinx0 <plponce@gmail.com>
Date: Sat, 9 Nov 2024 18:49:34 +0100
Subject: [PATCH 07/15] refactor: fix warnings

---
 src/app/casos-activos/solicitudes/page.tsx      | 4 ++--
 src/app/ofertas/page.tsx                        | 5 +++--
 src/components/HelpRequests/HelpRequestForm.tsx | 2 --
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/app/casos-activos/solicitudes/page.tsx b/src/app/casos-activos/solicitudes/page.tsx
index d1e474f2..3635ed99 100644
--- a/src/app/casos-activos/solicitudes/page.tsx
+++ b/src/app/casos-activos/solicitudes/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Suspense, useEffect, useState, useCallback, useMemo, ChangeEventHandler } from 'react';
+import { Suspense, useEffect, useState, useCallback, ChangeEventHandler } from 'react';
 import { supabase } from '@/lib/supabase/client';
 import SolicitudCard from '@/components/SolicitudCard';
 import Pagination from '@/components/Pagination';
@@ -74,7 +74,7 @@ function Solicitudes() {
 
   const handleToggleChange: ChangeEventHandler<HTMLInputElement> = useCallback(
     (e) => changeDataFilter('soloSinAsignar', `${e.target.checked}`),
-    [],
+    [changeDataFilter],
   );
 
   useEffect(() => {
diff --git a/src/app/ofertas/page.tsx b/src/app/ofertas/page.tsx
index 6d087b16..ade1205b 100644
--- a/src/app/ofertas/page.tsx
+++ b/src/app/ofertas/page.tsx
@@ -22,6 +22,7 @@ export default function ListaSolicitudesPage() {
 
 function ListaSolicitudes() {
   const session = useSession();
+  const userId = session.user?.id;
 
   const searchParams = useSearchParams();
   const router = useRouter();
@@ -73,7 +74,7 @@ function ListaSolicitudes() {
           .from('help_requests')
           .select('*', { count: 'exact' })
           .eq('type', 'ofrece')
-          .contains('additional_info', { email: session.user?.email });
+          .eq('user_id', userId ?? '');
         // Solo agregar filtro si no es "todos"
         if (filtroData.pueblo !== 'todos') {
           query.eq('town_id', filtroData.pueblo);
@@ -105,7 +106,7 @@ function ListaSolicitudes() {
     }
 
     fetchData();
-  }, [filtroData, currentPage]);
+  }, [userId, filtroData, currentPage]);
 
   if (loading) {
     return (
diff --git a/src/components/HelpRequests/HelpRequestForm.tsx b/src/components/HelpRequests/HelpRequestForm.tsx
index a4f58601..364192df 100644
--- a/src/components/HelpRequests/HelpRequestForm.tsx
+++ b/src/components/HelpRequests/HelpRequestForm.tsx
@@ -5,7 +5,6 @@ import { isValidPhone } from '@/helpers/utils';
 import { tiposAyudaArray } from '@/helpers/constants';
 import { PhoneInput } from '@/components/input/PhoneInput';
 import { HelpRequestData, HelpRequestHelpType, HelpRequestUrgencyType } from '@/types/Requests';
-import { Town } from '@/types/Town';
 import { toast } from 'sonner';
 import { LimitedTextarea } from '@/components/input/LimitedTextarea';
 import { useSession } from '@/context/SessionProvider';
@@ -43,7 +42,6 @@ export default function HelpRequestForm({
   submitMutation,
 }: HelpRequestProps) {
   const { user } = useSession();
-  const userId = user?.id;
   const [formData, setFormData] = useState<HelpRequestFormData>({
     nombre: data?.name || '',
     ubicacion: data?.location || '',

From caeb05228afbe81be0c288222ba9917371d61b4c Mon Sep 17 00:00:00 2001
From: Pinx0 <plponce@gmail.com>
Date: Sat, 9 Nov 2024 20:37:03 +0100
Subject: [PATCH 08/15] refactor: remove unnecessary info in the forms

---
 src/app/solicitar-ayuda/page.tsx              |  11 -
 src/components/AddressMap.tsx                 |   2 +-
 src/components/HelpOffers/CreateHelpOffer.tsx |  35 +-
 src/components/HelpOffers/EditHelpOffer.tsx   |   7 +-
 src/components/HelpOffers/HelpOfferForm.tsx   |  11 +-
 .../HelpRequests/CreateHelpRequest.tsx        |  18 +-
 .../HelpRequests/EditHelpRequest.tsx          |   8 +-
 .../HelpRequests/HelpRequestForm.tsx          | 326 +++++++++---------
 8 files changed, 206 insertions(+), 212 deletions(-)

diff --git a/src/app/solicitar-ayuda/page.tsx b/src/app/solicitar-ayuda/page.tsx
index 4b036485..d19972ac 100644
--- a/src/app/solicitar-ayuda/page.tsx
+++ b/src/app/solicitar-ayuda/page.tsx
@@ -7,17 +7,6 @@ export default function SolicitarAyuda() {
   return (
     <div className="space-y-6">
       {/* Banner de emergencia */}
-      <div className="bg-red-100 border-l-4 border-red-500 p-4 rounded">
-        <div className="flex items-start">
-          <AlertTriangle className="h-5 w-5 text-red-500 mt-0.5 mr-2" />
-          <div>
-            <h2 className="text-red-800 font-bold">EMERGENCIA ACTIVA - Inundaciones CV</h2>
-            <p className="text-red-700 text-sm mt-1">
-              Para emergencias médicas inmediatas, llame al 112. Este formulario es para coordinar ayuda y asistencia.
-            </p>
-          </div>
-        </div>
-      </div>
       <div className="bg-red-100 border-l-4 border-red-500 p-4 rounded">
         <div className="flex items-start">
           <AlertTriangle className="h-5 w-5 text-red-500 mt-0.5 mr-2" />
diff --git a/src/components/AddressMap.tsx b/src/components/AddressMap.tsx
index a9c2f3c1..c29696eb 100644
--- a/src/components/AddressMap.tsx
+++ b/src/components/AddressMap.tsx
@@ -30,7 +30,7 @@ const THROTTLE_MS = 2000;
 const DEBOUNCE_MS = 400;
 
 export default function AddressMap({ onNewAddressDescriptor, initialAddressDescriptor, titulo }: AddressMapProps) {
-  const isEdit = useRef(Boolean(initialAddressDescriptor));
+  const isEdit = useRef(initialAddressDescriptor?.address !== '');
   const [status, setStatus] = useState<PermissionState | 'unknown'>('unknown');
   const [lngLat, setLngLat] = useState<LngLat | undefined>(initialAddressDescriptor?.coordinates ?? undefined);
   const [addressDescriptor, setAddressDescriptor] = useState<AddressDescriptor>({
diff --git a/src/components/HelpOffers/CreateHelpOffer.tsx b/src/components/HelpOffers/CreateHelpOffer.tsx
index 19f1d904..637bed34 100644
--- a/src/components/HelpOffers/CreateHelpOffer.tsx
+++ b/src/components/HelpOffers/CreateHelpOffer.tsx
@@ -7,8 +7,10 @@ import { toast } from 'sonner';
 import { useRouter } from 'next/navigation';
 import { HelpRequestInsert } from '@/types/Requests';
 import { useSession } from '@/context/SessionProvider';
+import { User } from '@supabase/auth-js';
+import { HeartHandshake } from 'lucide-react';
 
-function formToDatabaseMap(userId: string | null, formData: HelpOfferFormData): HelpRequestInsert {
+function formToDatabaseMap(user: User, formData: HelpOfferFormData): HelpRequestInsert {
   return {
     description: formData.comentarios,
     resources: {
@@ -17,7 +19,7 @@ function formToDatabaseMap(userId: string | null, formData: HelpOfferFormData):
       availability: formData.disponibilidad,
     },
     town_id: formData.pueblo,
-    user_id: userId,
+    user_id: user.id,
     type: 'ofrece',
     other_help: formData.otraAyuda,
     help_type: formData.tiposAyuda,
@@ -26,7 +28,7 @@ function formToDatabaseMap(userId: string | null, formData: HelpOfferFormData):
     name: formData.nombre,
     contact_info: formData.telefono,
     additional_info: {
-      email: formData.email,
+      email: user.email || user.user_metadata?.email,
       experience: formData.experiencia,
     },
   };
@@ -35,11 +37,13 @@ function formToDatabaseMap(userId: string | null, formData: HelpOfferFormData):
 export default function CreateHelpOffer() {
   const queryClient = useQueryClient();
   const router = useRouter();
-  const session = useSession();
+  const { user } = useSession();
 
   const mutation = useMutation({
-    mutationFn: (data: HelpOfferFormData) =>
-      helpRequestService.createRequest(formToDatabaseMap(session.user?.id ?? null, data)),
+    mutationFn: (data: HelpOfferFormData) => {
+      if (!user) throw 'Sesión no iniciada';
+      return helpRequestService.createRequest(formToDatabaseMap(user, data));
+    },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['help_requests'] });
       router.push('/casos-activos/ofertas');
@@ -50,5 +54,22 @@ export default function CreateHelpOffer() {
     },
   });
 
-  return <HelpOfferForm submitMutation={mutation.mutateAsync} buttonText={['Ofrecer ayuda', 'Enviando...']} />;
+  return (
+    <div className="space-y-6 bg-white rounded-lg shadow-lg p-6">
+      <h1 className="text-2xl font-bold mb-6">Ofrecer ayuda</h1>
+      <div className="bg-green-50 border-green-500 p-4 rounded">
+        <div className="flex items-start">
+          <HeartHandshake className="h-5 w-5 text-green-500 mt-0.5 mr-2" />
+          <div>
+            <h2 className="text-green-800 font-semibold">Me apunto como voluntario</h2>
+            <p className="text-green-700 text-sm mt-1">
+              Al registrarte como voluntario, te comprometes a seguir las indicaciones de las autoridades y los
+              protocolos establecidos.
+            </p>
+          </div>
+        </div>
+      </div>
+      <HelpOfferForm submitMutation={mutation.mutateAsync} buttonText={['Ofrecer ayuda', 'Enviando...']} />
+    </div>
+  );
 }
diff --git a/src/components/HelpOffers/EditHelpOffer.tsx b/src/components/HelpOffers/EditHelpOffer.tsx
index 99da9a7c..bf0dc4f3 100644
--- a/src/components/HelpOffers/EditHelpOffer.tsx
+++ b/src/components/HelpOffers/EditHelpOffer.tsx
@@ -31,7 +31,7 @@ function formToDatabaseMap(request: HelpRequestData, formData: HelpOfferFormData
     name: formData.nombre,
     contact_info: formData.telefono,
     additional_info: {
-      email: formData.email,
+      email: request.additional_info.email,
       experience: formData.experiencia,
     },
   };
@@ -54,10 +54,7 @@ export default function EditHelpOffer({ request }: EditHelpOfferProps) {
   });
   return (
     <HelpOfferForm
-      data={{
-        ...request,
-        coordinates: { lat: (request.latitude ?? 0)?.toString(), lng: (request.longitude ?? 0)?.toString() },
-      }}
+      data={request}
       submitMutation={mutation.mutateAsync}
       buttonText={['Guardar cambios', 'Guardando...']}
     />
diff --git a/src/components/HelpOffers/HelpOfferForm.tsx b/src/components/HelpOffers/HelpOfferForm.tsx
index 0465e025..21f1e567 100644
--- a/src/components/HelpOffers/HelpOfferForm.tsx
+++ b/src/components/HelpOffers/HelpOfferForm.tsx
@@ -6,12 +6,12 @@ import { HelpRequestData, HelpRequestHelpType } from '@/types/Requests';
 import { useSession } from '@/context/SessionProvider';
 import { tiposAyudaArray } from '@/helpers/constants';
 import { Town } from '@/types/Town';
+import Unauthorized from '@/components/Unauthorized';
 
 export type HelpOfferFormData = {
   aceptaProtocolo: boolean;
   nombre: string;
   telefono: string;
-  email: string;
   ubicacion: string;
   tiposAyuda: HelpRequestHelpType[];
   otraAyuda: string;
@@ -32,12 +32,11 @@ export interface HelpOfferProps {
 }
 
 export default function HelpOfferForm({ town, data, buttonText, submitMutation }: HelpOfferProps) {
-  const session = useSession();
+  const { user } = useSession();
 
   const [formData, setFormData] = useState<HelpOfferFormData>({
-    nombre: data?.name || session?.user?.user_metadata?.full_name || '',
-    telefono: data?.contact_info || session?.user?.user_metadata?.telefono || '',
-    email: data?.additional_info?.email || session?.user?.user_metadata?.email || '',
+    nombre: data?.name || user?.user_metadata?.full_name || user?.user_metadata?.nombre || '',
+    telefono: data?.contact_info || user?.user_metadata?.telefono || '',
     ubicacion: data?.location || '',
     tiposAyuda: data?.help_type || [],
     otraAyuda: data?.other_help || '',
@@ -81,6 +80,8 @@ export default function HelpOfferForm({ town, data, buttonText, submitMutation }
     await submitMutation(formData);
   };
 
+  if (!user) return <Unauthorized />;
+
   return (
     <form onSubmit={handleSubmit} className="bg-white rounded-lg p-6 w-full">
       {/* Datos personales */}
diff --git a/src/components/HelpRequests/CreateHelpRequest.tsx b/src/components/HelpRequests/CreateHelpRequest.tsx
index 850460c4..7f406bbb 100644
--- a/src/components/HelpRequests/CreateHelpRequest.tsx
+++ b/src/components/HelpRequests/CreateHelpRequest.tsx
@@ -7,15 +7,16 @@ import { toast } from 'sonner';
 import { useRouter } from 'next/navigation';
 import { HelpRequestInsert } from '@/types/Requests';
 import { useSession } from '@/context/SessionProvider';
+import { User } from '@supabase/auth-js';
 
-function formToDatabaseMap(userId: string | null, formData: HelpRequestFormData): HelpRequestInsert {
+function formToDatabaseMap(user: User, formData: HelpRequestFormData): HelpRequestInsert {
   return {
     description: formData.descripcion,
     resources: null,
     urgency: formData.urgencia,
     number_of_people: formData.numeroPersonas,
     town_id: formData.town_id,
-    user_id: userId,
+    user_id: user.id,
     type: 'necesita',
     help_type: formData.tiposAyuda,
     latitude: formData.coordinates?.lat,
@@ -25,7 +26,7 @@ function formToDatabaseMap(userId: string | null, formData: HelpRequestFormData)
     name: formData.nombre,
     contact_info: formData.telefono,
     additional_info: {
-      email: formData.email,
+      email: user.email || user.user_metadata?.email,
       consent: formData.consentimiento,
       special_situations: formData.situacionEspecial,
     },
@@ -35,10 +36,11 @@ function formToDatabaseMap(userId: string | null, formData: HelpRequestFormData)
 export default function CreateHelpRequest() {
   const queryClient = useQueryClient();
   const router = useRouter();
-  const session = useSession();
+  const { user } = useSession();
 
   const mutation = useMutation({
     mutationFn: async (data: HelpRequestFormData) => {
+      if (!user) throw 'Sesión no iniciada';
       let town_id = data.town_id;
       if (data.pueblo !== '') {
         const { data: townResponse, error: townError } = await townService.createIfNotExists(data.pueblo);
@@ -46,9 +48,7 @@ export default function CreateHelpRequest() {
         town_id = townResponse[0].id;
       }
 
-      return helpRequestService.createRequest(
-        formToDatabaseMap(session.user?.id ?? null, { ...data, town_id: town_id }),
-      );
+      return helpRequestService.createRequest(formToDatabaseMap(user, { ...data, town_id: town_id }));
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['help_requests'] });
@@ -61,13 +61,13 @@ export default function CreateHelpRequest() {
   });
 
   return (
-    <>
+    <div className="space-y-6 bg-white rounded-lg shadow-lg p-6">
       <h1 className="text-2xl font-bold mb-6">Solicitar ayuda</h1>
       <HelpRequestForm
         submitMutation={mutation.mutateAsync}
         isSubmitting={mutation.isPending}
         buttonText={['Enviar solicitud', 'Enviando solicitud...']}
       />
-    </>
+    </div>
   );
 }
diff --git a/src/components/HelpRequests/EditHelpRequest.tsx b/src/components/HelpRequests/EditHelpRequest.tsx
index 4ab295dc..1ae75dc8 100644
--- a/src/components/HelpRequests/EditHelpRequest.tsx
+++ b/src/components/HelpRequests/EditHelpRequest.tsx
@@ -63,13 +63,17 @@ export default function EditHelpRequest({ request }: EditHelpRequestProps) {
   });
 
   return (
-    <>
+    <div className="space-y-6 bg-white rounded-lg shadow-lg p-6">
       <h1 className="text-2xl font-bold mb-6">Editar solicitud de ayuda</h1>
       <HelpRequestForm
+        request={{
+          ...request,
+          coordinates: { lat: (request.latitude ?? 0)?.toString(), lng: (request.longitude ?? 0)?.toString() },
+        }}
         submitMutation={mutation.mutateAsync}
         isSubmitting={mutation.isPending}
         buttonText={['Guardar cambios', 'Guardando...']}
       />
-    </>
+    </div>
   );
 }
diff --git a/src/components/HelpRequests/HelpRequestForm.tsx b/src/components/HelpRequests/HelpRequestForm.tsx
index 364192df..c37a0c1b 100644
--- a/src/components/HelpRequests/HelpRequestForm.tsx
+++ b/src/components/HelpRequests/HelpRequestForm.tsx
@@ -7,14 +7,14 @@ import { PhoneInput } from '@/components/input/PhoneInput';
 import { HelpRequestData, HelpRequestHelpType, HelpRequestUrgencyType } from '@/types/Requests';
 import { toast } from 'sonner';
 import { LimitedTextarea } from '@/components/input/LimitedTextarea';
-import { useSession } from '@/context/SessionProvider';
 import AddressMap, { AddressDescriptor } from '@/components/AddressMap';
 import { LngLat } from '@/components/map/GeolocationMap';
+import { useSession } from '@/context/SessionProvider';
+import Unauthorized from '@/components/Unauthorized';
 
 export type HelpRequestFormData = {
   nombre: string;
   telefono: string;
-  email: string;
   ubicacion: string;
   tiposAyuda: HelpRequestHelpType[];
   pueblo: string;
@@ -29,34 +29,36 @@ export type HelpRequestFormData = {
 };
 
 export interface HelpRequestProps {
-  data?: HelpRequestData;
+  request?: HelpRequestData;
   buttonText: [string, string];
   isSubmitting: boolean;
   submitMutation: (data: HelpRequestFormData) => Promise<any>;
 }
 
 export default function HelpRequestForm({
-  data,
+  request,
   buttonText = ['Enviar solicitud de ayuda', 'Enviando solicitud...'],
   isSubmitting,
   submitMutation,
 }: HelpRequestProps) {
   const { user } = useSession();
+
+  console.log(request);
+
   const [formData, setFormData] = useState<HelpRequestFormData>({
-    nombre: data?.name || '',
-    ubicacion: data?.location || '',
+    nombre: request?.name || user?.user_metadata?.full_name || user?.user_metadata?.nombre || '',
+    telefono: request?.contact_info || user?.user_metadata?.telefono || '',
+    ubicacion: request?.location || '',
     coordinates: { lat: 0, lng: 0 },
-    tiposAyuda: data?.help_type || [],
-    numeroPersonas: data?.number_of_people || 1,
-    descripcion: data?.description || '',
-    urgencia: data?.urgency === 'alta' ? 'alta' : data?.urgency === 'media' ? 'media' : 'baja',
-    situacionEspecial: data?.additional_info?.special_situations || '',
-    telefono: data?.contact_info || '',
-    consentimiento: data?.additional_info?.consent || false,
+    tiposAyuda: request?.help_type || [],
+    numeroPersonas: request?.number_of_people || 1,
+    descripcion: request?.description || '',
+    urgencia: request?.urgency === 'alta' ? 'alta' : request?.urgency === 'media' ? 'media' : 'baja',
+    situacionEspecial: request?.additional_info?.special_situations || '',
+    consentimiento: request?.additional_info?.consent || false,
     pueblo: '',
-    email: data?.additional_info?.email || '',
-    status: data?.status || 'active',
-    town_id: data?.town_id || 0,
+    status: request?.status || 'active',
+    town_id: request?.town_id || 0,
   });
 
   const handleTipoAyudaChange = (tipo: HelpRequestHelpType) => {
@@ -112,170 +114,150 @@ export default function HelpRequestForm({
     setFormData((formData) => ({ ...formData, contacto: newPhone }));
   }, []);
 
-  return (
-    <div className="space-y-6">
-      {/* Formulario principal */}
-      <div className="bg-white rounded-lg shadow-lg p-6">
-        <form onSubmit={handleSubmit} className="space-y-6">
-          <div className="grid md:grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Nombre completo</label>
-              <input
-                type="text"
-                name="nombre"
-                value={formData.nombre}
-                onChange={handleChange}
-                className="w-full p-2 border rounded focus:ring-2 focus:ring-green-500 focus:border-green-500"
-              />
-            </div>
-            <PhoneInput phoneNumber={formData.telefono} onChange={handlePhoneChange} required />
-          </div>
-          {!data && !user && (
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Correo electrónico <span className="text-red-500">*</span>
-              </label>
-              <input
-                type="email"
-                name="email"
-                value={formData.email}
-                onChange={handleChange}
-                className="w-full p-2 border rounded focus:ring-2 focus:ring-green-500 focus:border-green-500"
-              />
-              <p className="mt-1 text-sm text-gray-500">
-                Se utilizara para que puedas eliminar o editar la información de tu solicitud
-              </p>
-            </div>
-          )}
-          {!!data && (
-            <div>
-              <label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-1">
-                Progreso de tu solicitud
-              </label>
-              <select
-                name="status"
-                id="status"
-                value={formData.status}
-                onChange={handleChange}
-                className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500"
-              >
-                <option value="active">Activa - Aún no recibo ayuda</option>
-                <option value="progress">En progreso - Están viniendo a ayudarme</option>
-                <option value="finished">Terminada - Ya me han ayudado</option>
-              </select>
-            </div>
-          )}
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">Tipo de ayuda necesaria</label>
-            <div className="grid md:grid-cols-2 gap-2">
-              {tiposAyudaArray.map((tipo) => (
-                <label
-                  key={tipo.id}
-                  className={`flex items-center p-3 rounded cursor-pointer ${
-                    formData.tiposAyuda.includes(tipo.id) ? 'bg-red-50 text-red-800' : 'bg-gray-50 hover:bg-gray-100'
-                  }`}
-                >
-                  <input
-                    type="checkbox"
-                    checked={formData.tiposAyuda.includes(tipo.id)}
-                    onChange={() => handleTipoAyudaChange(tipo.id)}
-                    className="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded"
-                  />
-                  <span className="ml-2">{tipo.label}</span>
-                </label>
-              ))}
-            </div>
-          </div>
+  if (!user) return <Unauthorized />;
 
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Número de personas afectadas</label>
-            <input
-              type="number"
-              name="numeroPersonas"
-              value={formData.numeroPersonas}
-              onChange={handleChange}
-              className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500"
-              min="1"
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Descripción de la situación</label>
-            <LimitedTextarea
-              name="descripcion"
-              value={formData.descripcion}
-              onChange={handleChange}
-              className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500"
-              rows={3}
-              placeholder="Describa su situación actual y el tipo de ayuda que necesita"
-              maxLength={350}
-            />
-          </div>
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <div className="grid md:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Nombre completo</label>
+          <input
+            type="text"
+            name="nombre"
+            value={formData.nombre}
+            onChange={handleChange}
+            className="w-full p-2 border rounded focus:ring-2 focus:ring-green-500 focus:border-green-500"
+          />
+        </div>
+        <PhoneInput phoneNumber={formData.telefono} onChange={handlePhoneChange} required />
+      </div>
+      {!!request && (
+        <div>
+          <label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-1">
+            Progreso de tu solicitud
+          </label>
+          <select
+            name="status"
+            id="status"
+            value={formData.status}
+            onChange={handleChange}
+            className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500"
+          >
+            <option value="active">Activa - Aún no recibo ayuda</option>
+            <option value="progress">En progreso - Están viniendo a ayudarme</option>
+            <option value="finished">Terminada - Ya me han ayudado</option>
+          </select>
+        </div>
+      )}
 
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Nivel de urgencia</label>
-            <select
-              name="urgencia"
-              value={formData.urgencia}
-              onChange={handleChange}
-              className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500"
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-2">Tipo de ayuda necesaria</label>
+        <div className="grid md:grid-cols-2 gap-2">
+          {tiposAyudaArray.map((tipo) => (
+            <label
+              key={tipo.id}
+              className={`flex items-center p-3 rounded cursor-pointer ${
+                formData.tiposAyuda.includes(tipo.id) ? 'bg-red-50 text-red-800' : 'bg-gray-50 hover:bg-gray-100'
+              }`}
             >
-              <option value="alta">Alta - Necesito ayuda inmediata</option>
-              <option value="media">Media - Puedo esperar unas horas</option>
-              <option value="baja">Baja - No es urgente</option>
-            </select>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Situaciones especiales</label>
-            <textarea
-              name="situacionEspecial"
-              value={formData.situacionEspecial}
-              onChange={handleChange}
-              className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500"
-              rows={2}
-              placeholder="Personas mayores, niños pequeños, personas con movilidad reducida, necesidades médicas, mascotas..."
-            />
-          </div>
-          {/* Mapa */}
-          <div>
-            <AddressMap
-              titulo="Ubicación exacta"
-              onNewAddressDescriptor={handleOnNewAddressDescriptor}
-              initialAddressDescriptor={{
-                address: formData.ubicacion,
-                coordinates: formData.coordinates,
-                town: formData.pueblo,
-              }}
-            />
-          </div>
-          {/* Consentimiento */}
-          <div className="flex items-start">
-            <label className="ml-2 block text-sm text-gray-700 cursor-pointer">
               <input
                 type="checkbox"
-                name="consentimiento"
-                checked={formData.consentimiento}
-                onChange={handleChange}
-                className="mt-1 h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded mr-2"
+                checked={formData.tiposAyuda.includes(tipo.id)}
+                onChange={() => handleTipoAyudaChange(tipo.id)}
+                className="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded"
               />
-              Doy mi consentimiento para el tratamiento de los datos proporcionados y confirmo que la información
-              proporcionada es verídica.
+              <span className="ml-2">{tipo.label}</span>
             </label>
-          </div>
+          ))}
+        </div>
+      </div>
 
-          <button
-            type="submit"
-            disabled={isSubmitting}
-            className={`w-full ${
-              isSubmitting ? 'bg-gray-400 cursor-not-allowed' : 'bg-red-500 hover:bg-red-600'
-            } text-white py-3 px-4 rounded-lg font-semibold`}
-          >
-            {isSubmitting ? buttonText[1] : buttonText[0]}
-          </button>
-        </form>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Número de personas afectadas</label>
+        <input
+          type="number"
+          name="numeroPersonas"
+          value={formData.numeroPersonas}
+          onChange={handleChange}
+          className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500"
+          min="1"
+        />
       </div>
-    </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Descripción de la situación</label>
+        <LimitedTextarea
+          name="descripcion"
+          value={formData.descripcion}
+          onChange={handleChange}
+          className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500"
+          rows={3}
+          placeholder="Describa su situación actual y el tipo de ayuda que necesita"
+          maxLength={350}
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Nivel de urgencia</label>
+        <select
+          name="urgencia"
+          value={formData.urgencia}
+          onChange={handleChange}
+          className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500"
+        >
+          <option value="alta">Alta - Necesito ayuda inmediata</option>
+          <option value="media">Media - Puedo esperar unas horas</option>
+          <option value="baja">Baja - No es urgente</option>
+        </select>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Situaciones especiales</label>
+        <textarea
+          name="situacionEspecial"
+          value={formData.situacionEspecial}
+          onChange={handleChange}
+          className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500"
+          rows={2}
+          placeholder="Personas mayores, niños pequeños, personas con movilidad reducida, necesidades médicas, mascotas..."
+        />
+      </div>
+      {/* Mapa */}
+      <div>
+        <AddressMap
+          titulo="Ubicación exacta"
+          onNewAddressDescriptor={handleOnNewAddressDescriptor}
+          initialAddressDescriptor={{
+            address: formData.ubicacion,
+            coordinates: formData.coordinates,
+            town: formData.pueblo,
+          }}
+        />
+      </div>
+      {/* Consentimiento */}
+      <div className="flex items-start">
+        <label className="ml-2 block text-sm text-gray-700 cursor-pointer">
+          <input
+            type="checkbox"
+            name="consentimiento"
+            checked={formData.consentimiento}
+            onChange={handleChange}
+            className="mt-1 h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded mr-2"
+          />
+          Doy mi consentimiento para el tratamiento de los datos proporcionados y confirmo que la información
+          proporcionada es verídica.
+        </label>
+      </div>
+
+      <button
+        type="submit"
+        disabled={isSubmitting}
+        className={`w-full ${
+          isSubmitting ? 'bg-gray-400 cursor-not-allowed' : 'bg-red-500 hover:bg-red-600'
+        } text-white py-3 px-4 rounded-lg font-semibold`}
+      >
+        {isSubmitting ? buttonText[1] : buttonText[0]}
+      </button>
+    </form>
   );
 }

From cb97c74dfe44f9e3d5067326fa7f94f99a87c572 Mon Sep 17 00:00:00 2001
From: Pinx0 <plponce@gmail.com>
Date: Sat, 9 Nov 2024 20:37:09 +0100
Subject: [PATCH 09/15] refactor: remove console logs

---
 src/components/HelpRequests/HelpRequestForm.tsx | 2 --
 src/components/auth/SocialButton.tsx            | 1 -
 src/components/layout/Sidebar.tsx               | 3 +--
 src/components/map/map.tsx                      | 1 -
 4 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/HelpRequests/HelpRequestForm.tsx b/src/components/HelpRequests/HelpRequestForm.tsx
index c37a0c1b..0fadd056 100644
--- a/src/components/HelpRequests/HelpRequestForm.tsx
+++ b/src/components/HelpRequests/HelpRequestForm.tsx
@@ -43,8 +43,6 @@ export default function HelpRequestForm({
 }: HelpRequestProps) {
   const { user } = useSession();
 
-  console.log(request);
-
   const [formData, setFormData] = useState<HelpRequestFormData>({
     nombre: request?.name || user?.user_metadata?.full_name || user?.user_metadata?.nombre || '',
     telefono: request?.contact_info || user?.user_metadata?.telefono || '',
diff --git a/src/components/auth/SocialButton.tsx b/src/components/auth/SocialButton.tsx
index 5b43792b..1f79a4e2 100644
--- a/src/components/auth/SocialButton.tsx
+++ b/src/components/auth/SocialButton.tsx
@@ -11,7 +11,6 @@ type SocialButtonProps = {
 export default function SocialButton({ provider, redirectUrl, children }: SocialButtonProps) {
   const baseUrl =
     process.env.NEXT_PUBLIC_ENV === 'production' ? process.env.NEXT_PUBLIC_BASE_URL! : 'http://127.0.0.1:3000';
-  console.log(baseUrl + redirectUrl);
   const handleLogin = async (provider: Provider) => {
     const { data, error } = await supabase.auth.signInWithOAuth({
       provider,
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 580c3def..e161d0b9 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -249,8 +249,7 @@ export default function Sidebar({ isOpen, toggleAction }: SidebarProps) {
         {/* Toggle button for desktop */}
         <button
           onClick={toggleAction}
-          className="hidden md:flex absolute -right-12 top-4 bg-white p-2 rounded-r-lg shadow-md
-            hover:bg-gray-50 focus:outline-none group"
+          className="hidden md:flex absolute -right-12 top-4 bg-white p-2 rounded-r-lg shadow-md hover:bg-gray-50 focus:outline-none group"
           aria-label={isOpen ? 'Contraer menú' : 'Expandir menú'}
         >
           <Menu className={`transform transition-transform duration-300 ${isOpen ? 'rotate-180' : ''}`} />
diff --git a/src/components/map/map.tsx b/src/components/map/map.tsx
index dd115b84..55789cb5 100644
--- a/src/components/map/map.tsx
+++ b/src/components/map/map.tsx
@@ -37,7 +37,6 @@ const Map: FC<MapProps> = ({ markers = [] }) => {
 
   const { toggleModal } = useModal();
 
-  console.log(selectedMarker);
   return (
     <ReactMap
       initialViewState={{

From d987af0448fc231f6bf33dcc9a8beeaf93361c49 Mon Sep 17 00:00:00 2001
From: Pinx0 <plponce@gmail.com>
Date: Sat, 9 Nov 2024 21:04:53 +0100
Subject: [PATCH 10/15] fix: polish style and behaviour in forms

---
 src/app/casos-activos/ofertas/page.tsx      |   2 +-
 src/app/ofertas/[id]/page.tsx               |   2 +-
 src/app/ofertas/page.tsx                    | 142 ++------------------
 src/components/HelpOffers/EditHelpOffer.tsx |  17 ++-
 src/components/HelpOffers/HelpOfferForm.tsx |  65 ++++++---
 src/components/OfferCard.tsx                |  14 +-
 6 files changed, 79 insertions(+), 163 deletions(-)

diff --git a/src/app/casos-activos/ofertas/page.tsx b/src/app/casos-activos/ofertas/page.tsx
index 72058286..6064a573 100644
--- a/src/app/casos-activos/ofertas/page.tsx
+++ b/src/app/casos-activos/ofertas/page.tsx
@@ -140,7 +140,7 @@ function Ofertas() {
             </p>
           </div>
         ) : (
-          data.map((caso) => <OfferCard caso={caso} showLink={true} key={caso.id} />)
+          data.map((caso) => <OfferCard caso={caso} showLink={true} showEdit={true} key={caso.id} />)
         )}
       </div>
       <div className="flex items-center justify-center">
diff --git a/src/app/ofertas/[id]/page.tsx b/src/app/ofertas/[id]/page.tsx
index a3bbd571..e732cf54 100644
--- a/src/app/ofertas/[id]/page.tsx
+++ b/src/app/ofertas/[id]/page.tsx
@@ -54,7 +54,7 @@ export default function CasoDetalle() {
           Volver
         </button>
       </div>
-      <OfferCard caso={request} showLink={false} />
+      <OfferCard caso={request} showLink={false} showEdit={true} />
     </div>
   );
 }
diff --git a/src/app/ofertas/page.tsx b/src/app/ofertas/page.tsx
index ade1205b..0809b33e 100644
--- a/src/app/ofertas/page.tsx
+++ b/src/app/ofertas/page.tsx
@@ -11,6 +11,8 @@ import { useSession } from '@/context/SessionProvider';
 import OfferCard from '@/components/OfferCard';
 import Link from 'next/link';
 import { HelpRequestData } from '@/types/Requests';
+import { useQuery } from '@tanstack/react-query';
+import { helpRequestService } from '@/lib/service';
 
 export default function ListaSolicitudesPage() {
   return (
@@ -24,91 +26,12 @@ function ListaSolicitudes() {
   const session = useSession();
   const userId = session.user?.id;
 
-  const searchParams = useSearchParams();
-  const router = useRouter();
-
-  const [loading, setLoading] = useState<boolean>(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const [data, setData] = useState<HelpRequestData[]>([]);
-  const [currentPage, setCurrentPage] = useState<number>(Number(searchParams.get('page')) || 1);
-  const [currentCount, setCurrentCount] = useState<number>(0);
-  const { towns } = useTowns();
-
-  const itemsPerPage = 10;
-  const numPages = (count: number) => {
-    return Math.ceil(count / itemsPerPage) || 0;
-  };
-
-  const updateFilter = (filter: 'urgencia' | 'tipoAyuda' | 'pueblo' | 'page', value: string) => {
-    const params = new URLSearchParams(searchParams.toString());
-    params.set(filter, value);
-    router.push(`?${params.toString()}`);
-  };
-  const [filtroData, setFiltroData] = useState({
-    urgencia: searchParams.get('urgencia') || 'todas',
-    tipoAyuda: searchParams.get('tipoAyuda') || 'todas',
-    pueblo: searchParams.get('pueblo') || 'todos',
+  const { data, isLoading, error } = useQuery<HelpRequestData[]>({
+    queryKey: ['help_requests', { user_id: userId, type: 'necesita' }],
+    queryFn: () => helpRequestService.getOffersByUser(userId),
   });
 
-  const changeDataFilter = (type: 'urgencia' | 'tipoAyuda' | 'pueblo', newFilter: string) => {
-    setFiltroData((prev) => ({
-      ...prev,
-      [type]: newFilter,
-    }));
-    updateFilter(type, newFilter);
-  };
-
-  function changePage(newPage: number) {
-    setCurrentPage(newPage);
-    updateFilter('page', newPage.toString());
-  }
-  useEffect(() => {
-    async function fetchData() {
-      try {
-        setLoading(true);
-        setError(null);
-
-        // Comenzamos la consulta
-        const query = supabase
-          .from('help_requests')
-          .select('*', { count: 'exact' })
-          .eq('type', 'ofrece')
-          .eq('user_id', userId ?? '');
-        // Solo agregar filtro si no es "todos"
-        if (filtroData.pueblo !== 'todos') {
-          query.eq('town_id', filtroData.pueblo);
-        }
-
-        // Solo agregar filtro si no es "todas"
-        if (filtroData.urgencia !== 'todas') {
-          query.eq('urgency', filtroData.urgencia);
-        }
-
-        // Ejecutar la consulta con paginación
-        const { data, count, error } = await query
-          .range((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage - 1)
-          .order('created_at', { ascending: false });
-
-        if (error || count === null) {
-          console.log('Error fetching solicitudes:', error);
-          setData([]);
-        } else {
-          setData((data as HelpRequestData[]) || []);
-          setCurrentCount(count);
-        }
-      } catch (err) {
-        console.log('Error general:', err);
-        setError('Error de conexión.');
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    fetchData();
-  }, [userId, filtroData, currentPage]);
-
-  if (loading) {
+  if (isLoading) {
     return (
       <div className="flex justify-center items-center min-h-screen">
         <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
@@ -116,10 +39,10 @@ function ListaSolicitudes() {
     );
   }
 
-  if (error) {
+  if (error || !data) {
     return (
       <div className="bg-red-100 border-l-4 border-red-500 p-4 rounded">
-        <p className="text-red-700">{error}</p>
+        <p className="text-red-700">{error?.message}</p>
       </div>
     );
   }
@@ -127,53 +50,11 @@ function ListaSolicitudes() {
   return (
     <>
       <div className="space-y-6 mx-auto max-w-7xl px-4 sm:px-6 mt-10">
-        {/* 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">
-            <select
-              value={filtroData.tipoAyuda}
-              onChange={(e) => changeDataFilter('tipoAyuda', e.target.value)}
-              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="todas">Todas las necesidades</option>
-              {Object.entries(tiposAyudaOptions).map(([key, label]) => (
-                <option key={key} value={key}>
-                  {label}
-                </option>
-              ))}
-            </select>
-            <select
-              value={filtroData.urgencia}
-              onChange={(e) => changeDataFilter('urgencia', e.target.value)}
-              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="todas">Todas las prioridades</option>
-              <option value="alta">Alta prioridad</option>
-              <option value="media">Media prioridad</option>
-              <option value="baja">Baja prioridad</option>
-            </select>
-            <select
-              value={filtroData.pueblo}
-              onChange={(e) => changeDataFilter('pueblo', e.target.value)}
-              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) => (
-                <option key={item.id} value={item.id}>
-                  {item.name}
-                </option>
-              ))}
-            </select>
-          </div>
-        </div>
         <div className="grid gap-4">
           {data.length === 0 ? (
             <div className="bg-white rounded-lg shadow-lg border border-gray-300 text-center flex justify-center items-center p-10 flex-col gap-5">
               <p className="text-gray-700 text-lg font-medium">
-                {filtroData.urgencia === 'todas' && filtroData.tipoAyuda === 'todas' && filtroData.pueblo === 'todos'
-                  ? 'No se encontraron solicitudes de ayuda correspondientes a tu cuenta.'
-                  : 'No se encontraron solicitudes que coincidan con los filtros.'}
+                No se encontraron solicitudes de ayuda correspondientes a tu cuenta.
               </p>
               <Link
                 href="/ofrecer-ayuda"
@@ -184,12 +65,9 @@ function ListaSolicitudes() {
               </Link>
             </div>
           ) : (
-            data.map((caso) => <OfferCard showLink={true} key={caso.id} caso={caso} />)
+            data.map((caso) => <OfferCard showLink={true} showEdit={true} key={caso.id} caso={caso} />)
           )}
         </div>
-        <div className="flex items-center justify-center">
-          <Pagination currentPage={currentPage} totalPages={numPages(currentCount)} onPageChange={changePage} />
-        </div>
       </div>
     </>
   );
diff --git a/src/components/HelpOffers/EditHelpOffer.tsx b/src/components/HelpOffers/EditHelpOffer.tsx
index bf0dc4f3..45a75622 100644
--- a/src/components/HelpOffers/EditHelpOffer.tsx
+++ b/src/components/HelpOffers/EditHelpOffer.tsx
@@ -6,6 +6,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import { useRouter } from 'next/navigation';
 import { HelpRequestData, HelpRequestUpdate } from '@/types/Requests';
+import { HeartHandshake } from 'lucide-react';
 
 type EditHelpOfferProps = {
   request: HelpRequestData;
@@ -42,7 +43,8 @@ export default function EditHelpOffer({ request }: EditHelpOfferProps) {
   const router = useRouter();
 
   const mutation = useMutation({
-    mutationFn: (data: HelpOfferFormData) => helpRequestService.createRequest(formToDatabaseMap(request, data)),
+    mutationFn: (data: HelpOfferFormData) =>
+      helpRequestService.editRequest(formToDatabaseMap(request, data), request.id),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['help_requests'] });
       router.push(`/ofertas/${request.id}`);
@@ -53,10 +55,13 @@ export default function EditHelpOffer({ request }: EditHelpOfferProps) {
     },
   });
   return (
-    <HelpOfferForm
-      data={request}
-      submitMutation={mutation.mutateAsync}
-      buttonText={['Guardar cambios', 'Guardando...']}
-    />
+    <div className="space-y-6 bg-white rounded-lg shadow-lg p-6">
+      <h1 className="text-2xl font-bold mb-6">Editar oferta de ayuda</h1>
+      <HelpOfferForm
+        data={request}
+        submitMutation={mutation.mutateAsync}
+        buttonText={['Guardar cambios', 'Guardando...']}
+      />
+    </div>
   );
 }
diff --git a/src/components/HelpOffers/HelpOfferForm.tsx b/src/components/HelpOffers/HelpOfferForm.tsx
index 21f1e567..3afce675 100644
--- a/src/components/HelpOffers/HelpOfferForm.tsx
+++ b/src/components/HelpOffers/HelpOfferForm.tsx
@@ -1,5 +1,4 @@
-import React, { useState, useCallback } from 'react';
-import AddressAutocomplete from '@/components/AddressAutocomplete';
+import React, { useState, useCallback, useEffect } from 'react';
 import { PhoneInput } from '@/components/input/PhoneInput';
 import { isValidPhone } from '@/helpers/utils';
 import { HelpRequestData, HelpRequestHelpType } from '@/types/Requests';
@@ -7,6 +6,8 @@ import { useSession } from '@/context/SessionProvider';
 import { tiposAyudaArray } from '@/helpers/constants';
 import { Town } from '@/types/Town';
 import Unauthorized from '@/components/Unauthorized';
+import { useTowns } from '@/context/TownProvider';
+import { toast } from 'sonner';
 
 export type HelpOfferFormData = {
   aceptaProtocolo: boolean;
@@ -31,8 +32,9 @@ export interface HelpOfferProps {
   submitMutation: (data: HelpOfferFormData) => Promise<any>;
 }
 
-export default function HelpOfferForm({ town, data, buttonText, submitMutation }: HelpOfferProps) {
+export default function HelpOfferForm({ data, buttonText, submitMutation }: HelpOfferProps) {
   const { user } = useSession();
+  const { towns } = useTowns();
 
   const [formData, setFormData] = useState<HelpOfferFormData>({
     nombre: data?.name || user?.user_metadata?.full_name || user?.user_metadata?.nombre || '',
@@ -50,6 +52,24 @@ export default function HelpOfferForm({ town, data, buttonText, submitMutation }
     status: data?.status || '',
   });
 
+  useEffect(() => {
+    setFormData({
+      nombre: data?.name || user?.user_metadata?.full_name || user?.user_metadata?.nombre || '',
+      telefono: data?.contact_info || user?.user_metadata?.telefono || '',
+      ubicacion: data?.location || '',
+      tiposAyuda: data?.help_type || [],
+      otraAyuda: data?.other_help || '',
+      vehiculo: data?.resources?.vehicle || '',
+      disponibilidad: data?.resources?.availability || [],
+      radio: data?.resources?.radius || 1,
+      experiencia: data?.additional_info?.experience || '',
+      comentarios: data?.description || '',
+      aceptaProtocolo: !!data,
+      pueblo: data?.town_id || 0,
+      status: data?.status || '',
+    });
+  }, [user, data]);
+
   const handleTipoAyudaChange = (tipo: HelpRequestHelpType) => {
     setFormData((prev) => ({
       ...prev,
@@ -66,15 +86,15 @@ export default function HelpOfferForm({ town, data, buttonText, submitMutation }
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!formData.ubicacion) {
-      alert('La ubicación es obligatoria');
+      toast.warning('La ubicación es obligatoria');
       return;
     }
     if (!formData.aceptaProtocolo) {
-      alert('Debes aceptar el protocolo de actuación');
+      toast.warning('Debes aceptar el protocolo de actuación');
       return;
     }
     if (!isValidPhone(formData.telefono)) {
-      alert('El teléfono de contacto no es válido.');
+      toast.warning('El teléfono de contacto no es válido.');
       return;
     }
     await submitMutation(formData);
@@ -101,16 +121,15 @@ export default function HelpOfferForm({ town, data, buttonText, submitMutation }
 
         {/* Ubicación exacta */}
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Ubicación exacta *</label>
-          <AddressAutocomplete
-            initialValue={data?.location ?? ''}
-            onSelect={(address) => {
-              setFormData({
-                ...formData,
-                ubicacion: address.fullAddress,
-              });
-            }}
-            placeholder="Calle, número, piso, ciudad..."
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            ¿De dónde eres? <span className="text-red-500">*</span>
+          </label>
+          <input
+            type="text"
+            value={formData.ubicacion}
+            onChange={(e) => setFormData({ ...formData, ubicacion: e.target.value })}
+            placeholder="Ciudad o pueblo"
+            className="w-full p-2 border rounded focus:ring-2 focus:ring-green-500 focus:border-green-500"
             required
           />
         </div>
@@ -210,7 +229,9 @@ export default function HelpOfferForm({ town, data, buttonText, submitMutation }
 
         {/* Pueblo */}
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Pueblo *</label>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Pueblo al que vas a ayudar <span className="text-red-500">*</span>
+          </label>
           <select
             value={formData.pueblo?.toString()}
             onChange={(e) => setFormData({ ...formData, pueblo: Number(e.target.value) })}
@@ -218,11 +239,11 @@ export default function HelpOfferForm({ town, data, buttonText, submitMutation }
             required
           >
             <option value="">Selecciona un pueblo</option>
-            {town && (
-              <option key={town.id} value={town.id}>
-                {town.name}
+            {towns.map((item) => (
+              <option key={item.id} value={item.id}>
+                {item.name}
               </option>
-            )}
+            ))}
           </select>
         </div>
 
@@ -241,7 +262,7 @@ export default function HelpOfferForm({ town, data, buttonText, submitMutation }
       </div>
 
       {/* Botones de acción */}
-      <div className="flex flex-col sm:flex-row gap-4">
+      <div className="flex flex-col sm:flex-row gap-4 mt-6">
         <button
           type="submit"
           className="w-full bg-green-500 hover:bg-green-600 text-white py-3 px-4 rounded-lg font-semibold"
diff --git a/src/components/OfferCard.tsx b/src/components/OfferCard.tsx
index 4f4ab612..6f687c89 100644
--- a/src/components/OfferCard.tsx
+++ b/src/components/OfferCard.tsx
@@ -3,13 +3,17 @@ import { tiposAyudaOptions } from '@/helpers/constants';
 import Link from 'next/link';
 import { HelpRequestData } from '@/types/Requests';
 import { useTowns } from '@/context/TownProvider';
+import { useSession } from '@/context/SessionProvider';
 
 type OfferCardProps = {
   caso: HelpRequestData;
   showLink?: boolean;
+  showEdit?: boolean;
 };
-export default function OfferCard({ caso, showLink = true }: OfferCardProps) {
+export default function OfferCard({ caso, showLink = true, showEdit = false }: OfferCardProps) {
   const { towns } = useTowns();
+  const session = useSession();
+  const isMyOffer = session.user?.id && session.user.id === caso.user_id;
   return (
     <div key={caso.id + 'a'} className="rounded-2xl bg-white shadow-lg ring-1 ring-gray-900/5">
       <div className="flex flex-col sm:flex-row items-start gap-4 sm:items-center justify-between border-b border-gray-900/10 px-6 py-4">
@@ -126,6 +130,14 @@ export default function OfferCard({ caso, showLink = true }: OfferCardProps) {
           </div>
         </div>
         <div className="flex flex-col pt-4 sm:pt-0 sm:flex-row w-full sm:w-auto justify-end gap-2">
+          {isMyOffer && showEdit && (
+            <Link
+              href={'/ofertas/editar/' + caso.id}
+              className={`w-full rounded-xl text-center px-4 py-2 font-semibold text-white sm:w-auto bg-red-500`}
+            >
+              Editar
+            </Link>
+          )}
           {showLink && (
             <Link
               href={'/ofertas/' + caso.id}

From 43d21b5efdf47b4049405d11234292895a3b100b Mon Sep 17 00:00:00 2001
From: Pinx0 <plponce@gmail.com>
Date: Sat, 9 Nov 2024 21:05:23 +0100
Subject: [PATCH 11/15] refactor: remove unused imports

---
 src/app/ofertas/page.tsx                    | 7 +------
 src/components/HelpOffers/EditHelpOffer.tsx | 1 -
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/app/ofertas/page.tsx b/src/app/ofertas/page.tsx
index 0809b33e..65134160 100644
--- a/src/app/ofertas/page.tsx
+++ b/src/app/ofertas/page.tsx
@@ -1,12 +1,7 @@
 'use client';
 
-import { useState, useEffect, Suspense } from 'react';
+import { Suspense } from 'react';
 import { HeartHandshake } from 'lucide-react';
-import { supabase } from '@/lib/supabase/client';
-import Pagination from '@/components/Pagination';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { tiposAyudaOptions } from '@/helpers/constants';
-import { useTowns } from '@/context/TownProvider';
 import { useSession } from '@/context/SessionProvider';
 import OfferCard from '@/components/OfferCard';
 import Link from 'next/link';
diff --git a/src/components/HelpOffers/EditHelpOffer.tsx b/src/components/HelpOffers/EditHelpOffer.tsx
index 45a75622..03e9f62e 100644
--- a/src/components/HelpOffers/EditHelpOffer.tsx
+++ b/src/components/HelpOffers/EditHelpOffer.tsx
@@ -6,7 +6,6 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import { useRouter } from 'next/navigation';
 import { HelpRequestData, HelpRequestUpdate } from '@/types/Requests';
-import { HeartHandshake } from 'lucide-react';
 
 type EditHelpOfferProps = {
   request: HelpRequestData;

From bb3ff1558e0aea143f585f8cbbb1769f19274ce1 Mon Sep 17 00:00:00 2001
From: Pinx0 <plponce@gmail.com>
Date: Sat, 9 Nov 2024 21:10:29 +0100
Subject: [PATCH 12/15] fix: wrong query key

---
 src/app/ofertas/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/ofertas/page.tsx b/src/app/ofertas/page.tsx
index 65134160..3c837de1 100644
--- a/src/app/ofertas/page.tsx
+++ b/src/app/ofertas/page.tsx
@@ -22,7 +22,7 @@ function ListaSolicitudes() {
   const userId = session.user?.id;
 
   const { data, isLoading, error } = useQuery<HelpRequestData[]>({
-    queryKey: ['help_requests', { user_id: userId, type: 'necesita' }],
+    queryKey: ['help_requests', { user_id: userId, type: 'ofrece' }],
     queryFn: () => helpRequestService.getOffersByUser(userId),
   });
 

From d8eb7b72248d56f879e389fdf387e0e32a288ece Mon Sep 17 00:00:00 2001
From: Pinx0 <plponce@gmail.com>
Date: Sat, 9 Nov 2024 21:13:59 +0100
Subject: [PATCH 13/15] fix: update form data on user change (from null to a
 value)

---
 .../HelpRequests/HelpRequestForm.tsx          | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/HelpRequests/HelpRequestForm.tsx b/src/components/HelpRequests/HelpRequestForm.tsx
index 0fadd056..aedb6dab 100644
--- a/src/components/HelpRequests/HelpRequestForm.tsx
+++ b/src/components/HelpRequests/HelpRequestForm.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ChangeEvent, FormEvent, useCallback, useState } from 'react';
+import { ChangeEvent, FormEvent, useCallback, useEffect, useState } from 'react';
 import { isValidPhone } from '@/helpers/utils';
 import { tiposAyudaArray } from '@/helpers/constants';
 import { PhoneInput } from '@/components/input/PhoneInput';
@@ -59,6 +59,24 @@ export default function HelpRequestForm({
     town_id: request?.town_id || 0,
   });
 
+  useEffect(() => {
+    setFormData({
+      nombre: request?.name || user?.user_metadata?.full_name || user?.user_metadata?.nombre || '',
+      telefono: request?.contact_info || user?.user_metadata?.telefono || '',
+      ubicacion: request?.location || '',
+      coordinates: { lat: 0, lng: 0 },
+      tiposAyuda: request?.help_type || [],
+      numeroPersonas: request?.number_of_people || 1,
+      descripcion: request?.description || '',
+      urgencia: request?.urgency === 'alta' ? 'alta' : request?.urgency === 'media' ? 'media' : 'baja',
+      situacionEspecial: request?.additional_info?.special_situations || '',
+      consentimiento: request?.additional_info?.consent || false,
+      pueblo: '',
+      status: request?.status || 'active',
+      town_id: request?.town_id || 0,
+    });
+  }, [user, request]);
+
   const handleTipoAyudaChange = (tipo: HelpRequestHelpType) => {
     setFormData((prev) => ({
       ...prev,

From 70d64788b4b1815aa0736ad19d28e96596c953dd Mon Sep 17 00:00:00 2001
From: Pinx0 <plponce@gmail.com>
Date: Sat, 9 Nov 2024 22:10:42 +0100
Subject: [PATCH 14/15] fix: improve UX

---
 src/components/HelpOffers/HelpOfferForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/HelpOffers/HelpOfferForm.tsx b/src/components/HelpOffers/HelpOfferForm.tsx
index 3afce675..79957a4a 100644
--- a/src/components/HelpOffers/HelpOfferForm.tsx
+++ b/src/components/HelpOffers/HelpOfferForm.tsx
@@ -105,7 +105,7 @@ export default function HelpOfferForm({ data, buttonText, submitMutation }: Help
   return (
     <form onSubmit={handleSubmit} className="bg-white rounded-lg p-6 w-full">
       {/* Datos personales */}
-      <div className="space-y-6 max-h-[65vh] overflow-y-auto p-2">
+      <div className="space-y-6 overflow-y-auto p-2">
         <div className="grid md:grid-cols-2 gap-4">
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1">Nombre completo</label>

From 61fc3579cfc2f8b72995804719242574fa531b65 Mon Sep 17 00:00:00 2001
From: Pinx0 <plponce@gmail.com>
Date: Sat, 9 Nov 2024 22:11:02 +0100
Subject: [PATCH 15/15] fix: hide non-working toggle

---
 src/app/casos-activos/solicitudes/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/casos-activos/solicitudes/page.tsx b/src/app/casos-activos/solicitudes/page.tsx
index 3635ed99..5e1ece5e 100644
--- a/src/app/casos-activos/solicitudes/page.tsx
+++ b/src/app/casos-activos/solicitudes/page.tsx
@@ -190,13 +190,13 @@ function Solicitudes() {
               ))}
             </select>
           </div>
-          <div className="flex flex-row flex-1 justify-end">
+          {/*<div className="flex flex-row flex-1 justify-end">
             <Toggle
               handleChange={handleToggleChange}
               checked={isStringTrue(filtroData.soloSinAsignar)}
               label="Sólo ofertas sin voluntarios"
             />
-          </div>
+          </div> */}
         </div>
       </div>
       <div className="grid gap-4">