save responses in cleaver exam

src/Pages/Prueba.jsx

 export function Prueba() {
 
   let { id } = useParams();
-  // let token = useMemo(() => auth.getToken(), [auth])
   let auth = useSelector((state) => state.token.token)
   let profile = useSelector((state) => state.user)
   let dispatch = useDispatch();
   let [data, setData] = useState({});
 
-  console.log("PROFILE: ", profile)
-
   useState(() => {
     let rest = new Service(`/prueba/findid/${id}`)
     rest.get(auth.token)
     rest.postQuery(body, auth.token)
       .then(({ data: resp }) => {
         let { id: assingid } = resp
-        toast.success("Asignación creada: ", assingid)
+        toast.success("Asignación creada ", assingid)
         dispatch(setRole({ assingid }))
       })
       .catch(() => {

src/Pages/Pruebas/Cleaver.jsx

 import React from 'react'
 import { Service } from '../../Utils/HTTP'
 import { Question } from '../../Components/Test/Cleaver/Question.jsx'
-import { Box,Button, LinearProgress  } from '@mui/material'
+import { Box,Button, LinearProgress, Backdrop, CircularProgress, } from '@mui/material'
 import { useSelector } from 'react-redux';
-import { useParams } from 'react-router-dom'
+import { useParams, useNavigate } from 'react-router-dom'
 import toast, { Toaster } from 'react-hot-toast';
 
 
   let { id } = useParams();
   const auth = useSelector((state) => state.token.token);
   const cleaver = useSelector((state) => state.cleaver);
+  const role = useSelector((state) => state.user.role);
+  let navigate = useNavigate()
 
   const [totalRespondidas, setRespondidas] = React.useState([]);
   const [totalPreguntas, setPreguntas] = React.useState([]);
   const [current, setCurrent] = React.useState(0);
   const [progress, setProgress] = React.useState(0);
+  const [open, setOpen] = React.useState(false);
 
   const BadQuestion = () => toast.error("Escoge una respuesta en cada columna") 
   //toast("Escoge una respuesta en cada columna",{ icon : '⚠️' });
   }, [id,auth]);
 
   const saveRespones = () => {
-    console.log("guardando las respuestas")
+
+    setOpen(true)
+
+    let { responses: userResp } = cleaver;
+    let mapResponses = totalRespondidas.map( resp => {
+      let { respuestas : posibles, id } = resp;
+      console.log(resp.id,posibles)
+      let opciones_multiples = posibles.map( quiz => {
+        let body = {
+          "respuestaid": resp.id,
+          "asignacionid":role.assingid,
+          "anotacion1": parseInt( userResp[id].A ) === parseInt(quiz.id) ? 1: 0, // + = A
+          "anotacion2":parseInt( userResp[id].B ) === parseInt(quiz.id) ? 1: 0,  // - = B
+          "anotacion3":0
+        }
+        return body;
+      })
+      return opciones_multiples;
+    })
+
+    let body = []
+    mapResponses.forEach( arr =>  arr.forEach(r => body.push(r)));
+
+    let rest = new Service('/prueba/addrespuestas/opcionmultiple')
+    rest.postQuery(body, auth.token)
+      .then(() => {
+        // console.log("DATA: ", data)
+        toast.success("Tu examen ha sido guardado")
+        setOpen(false)
+        setTimeout(() => navigate("/user/home"), 1000)
+
+      })
+      .catch(e => {
+        toast.error("Error al guardar el examen")
+        setOpen(false)
+      })
+
   }
 
   const handleAddQuestion = () => {
           )
       
       }
-
       <Toaster position="bottom-right" />
-
+      <Backdrop
+        sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={open}
+        // onClick={()}
+      >
+        <CircularProgress color="inherit" />
+      </Backdrop>
     </div>
     </div>
   )