progress and save responses mok

src/Components/Test/Cleaver/Question.jsx

@@ -3,22 +3,12 @@ import { Remove as RemoveIcon, Add as AddIcon } from '@mui/icons-material';
 import {
   Card,CardContent,Avatar,Checkbox,List,Tooltip,Fade,
   ListItem,ListItemButton,ListItemIcon,ListItemText,
-  Box,LinearProgress,
 } from '@mui/material'
 
 import { deepPurple } from '@mui/material/colors';
 import { useDispatch, useSelector } from 'react-redux';
 import { setResponse  } from '../../../Slices/cleaverSlice';
 
-function LinearProgressWithLabel(props) {
-  return (
-    <Box sx={{ display: 'flex', alignItems: 'center' }}>
-      <Box sx={{ width: '100%', mr: 0 }}>
-        <LinearProgress variant="determinate" {...props} />
-      </Box>
-    </Box>
-  );
-}
 
 function CheckboxexHeader(prop) {
   return (
@@ -147,7 +137,6 @@ export function Question({quiz, index, current, progress}) {
               />
           </div>
         </CardContent>
-        <LinearProgressWithLabel value={progress ? parseInt(progress) : 0 } />
       </Card>
     </Fade>
   );

src/Pages/Pruebas/Cleaver.jsx

@@ -1,11 +1,22 @@
 import React from 'react'
 import { Service } from '../../Utils/HTTP'
 import { Question } from '../../Components/Test/Cleaver/Question.jsx'
-import { Box,Button } from '@mui/material'
+import { Box,Button, LinearProgress  } from '@mui/material'
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom'
 import toast, { Toaster } from 'react-hot-toast';
 
+
+function LinearProgressWithLabel(props) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <Box sx={{ width: '100%', mr: 0 }}>
+        <LinearProgress variant="determinate" {...props} />
+      </Box>
+    </Box>
+  );
+}
+
 export function Cleaver() {
 
   let { id } = useParams();
@@ -36,6 +47,10 @@ export function Cleaver() {
       }).catch(console.log)
   }, [id,auth]);
 
+  const saveRespones = () => {
+    console.log("guardando las respuestas")
+  }
+
   const handleAddQuestion = () => {
     let currentAnswer  = totalRespondidas[totalRespondidas.length - 1];
     let current_resp = cleaver.responses[currentAnswer.id];
@@ -65,8 +80,14 @@ export function Cleaver() {
     CalculateProgress()
   }
 
+
+
   return (
-    <div  className="content-section question">
+    <div>
+    <div className="content-section question">
+      <div style={{width:'60%', marginBottom : 35}}>
+        <LinearProgressWithLabel value={progress ? parseInt(progress) : 0 } />
+      </div>
       <Box className="question_body">
         {totalRespondidas.map((item,i) => (
           <Question 
@@ -75,34 +96,52 @@ export function Cleaver() {
             quiz={item} 
             index={i} 
             current={current} 
-            progress={progress} 
             />)
         )}
       </Box>
 
-      <div className="question_btn">
-        <Button
-          className="nextquestion_btn"
-          sx={{ backgroundColor: 'var(--main)' }}
-          variant="contained"
-          disabled={totalRespondidas.length <= 1}
-          onClick={handleRemoveQuestion}
-        >
-          Anterior
-        </Button>
-        <Button
-          className="nextquestion_btn"
-          sx={{ backgroundColor: 'var(--main)' }}
-          variant="contained"
-          disabled={totalPreguntas.length <= 0}
-          onClick={handleAddQuestion}
-        >
-          Siguiente
-        </Button>
-      </div>
-      <Toaster
-        position="bottom-right"
-        />
+      {
+      totalPreguntas.length > 0 ?
+          (
+            <div className="question_btn">
+              <Button
+                className="nextquestion_btn"
+                sx={{ backgroundColor: 'var(--main)' }}
+                variant="contained"
+                disabled={totalRespondidas.length <= 1}
+                onClick={handleRemoveQuestion}
+              >
+                Anterior
+              </Button>
+              <Button
+                className="nextquestion_btn"
+                sx={{ backgroundColor: 'var(--main)' }}
+                variant="contained"
+                disabled={totalPreguntas.length <= 0}
+                onClick={handleAddQuestion}
+              >
+                Siguiente
+              </Button>
+            </div>
+          ) : (
+
+            <div className="question_btn">
+              <Button
+                className="nextquestion_btn"
+                sx={{ backgroundColor: 'var(--main)' }}
+                variant="contained"
+                onClick={saveRespones}
+              >
+                Guardar
+              </Button>
+            </div>
+          )
+      
+      }
+
+      <Toaster position="bottom-right" />
+
+    </div>
     </div>
   )