From caeb05228afbe81be0c288222ba9917371d61b4c Mon Sep 17 00:00:00 2001 From: Pinx0 Date: Sat, 9 Nov 2024 20:37:03 +0100 Subject: [PATCH] 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 4b03648..d19972a 100644 --- a/src/app/solicitar-ayuda/page.tsx +++ b/src/app/solicitar-ayuda/page.tsx @@ -7,17 +7,6 @@ export default function SolicitarAyuda() { return (
{/* Banner de emergencia */} -
-
- -
-

EMERGENCIA ACTIVA - Inundaciones CV

-

- Para emergencias médicas inmediatas, llame al 112. Este formulario es para coordinar ayuda y asistencia. -

-
-
-
diff --git a/src/components/AddressMap.tsx b/src/components/AddressMap.tsx index a9c2f3c..c29696e 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('unknown'); const [lngLat, setLngLat] = useState(initialAddressDescriptor?.coordinates ?? undefined); const [addressDescriptor, setAddressDescriptor] = useState({ diff --git a/src/components/HelpOffers/CreateHelpOffer.tsx b/src/components/HelpOffers/CreateHelpOffer.tsx index 19f1d90..637bed3 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 ; + return ( +
+

Ofrecer ayuda

+
+
+ +
+

Me apunto como voluntario

+

+ Al registrarte como voluntario, te comprometes a seguir las indicaciones de las autoridades y los + protocolos establecidos. +

+
+
+
+ +
+ ); } diff --git a/src/components/HelpOffers/EditHelpOffer.tsx b/src/components/HelpOffers/EditHelpOffer.tsx index 99da9a7..bf0dc4f 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 ( diff --git a/src/components/HelpOffers/HelpOfferForm.tsx b/src/components/HelpOffers/HelpOfferForm.tsx index 0465e02..21f1e56 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({ - 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 ; + return (
{/* Datos personales */} diff --git a/src/components/HelpRequests/CreateHelpRequest.tsx b/src/components/HelpRequests/CreateHelpRequest.tsx index 850460c..7f406bb 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 ( - <> +

Solicitar ayuda

- +
); } diff --git a/src/components/HelpRequests/EditHelpRequest.tsx b/src/components/HelpRequests/EditHelpRequest.tsx index 4ab295d..1ae75dc 100644 --- a/src/components/HelpRequests/EditHelpRequest.tsx +++ b/src/components/HelpRequests/EditHelpRequest.tsx @@ -63,13 +63,17 @@ export default function EditHelpRequest({ request }: EditHelpRequestProps) { }); return ( - <> +

Editar solicitud de ayuda

- +
); } diff --git a/src/components/HelpRequests/HelpRequestForm.tsx b/src/components/HelpRequests/HelpRequestForm.tsx index 364192d..c37a0c1 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; } 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({ - 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 ( -
- {/* Formulario principal */} -
- -
-
- - -
- -
- {!data && !user && ( -
- - -

- Se utilizara para que puedas eliminar o editar la información de tu solicitud -

-
- )} - {!!data && ( -
- - -
- )} - -
- -
- {tiposAyudaArray.map((tipo) => ( - - ))} -
-
+ if (!user) return ; -
- - -
- -
- - -
+ return ( + +
+
+ + +
+ +
+ {!!request && ( +
+ + +
+ )} -
- - -
- -
- -