| 3634 |
stevensc |
1 |
/* eslint-disable react/prop-types */
|
|
|
2 |
import React, { useState } from 'react'
|
|
|
3 |
import parse from "html-react-parser";
|
|
|
4 |
|
|
|
5 |
const FeedDescription = ({ ownerDescription }) => {
|
|
|
6 |
|
|
|
7 |
const [isReadMoreActive, setIsReadMoreActive] = useState(false);
|
|
|
8 |
|
|
|
9 |
const readMoreHandler = () => setIsReadMoreActive(!isReadMoreActive)
|
|
|
10 |
|
|
|
11 |
const htmlParsedText = (fullStringText) => {
|
|
|
12 |
const fullText = parse(fullStringText)
|
|
|
13 |
if (fullStringText.length > 500) {
|
|
|
14 |
const shortenedString = fullStringText.substr(0, 500);
|
|
|
15 |
const shortenedText = parse(`${shortenedString}... `);
|
|
|
16 |
return (
|
|
|
17 |
<p>
|
|
|
18 |
{isReadMoreActive ? fullText : shortenedText}
|
|
|
19 |
<span className='cursor-pointer' onClick={readMoreHandler}>
|
|
|
20 |
{isReadMoreActive ? " Leer menos" : " Leer más"}
|
|
|
21 |
</span>
|
|
|
22 |
</p>
|
|
|
23 |
);
|
|
|
24 |
}
|
|
|
25 |
return <p>{fullText}</p>
|
|
|
26 |
};
|
|
|
27 |
return (
|
|
|
28 |
<div className="show-read-more">
|
|
|
29 |
{htmlParsedText(ownerDescription)}
|
|
|
30 |
</div>
|
|
|
31 |
)
|
|
|
32 |
}
|
|
|
33 |
|
|
|
34 |
export default FeedDescription
|