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;