Proyectos de Subversion LeadersLinked - SPA

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;