Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react'
import { useHistory, useParams } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { Container, Grid } from '@mui/material'
import parse from 'html-react-parser'

import { axios } from '@app/utils'
import useFetch from '@app/hooks/useFetch'

import Widget from '@app/components/UI/Widget'
import AuthNavbar from '@app/components/UI/auth-navbar'

function ShorterPostPage() {
  const { id } = useParams()
  const history = useHistory()
  const { data } = useFetch(`/shorter/${id}`, null)
  const [post, setPost] = useState({})
  const { isAuth } = useSelector((state) => state.auth)

  const getPost = async (url) => {
    return await axios.get(url).then((res) => res.data.data)
  }

  useEffect(() => {
    if (!data) return
    if (data?.redirect) {
      const redirectUrl = data?.url.split('.com')[1]
      history.replace(redirectUrl)
      return
    }

    getPost(data?.url)
      .then((post) => setPost(post))
      .catch((error) => console.log(error))
  }, [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 ?? '')}</Widget.Body>
            </Widget>
          </Grid>
        </Grid>
      </Container>
    </>
  )
}

export default ShorterPostPage