Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4821 | Rev 5119 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 4821 Rev 5118
Línea 18... Línea 18...
18 
 
 18 
 
19 
// Styles
 19 
// Styles
20 
import '../templates/linkedin/Feed/Feed.scss'
 20 
import '../templates/linkedin/Feed/Feed.scss'
Línea 21... Línea 21...
21 
import FeedCommentSection from '../components/feed/feed-comment/FeedCommentSection'
 21 
import FeedCommentSection from '../components/feed/feed-comment/FeedCommentSection'
- 
 
 22 
 
22 
 
 23 
export default function PostView ({
23 
export default function PostView({ post = {
 24 
  post = {
24 
    url: "",
 25 
    url: '',
25 
    file: "imagengrupo.png",
 26 
    file: 'imagengrupo.png',
26 
    comments_url: "/post/344ccca7-6260-4564-93cc-85ed7682bec2/comments",
 27 
    comments_url: '/post/344ccca7-6260-4564-93cc-85ed7682bec2/comments',
27 
    comments_add_url: "/post/344ccca7-6260-4564-93cc-85ed7682bec2/comments/add"
 28 
    comments_add_url: '/post/344ccca7-6260-4564-93cc-85ed7682bec2/comments/add'
28 
}
 29 
  }
29 
}) {
 30 
}) {
30 
    const [isLiked, setIsLiked] = useState(post.is_liked)
 31 
  const [isLiked, setIsLiked] = useState(post.is_liked)
31 
    const [externalShare, setExternalShare] = useState(post.total_share_external)
 32 
  const [externalShare, setExternalShare] = useState(post.total_share_external)
32 
    const [comments, setComments] = useState([])
 33 
  const [comments, setComments] = useState([])
33 
    const [isReadMoreActive, setIsReadMoreActive] = useState(false)
 34 
  const [isReadMoreActive, setIsReadMoreActive] = useState(false)
34 
    const [showComments, setShowComments] = useState(false)
 35 
  const [showComments, setShowComments] = useState(false)
35 
 
 36 
 
36 
    const readMoreHandler = () => setIsReadMoreActive(!isReadMoreActive)
 37 
  const readMoreHandler = () => setIsReadMoreActive(!isReadMoreActive)
37 
 
 38 
 
38 
    const displayCommentSection = () => {
 39 
  const displayCommentSection = () => {
39 
        setShowComments(!showComments)
 40 
    setShowComments(!showComments)
40 
    }
 41 
  }
41 
 
 42 
 
42 
    const getComments = async () => {
 43 
  const getComments = async () => {
43 
        await axios.get(post.comments_url)
 44 
    await axios.get(post.comments_url)
44 
            .then(({ data: response }) => {
 45 
      .then(({ data: response }) => {
45 
                if (!response.success) {
 - 
 
46 
                    addNotification({ style: 'danger', msg: response.data })
 - 
 
47 
                    return
 - 
 
48 
                }
 - 
 
49 
 
 46 
        if (!response.success) {
50 
                setComments(response.data)
 - 
 
51 
            })
 - 
 
52 
    }
 - 
 
53 
 
 - 
 
54 
    const ExternalShareButton = withExternalShare(InputOption, post.share_external_url, {
 - 
 
55 
        Icon: SendOutlinedIcon,
 - 
 
56 
        color: 'gray',
 - 
 
57 
        title: 'Enviar',
 - 
 
58 
        shareUrl: post.share_increment_external_counter_url,
 - 
 
59 
        setValue: handleExternalShare
 - 
 
60 
    })
 - 
 
61 
 
 - 
 
62 
    const handleExternalShare = (value) => setExternalShare(value)
 - 
 
63 
 
 - 
 
64 
    const handleLike = (url) => {
 - 
 
65 
        axios.post(url)
 - 
 
66 
            .then(({ data: response }) => {
 - 
 
67 
                if (!response.success) {
 - 
 
68 
                    addNotification({ style: "danger", msg: response.data })
 - 
 
69 
                    return
 - 
 
70 
                }
 47 
          addNotification({ style: 'danger', msg: response.data })
71 
                setIsLiked(!isLiked)
 - 
 
Línea -... Línea 48...
- 
 
 48 
          return
- 
 
 49 
        }
- 
 
 50 
 
- 
 
 51 
        setComments(response.data)
- 
 
 52 
      })
- 
 
 53 
  }
- 
 
 54 
 
- 
 
 55 
  const handleExternalShare = (value) => setExternalShare(value)
- 
 
 56 
 
- 
 
 57 
  const ExternalShareButton = withExternalShare(InputOption, post.share_external_url, {
- 
 
 58 
    Icon: SendOutlinedIcon,
- 
 
 59 
    color: 'gray',
- 
 
 60 
    title: 'Enviar',
- 
 
 61 
    shareUrl: post.share_increment_external_counter_url,
- 
 
 62 
    setValue: handleExternalShare
- 
 
 63 
  })
- 
 
 64 
 
- 
 
 65 
  const handleLike = (url) => {
- 
 
 66 
    axios.post(url)
- 
 
 67 
      .then(({ data: response }) => {
- 
 
 68 
        if (!response.success) {
- 
 
 69 
          addNotification({ style: 'danger', msg: response.data })
- 
 
 70 
          return
- 
 
 71 
        }
- 
 
 72 
        setIsLiked(!isLiked)
72 
            })
 73 
      })
73 
    }
 74 
  }
74 
 
 75 
 
75 
    const htmlParsedText = (fullStringText) => {
 76 
  const htmlParsedText = (fullStringText) => {
76 
        const fullText = parse(fullStringText)
 77 
    const fullText = parse(fullStringText)
77 
        if (fullStringText.length > 500) {
 78 
    if (fullStringText.length > 500) {
78 
            const shortenedString = fullStringText.substr(0, 500)
 79 
      const shortenedString = fullStringText.substr(0, 500)
79 
            const shortenedText = parse(`${shortenedString}... `)
 80 
      const shortenedText = parse(`${shortenedString}... `)
80 
            return (
 81 
      return (
81 
                <>
 82 
                <>
82 
                    {isReadMoreActive ? fullText : shortenedText}
 83 
                    {isReadMoreActive ? fullText : shortenedText}
83 
                    <span className='cursor-pointer' onClick={readMoreHandler}>
 84 
                    <span className='cursor-pointer' onClick={readMoreHandler}>
84 
                        {isReadMoreActive ? " Leer menos" : " Leer más"}
 - 
 
85 
                    </span>
 85 
                        {isReadMoreActive ? ' Leer menos' : ' Leer más'}
86 
                </>
 - 
 
87 
            )
 86 
                    </span>
- 
 
 87 
                </>
- 
 
 88 
      )
Línea 88... Línea 89...
88 
        }
 89 
    }
89 
        return <p>{fullText}</p>
 90 
    return <p>{fullText}</p>
90 
    }
 91 
  }
Línea 91... Línea 92...
91 
 
 92 
 
92 
    useEffect(() => {
 93 
  useEffect(() => {
93 
        if (showComments && !comments.length) getComments()
 94 
    if (showComments && !comments.length) getComments()
94 
    }, [showComments])
 95 
  }, [showComments])
95 
 
 96 
 
96 
    return (
 97 
  return (
Línea 117... Línea 118...
117 
                            {!!externalShare && <span>{`${externalShare} enviados`}</span>}
 118 
                            {!!externalShare && <span>{`${externalShare} enviados`}</span>}
118 
                        </div>
 119 
                        </div>
119 
                        <div className='feed__buttons'>
 120 
                        <div className='feed__buttons'>
120 
                            <InputOption
 121 
                            <InputOption
121 
                                Icon={isLiked ? ThumbUpAltIcon : ThumbUpAltOutlinedIcon}
 122 
                                Icon={isLiked ? ThumbUpAltIcon : ThumbUpAltOutlinedIcon}
122 
                                title={isLiked ? 'Ya no me gusta' : 'Me gusta'}
 123 
                                title={isLiked ? LABELS.UNLIKE : LABELS.LIKE}
123 
                                color={isLiked ? '#7405f9' : 'gray'}
 124 
                                color={isLiked ? '#7405f9' : 'gray'}
124 
                                onClick={() => handleLike(isLiked ? post.unlike_url : post.like_url)}
 125 
                                onClick={() => handleLike(isLiked ? post.unlike_url : post.like_url)}
125 
                            />
 126 
                            />
126 
                            <InputOption
 127 
                            <InputOption
127 
                                Icon={ChatOutlinedIcon}
 128 
                                Icon={ChatOutlinedIcon}
128 
                                title='Comentarios'
 129 
                                title={LABELS.COMMENTS}
129 
                                color='gray'
 130 
                                color='gray'
130 
                                onClick={displayCommentSection}
 131 
                                onClick={displayCommentSection}
131 
                            />
 132 
                            />
132 
                            <ExternalShareButton />
 133 
                            <ExternalShareButton />
133 
                        </div>
 134 
                        </div>
Línea 144... Línea 145...
144 
                <div className="col-12 col-md-4 p-0">
 145 
                <div className="col-12 col-md-4 p-0">
145 
                    <HomeNews currentPost={post.uuid} />
 146 
                    <HomeNews currentPost={post.uuid} />
146 
                </div>
 147 
                </div>
147 
            </div>
 148 
            </div>
148 
        </div >
 149 
        </div >
149 
    )
 150 
  )
150 
}
 151 
}