Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2614 | Rev 2806 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
2388 stevensc 1
import React, { useEffect, useState } from 'react'
2614 stevensc 2
import { useNavigate, useParams } from 'react-router-dom'
2403 stevensc 3
import { useDispatch, useSelector } from 'react-redux'
2404 stevensc 4
import { Box, Container, Grid } from '@mui/material'
2368 stevensc 5
import parse from 'html-react-parser'
2362 stevensc 6
 
2390 stevensc 7
import { axios } from '@app/utils'
2403 stevensc 8
import { addNotification } from '@app/redux/notification/notification.actions'
2780 stevensc 9
import { useFetch } from '@hooks'
2385 stevensc 10
 
2362 stevensc 11
import Widget from '@app/components/UI/Widget'
2369 stevensc 12
import AuthNavbar from '@app/components/UI/auth-navbar'
2403 stevensc 13
import Button from '@app/components/UI/buttons/Buttons'
2362 stevensc 14
 
15
function ShorterPostPage() {
2385 stevensc 16
  const { id } = useParams()
2614 stevensc 17
  const navigate = useNavigate()
2403 stevensc 18
 
2388 stevensc 19
  const [post, setPost] = useState({})
2403 stevensc 20
  const dispatch = useDispatch()
2388 stevensc 21
  const { isAuth } = useSelector((state) => state.auth)
2368 stevensc 22
 
2403 stevensc 23
  const { data } = useFetch(`/shorter/${id}`, null)
24
 
2388 stevensc 25
  const getPost = async (url) => {
2390 stevensc 26
    return await axios.get(url).then((res) => res.data.data)
2388 stevensc 27
  }
2385 stevensc 28
 
2614 stevensc 29
  const handleClick = () => navigate('/signin')
2403 stevensc 30
 
2388 stevensc 31
  useEffect(() => {
2390 stevensc 32
    if (!data) return
2402 stevensc 33
    if (data?.redirect) {
34
      const redirectUrl = data?.url.split('.com')[1]
2614 stevensc 35
      navigate(redirectUrl)
2402 stevensc 36
      return
37
    }
2388 stevensc 38
 
2389 stevensc 39
    getPost(data?.url)
2388 stevensc 40
      .then((post) => setPost(post))
2403 stevensc 41
      .catch((error) => {
42
        console.log(error)
43
        dispatch(
44
          addNotification({
45
            style: 'danger',
46
            msg: 'Ha ocurrido un error al obtener la información del post. Por favor, intentelo nuevamente.'
47
          })
48
        )
49
      })
2388 stevensc 50
  }, [data])
51
 
2362 stevensc 52
  return (
2369 stevensc 53
    <>
54
      {!isAuth ? <AuthNavbar /> : null}
55
      <Container>
56
        <Grid
57
          container
58
          sx={{
59
            display: 'flex',
60
            justifyContent: 'center',
61
            alignItems: 'center'
62
          }}
63
        >
64
          <Grid item xs={12} md={8}>
65
            <Widget>
2393 stevensc 66
              <Widget.Media alt={post.title} src={post.image} height={450} />
2362 stevensc 67
 
2403 stevensc 68
              <Widget.Body>
69
                {parse(post.description ?? '')}
2404 stevensc 70
 
71
                <Box
72
                  sx={{
73
                    display: 'flex',
2405 stevensc 74
                    flexDirection: 'column',
2404 stevensc 75
                    justifyContent: 'center',
76
                    alignItems: 'center',
77
                    mt: 2
78
                  }}
79
                >
80
                  <p>
81
                    Inicie sesion para visualizar los detalles de la
82
                    publicación.
83
                  </p>
84
                  <Button onClick={handleClick} variant='primary'>
2405 stevensc 85
                    Iniciar Sesión
2404 stevensc 86
                  </Button>
87
                </Box>
2403 stevensc 88
              </Widget.Body>
2369 stevensc 89
            </Widget>
90
          </Grid>
2362 stevensc 91
        </Grid>
2369 stevensc 92
      </Container>
93
    </>
2362 stevensc 94
  )
95
}
96
 
97
export default ShorterPostPage