Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';
import { Typography } from '@mui/material';

import { parse } from '@utils';

export default function FeedDescription({ description = '' }) {
  const [showMore, setShowMore] = useState(false);

  const stripText = description.replace(/<p>|<\/p>/g, '');
  const maxLength = 140;
  const truncatedText = stripText.slice(0, maxLength);
  const isTruncated = stripText.length > maxLength;

  const toggleShowMore = () => setShowMore((prevState) => !prevState);

  return (
    <Typography>
      {parse(showMore ? stripText : truncatedText)}

      {isTruncated && (
        <Typography
          onClick={toggleShowMore}
          variant='overline'
          color='primary'
          sx={{ cursor: 'pointer', display: 'inline-flex' }}
          aria-expanded={showMore}
        >
          {showMore ? ' Mostrar menos' : '... Mostrar más'}
        </Typography>
      )}
    </Typography>
  );
}