DescargaRecetas

healthmanager/src/DescargaRecetas.css

@@ -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;
+}

healthmanager/src/DescargaRecetas.jsx

@@ -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;