Merge pull request #143 from pedrolivaresanchez/feat/incluir-solicitu…

…des-ser-voluntario

Incluir en "mis solicitudes" aquellas en las que te has apuntado como voluntario

src/app/casos-activos/mapa/page.tsx

@@ -7,10 +7,8 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { tiposAyudaOptions } from '@/helpers/constants';
 import Map, { PinMapa } from '@/components/map/map';
 import PickupPoint from '@/components/PickupPoint';
-import { useTowns } from '@/context/TownProvider';
 
 export default function Mapa() {
-  const towns = useTowns();
   const searchParams = useSearchParams();
   const router = useRouter();
 
@@ -47,7 +45,7 @@ export default function Mapa() {
         latitude: request.latitude ?? 0,
         longitude: request.longitude ?? 0,
         id: request.id,
-        popup: <SolicitudCard isHref={true} isEdit={false} towns={towns} caso={request} />,
+        popup: <SolicitudCard showLink={true} showEdit={false} caso={request} />,
       };
     }
 
@@ -107,7 +105,7 @@ export default function Mapa() {
     }
 
     fetchData();
-  }, [filtroData, towns]);
+  }, [filtroData]);
 
   if (loading) {
     return (

src/app/casos-activos/ofertas/page.js

@@ -6,11 +6,11 @@ import { supabase } from '@/lib/supabase/client';
 import Pagination from '@/components/Pagination';
 import { tiposAyudaOptions } from '@/helpers/constants';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { useTowns } from '../../../context/TownProvider';
-import OfferCard from '../../../components/OfferCard';
+import { useTowns } from '@/context/TownProvider';
+import OfferCard from '@/components/OfferCard';
 
 export default function Ofertas() {
-  const towns = useTowns();
+  const { towns } = useTowns();
   const searchParams = useSearchParams();
   const router = useRouter();
 

src/app/casos-activos/solicitudes/page.js

@@ -15,7 +15,7 @@ import { useTowns } from '@/context/TownProvider';
 const MODAL_NAME = 'solicitudes';
 
 export default function Solicitudes() {
-  const towns = useTowns();
+  const { getTownById, towns } = useTowns();
   const searchParams = useSearchParams();
   const router = useRouter();
 
@@ -123,6 +123,8 @@ export default function Solicitudes() {
     );
   }
 
+  const puebloSeleccionado = getTownById(Number(filtroData.pueblo));
+
   return (
     <>
       {/* FILTROS  */}
@@ -179,26 +181,19 @@ export default function Solicitudes() {
               className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 flex items-center gap-2 whitespace-nowrap"
             >
               <HeartHandshake className="w-5 h-5" />
-              Ofrecer ayuda{' '}
-              {filtroData.pueblo === 'todos'
-                ? ''
-                : ' a ' + towns.find((town) => town.id === Number(filtroData.pueblo))?.name}
+              Ofrecer ayuda {filtroData.pueblo === 'todos' ? '' : ' a ' + getTownById(Number(filtroData.pueblo))?.name}
             </button>
           </div>
         ) : (
-          data.map((caso) => <SolicitudCard isHref={true} towns={towns} key={caso.id} caso={caso} />)
+          data.map((caso) => <SolicitudCard 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>
 
       <Modal id={MODAL_NAME}>
-        <OfferHelp
-          town={towns.find((town) => town.id === Number(filtroData.pueblo))?.name}
-          onClose={closeModal}
-          isModal={true}
-        />
+        <OfferHelp town={puebloSeleccionado?.name} onClose={closeModal} isModal={true} />
       </Modal>
     </>
   );

src/app/layout.tsx

@@ -2,10 +2,8 @@ import './globals.css';
 import 'leaflet/dist/leaflet.css';
 import SidebarLayout from '@/components/layout/SidebarLayout';
 import { ModalProvider } from '@/context/ModalProvider';
-import { TownsProvider } from '@/context/TownProvider';
 import { createClient } from '@/lib/supabase/server';
 import { SessionProvider } from '@/context/SessionProvider';
-import { townsService } from '@/lib/service';
 import { Toaster } from 'sonner';
 import { PropsWithChildren } from 'react';
 import { QueryClientProvider } from '@/context/QueryClientProvider';
@@ -23,18 +21,15 @@ const getSession = async () => {
 
 export default async function RootLayout({ children }: PropsWithChildren) {
   const session = await getSession();
-  const towns = await townsService.getTowns();
   return (
     <html lang="es">
       <body suppressHydrationWarning={true}>
         <Toaster position="bottom-left" richColors />
         <SessionProvider session={session}>
           <QueryClientProvider>
-            <TownsProvider towns={towns}>
-              <ModalProvider>
-                <SidebarLayout>{children}</SidebarLayout>
-              </ModalProvider>
-            </TownsProvider>
+            <ModalProvider>
+              <SidebarLayout>{children}</SidebarLayout>
+            </ModalProvider>
           </QueryClientProvider>
         </SessionProvider>
       </body>

src/app/oferta/[id]/page.js

@@ -3,15 +3,15 @@ import { useEffect, useState } from 'react';
 import { useParams } from 'next/navigation';
 import { supabase } from '@/lib/supabase/client';
 import { ArrowLeft } from 'lucide-react';
-import OfferCard from '../../../components/OfferCard';
-import { useTowns } from '../../../context/TownProvider';
+import OfferCard from '@/components/OfferCard';
+import { useTowns } from '@/context/TownProvider';
 
 export default function CasoDetalle() {
   const params = useParams();
   const { id } = params;
   const [caso, setCaso] = useState(null);
   const [loading, setLoading] = useState(true);
-  const towns = useTowns();
+  const { towns } = useTowns();
   useEffect(() => {
     async function fetchCaso() {
       const { data, error } = await supabase.from('help_requests').select('*').eq('id', id).single();

src/app/ofertas/page.js

@@ -6,9 +6,9 @@ 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 { useTowns } from '@/context/TownProvider';
+import { useSession } from '@/context/SessionProvider';
+import OfferCard from '@/components/OfferCard';
 import Link from 'next/link';
 
 export default function ListaSolicitudes() {
@@ -23,7 +23,7 @@ export default function ListaSolicitudes() {
   const [data, setData] = useState([]);
   const [currentPage, setCurrentPage] = useState(Number(searchParams.get('page')) || 1);
   const [currentCount, setCurrentCount] = useState(0);
-  const towns = useTowns();
+  const { towns } = useTowns();
 
   const itemsPerPage = 10;
   const numPages = (count) => {

src/app/solicitar-ayuda/_components/Form/FormContainer.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { FormEvent, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { FormEvent, useCallback, useMemo, useState } from 'react';
 
 import { FormRenderer } from './FormRenderer';
 import { FormData, Status } from '../types';
@@ -49,14 +49,6 @@ export function FormContainer() {
     email: session?.user?.user_metadata?.email || '',
   });
 
-  useEffect(() => {
-    console.log('Component mounted');
-  }, []);
-
-  useEffect(() => {
-    console.log('formData changed: ', formData);
-  }, [formData]);
-
   const [status, setStatus] = useState<Status>({
     isSubmitting: false,
     error: null,
@@ -180,7 +172,6 @@ export function FormContainer() {
           }
         : null,
     }));
-    console.log('address: ', address);
   }, []);
 
   const handlePhoneChange = useCallback((phoneNumber: string) => {
@@ -191,11 +182,7 @@ export function FormContainer() {
   }, []);
 
   const handleHelpTypeChange: React.ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
-    const { id, name, value, checked } = event.target;
-    console.log('id: ', id);
-    console.log('name: ', name);
-    console.log('value: ', value);
-    console.log('checked: ', checked);
+    const { id, checked } = event.target;
 
     setFormData((formData) => {
       const prevHelp = formData.tiposDeAyuda;

src/app/solicitud/[id]/page.js → src/app/solicitudes/[id]/page.tsx

@@ -1,37 +1,31 @@
 'use client';
-import { useEffect, useState } from 'react';
-import { useParams } from 'next/navigation';
-import { supabase } from '@/lib/supabase/client';
 import { ArrowLeft } from 'lucide-react';
 import SolicitudCard from '@/components/SolicitudCard';
-import { useTowns } from '../../../context/TownProvider';
+import { useQuery } from '@tanstack/react-query';
+import { HelpRequestData } from '@/types/Requests';
+import { helpRequestService } from '@/lib/service';
+import { useParams } from 'next/navigation';
 
 export default function CasoDetalle() {
-  const params = useParams();
-  const { id } = params;
-  const [caso, setCaso] = useState(null);
-  const towns = useTowns();
-  const [loading, setLoading] = useState(true);
-  useEffect(() => {
-    async function fetchCaso() {
-      const { data, error } = await supabase.from('help_requests').select('*').eq('id', id).single();
-      if (error) {
-        console.error('Error fetching caso:', error);
-      } else {
-        setCaso(data);
-      }
-      setLoading(false);
-    }
-    fetchCaso();
-  }, [id]);
-  if (loading) {
+  const { id } = useParams<{ id: string }>();
+
+  const {
+    data: request,
+    isLoading,
+    error,
+  } = useQuery<HelpRequestData>({
+    queryKey: ['help_requests', { id: id }],
+    queryFn: () => helpRequestService.getOne(Number(id)),
+  });
+
+  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>
       </div>
     );
   }
-  if (!caso) {
+  if (error || request === undefined) {
     return (
       <div className="space-y-6 mx-auto max-w-7xl px-4 sm:px-6">
         <div className="flex justify-start">
@@ -60,7 +54,7 @@ export default function CasoDetalle() {
           Volver
         </button>
       </div>
-      <SolicitudCard key={caso.id} caso={caso} towns={towns} />
+      <SolicitudCard caso={request} showLink={false} showEdit={true} />
     </div>
   );
 }

src/app/solicitudes/editar/[id]/page.tsx

@@ -0,0 +1,26 @@
+import { PageProps } from '.next/types/app/page';
+import RequestHelp from '@/components/RequestHelp';
+import Unauthorized from '@/components/Unauthorized';
+import { helpRequestService } from '@/lib/service';
+import { createClient } from '@/lib/supabase/server';
+
+export default async function EditarSolicitud({ params }: PageProps) {
+  const { id } = await params;
+  const supabase = await createClient();
+  const { data: session } = await supabase.auth.getUser();
+  if (session.user === null) {
+    return <Unauthorized />;
+  }
+  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"
+    />
+  );
+}

src/app/solicitudes/page.tsx

@@ -2,7 +2,6 @@
 
 import { Search } from 'lucide-react';
 import SolicitudCard from '@/components/SolicitudCard';
-import { useTowns } from '@/context/TownProvider';
 import { useSession } from '@/context/SessionProvider';
 import Link from 'next/link';
 import { useQuery } from '@tanstack/react-query';
@@ -11,7 +10,6 @@ import { helpRequestService } from '@/lib/service';
 
 export default function ListaSolicitudes() {
   const session = useSession();
-  const towns = useTowns();
   const userId = session.user?.id;
 
   const {
@@ -58,16 +56,7 @@ export default function ListaSolicitudes() {
               </Link>
             </div>
           ) : (
-            requests.map((caso) => (
-              <SolicitudCard
-                isHref={true}
-                towns={towns}
-                key={caso.id}
-                caso={caso}
-                button={{ text: 'Editar', link: '/solicitudes/editar/' }}
-                isEdit={true}
-              />
-            ))
+            requests.map((caso) => <SolicitudCard showLink={true} showEdit={true} key={caso.id} caso={caso} />)
           )}
         </div>
       </div>