using redux insted of use State

src/Components/HomeUser/TestCard.jsx

@@ -5,7 +5,6 @@ import {
 } from '@mui/material'
 
 import QA from '../../Images/puesto.jpg'
-import { Link } from 'react-router-dom'
 
 export function TestCard(props) {
 
@@ -30,11 +29,9 @@ export function TestCard(props) {
                 </CardContent>
             </CardActionArea>
             <CardActions>
-              <Link to={`/user/prueba/${test.id}`}>
                 <Button size="small" color="primary">
                       Realizar
-                  </Button>
-              </Link>
+                </Button>
             </CardActions>
         </Card>
     )

src/Components/Test/Cleaver/Question.jsx

@@ -8,6 +8,8 @@ import {
 } from '@mui/material'
 
 import { deepPurple } from '@mui/material/colors';
+import { useDispatch, useSelector } from 'react-redux';
+import { setResponse  } from '../../../Slices/cleaverSlice';
 
 function LinearProgressWithLabel(props) {
   return (
@@ -40,10 +42,13 @@ function CheckboxexHeader(prop) {
 
 function CheckboxesGroup(props) {
 
-  let { quiz, save, responses : resp, id:index} = props;
+  let { quiz, id : index } = props;
+
+  let resp = useSelector((state) => state.cleaver.responses)
 
   const [checkA, setCheckA] = React.useState(resp[index]? resp[index].A : 0);
   const [checkB, setCheckB] = React.useState(resp[index]? resp[index].B : 0);
+  const dispatch = useDispatch()
 
   const changeA = (event) => {
     let { id, checked } = event.target
@@ -55,9 +60,8 @@ function CheckboxesGroup(props) {
           B: resp[index] ? resp[index].B : 0
         }
       }
-      let final = Object.assign(resp,temp);
-      // console.log('Change A:',final)
-      save(final)
+      // let final = Object.assign(resp,temp);
+      dispatch(setResponse(temp))
     }
   };
   
@@ -71,9 +75,8 @@ function CheckboxesGroup(props) {
           A: resp[index] ? resp[index].A : 0
         }
       }
-      let final = Object.assign(resp,temp)
-      // console.log('Change B: ', final);
-      save(final)
+      // let final = Object.assign(resp,temp)
+      dispatch(setResponse(temp))
     }
   };
 
@@ -131,7 +134,7 @@ function CheckboxesGroup(props) {
   );
 }
 
-export function Question({quiz, index, current, save, responses, progress}) {
+export function Question({quiz, index, current, progress}) {
   let { instrucciondepregunta, respuestas,id } = quiz
   let checked = index === current;
 
@@ -146,12 +149,10 @@ export function Question({quiz, index, current, save, responses, progress}) {
             <CheckboxesGroup 
               id={id}
               quiz={respuestas} 
-              save={save}
-              responses={responses}
               />
           </div>
         </CardContent>
-        <LinearProgressWithLabel value={progress} />
+        <LinearProgressWithLabel value={progress ? parseInt(progress) : 0 } />
       </Card>
     </Fade>
   );

src/Pages/HomeUser.jsx

@@ -49,8 +49,8 @@ export function HomeUser(){
               {
               tests.map( test => {
                 return (
-                <Link to={`/user/prueba/${test.id}`}>
-                  <TestCard key={test.id} test={test} />
+                <Link key={test.id} to={`/user/prueba/${test.id}`}>
+                  <TestCard test={test} />
                 </Link>
                 )
               })

src/Pages/Prueba.jsx

@@ -57,7 +57,7 @@ export function Prueba() {
   }
 
   if(profile.role.assingid){
-    return <Cleaver/>
+    return <Cleaver />
   }
 
   return (

src/Pages/Pruebas/Cleaver.jsx

@@ -2,20 +2,23 @@ import React from 'react'
 import { Service } from '../../Utils/HTTP'
 import { Question } from '../../Components/Test/Cleaver/Question.jsx'
 import { Box,Button } from '@mui/material'
-import toast, { Toaster } from 'react-hot-toast';
 import { useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom'
+import toast, { Toaster } from 'react-hot-toast';
 
 export function Cleaver() {
 
-  let token = useSelector((state) => state.token.token);
+  let { id } = useParams();
+  const auth = useSelector((state) => state.token.token);
+  const cleaver = useSelector((state) => state.cleaver);
 
   const [totalRespondidas, setRespondidas] = React.useState([]);
   const [totalPreguntas, setPreguntas] = React.useState([]);
   const [current, setCurrent] = React.useState(0);
-  const [responses, setRespones] = React.useState({});
   const [progress, setProgress] = React.useState(0);
 
-  const BadQuestion = () => toast("Escoge una respuesta en cada columna",{ icon : '⚠️' });
+  const BadQuestion = () => toast.error("Escoge una respuesta en cada columna") 
+  //toast("Escoge una respuesta en cada columna",{ icon : '⚠️' });
   const CalculateProgress = () => {
     let total_preguntas = totalPreguntas.length + totalRespondidas.length
     let x = totalRespondidas.length *100 / (total_preguntas)
@@ -23,21 +26,19 @@ export function Cleaver() {
   }
 
   React.useEffect(() => {
-    // TODO:
-    // agregar el id correcto apartir del path
-    let rest = new Service(`/prueba/findid/1`)
-    rest.get(token.token)
+    let rest = new Service(`/prueba/findid/${id}`)
+    rest.get(auth.token)
       .then(({ data }) => {
         console.log(data.questions)
         setPreguntas(data.questions)
         setRespondidas(data.questions.slice(0,1))
         setCurrent(0)
       }).catch(console.log)
-  }, [token]);
+  }, [id,auth]);
 
   const handleAddQuestion = () => {
     let currentAnswer  = totalRespondidas[totalRespondidas.length - 1];
-    let current_resp = responses[currentAnswer.id];
+    let current_resp = cleaver.responses[currentAnswer.id];
 
     if(!current_resp){
       return BadQuestion();
@@ -69,8 +70,6 @@ export function Cleaver() {
       <Box className="question_body">
         {totalRespondidas.map((item,i) => (
           <Question 
-            save={setRespones}
-            responses={responses}
             key={item.id} 
             id={item.id} 
             quiz={item} 

src/Reducers/index.js

@@ -1,10 +1,12 @@
 import { combineReducers } from '@reduxjs/toolkit'
 import tokenReducer from '../Slices/tokenSlice.js';
 import userReducer from '../Slices/userSlice.js';
+import cleaverSlice from '../Slices/cleaverSlice.js';
 
 const rootReducer = combineReducers({
   token : tokenReducer,
-  user: userReducer
+  user: userReducer,
+  cleaver : cleaverSlice
 });
 
 export default rootReducer;

src/Slices/cleaverSlice.js

@@ -0,0 +1,17 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = { responses : {} }
+
+export const cleaverSlice = createSlice({
+  name : 'cleaver',
+  reducers : {
+    setResponse : (state, action) => {
+      // console.log(action.payload)
+      state.responses = { ...state.responses, ...action.payload  }
+    }
+  },
+  initialState
+})
+
+export const { setResponse } = cleaverSlice.actions;
+export default cleaverSlice.reducer;