Refactor: Add more types

src/app/api/solicitudes/route.js → src/app/api/solicitudes/route.ts

@@ -1,4 +1,4 @@
-import { NextResponse } from 'next/server';
+import { NextRequest, NextResponse } from 'next/server';
 import { createClient } from '@/lib/supabase/server';
 
 export async function GET() {
@@ -16,7 +16,7 @@ export async function GET() {
   return Response.json({ registeredPost });
 }
 
-export async function POST(request) {
+export async function POST(request: NextRequest) {
   try {
     // Obtener los datos del formulario (multipart/form-data)
     const formData = await request.formData();

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

@@ -141,7 +141,7 @@ export default function Ofertas() {
             </button>
           </div>
         ) : (
-          data.map((caso) => <OfferCard caso={caso} towns={towns} isHref={true} key={caso.id} />)
+          data.map((caso) => <OfferCard caso={caso} towns={towns} showLink={true} key={caso.id} />)
         )}
       </div>
       <div className="flex items-center justify-center">

src/app/oferta/[id]/page.js → src/app/ofertas/[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 OfferCard from '@/components/OfferCard';
-import { useTowns } from '@/context/TownProvider';
+import { useQuery } from '@tanstack/react-query';
+import { HelpRequestData } from '@/types/Requests';
+import { helpRequestService } from '@/lib/service';
 
 export default function CasoDetalle() {
   const params = useParams();
   const { id } = params;
-  const [caso, setCaso] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const { towns } = useTowns();
-  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 {
+    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>
-      <OfferCard towns={towns} key={caso.id} caso={caso} />
+      <OfferCard caso={request} showLink={false} />
     </div>
   );
 }

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

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

src/app/ofertas/page.js → src/app/ofertas/page.tsx

@@ -10,27 +10,28 @@ import { useTowns } from '@/context/TownProvider';
 import { useSession } from '@/context/SessionProvider';
 import OfferCard from '@/components/OfferCard';
 import Link from 'next/link';
+import { HelpRequestData } from '@/types/Requests';
 
 export default function ListaSolicitudes() {
   const session = useSession();
 
   const searchParams = useSearchParams();
   const router = useRouter();
 
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
 
-  const [data, setData] = useState([]);
-  const [currentPage, setCurrentPage] = useState(Number(searchParams.get('page')) || 1);
-  const [currentCount, setCurrentCount] = useState(0);
+  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) => {
+  const numPages = (count: number) => {
     return Math.ceil(count / itemsPerPage) || 0;
   };
 
-  const updateFilter = (filter, value) => {
+  const updateFilter = (filter: 'urgencia' | 'tipoAyuda' | 'pueblo' | 'page', value: string) => {
     const params = new URLSearchParams(searchParams.toString());
     params.set(filter, value);
     router.push(`?${params.toString()}`);
@@ -41,17 +42,17 @@ export default function ListaSolicitudes() {
     pueblo: searchParams.get('pueblo') || 'todos',
   });
 
-  const changeDataFilter = (type, newFilter) => {
+  const changeDataFilter = (type: 'urgencia' | 'tipoAyuda' | 'pueblo', newFilter: string) => {
     setFiltroData((prev) => ({
       ...prev,
       [type]: newFilter,
     }));
     updateFilter(type, newFilter);
   };
 
-  function changePage(newPage) {
+  function changePage(newPage: number) {
     setCurrentPage(newPage);
-    updateFilter('page', newPage);
+    updateFilter('page', newPage.toString());
   }
   useEffect(() => {
     async function fetchData() {
@@ -64,7 +65,7 @@ export default function ListaSolicitudes() {
           .from('help_requests')
           .select('*', { count: 'exact' })
           .eq('type', 'ofrece')
-          .contains('additional_info', { email: session.user.email });
+          .contains('additional_info', { email: session.user?.email });
         // Solo agregar filtro si no es "todos"
         if (filtroData.pueblo !== 'todos') {
           query.eq('town_id', filtroData.pueblo);
@@ -80,7 +81,7 @@ export default function ListaSolicitudes() {
           .range((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage - 1)
           .order('created_at', { ascending: false });
 
-        if (error) {
+        if (error || count === null) {
           console.log('Error fetching solicitudes:', error);
           setData([]);
         } else {
@@ -174,16 +175,7 @@ export default function ListaSolicitudes() {
               </Link>
             </div>
           ) : (
-            data.map((caso) => (
-              <OfferCard
-                isHref={true}
-                key={caso.id}
-                caso={caso}
-                button={{ text: 'Editar', link: '/ofertas/editar/' }}
-                isEdit={true}
-                towns={towns}
-              />
-            ))
+            data.map((caso) => <OfferCard showLink={true} key={caso.id} caso={caso} />)
           )}
         </div>
         <div className="flex items-center justify-center">

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

@@ -1,4 +1,4 @@
-// personas-animales-desaparecidos/page.js
+// personas-animales-desaparecidos/page.tsx
 
 import { Users, PawPrint, Car, UserSearch } from 'lucide-react';