Proyectos de Subversion LeadersLinked - SPA

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

import { parse } from '@utils'

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

  const parsedText = useMemo(parse(description ?? ''), [description])
  const truncatedText = parsedText.slice(0, maxLength)
  const isTruncated = parsedText.length > maxLength

  const toggleShowMore = useCallback(
    () => setShowMore((prevState) => !prevState),
    []
  )

  return (
    <Typography onClick={toggleShowMore}>
      {showMore ? parsedText : truncatedText}

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