Refactor file upload logic in FetchPostPago function

Seminario-Integrador-2024 · Sep 28, 2024 · ccf4061 · ccf4061
1 parent e350a16
commit ccf4061
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 59 deletions.
diff --git a/FrontAdmin/src/API-Alumnos/Pagos.ts b/FrontAdmin/src/API-Alumnos/Pagos.ts
@@ -3,48 +3,35 @@ import Cookies from 'js-cookie';
 export const FetchPostPago = async (
     cuotas: any,
     montoInformado: number,
-    archivo: File | null,   // Archivo a enviar
     comentario: string,
-    nro_transferencia: number
 ) => {
     try {
         const token = Cookies.get('tokennn');
         const dni = Cookies.get('dni');
 
-        // Crea un nuevo objeto FormData
-        const formData = new FormData();
-        formData.append('alumno', dni);
-        formData.append('cuotas', cuotas);
-        formData.append('monto_informado', montoInformado);
-        formData.append('ticket', archivo); // El archivo
-        formData.append('comentario', comentario);
-        formData.append('nro_transferencia', nro_transferencia);
-
-        console.log('FormData:', formData);
-        console.log('Archivo:', archivo);
-        console.log('Cuotas:', cuotas);
-        console.log('Monto informado:', montoInformado);
-        console.log('Comentario:', comentario);
-        console.log('Nro transferencia:', nro_transferencia);
-
-        // Realiza la solicitud fetch
-        const response = await fetch(`http://localhost:8000/api/pagos/alumno/${dni}/`, {
+        const response = await fetch(`http://localhost:8000/api/pagos/alumno/${dni}`, {
             method: 'POST',
             headers: {
-                Authorization: `Bearer ${token}`, 
+              'Content-Type': 'application/json',
+              Authorization: `Bearer ${token}`,
             },
-            body: formData,
-        });
-
-        if (response.ok) {
-            return await response.json(); 
-        } else {
+            body: JSON.stringify({alumno:dni, cuotas , monto_informado:montoInformado, comentario}),
+          });
+
+          if (response.ok) {
+            const data = await response.json();
+            return data; //nose si lo dejo o que hago
+          } else {
             const errorData = await response.json();
-            throw new Error(`Error en la respuesta del servidor: ${errorData.message}`);
+            throw new Error(
+              `Error en la respuesta del servidor: ${errorData.message}`
+            );
+          }
+        } catch (error) {
+          console.error('Network error:', error);
         }
-    } catch (error) {
-        console.error('Network error:', error);
-    }
+
+
 };
 
 
@@ -53,7 +40,7 @@ export const FetchGetCuotas = async () => {
         const token = Cookies.get('tokennn');
         const dni = Cookies.get('dni');
 
-        const response = await fetch(`http://localhost:8000/api/cuotas/alumno/${dni}/?limit=6&offset=0/`, {
+        const response = await fetch(`http://localhost:8000/api/cuotas/alumno/${dni}/impagas/`, {
             method: 'GET',
             headers: {
                 'Content-Type': 'application/json',

diff --git a/FrontAdmin/src/API/Materias.ts b/FrontAdmin/src/API/Materias.ts
@@ -11,7 +11,7 @@ export const FetchPostMateria = async (
   try {
     const token = Cookies.get('tokennn');
 
-    const response = await fetch(`${URL}/materias/`, {
+    const response = await fetch(`http://localhost:8000/api/materias/`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -44,7 +44,7 @@ export const FetchMaterias = async () => {
   try {
     const token = Cookies.get('tokennn');
 
-    const response = await fetch(`${URL}/materias/`, {
+    const response = await fetch(`http://localhost:8000/api/materias/`, {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',

diff --git a/FrontAdmin/src/components/Pages-Alumnos/InformarPago/DrawerPago.tsx b/FrontAdmin/src/components/Pages-Alumnos/InformarPago/DrawerPago.tsx
@@ -72,7 +72,7 @@ const DrawerInformar: React.FC<DrawerInformarProps> = ({ isOpen, onClose, cuotas
        // Aca hay que hacer el post al backend
        try{
            const numerosCuotas = cuotasseleccionadas.map(cuota => cuota.numero);
-           // FetchPostPago(numerosCuotas, parseInt(montoAbonado), file, comentarios, nro_transferencia);
+           FetchPostPago(numerosCuotas, parseInt(montoAbonado), comentarios);
 
            const dni = Cookies.get('dni');
            const fullName = Cookies.get('full_name');
@@ -82,7 +82,7 @@ const DrawerInformar: React.FC<DrawerInformarProps> = ({ isOpen, onClose, cuotas
 
            showToast('Pago informado', 'El pago se ha informado correctamente, continuar en el google forms', 'success');
 
-            // onRefresh();
+            onRefresh();
        } catch (error) {
            console.error('Error:', error);
             showToast('Error', 'Ha ocurrido un error al informar el pago', 'error');

diff --git a/FrontAdmin/src/components/Pages-Alumnos/InformarPago/TablaPagos.tsx b/FrontAdmin/src/components/Pages-Alumnos/InformarPago/TablaPagos.tsx
@@ -25,14 +25,7 @@ interface TablaCuotasProps {
 function TablaCuotas({ refresh, setCuotasSeleccionadas, cuotasSeleccionadas }: TablaCuotasProps) {
 
     const [cuotas, setCuotas] = useState<any[]>([]); 
-   // const [cuotasSeleccionadas, setCuotasSeleccionadas] = useState<any[]>([]);
-
-
-//    useEffect(() => {
-//     console.log("refresh en tabla pagos", refresh);
-//     setCuotasSeleccionadas([]);
-//     console.log("las cuotas seleccionadas", cuotasSeleccionadas);
-//  }, [refresh]);
+    const [loading, setLoading] = useState<boolean>(true);
 
     // useEffect(() => {
     //   // handleCheckboxChange(); // Llamar a la función cuando refresh cambie
@@ -42,19 +35,20 @@ function TablaCuotas({ refresh, setCuotasSeleccionadas, cuotasSeleccionadas }: T
     // }, [refresh]);
 
     useEffect(() => {
-        // Aca se deberia hacer el fetch de las cuotas del alumno
-        const getCuotas = async () => {
-        try {
-            const cuotas = await FetchGetCuotas();
-            setCuotas(cuotas);
-        } catch (error) {
-            console.error('Error:', error);
-        }
-        }
-        getCuotas();
-
-        // setCuotas(Cuotas)   
-    }, [refresh]);  
+      const getCuotas = async () => {
+          setLoading(true);
+          try {
+              const cuotas = await FetchGetCuotas();
+              setCuotas([]);
+              setCuotas(cuotas);
+          } catch (error) {
+              console.error('Error:', error);
+          } finally {
+              setLoading(false);
+          }
+      };
+      getCuotas();
+  }, [refresh]);
 
     const handleCheckboxChange = (cuota: Cuota) => {
       setCuotasSeleccionadas((prevSeleccionadas) => {
@@ -67,7 +61,6 @@ function TablaCuotas({ refresh, setCuotasSeleccionadas, cuotasSeleccionadas }: T
 
     };
 
-
     return (
             <Flex
                 alignItems="center"
@@ -81,7 +74,10 @@ function TablaCuotas({ refresh, setCuotasSeleccionadas, cuotasSeleccionadas }: T
                 borderWidth={1}
                 p={3}
             >
-            {cuotas.length > 0 ? (
+            {loading ? (
+                    <Skeleton height="400px" w="750px" />
+                ) : (
+             cuotas.length > 0 ? (
                 <Table variant="simple" width="100%">
                   <Thead>
                     <Tr mt={6}>
@@ -126,7 +122,9 @@ function TablaCuotas({ refresh, setCuotasSeleccionadas, cuotasSeleccionadas }: T
                 </Table>
             ) : (
               <Text>No hay cuotas para mostrar. Por favor, firmar el compromiso de pago.</Text>
+            )
             )}
+
         </Box>
         </Flex>
     );