Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3396 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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