Rev 3396 | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { Box, Grid } from '@mui/material';
import parse from 'html-react-parser';
import { axios } from '@app/utils';
import { addNotification } from '@app/redux/notification/notification.actions';
import { useFetch } from '@hooks';
import Widget from '@app/components/UI/Widget';
import AuthNavbar from '@app/components/UI/auth-navbar';
import Button from '@app/components/UI/buttons/Buttons';
function ShorterPostPage() {
const { id } = useParams();
const navigate = useNavigate();
const [post, setPost] = useState({});
const dispatch = useDispatch();
const { is_logged_in } = useSelector((state) => state.auth);
const { data } = useFetch(`/shorter/${id}`, null);
const getPost = async (url) => {
return await axios.get(url).then((res) => res.data.data);
};
const handleClick = () => navigate('/signin');
useEffect(() => {
if (!data) return;
if (data?.redirect) {
const redirectUrl = data?.url.split('.com')[1];
navigate(redirectUrl);
return;
}
getPost(data?.url)
.then((post) => setPost(post))
.catch((error) => {
console.log(error);
dispatch(
addNotification({
style: 'danger',
msg: 'Ha ocurrido un error al obtener la información del post. Por favor, intentelo nuevamente.'
})
);
});
}, [data]);
return (
<>
{!is_logged_in ? <AuthNavbar /> : null}
<Grid
container
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
<Grid size={{ xs: 12, md: 8 }}>
<Widget>
<Widget.Media alt={post.title} src={post.image} height={450} />
<Widget.Body>
{parse(post.description ?? '')}
<Box
sx={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
mt: 2
}}
>
<p>Inicie sesion para visualizar los detalles de la publicación.</p>
<Button onClick={handleClick} color='primary'>
Iniciar Sesión
</Button>
</Box>
</Widget.Body>
</Widget>
</Grid>
</Grid>
</>
);
}
export default ShorterPostPage;