Funcional

reviews/src/components/File.js

@@ -1,17 +1,18 @@
 import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
-import '../styles/File.css';
+import { Link, useNavigate } from 'react-router-dom';
 import axios from 'axios';
+import '../styles/File.css';
 
 function File() {
-    // Estado para almacenar el archivo seleccionado
     const [selectedFile, setSelectedFile] = useState(null);
-    const [isClicked, setIsClicked] = useState(false);
     const [isUploaded, setIsUploaded] = useState(false);
-    const [prec, setPrec] = useState(0);
-    const [recall, setRecall] = useState(0);
-    const [f1, setF1] = useState(0);
-
+    const [isClicked, setIsClicked] = useState(false);
+    const [precision, setPrecision] = useState(null); // Initialize as null
+    const [recall, setRecall] = useState(null); // Initialize as null
+    const [f1, setF1] = useState(null); // Initialize as null
+    const [predictionReady, setPredictionReady] = useState(false); // New state variable
+    const navigate = useNavigate();
+
     const handleFileChange = (event) => {
       setSelectedFile(event.target.files[0]);
       setIsUploaded(true);
@@ -20,26 +21,39 @@ function File() {
     const handleSubmit = async (event) => {
       event.preventDefault();
       setIsClicked(true);
-      console.log(selectedFile)
+
       const formData = new FormData();
       formData.append('file', selectedFile);
 
       try {
-        const { data } = await axios.post("http://localhost:8000/upload", formData, {
+        const response = await axios.post("http://localhost:8000/upload", formData, {
           headers: {
-            Accept: "multipart/form-data",
-            "Content-Type": "multipart/form-data",
-          },
+            'Content-Type': 'multipart/form-data'
+          }
         });
-        //console.log(data) 
-        setPrec((Number(data.ps)*100).toFixed(2));
-        setRecall((Number(data.rs)*100).toFixed(2));
-        setF1((Number(data.f1)*100).toFixed(2));
+
+        const ps = (Number(response.data.ps) * 100).toFixed(2);
+        const rs = (Number(response.data.rs) * 100).toFixed(2);
+        const f1 = (Number(response.data.f1) * 100).toFixed(2);
+
+        setPrecision(ps);
+        setRecall(rs);
+        setF1(f1);
+        setPredictionReady(true);
+
+        console.log('Precision:', ps, '%');
+        console.log('Recall:', rs, '%');
+        console.log('F1:', f1, '%');
+
+
       } catch (error) {
-        // Handle any errors that might occur during the request
         console.error('Error occurred:', error);
       }
     };
+
+    const handleClick = () => {
+      navigate('/prediction', { state: { precision, recall, f1}});
+    };
 
     return (
         <div className="Pagina">
@@ -48,14 +62,14 @@ function File() {
 
           <form className="formulario" onSubmit={handleSubmit}>
               <input type="file" id="file" name="file" accept=".csv" onChange={handleFileChange}></input>
-              <button disabled={!isUploaded} type='submit'>Agegar</button>
+              <button disabled={!isUploaded} type='submit'>Agregar</button>
           </form>
-          <Link to={'/prediction'} state = {{precision:prec,recall:recall,f1:f1}}> <button disabled={!isClicked} className='prediccion'>Clasificar</button></Link>
+          {/* Conditionally render the Link only when predictionReady is true */}
+          {predictionReady && <button onClick={handleClick} className='prediccion'>Clasificar</button>}         
           <br></br>
           <p className='advertencia'>Es necesario subir un archivo antes de proceder</p>
         </div>
     );
-
 }
 
-export default File;
+export default File;

reviews/src/components/Prediction.js

@@ -1,24 +1,35 @@
+import React from 'react';
 import { Card } from "flowbite-react";
-import "../styles/Prediction.css"
 import { useLocation } from "react-router-dom";
+import '../styles/Prediction.css';
 
 function Prediction(){
     const location = useLocation();
-    const { precision, recall, f1 } = location.state;
+
+    console.log(location);
+
+    const state = location.state;
+
+    console.log(state);
+
+    const ps = state.precision;
+    const re = state.recall;
+    const f1score = state.f1
+
     return (
         <div className='PaginaPrediction'>
             <h1 id="unTitulo">Resultados del Modelo</h1>
             <p>El archivo fue procesado exitósamente</p>
             <Card className='carta'>
                 <h2 className="titulo">Resultados</h2>
                 <p className="resultados">Estos son las métricas de desempeño asociadas a la predicción realizada por el modelo:</p>
-                <p className="metricas">Precision: {precision}%</p>
-                <p className="metricas">Recall: {recall}%</p>
-                <p className="metricas">F1: {f1}%</p>
+                <p className="metricas">Precision: {ps}%</p>
+                <p className="metricas">Recall: {re}%</p>
+                <p className="metricas">F1: {f1score}%</p>
             </Card>
             <a href="http://localhost:8000/download"><button className='descarga'>Descargar archivo</button></a>
         </div>
     );
 }
 
-export default Prediction;
+export default Prediction;