DescargaRecetas

This commit is contained in:
OmarVX 2024-05-08 08:01:24 -06:00
parent 3240756dde
commit 8f5d89ace5
2 changed files with 88 additions and 0 deletions

View File

@ -0,0 +1,26 @@
.descarga-recetas {
padding: 2rem;
text-align: center;
}
.titulo {
margin-bottom: 2rem;
}
.contenedor-recetas {
display: flex;
flex-direction: column;
align-items: center;
}
.receta-item {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 600px;
margin-bottom: 1rem;
padding: 1rem;
background-color: #f5f5f5;
border-radius: 4px;
}

View File

@ -0,0 +1,62 @@
import { useState, useEffect } from 'react';
import axios from 'axios';
import { Button, Box, Typography, List, ListItem, ListItemText } from '@mui/material';
import './DescargaRecetas.css';
function DescargaRecetas() {
const [recetas, setRecetas] = useState([]);
const [cargando, setCargando] = useState(false);
useEffect(() => {
const fetchRecetas = async () => {
setCargando(true);
try {
const respuesta = await axios.get('/api/recetas');
setRecetas(respuesta.data);
} catch (error) {
console.error('Error al obtener las recetas:', error);
}
setCargando(false);
};
fetchRecetas().then(() =>{});
}, []);
const descargarReceta = (recetaId) => {
console.log('Descargando receta:', recetaId);
};
return (
<div className="descarga-recetas">
<Typography variant="h4" component="h1" className="titulo">
Descargar Recetas Médicas
</Typography>
<Box className="contenedor-recetas">
{cargando ? (
<Typography variant="body1">Cargando recetas...</Typography>
) : (
<List>
{recetas.map((receta) => (
<ListItem key={receta.id} className="receta-item">
<ListItemText
primary={receta.nombre}
secondary={`fetch: ${receta.fecha}`}
/>
<Button
variant="contained"
color="primary"
onClick={() => descargarReceta(receta.id)}
>
Descargar
</Button>
</ListItem>
))}
</List>
)}
</Box>
</div>
);
}
export default DescargaRecetas;