Merge pull request #142 from pedrolivaresanchez/feat/ocultar-menus-in…

…necesarios

Ocultar mis solicitudes y mis ofertas cuando no tienes

src/app/auth/page.js

@@ -6,11 +6,11 @@ import { authService } from '@/lib/service';
 
 export default function AuthPage() {
   const router = useRouter();
-  
+
   useEffect(() => {
     async function fetchSession() {
       const { data: session } = await authService.getSessionUser();
-      if (session.user) {       
+      if (session.user) {
         router.push('/');
       }
     }

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

@@ -9,7 +9,7 @@ import OfferHelp from '@/components/OfferHelp';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { tiposAyudaOptions } from '@/helpers/constants';
 import Modal from '@/components/Modal';
-import { useModal } from '@/context/EmergencyProvider';
+import { useModal } from '@/context/ModalProvider';
 import { useTowns } from '@/context/TownProvider';
 
 const MODAL_NAME = 'solicitudes';

src/app/layout.tsx

@@ -1,7 +1,7 @@
 import './globals.css';
 import 'leaflet/dist/leaflet.css';
-import EmergencyLayout from '@/components/layout/EmergencyLayout';
-import { EmergencyProvider } from '@/context/EmergencyProvider';
+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';
@@ -31,9 +31,9 @@ export default async function RootLayout({ children }: PropsWithChildren) {
         <SessionProvider session={session}>
           <QueryClientProvider>
             <TownsProvider towns={towns}>
-              <EmergencyProvider>
-                <EmergencyLayout>{children}</EmergencyLayout>
-              </EmergencyProvider>
+              <ModalProvider>
+                <SidebarLayout>{children}</SidebarLayout>
+              </ModalProvider>
             </TownsProvider>
           </QueryClientProvider>
         </SessionProvider>

src/app/personas-animales-desaparecidos/page.js

@@ -16,8 +16,8 @@ export default function PersonasAnimalesDesaparecidos() {
       {/* Tarjeta grande para información */}
       <div className="bg-white p-8 rounded-b-lg shadow mb-8">
         <p className="text-gray-700 text-lg">
-          En esta página puedes acceder a diferentes herramientas externas para encontrar personas, animales y vehículos desaparecidos. 
-          Selecciona la opción que necesitas para más información y para reportar un caso o buscar ayuda.
+          En esta página puedes acceder a diferentes herramientas externas para encontrar personas, animales y vehículos
+          desaparecidos. Selecciona la opción que necesitas para más información y para reportar un caso o buscar ayuda.
         </p>
       </div>
 
@@ -58,4 +58,4 @@ export default function PersonasAnimalesDesaparecidos() {
       </div>
     </div>
   );
-}
+}

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

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { FormEvent, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { FormRenderer } from './FormRenderer';
 import { FormData, Status } from '../types';
@@ -32,6 +32,8 @@ 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: '',
@@ -62,7 +64,7 @@ export function FormContainer() {
   });
 
   const handleSubmit = useCallback(
-    async (e: any) => {
+    async (e: FormEvent) => {
       e.preventDefault();
 
       /* Form validation */
@@ -107,6 +109,7 @@ export function FormContainer() {
           },
           town_id: parseInt(formData.pueblo),
           status: 'active',
+          user_id: userId,
         };
 
         await helpRequestService.createRequest(helpRequestData);
@@ -139,7 +142,7 @@ export function FormContainer() {
         });
       }
     },
-    [formData, router],
+    [userId, formData, router],
   );
 
   const handleInputElementChange: React.ChangeEventHandler<HTMLInputElement> = useCallback((e) => {

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

@@ -84,7 +84,8 @@ export function FormRenderer({
               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'
+              {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>

src/app/solicitudes/page.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+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';
+import { HelpRequestData } from '@/types/Requests';
+import { helpRequestService } from '@/lib/service';
+
+export default function ListaSolicitudes() {
+  const session = useSession();
+  const towns = useTowns();
+  const userId = session.user?.id;
+
+  const {
+    data: requests,
+    isLoading,
+    error,
+  } = useQuery<HelpRequestData[]>({
+    queryKey: ['help_requests', { user_id: userId, type: 'necesita' }],
+    queryFn: () => helpRequestService.getRequestsByUser(userId),
+  });
+
+  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 (error || requests === undefined) {
+    return (
+      <div className="bg-red-100 border-l-4 border-red-500 p-4 rounded">
+        <p className="text-red-700">{error?.message}</p>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="space-y-6 mx-auto max-w-7xl px-4 sm:px-6 mt-10">
+        <div className="grid gap-4">
+          {requests.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">
+                No se encontraron solicitudes de ayuda correspondientes a tu cuenta.
+              </p>
+
+              <Link
+                href="/solicitar-ayuda"
+                className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 flex items-center gap-2 whitespace-nowrap"
+              >
+                <Search className="w-5 h-5" />
+                Solicitar ayuda
+              </Link>
+            </div>
+          ) : (
+            requests.map((caso) => (
+              <SolicitudCard
+                isHref={true}
+                towns={towns}
+                key={caso.id}
+                caso={caso}
+                button={{ text: 'Editar', link: '/solicitudes/editar/' }}
+                isEdit={true}
+              />
+            ))
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

src/components/AsignarSolicitudButton.tsx

@@ -9,7 +9,7 @@ import Link from 'next/link';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import Modal from '@/components/Modal';
-import { useModal } from '@/context/EmergencyProvider';
+import { useModal } from '@/context/ModalProvider';
 
 type AsignarSolicitudButtonProps = {
   helpRequest: HelpRequestData;