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, Container, 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 { isAuth } = 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 (

    <>

      {!isAuth ? <AuthNavbar /> : null}

      <Container>

        <Grid

          container

          sx={{

            display: 'flex',

            justifyContent: 'center',

            alignItems: 'center'

          }}

        >

          <Grid item 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} variant='primary'>

                    Iniciar Sesión

                  </Button>

                </Box>

              </Widget.Body>

            </Widget>

          </Grid>

        </Grid>

      </Container>

    </>

  )

}

export default ShorterPostPage