botones principal
This commit is contained in:
parent
8f5d89ace5
commit
9d98ec5442
|
|
@ -29,7 +29,6 @@ body{
|
|||
font-family:Georgia, 'Times New Roman', Times, serif;
|
||||
}
|
||||
#boxCerrar{
|
||||
padding-top: 20px;
|
||||
margin-left: auto;
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
|
@ -41,19 +40,15 @@ body{
|
|||
#headerForm {
|
||||
font-size: small;
|
||||
}
|
||||
#divBotones{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
#botonMiPerfil,#botonMisPublicaciones,#botonNuevaPublicacion{
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: 20px;
|
||||
}
|
||||
#divMenu {
|
||||
font-family:Arial, Helvetica, sans-serif;
|
||||
margin-left: auto;
|
||||
margin-right: 150px;
|
||||
padding: 10px;
|
||||
}
|
||||
#cerrarSesion{
|
||||
align-items: center;
|
||||
}
|
||||
#divBotones{
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
|
@ -1,24 +1,36 @@
|
|||
/* eslint-disable no-unused-vars */
|
||||
import { Button, Box, TextField, DialogContentText, Divider } from "@mui/material"
|
||||
import axios from "axios"
|
||||
import {useEffect,useState } from "react"
|
||||
import './Principal.css'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
Button,
|
||||
Box,
|
||||
TextField,
|
||||
DialogContentText,
|
||||
Divider,
|
||||
} from "@mui/material";
|
||||
import { styled } from "@mui/material/styles";
|
||||
import ButtonBase from "@mui/material/ButtonBase";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import axios from "axios";
|
||||
import { useEffect, useState } from "react";
|
||||
import "./Principal.css";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
function Principal(props) {
|
||||
const navigate = useNavigate();
|
||||
const [publicacionesData, setPublicacionesData] = useState([]);
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const [Cargando, setCargando] = useState (false)
|
||||
const correoUsuario = window.localStorage.getItem('Usuario');
|
||||
const [Cargando, setCargando] = useState(false);
|
||||
const correoUsuario = window.localStorage.getItem("Usuario");
|
||||
|
||||
const datosUsuario = async () => {
|
||||
try {
|
||||
const respuesta=await axios.get("https://back-endproyectofinal8-production-a397.up.railway.app/datosUsuario",{params:{correo: correoUsuario}});
|
||||
const respuesta = await axios.get(
|
||||
"https://back-endproyectofinal8-production-a397.up.railway.app/datosUsuario",
|
||||
{ params: { correo: correoUsuario } }
|
||||
);
|
||||
return respuesta.data;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const UsuarioData = async () => {
|
||||
try {
|
||||
|
|
@ -31,30 +43,32 @@ function Principal(props) {
|
|||
console.log("holaa");
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
};
|
||||
UsuarioData();
|
||||
|
||||
const cerrarSesion = () => {
|
||||
navigate('/');
|
||||
}
|
||||
navigate("/");
|
||||
};
|
||||
|
||||
const miPerfil = () => {
|
||||
navigate('/MiPerfil');
|
||||
}
|
||||
navigate("/MiPerfil");
|
||||
};
|
||||
|
||||
const publicaciones = () => {
|
||||
navigate('/Publicaciones')
|
||||
}
|
||||
navigate("/Publicaciones");
|
||||
};
|
||||
|
||||
const crearPublicacion = () => {
|
||||
navigate('/CrearPublicacion');
|
||||
}
|
||||
navigate("/CrearPublicacion");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
// eslint-disable-next-line no-useless-catch
|
||||
try {
|
||||
const res = await axios.get("https://back-endproyectofinal8-production-a397.up.railway.app/Publicaciones");
|
||||
const res = await axios.get(
|
||||
"https://back-endproyectofinal8-production-a397.up.railway.app/Publicaciones"
|
||||
);
|
||||
console.log("Publicaciones data: ", res.data);
|
||||
setPublicacionesData(res.data);
|
||||
} catch (error) {
|
||||
|
|
@ -64,30 +78,153 @@ function Principal(props) {
|
|||
fetchData();
|
||||
}, []);
|
||||
|
||||
const usuarioSesion = window.localStorage.getItem('ID');
|
||||
const usuarioSesion = window.localStorage.getItem("ID");
|
||||
|
||||
const images = [
|
||||
{
|
||||
url: "https://th.bing.com/th/id/R.c691ed37c9ce3040c3ebd2892e88870c?rik=QUBcFflN%2b9oqPQ&pid=ImgRaw&r=0",
|
||||
title: "Mis recetas",
|
||||
width: "33%",
|
||||
},
|
||||
{
|
||||
url: "https://th.bing.com/th/id/R.c691ed37c9ce3040c3ebd2892e88870c?rik=QUBcFflN%2b9oqPQ&pid=ImgRaw&r=0",
|
||||
title: "Mi perfil",
|
||||
width: "33%",
|
||||
},
|
||||
{
|
||||
url: "https://th.bing.com/th/id/R.c691ed37c9ce3040c3ebd2892e88870c?rik=QUBcFflN%2b9oqPQ&pid=ImgRaw&r=0",
|
||||
title: "Cerrar Sesion",
|
||||
width: "33%",
|
||||
},
|
||||
];
|
||||
|
||||
const ImageButton = styled(ButtonBase)(({ theme }) => ({
|
||||
position: "relative",
|
||||
height: 510,
|
||||
[theme.breakpoints.down("sm")]: {
|
||||
width: "100% !important", // Overrides inline-style
|
||||
height: 100,
|
||||
},
|
||||
"&:hover, &.Mui-focusVisible": {
|
||||
zIndex: 1,
|
||||
"& .MuiImageBackdrop-root": {
|
||||
opacity: 0.15,
|
||||
},
|
||||
"& .MuiImageMarked-root": {
|
||||
opacity: 0,
|
||||
},
|
||||
"& .MuiTypography-root": {
|
||||
border: "4px solid currentColor",
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
const ImageSrc = styled("span")({
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center 40%",
|
||||
});
|
||||
|
||||
const Image = styled("span")(({ theme }) => ({
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
color: theme.palette.common.white,
|
||||
}));
|
||||
|
||||
const ImageBackdrop = styled("span")(({ theme }) => ({
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: theme.palette.common.black,
|
||||
opacity: 0.4,
|
||||
transition: theme.transitions.create("opacity"),
|
||||
}));
|
||||
|
||||
const ImageMarked = styled("span")(({ theme }) => ({
|
||||
height: 3,
|
||||
width: 18,
|
||||
backgroundColor: theme.palette.common.white,
|
||||
position: "absolute",
|
||||
bottom: -2,
|
||||
left: "calc(50% - 9px)",
|
||||
transition: theme.transitions.create("opacity"),
|
||||
}));
|
||||
|
||||
//<Button id="botonMiPerfil" variant="contained" type="button" color="primary" disabled={Cargando} onClick={miPerfil}>Mi perfil</Button>
|
||||
//<Button id="botonMisPublicaciones" variant="contained" type="submit" color="primary" disabled={Cargando} onClick={publicaciones}>Mis recetas</Button>
|
||||
//<h1 id="headerPublicaciones">Menu Principal</h1>
|
||||
return (
|
||||
|
||||
<>
|
||||
<div>
|
||||
<h1 id="headerFacultad">Health Manager</h1>
|
||||
<h1 id="headerFacultad">Health Manager - Menu Principal</h1>
|
||||
<Divider />
|
||||
<div id="divPublicaciones">
|
||||
<h1 id="headerPublicaciones">Menu Principal</h1>
|
||||
<h1 id="bienvenidoUsuario">¡Hola {usuarioSesion}! </h1>
|
||||
<Box id="boxCerrar" m={0}>
|
||||
<Button id="cerrarSesion" variant="contained" type="submit" color="warning" onClick={cerrarSesion}>Cerrar sesion</Button>
|
||||
<Button id="cerrarSesion"
|
||||
variant="contained"
|
||||
type="submit"
|
||||
color="warning"
|
||||
onClick={cerrarSesion}>
|
||||
Cerrar sesion
|
||||
</Button>
|
||||
</Box>
|
||||
</div>
|
||||
<Divider />
|
||||
<div id="divBotones">
|
||||
<Button id="botonMiPerfil" variant="contained" type="button" color="primary" disabled={Cargando} onClick={miPerfil}>Mi perfil</Button>
|
||||
<Button id="botonMisPublicaciones" variant="contained" type="submit" color="primary" disabled={Cargando} onClick={publicaciones}>Mis recetas</Button>
|
||||
<Button id="botonNuevaPublicacion" variant="contained" type="submit" color="primary" disabled={Cargando} onClick={crearPublicacion}>Otros</Button>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
minWidth: 300,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{images.map((image) => (
|
||||
<ImageButton
|
||||
focusRipple
|
||||
key={image.title}
|
||||
style={{
|
||||
width: image.width,
|
||||
}}
|
||||
>
|
||||
<ImageSrc style={{ backgroundImage: `url(${image.url})` }} />
|
||||
<ImageBackdrop className="MuiImageBackdrop-root" />
|
||||
<Image>
|
||||
<Typography
|
||||
component="span"
|
||||
variant="subtitle1"
|
||||
color="inherit"
|
||||
sx={{
|
||||
position: "relative",
|
||||
p: 4,
|
||||
pt: 2,
|
||||
pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,
|
||||
}}
|
||||
>
|
||||
{image.title}
|
||||
<ImageMarked className="MuiImageMarked-root" />
|
||||
</Typography>
|
||||
</Image>
|
||||
</ImageButton>
|
||||
))}
|
||||
</Box>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Principal
|
||||
export default Principal;
|
||||
|
|
|
|||
Loading…
Reference in New Issue