Merge pull request #165 from pedrolivaresanchez/refactor/add-types

Refactor: Add more types
pedrolivaresanchez · Nov 8, 2024 · f71cbed · f71cbed
2 parents f912cdf + a368029
commit f71cbed
Show file tree

Hide file tree

Showing 26 changed files with 274 additions and 384 deletions.
diff --git a/src/app/casos-activos/layout.js → src/app/casos-activos/layout.tsx b/src/app/casos-activos/layout.js → src/app/casos-activos/layout.tsx
@@ -1,5 +1,6 @@
 import { supabase } from '@/lib/supabase/client';
 import TabNavigation from '@/components/TabNavigation';
+import { PropsWithChildren } from 'react';
 const getCount = async () => {
   const {
     data: solicitaData,
@@ -26,7 +27,7 @@ const getCount = async () => {
   };
 };
 
-export default async function CasosActivosLayout({ children }) {
+export default async function CasosActivosLayout({ children }: PropsWithChildren) {
   const count = await getCount();
   return (
     <>

diff --git a/src/app/casos-activos/mapa/page.tsx b/src/app/casos-activos/mapa/page.tsx
@@ -8,6 +8,8 @@ import { tiposAyudaOptions } from '@/helpers/constants';
 import Map, { PinMapa } from '@/components/map/map';
 import PickupPoint from '@/components/PickupPoint';
 
+export const dynamic = 'force-dynamic';
+
 export default function MapaPage() {
   return (
     <Suspense>

diff --git a/src/app/casos-activos/ofertas/page.js → src/app/casos-activos/ofertas/page.tsx b/src/app/casos-activos/ofertas/page.js → src/app/casos-activos/ofertas/page.tsx
@@ -1,13 +1,14 @@
 'use client';
 
 import { Suspense, useEffect, useState } from 'react';
-import { HeartHandshake } from 'lucide-react';
 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 { HelpRequestData } from '@/types/Requests';
+
+export const dynamic = 'force-dynamic';
 
 export default function OfertasPage() {
   return (
@@ -18,42 +19,41 @@ export default function OfertasPage() {
 }
 
 function Ofertas() {
-  const { towns } = useTowns();
   const searchParams = useSearchParams();
   const router = useRouter();
   const {} = router;
 
-  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 itemsPerPage = 10;
-  const numPages = (count) => {
+  const numPages = (count: number) => {
     return Math.ceil(count / itemsPerPage) || 0;
   };
 
-  const updateFilter = (filter, value) => {
+  const updateFilter = (filter: 'ayuda' | 'page', value: string | number) => {
     const params = new URLSearchParams(searchParams.toString());
-    params.set(filter, value);
+    params.set(filter, value.toString());
     router.push(`?${params.toString()}`);
   };
 
   const [filtroData, setFiltroData] = useState({
     ayuda: searchParams.get('acepta') || 'todas',
   });
 
-  const changeDataFilter = (type, newFilter) => {
+  const changeDataFilter = (type: 'ayuda', newFilter: string) => {
     setFiltroData((prev) => ({
       ...prev,
       [type]: newFilter,
     }));
     updateFilter(type, newFilter);
   };
 
-  function changePage(newPage) {
+  function changePage(newPage: number) {
     setCurrentPage(newPage);
     updateFilter('page', newPage);
   }
@@ -83,7 +83,7 @@ function Ofertas() {
           setData([]);
         } else {
           setData(data || []);
-          setCurrentCount(count);
+          setCurrentCount(count ?? 0);
         }
       } catch (err) {
         console.log('Error general:', err);
@@ -136,21 +136,11 @@ function Ofertas() {
         {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">
-              No se encontraron solicitudes que coincidan con los filtros.
+              No se encontraron ofertas que coincidan con los filtros.
             </p>
-
-            <button
-              onClick={() => {
-                setShowModal(true);
-              }}
-              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
-            </button>
           </div>
         ) : (
-          data.map((caso) => <OfferCard caso={caso} towns={towns} showLink={true} key={caso.id} />)
+          data.map((caso) => <OfferCard caso={caso} showLink={true} key={caso.id} />)
         )}
       </div>
       <div className="flex items-center justify-center">

diff --git a/src/app/casos-activos/page.js b/src/app/casos-activos/page.js
diff --git a/src/app/casos-activos/solicitudes/page.js → src/app/casos-activos/solicitudes/page.tsx b/src/app/casos-activos/solicitudes/page.js → src/app/casos-activos/solicitudes/page.tsx
@@ -1,18 +1,15 @@
 'use client';
 
 import { Suspense, useEffect, useState } from 'react';
-import { HeartHandshake } from 'lucide-react';
 import { supabase } from '@/lib/supabase/client';
 import SolicitudCard from '@/components/SolicitudCard';
 import Pagination from '@/components/Pagination';
-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/ModalProvider';
 import { useTowns } from '@/context/TownProvider';
+import { HelpRequestData } from '@/types/Requests';
 
-const MODAL_NAME = 'solicitudes';
+export const dynamic = 'force-dynamic';
 
 export default function SolicitudesPage() {
   return (
@@ -23,29 +20,25 @@ export default function SolicitudesPage() {
 }
 
 function Solicitudes() {
-  const { getTownById, towns } = useTowns();
+  const { towns } = useTowns();
   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 { toggleModal } = useModal();
+  const [data, setData] = useState<HelpRequestData[]>([]);
+  const [currentPage, setCurrentPage] = useState<number>(Number(searchParams.get('page')) || 1);
+  const [currentCount, setCurrentCount] = useState<number>(0);
 
-  const closeModal = () => {
-    toggleModal(MODAL_NAME, false);
-  };
   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 | number) => {
     const params = new URLSearchParams(searchParams.toString());
-    params.set(filter, value);
+    params.set(filter, value.toString());
     router.push(`?${params.toString()}`);
   };
 
@@ -55,15 +48,15 @@ function Solicitudes() {
     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);
   }
@@ -102,7 +95,7 @@ function Solicitudes() {
           setData([]);
         } else {
           setData(data || []);
-          setCurrentCount(count);
+          setCurrentCount(count ?? 0);
         }
       } catch (err) {
         console.log('Error general:', err);
@@ -131,8 +124,6 @@ function Solicitudes() {
     );
   }
 
-  const puebloSeleccionado = getTownById(Number(filtroData.pueblo));
-
   return (
     <>
       {/* FILTROS  */}
@@ -181,16 +172,6 @@ function Solicitudes() {
             <p className="text-gray-700 text-lg font-medium">
               No se encontraron solicitudes que coincidan con los filtros.
             </p>
-
-            <button
-              onClick={() => {
-                toggleModal(MODAL_NAME, true);
-              }}
-              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 ' + getTownById(Number(filtroData.pueblo))?.name}
-            </button>
           </div>
         ) : (
           data.map((caso) => <SolicitudCard showLink={true} showEdit={true} key={caso.id} caso={caso} />)
@@ -199,10 +180,6 @@ function Solicitudes() {
       <div className="flex items-center justify-center">
         <Pagination currentPage={currentPage} totalPages={numPages(currentCount)} onPageChange={changePage} />
       </div>
-
-      <Modal id={MODAL_NAME}>
-        <OfferHelp town={puebloSeleccionado?.name} onClose={closeModal} isModal={true} />
-      </Modal>
     </>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -132,7 +132,7 @@ export default function Home() {
       title: 'Casos activos',
       description: 'Observa los casos activos',
       icon: AlertCircle,
-      path: '/casos-activos',
+      path: '/casos-activos/solicitudes',
       color: 'orange',
     },
     {